I have this code below. It works fine in safari however in IE the background just revolves once and stops on pink.
What am I missing?
Hope someone can help
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Iridescent Ideas</title>
<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
</head>
<body>
<center>
<img src="logo.png" alt="Coming Soon" width="557" height="430" border="0" usemap="#Map" style="margin-top:100px;">
<map name="Map">
<area shape="rect" coords="106,377,454,406" href="mailto:gareth#iridescentideas.com" alt="Email">
</map>
</center>
<script type="text/javascript">
var colors = Array('#66ccff', '#ff99ff'); //List the hex codes you want to loop through here.
var color_index = 0;
var interval = 5000; //How long the color blend transition lasts. (in milliseconds, 1000 = 1 second)
function bg_color_tween() {
$('body').animate({ backgroundColor: colors[color_index] }, interval, 'linear', function() {
if(color_index == colors.length) { color_index = 0; } //If we are at the end of the colors array go back to the beginning.
else { color_index++; } //Lets move to the next color in the colors array.s
bg_color_tween();
});
}
$(document).ready(function() {
if( $(window).width() > 1024 ) {
//Kicks off the background color tweening.
bg_color_tween();
}
});
</script>
</body>
</html>
You could try setTimeout to delay the execution of the animation ever so slightly
function bg_color_tween() {
$('body').animate({ backgroundColor: colors[color_index] }, interval, 'linear', function() {
if(color_index == (colors.length-1)) { //If we are at the end of the colors array go back to the beginning.
color_index = 0;
} else { //Lets move to the next color in the colors array.s
color_index++;
}
setTimeout('bg_color_tween', 5);
});
}
In IE9 its working normally. There should be no problem. Are you testing in local or server environment?
Related
I'm working on a webpage and I require some help with the JavaScript.
The site should be able to load a full-screen image that changes depending on the time and date.
To be exact there are weekday shows and weekend shows and this page is required to project the show's poster depending on what time and day it is.
My current code looks like this;
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>IMAGE LOOP!</title>
</head>
<body>
<script type="text/javascript" src="app.js" ></script>
<img id='Kiss100' src="images/4.png">
</body>
</html>
CSS
body {
background-image:linear-gradient(white, dimgray);
}
img {
border-radius: 4px;
padding: 5px;
width: 2560px;
height: 720px;
object-fit: fill;
}
Javascript
setInterval(function() {
var date = new Date();
var img = document.getElementById('Kiss100');
if (date.getHours() < 12) {
if( img.src.indexOf('Kiss') < 0 ) {
img.src = 'images/3.jpeg'
}
} else {
if( img.src.indexOf('Kiss100') < 0 ) {
img.src = 'images/1.jpeg'
}
}
},60000);
As you can see I tried setting a specific resolution in CSS but I want it to change depending on the platform. Also, in the JavaScript I wanted it to be more specific but I got stuck.
Thanks in advance.
Instead of img.src.indexOf('Kiss') < 0, try - if (!img).
Use the Conditional (ternary) operator to get rid of if-else.
Finally, if you want a full-screen image, give it full width and auto height.
Below is a working snippet. You should see that according to the condition the image will be updated after 5 seconds.
(I tried random images, you can use your own.)
setInterval(function () {
var imgEl = document.getElementById('Kiss100');
if (!imgEl) return;
var date = new Date();
imgEl.src = date.getHours() < 12
? 'https://source.unsplash.com/user/c_v_r/100×100'
: 'https://www.kasandbox.org/programming-images/avatars/cs-hopper-happy.png'
}, 5000);
body {
background-image:linear-gradient(white, dimgray);
}
img {
width: 100%;
height: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>IMAGE LOOP!</title>
</head>
<body>
<script type="text/javascript" src="app.js" ></script>
<img id='Kiss100' src="https://www.gstatic.com/webp/gallery3/1.sm.png">
</body>
</html>
As you may know, I'm very new to HTML and JS.
I tried to make an image move when you click on it, but for a some reason it doesn't work. Can someone take a look at it?
(It's my first day of learning Javascript! Please keep this in mind)
Javascript
var main = function() {
$('document.Image').click(function() {
$(this).animate({
left: "100px"
}, 200);
});
};
HTML
<html>
<head>
<title>JS Test</title>
</head>
<body>
<img height="25px" width="25px" src="https://webdesignfromscratch.com/snippets/html-css-javascript.gif">
<script type="text/javascript" src="app.js"></script>
</body>
</html>
You need to invoke/call main function
documemt.Image was invalid selector. Give class as .image to element which can be selected using $('.image')
To apply left css property in .animate(), element must be absolute/relative/fixed positioned. Review the updated css
var main = function() {
$('.image').click(function() {
$(this).animate({
left: "100px"
}, 200);
});
};
main();
.image {
position: absolute;
left: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img class='image' height="25px" width="25px" src="https://webdesignfromscratch.com/snippets/html-css-javascript.gif">
there is multiple mistake in your code... here is the code.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('img').click(function(){
$(this).animate({'margin-left': "300px"})
});
});
</script>
</head>
<body>
<img style='margin-left:100px' src='' alt='no image' />
</body>
</html>
i m sure it helps u...
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Frog</title>
<script type="text/javascript">
window.onscroll = infinity;
function infinity () {
document.write("<img src='frog.gif'>" + "<br/>");
}
while(window.onscroll){
infinity();
}
</script>
</head>
<body>
<img src='earth.png'>
<br/>
<img src='tiger.jpg'>
<br/>
</body>
</html>
Hi guys, I want to know how would I loop the frog when every time I scroll down the frog image appears again thanks in advance!
If you need to add image when user actually turns mouse wheel (even when no actual scrolling is involved) - you need to capture "mousewheel" event. Universally crossbrowser you can to it like this:
if (document.addEventListener) {
document.addEventListener("mousewheel", MouseWheelHandler, false);
document.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
else {
document.attachEvent("onmousewheel", MouseWheelHandler);
}
If you create a placeholder to hold your future images:
<div id="fdiv">Froggies:</div>
You can add images to it on mousewheeling like this:
function MouseWheelHandler(e) {
var e = window.event || e;
var delta = e.wheelDelta
if (delta < 0)
var img = document.createElement("img");
img.src = "frog.gif";
document.getElementById("fdiv").appendChild(img);
}
What this does is detects whether user scrolls mouse down (delta < 0) and if so - creates a new frog image and adds it to the DIV.
Here's demo: http://jsfiddle.net/Z8AxG/2/ place the mouse over window with words "Froggies:" and turn mouse wheel down.
What you could try is to make a div modify its height when you scroll down (using Javascript). Then apply the image on the background and let it repeat using CSS:
div#infinity {
background-image: url('frog.gif');
background-repeat: repeat-y;
}
With other words, this script will add images when you scroll down:
<!DOCTYPE html>
<html>
<head>
<title>TEST: Infinity Scroll</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var lastScrollTop = 0;
$(window).scroll(function(event) {
var st = $(this).scrollTop();
if (st > lastScrollTop) {
$('div#infinity').append(
$('<div>').attr("id", "infinityimage")
);
}
else {
// upscroll code
}
lastScrollTop = st;
});
</script>
<style type="text/css">
html, body {
height: 101%;
}
div#infinityimage {
height: 190px;
background-image: url('https://www.google.nl/images/srpr/logo6w.png');
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div id="infinity">
</div>
</body>
</html>
I would like to create a "LiveChat Offering" pop-up that appears in the bottom of the screen after our visitors arrive at a specific page, and have been on that page for say 30 seconds or so. I would like to keep the code jQuery/CSS if at all possible.
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">Some jQuery that will change the 'display:hidden;' to 'display:block;' on the DIV after 30 seconds</script>
<div id="live-chat" style="position:absolute;bottom:0px; right:100px;z-index:5;display:none;>
<h4>Need Help?</h4>
<p>Click the link below for assistance</p>
Chat with a salesman
</div>
Looks like you already got the position part, and you are asking about the delay part?
Something with setTimeout like this could work
$(document).ready(function() {
setTimeout(function() {
$('#live-chat').show();
}, [delay in ms]);
}
You probably also want to change the .show() to have some kind of effect to alert the user that it appeared.
Try this:
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$("#live-chat").css({ "display" : "block" });
}, 30000); // 30 seconds in MS
});
</script>
<div id="live-chat" style="position:absolute;bottom:0px; right:100px;z-index:5;display:none;>
<h4>Need Help?</h4>
<p>Click the link below for assistance</p>
Chat with a salesman
</div>
Good luck!
Edit:
For sliding it in:
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
// Store our panel into a variable.
var $myPanel = $("#live-chat");
// Get the height of the panel dynamically.
var $myPanelHeight = parseInt($myPanel.height());
// Immediately set the opacity to 0 - to hide it and set its bottom to minus its height.
$myPanel.css({ "opacity" : 0, "bottom" : "-" + $myPanelHeight + "px" });
// Set a timeout for the panel to slide and fade in.
setTimeout(function() {
$myPanel.animate({
// The CSS properties we want to animate (opacity and bottom position).
opacity: 1,
bottom: '0'
}, 2000, function() {
// Animation complete.
// You can put other code here to do something after it has slid-in.
});
}, 30000); // 30 seconds in MS
});
</script>
<div id="live-chat" style="position: absolute; bottom: 0px; right:100px; z-index:5;">
<h4>Need Help?</h4>
<p>Click the link below for assistance</p>
Chat with a salesman
</div>
The following is a starting point that has the functionality I asked for :) Thanks everyone! I used Michael's example...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$("#live-chat").css({ "display" : "block" });
}, 5000); // 30 seconds in MS
});
</script>
</head>
<body>
<div id="live-chat" style="width:250px; height:150px; position:absolute; bottom:0px; right:100px; z-index:5; display:none; border:#ccc 1px dashed;">
<h4>Need Help?</h4>
<p>Click the link below for assistance</p>
Chat with a salesman
</div>
</body>
</html>
You can use the delay function of jQuery
$(document).ready(function() {
var miliseconds = 30000 //30 seconds
$("#live-chat").delay(miliseconds).hide();
}
here is a jsfiddle example for your code: jsfiddle
I am trying to rotate some images. Works great except I get a strange "flicker" on some of the transitions. Any suggestions what I am doing wrong? Thank you
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testing</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
#test img {position: absolute;right: 0;top: 0;}
#test img:last-child {display: none;}
</style>
<script>
function rotateImage()
{
var $images=$('#test img');
$images.eq(1).attr({src : files[index]});
$images.eq(0).fadeOut(1000);
$images.eq(1).fadeIn(1000, function()
{
$images.eq(0).attr('src', files[index]);
$images.eq(0).show();
$images.eq(1).hide();
if (index == files.length-1){index = 0;}else{index++;}
});
}
var index=1,files=['f1.jpg','f2.jpg','f3.jpg'];
setInterval(rotateImage, 2000);
</script>
</head>
<body>
<div id="test"><img src="f1.jpg" alt="" /><img src="f1.jpg" alt="f1.jpg" /></div>
</body>
</html>
Flickering is happening because of this
$images.eq(1).fadeIn(1000, function()
{
$images.eq(0).attr('src', files[index]);
$images.eq(0).show();
$images.eq(1).hide();
if (index == files.length-1){index = 0;}else{index++;}
}
);
After the fadeIn of image at index 1, source is set for image at index 0 and it is shown immediately. This results in flickering.
What you have to do is swap the images.
$images.eq(1).fadeIn(1000, function()
{
$images.eq(0).remove().appendTo('#test'); // swaps the image indices
if (index == files.length-1){index = 0;}else{index++;}
});
See demo here : http://jsfiddle.net/diode/SeL3M/4/
try using the jquery cycle plugin. in has a fade that works great
It works fine in Firefox when you add a small time delay between showing and hiding an element (I've done it by using fadeIn(100, function() in jsfiddle bellow).
http://jsfiddle.net/SeL3M/
You can read more about this behavior here:
unwanted "flickering" effect when using hide and show in jquery