Viewing Code Stopped Working in EverWeb

  1. Portal Home
  2. Forum
  3. EverWeb
  4. How do I...?

Code Stopped Working in EverWeb



User: Les C. 10 years ago
The code works in an online editor, but not EverWeb.

Also, the snippet doesn't go full width despite having the full width metrics box checked.

In the online editor, the TEST1 image is cutting off at the bottom.


Here is a link to the online editor:

http://jsfiddle.net/link2twenty/wfpzLv8n/2/


Here is the EverWeb HTML snippet:

<div class="nav-wrap">
<div class="img-place"></div>
<div class="nav">
<ul>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<p class="ex1">HELLO</p>
<p class="ex2">THERE</p>
<br>
<br>

<li><a href="#1" data-target="bg1">TEST1</a></li>
<li><a href="#2" data-target="bg2">TEST2</a></li>
<li><a href="#3" data-target="bg3">TEST3</a></li>
</ul>
</div>
</div>

<style>

* {
margin: 0;
}
p.ex1 {
font-family: 'HelveticaNeue';
position: relative;
display: block;
color: #FFFFFF;
text-decoration: none;
font-size: 74px;
text-transform: uppercase;
font-weight: "Thin";
letter-spacing: 0px;
margin: -20px;
padding: 0px 0px 0px 77px;
transition: all 0.5s ease-in-out;
}

p.ex2 {
font-family: 'HelveticaNeue';
position: relative;
display: block;
color: #FFFFFF;
text-decoration: none;
font-size: 74px;
text-transform: uppercase;
font-weight: "Thin";
letter-spacing: 0px;
margin: -12px;
padding: 0px 0px 0px 70px;
transition: all 0.5s ease-in-out;
}

.nav-wrap {
width: 100%;
height: 770px;
background: #111;
position: relative;
}

.nav-wrap .img-place {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
z-index: 5;
}

.nav-wrap .nav li {
font-family: 'HelveticaNeue';
position: relative;
z-index: 6;
list-style: none;
}

.nav-wrap .nav li a {
display: block;
color: #FFFFFF;
text-decoration: none;
font-size: 48px;
text-transform: uppercase;
font-weight: "Thin";
letter-spacing: 0px;
margin: -12px;
padding: 0px 0px 0px 70px;
transition: all 0.5s ease-in-out;
}

.nav-wrap .nav:hover li a {
opacity: 0.3;
}

.nav-wrap .nav li a:hover {
opacity: 1;
padding-left: 95px;
font-weight: 600;
}

.nav-wrap .bg1 {
background-image: url("http://www.photography-match.com/views/images/gallery/Ghandrung_Village_and_Annapurna_South_Nepal_Himalaya.jpg");
background-size: 120%;
opacity: 0.3;
-webkit-animation: fadein 2s forwards;
-moz-animation: fadein 2s forwards;
-ms-animation: fadein 2s forwards;
-o-animation: fadein 2s forwards;
animation: fadein 2s forwards;
-webkit-animation: mymove 11s forwards ease-out;
animation: mymove 11s forwards ease-out;
}

@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@-webkit-keyframes mymove {
0% {
top: -12px;
}
100% {
top: -240px;
}
}

@keyframes mymove {
0% {
top: -12px;
}
100% {
top: -240px;
}
}

.nav-wrap .bg2 {
background-image: url("http://travspire.com/wp-content/uploads/2013/06/Glimpse_of_hampi_main.jpg");
background-size: 125%;
opacity: 0.4;
animation: bgani 7s linear forwards;
}

.nav-wrap .bg3 {
background-image: url("http://lh5.ggpht.com/_nFOgRvQfbY4/SqDwU31NB8I/AAAAAAAAATE/Jo1zuHhJaDA/s1600/IMG_4278.JPG");
background-size: 130%;
-webkit-animation: fadein 3s forwards ease-out;
-moz-animation: fadein 3s forwards ease-out;
-ms-animation: fadein 3s forwards ease-out;
-o-animation: fadein 3s forwards ease-out;
animation: fadein 3s forwards ease-out;
}

