Viewing Another HTLM question

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

Another HTLM question



User: Nigel J. 10 years ago
I’d like to take advantage of a couple of responsive features – jump to top icon and animated gradient of a shape – both are placed in the footer section on each page. Each feature has its own HTML snippet.

I’ve published revised website to temporary folder, which looks fine apart from the HTLM text showing across these two functions.

The jump to top function works great, but shows its destination text written across the icon. Will this become invisible once I publish my website to public?

For the animated gradient across the bottom bar, my research came up with what looks to be a fantastic resource at http://codepen.io/anon/pen/GJbqPe

Having adjusted the settings I copied the code into the HTML snippet, i.e. HTML; CSS; JS as shown below. I’ve likely messed up with the coding, the animation doesn’t work and again the text is shown written across the bar. When published to public will the animation work? Will the text become invisible? What do I need to do to get this to work?

Any advice and support on how to correct these features will be greatly appreciated.
________________________________
Code entered into HTML snippet:

<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
</head>
<body>
<div id="gradient" />
</body>
</html>
body{
background-color: #000000;
padding: 0px;
margin: 0px;
}

#gradient
{
width: 100%;
height: 262px;
padding: 0px;
margin: 0px;
}
var colors = new Array(
[0,0,42],
[66,0,76],
[0,0,0],
[0,0,42],
[66,0,76],
[0,0,0]);

var step = 0;
//color table indices for:
// current color left
// next color left
// current color right
// next color right
var colorIndices = [0,1,2,3];

//transition speed
var gradientSpeed = 0.002;

function updateGradient()
{

if ( $===undefined ) return;

var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];

var istep = 1 - step;
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "rgb("+r1+","+g1+","+b1+")";

var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "rgb("+r2+","+g2+","+b2+")";

$('#gradient').css({
background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});

step += gradientSpeed;
if ( step >= 1 )
{
step %= 1;
colorIndices[0] = colorIndices[1];
colorIndices[2] = colorIndices[3];

//pick two new target color indices
//do not pick the same as the current one
colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;

}
}

setInterval(updateGradient,10);
User: Jumbo T. 10 years ago
Here we go :

Remove <html>
Remove <head>
Remove </head>
Remove <body>

Change <div id="gradient" /> to <div id="gradient"></div>

Remove </body>
Remove </html>

Add <style> before the body{
Add </style> after the }

Add <script> before var colors = new Array(
Add </script> after setInterval(updateGradient,10);
User: Nigel J. 10 years ago
Thank you Jumbo T for responding and support. Have applied suggested changes as test to home page. On publishing to tempory folder the whole of the home page main body has a black background, which corrects itself after visiting other pages. I'm nervous about publishing public, for reason just mentioned as well as HTML text is showing and animation gradient isn't working. It may well be I'm over ambitious. Maybe I should publish public without these features and work on them later. Any other suggestions most welcome.
User: Nigel J. 10 years ago
As an after thought:

In the project draft canvas the bottom bar covered with HTML snippet is now black.

It's likely I misinterpreted the changes, so to show what I entered here is the revised HTML text :


<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="gradient"></div>
<style>body{
background-color: #000000;
padding: 0px;
margin: 0px;
}</style>

#gradient
{
width: 100%;
height: 262px;
padding: 0px;
margin: 0px;
}

<script>var colors = new Array(
[0,0,42],
[66,0,76],
[0,0,0],
[0,0,42],
[66,0,76],
[0,0,0]);

var step = 0;
//color table indices for:
// current color left
// next color left
// current color right
// next color right
var colorIndices = [0,1,2,3];

//transition speed
var gradientSpeed = 0.002;

function updateGradient()
{

if ( $===undefined ) return;

var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];

var istep = 1 - step;
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "rgb("+r1+","+g1+","+b1+")";

var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "rgb("+r2+","+g2+","+b2+")";

$('#gradient').css({
background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});

step += gradientSpeed;
if ( step >= 1 )
{
step %= 1;
colorIndices[0] = colorIndices[1];
colorIndices[2] = colorIndices[3];

//pick two new target color indices
//do not pick the same as the current one
colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;

}
}

setInterval(updateGradient,10);</script>
User: Jumbo T. 10 years ago
I expected the mistake.

Sites likes this one, where you got your code, assume you understand what to do :

http://codepen.io/quasimondo/pen/lDdrF

Notice the CSS and JavaScript boxes?

Add the code at the beginning and at the end.

BTW, you can leave out the body style, since you can configure that in EW itself.

Last edit 10 years ago
✔ Best Answer  
User: Nigel J. 10 years ago
Thank you again Jumbo T. Got it, it works a treat.


Post Reply
You must login or signup to post.