@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes bgani {
0% {
opacity: 0;
background-size: 100%;
}
15% {
opacity: 0.3;
}
100% {
background-size: 125%;
}

</style>


<script src="jquery.min.js"></script>

<script type="text/java script" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>

$('.nav li a').hover(function() {
$('.img-place').toggleClass($(this).data('target'));
});
$('.nav-wrap .img-place, .nav-wrap').height($(window).height());

</script>

Last edit 10 years ago
User: Jumbo T. 10 years ago
With or without Everweb, the <br> and <p> HTML elements do not belong in a <ul></ul>

Use padding or margin to position the <ul>.

Info on the internet.

And use only ONE js file. Either the local one or the remote.
User: Les C. 10 years ago
--Jumbo

Thanks for the feedback. I made your changes.

The images still don't show in EverWeb and the snippet is still not going full width.

Also, the hover effect has changed: all elements now turn gray when I hover over the page; initially, only the two non-selected "TEST" elements would turn grey when the third TEST element was selected.

Here is how I revised the <p> element:

<li class="ex1">HELLO</li>
<li class="ex2">THERE</li>


Thoughts?


L C
User: Jumbo T. 10 years ago
When you change the p to li, you should also change the style.
User: Les C. 10 years ago
--Jumbo

Added the new style rules:

<div class="ex1">
<div class="ex2">

Still no change.

Thanks.


L C
User: Les C. 10 years ago
Issues:
1. TEST colors and fades
2. An approximate 20px border on the right side
3. TEST 1 image is being cut off at the bottom despite the image I'm using

* For some reason I had to paste another element on the page to get this code to work in EverWeb—if I delete the element, the code doesn't show.


Here is the latest code:

<div class="nav-wrap">
<div class="img-place"></div>
<div class="nav">

<ul>

<li class="ex1">HELLO</li>
<li class="ex2">THERE</li>

<li class="ab1"><a href="#W" data-target="bg1">W</a></li>
<li class="ab2"><a href="#E" data-target="bg2">E</a></li>
<li class="ab3"><a href="#F" data-target="bg3">F</a></li>
</ul>
</div>
</div>

<style>

li.ex1 {
font-family: 'HelveticaNeue';
position: relative;
display: block;
color: #FFFFFF;
text-decoration: none;
font-size: 74px;
text-transform: uppercase;
font-weight: "Thin";
letter-spacing: 0px;
margin: -20px;
padding: 288px 0px 0px 77px;
transition: all 0.5s ease-in-out;
}

li.ex2 {
font-family: 'HelveticaNeue';
position: relative;
display: block;
color: #FFFFFF;
text-decoration: none;
font-size: 74px;
text-transform: uppercase;
font-weight: "Thin";
letter-spacing: 0px;
margin: -12px;
padding: 0px 0px 0px 70px;
transition: all 0.5s ease-in-out;
}

.nav-wrap{
width: 100%;
height: 770px;
background: #111;
position: relative;
}

.nav-wrap .img-place {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
z-index: 5;
}

.nav-wrap .nav li {
font-family: 'HelveticaNeue';
position: relative;
z-index: 6;
list-style: none;
}

.nav-wrap .nav li.ab1 {
display: block;
color: #FFFFFF;
text-decoration: none;
font-size: 48px;
text-transform: uppercase;
font-weight: "Thin";
letter-spacing: 0px;
margin: -12px;
padding: 24px 0px 0px 70px;
transition: all 0.5s ease-in-out;
}

.nav-wrap .nav li.ab2 {
display: block;
color: #FFFFFF;
text-decoration: none;
font-size: 48px;
text-transform: uppercase;
font-weight: "Thin";
letter-spacing: 0px;
margin: -12px;
padding: 0px 0px 0px 70px;
transition: all 0.5s ease-in-out;
}
.nav-wrap .nav li.ab3 {
display: block;
color: #FFFFFF;
text-decoration: none;
font-size: 48px;
text-transform: uppercase;
font-weight: "Thin";
letter-spacing: 0px;
margin: -12px;
padding: 0px 0px 0px 70px;
transition: all 0.5s ease-in-out;
}

.nav-wrap .nav:hover li a {
opacity: 0.3;
}

.nav-wrap .nav li a:hover {
opacity: 1;
padding-left: 95px;
font-weight: 600;
}

.nav-wrap .bg1 {
background-image: url("http://www.photography-match.com/views/images/gallery/Ghandrung_Village_and_Annapurna_South_Nepal_Himalaya.jpg");
background-size: 120%;
opacity: 0.3;

-webkit-animation: fadein 2s forwards;
-moz-animation: fadein 2s forwards;
-ms-animation: fadein 2s forwards;
-o-animation: fadein 2s forwards;
animation: fadein 2s forwards;

-webkit-animation: mymove 11s forwards ease-out;
animation: mymove 11s forwards ease-out;
}

@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

@-webkit-keyframes mymove {
0% {top: -16px;}
100% {top: -330px;}
}

@keyframes mymove {
0% {top: -16px;}
100% {top: -330px;}
}

.nav-wrap .bg2 {
background-image: url("http://travspire.com/wp-content/uploads/2013/06/Glimpse_of_hampi_main.jpg");
background-size: 125%;
opacity: 0.4;
animation: bgani 7s linear forwards;
}

.nav-wrap .bg3 {
background-image: url("http://lh5.ggpht.com/_nFOgRvQfbY4/SqDwU31NB8I/AAAAAAAAATE/Jo1zuHhJaDA/s1600/IMG_4278.JPG");
background-size: 130%;

-webkit-animation: fadein 3s forwards ease-out;
-moz-animation: fadein 3s forwards ease-out;
-ms-animation: fadein 3s forwards ease-out;
-o-animation: fadein 3s forwards ease-out;
animation: fadein 3s forwards ease-out;
}

@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes bgani {
0% {
opacity: 0;
background-size: 100%;
}
15% {
opacity: 0.3;
}
100% {
background-size: 125%;
}

</style>

<script type="text/java script" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>

$('.nav li a').hover(function() {
$('.img-place').toggleClass($(this).data('target'));
});
$('.nav-wrap .img-place, .nav-wrap').height($(window).height());

</script>

Last edit 10 years ago
User: Les C. 10 years ago
Here is the latest version:

http://jsfiddle.net/LCfiddle/ahxd670g/


There now remain only three issues:

1. SUB 1, 2, and 3 are initiated when the mouse goes over the page instead of directly over each of the SUB elements.

2. The image that scrolls when SUB 1 is hovered over is cut off at the bottom.

3. There is about a 20px border at the top of the page that is seen when the SUB element images display.

Any suggestions would be appreciated.

L C
User: Roddy 10 years ago
[1] These items have 100% width and stretch right across the page.

Give them a temporary border so that you can see them and then add a width adjust it to suit...

.nav-wrap .nav li a {
width:200px; /* give the link a fixed width */
border:1px solid #FFF} /* temporary border */

[2] I don't think it's so much that it is cut off but that the image is not big enough to fill the container so it is being repeated on the y-axis since you haven't given it any instructions to NOT do this.

[3] There is some item which doesn't have the margin set to zero. The quick and dirty fix is to use a reset in the styles ...

*{margin:0}

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Les C. 10 years ago
--Roddy

Thank you VERY MUCH for your input.

Items 1 and 3 are fixed!

Item 2 can't be short as the actual picture I am using (not the one listed with the original jsfiddle) is over 3000px high.

Also, the fade is not working for some reason (I can get the fade working if I remove the scroll, and vice versa).

Any ideas of how to address these two remaining issues?

Here's the latest jsfiddle:

http://jsfiddle.net/LCfiddle/ahxd670g/1/


Thanks,

L C

Last edit 10 years ago
User: Les C. 10 years ago
I have tried adding a height element to the cut off image...no luck.

I also split the element into two separate entries (one for the scroll, the other for the fade)—nothing.

What is missing here?


Thanks,

L C

Last edit 10 years ago


Post Reply
You must login or signup to post.