I am working on a website that the background image will fade from one to another, I have it setup and working about 98%. There is just one little problem. When it first loads and does it's first fade it fades to white and then to the image, instead of fading straight into the next image. After that it work beautifully. This is using jQuery 1.9 and I have jQuery noConflict on since the previous developer coded the sites menu using MooTools.
<html>
<head>
<script src="js/jquery.js">
</script>
<script>
var $s = jQuery.noConflict();
function swapImages(){
var $sactive = $s('#myGallery .active');
var $snext = ($s('#myGallery .active').next().length > 0) ? $s('#myGallery .active').next() : $s('#myGallery img:first');
$snext.fadeIn(1500).addClass('active');
$sactive.fadeOut(2000, function(){
});
$sactive.removeClass('active');
};
$s(document).ready(function(){
// Run our swapImages() function every 5secs
setInterval('swapImages()', 5000);
});
</script>
</head>
<style>
#myGallery{
position:relative;
width:100%; /* Set your image width */
height:auto; /* Set your image height */
}
#myGallery img{
display:none;
position:absolute;
top:0;
width: 100%;
left:0;
}
#myGallery img.active{
display:block;
}
.home-page-rotator{
position:absolute;
width:100%;
z-index:-10;
}
</style>
<body>
<div class="home-page-rotator" id="myGallery">
<img src="images/1.jpg" class="active" />
<img src="images/2.jpg" />
<img src="images/3.jpg" />
</div>
</body>
</html>
I took out all the content so you can test if you wanted but the is everything that runs the background rotation and fade. Also I have the CSS in a seperate file but for posting to here I just put it inline so you can see the CSS behind the code. Let me know what I should do to fix this?
Moving the remove class method to the function call of the fadeout seems to work better for me (at least in Chrome):
<script>
var $s = jQuery.noConflict();
function swapImages(){
var $sactive = $s('#myGallery .active');
var $snext = ($s('#myGallery .active').next().length > 0) ? $s('#myGallery .active').next() : $s('#myGallery img:first');
$sactive.fadeOut(2000, function(){
$sactive.removeClass('active');
});
$snext.fadeIn(1500).addClass('active');
};
$s(document).ready(function(){
// Run our swapImages() function every 5secs
setInterval('swapImages()', 5000);
});
</script>
I ran into this problem a while back and I found the easiest solution was to switch from img elements to using two divs and the background-image css url to display your images. I made a simple slider for that a while back. You're welcome to copy whatever you need from it.
Background slider source
In essence, if you have two divs that are absolutely positioned as the background elements, you can cycle their z-indexes and fade them in and out. Furthermore, you can load the next image in a constructed img element and once it has loaded, change the background-image of the hidden div and fade to it. This means that there is no loading shown and you can fade directly into the slideshow.
Here's some pseudo code below, but it would probably be easier to just look at the real functions in the source.
base.next_slide = function () {
"current slide" = "next slide";
base.containers[the_shown_container].fadeOut(duration,function () {
$(this).css({'background-image':'url("' + "Next image url" + '")',
"z-index":"-2"});
base.containers[the_next_container].css("z-index","-1");
$(this).show();
the_shown_container = the_next_container;
});
};
Plugin.prototype.init = function (base) {
$('<img/>').attr('src', "Next image url").load(function() {
base.containers[the_next_container].css('background-image', 'url(' + "Next image url" + ')');
if ("there's only one image in the slider"){
base.containers[the_shown_container].fadeOut(duration,function () {
$(this).css("z-index","-2");
base.containers[the_next_container].css("z-index","-1");
});
return;
}
base.next_slide();
setInterval(base.next_slide ,base.o.interval);
});
};
Related
I added a preloader to my website and the preloader animation will play every time the site is visited. I would like it to only play once per visit when going through the domain name - any clicks on the home button on the site or back button in the browser I would like to have the preloader skipped. I would like it to show up any time it is opened in a new tab, or new browser window. I tried adding cookies, but i'm still not connecting it correctly somehow.
Some things to add:
The preloader is made of css #keyframes, (.loader) - its not a .gif.
My site's domain is jonrouse.com for reference.
HTML
<div class="preloader">
<div class="loader">
<div class="loader-inner"></div>
</div>
</div>
CSS
.preloader {
display:block;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
z-index:99;
margin:0 auto;
}
JS
<script type="text/javascript">
$(document).ready(function() {
$(window).load(function() {
function Preloader() {
var preloader = $ ('.loader');
preloader.delay(1000) .fadeOut (500);
var preloader = $('.preloader');
preloader.delay (1500) .slideUp(500);
}
Preloader();
});
});
</script>
Any help would be greatly appreciated. If you need any extra info, let me know.
Here is an example of how you might use sessionStorage to show the preloader once per visit per tab or window.
<script type="text/javascript">
$(document).ready(function() {
$(window).load(function() {
function Preloader() {
var preloader = $ ('.loader');
preloader.delay(1000) .fadeOut (500);
var preloader = $('.preloader');
preloader.delay (1500) .slideUp(500);
}
if ( ! sessionStorage.getItem( 'doNotShow' ) ) {
sessionStorage.setItem( 'doNotShow', 'true' );
Preloader();
} else {
$ ('.loader, .preloader').hide();
}
});
});
</script>
Below is my original question and code but per CoreyRS's comment let me add some detail. I want to create a div that falls own the page and disappears like a rock falling through the air. The catch is it must work in IE 9 and 8. I have found some CSS3 animations that work great in all but IE. Any help is appreciated. Please provide code examples.
Original Question and Code
I am attempting to use the slideDown animation in jQuery to animate a div. The idea is a div will show then slide down the page and then fade out. Preferably it would fade out while falling but I cannot even get the div to fall. Here is my code:
JS:
var $j = jQuery.noConflict();
$j(window).load(function() {
$j('#loading').fadeOut('slow', function() { //fade out loading div
$j("#content-wrap").fadeIn("slow", function() { // show content div
setTimeout( function() { // delay slideDown effect
$j('#animate').slideDown('slow', function() {
// script to fade out or hide animate div
}, 2000 );
});
});
});
});
HTML:
<div id="loading">
<h2 class="textcenter">Loading...</h2>
<img id="loading-image" class="center" src="/images/ajax-loader.gif" />
</div>
<div id="content-wrap" class="hide">
<div id="animate">
<img class="fear" src="/sign.png" />
</div>
<div class="img-center">
<img class="feature-image" src="/Prairie-Grass.jpg" />
</div>
</div>
What am I doing wrong and I will take any advice that will create a falling div on the screen that fades out that will work in IE 9 and 8.
Haven't tested but give this a go. You'll need to edit the width/height properties etc to your needs, and obviously don't use inline styling if you have a css stylesheet.
<style>
#animate {
width:100px;
height:100px;
position:fixed;
top:-100px;
left:50%;
margin-left:50px;
z-index:1;
}
</style>
<script>
var $j = jQuery.noConflict();
$j(window).load(function() {
$j('#loading').fadeOut('slow', function() {
$j("#content-wrap").fadeIn("slow", function() {
$j('#animate').delay(2000).animate({'top':'50%'}, 500);
$j('#animate').delay(2000).fadeOut(500);
});
});
});
</script>
I looked forever for how to do this but can't figure out how. The best I have done is made an image with HTML. I tried to edit the image settings after it was made like how you use document.getElementById() to change text, but I couldn't get it to work.
my code so far...
function run() {
x++;
y++;
if (x==10 || x==30) {
exmp.visibility = show //doesn't work
}
if (x==20 || x==40) {
exmp.visibility = hidden //doesn't work
}
if (x==50) {
x=0
y=0
}
document.getElementById("exmp").style = "position:absolute; TOP:0px; LEFT:0px; WIDTH:239px; HEIGHT:74px" //doesn't work
}
x=0
y=0
document.write("<div ID=\"exmp\"; STYLE=\"position:absolute; TOP:0px; LEFT:0px; WIDTH:239px; HEIGHT:74px\"> <IMG SRC=\"exmp.png\"; alt=\"image\"> </div>");
setInterval(run,33);
I finally found a great java script tutorial on moving images and making them display when I want to. (http://www.openjs.com/tutorials/advanced_tutorial/moving.php)
my working code:
<html>
<head>
<title>Image Mover</title>
<style>
DIV.movable { position:absolute; }
</style>
</head>
<body>
<div ID="exmp"; class = "movable";>
<IMG SRC="exmp.png"; alt="image"/>
</div>
<script type="text/javascript">
document.getElementById("exmp").style.visibility='hidden';
function run() {
pos++;
if (pos==10 || pos==30) {
document.getElementById("exmp").style.visibility='visible';
}
if (pos==20 || pos==40) {
document.getElementById("exmp").style.visibility='hidden';
}
if (pos==40) {
pos=0;
}
//document.getElementById("exmp").style = "position:absolute; TOP:"
// +pos+"px; LEFT:"+pos+"px; WIDTH:239px; HEIGHT:74px";
document.getElementById("exmp").style.left = pos+"px";
document.getElementById("exmp").style.top = pos+"px";
//STYLE="position:absolute; TOP:0px; LEFT:0px; WIDTH:239px; HEIGHT:74px"
}
pos=0;
setInterval(run,33);
</script>
</body>
</html>
Several ways to do this.
You can cache the image using JavaScript without displaying it:
var img = new Image();
img.src = "http://PATH_TO_IMAGE";
When needed, you can append this image element to the page.
You can add a img tag to the page, but set the image to invisible (visibility: hidden), or make it very small, like 1px x 1px. The browser will load the image, draw the image slot, but it is transparent. To use this method, you need to make sure you put this image somewhere user wont notice it.
I have two large image files in a div on a page that take several seconds to load. How can I hide the loading content while a "loading gif" appears and then have the content appear once it has fully loaded?
I don't really know anything about javascript but I tried using this code. It did half of what I wanted it to do. The "loading gif" worked but the problem was that the content was visible as it was loading.
http://aaron-graham.com/test2.html
<div id="loading" style="position:absolute; width:95%; text-align:center; top:300px;">
<img src="img/parallax/ajax-loader.gif" border=0>
</div>
<script>
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
</script>
Any help would be greatly appreciated!
Use jquery, with code like:
$(document).ready(function(){
$('#pic1').attr('src','http://nyquil.org/uploads/IndianHeadTestPattern16x9.png');
});
With the html like:
<img id="pic1" />
It works by running when document's ready function is called (which is called after the DOM and other resources have been constructed), then it will assign the img's src attribute with the image's url you want.
Change the nyquil.org url to the image you want, and add as many as needed (just don't go overboard ;). Tested Firefox 3/chrome 10.
Here is the demo: http://jsfiddle.net/mazzzzz/Rs8Y9/1/
Working off your HTML structure I added a notifyLoaded class for the two images so you can watch for when both have loaded via an onload event. Since css background images don't get that event I've created a hidden img using the background's path so we can test when that image is loaded
HTML:
<div id="loading">
<img src="http://aaron-graham.com/img/parallax/ajax-loader.gif" border="0" />
</div>
<div id="vertical">
<div>
<div class="panel">
<img class="notifyLoaded" src="http://aaron-graham.com/img/parallax/tile3.png" />
</div>
</div>
</div>
<div id="imgLoader">
<img class="notifyLoaded" src="http://aaron-graham.com/img/parallax/deepspace3.jpg" alt="" />
</div>
You have reference to jQuery in your page already so I've replaced your script to the following.
jQuery:
$(document).ready(function() {
var $vertical = $('#vertical');
var $imgs = $('.notifyLoaded');
var imgCount = $imgs.length;
var imgLoadedCount = 0;
$vertical.backgroundparallax(); // Activate BG Parallax plugin
$imgs.load(function() {
console.log(this);
imgLoadedCount++;
if (imgCount == imgLoadedCount) {
// images are loaded and ready to display
$vertical.show();
// hide loading animation
$('#loading').hide();
}
});
});
I've also set #Vertical to a default display:none; which gets changed when images have loaded
CSS:
body {background-color:black;}
#loading {position:absolute;width:95%;text-align:center;top:300px;}
#vertical {display:none;background-image: url('http://aaron-graham.com/img/parallax/deepspace3.jpg');background-position: 0 0;height: 650px;width: 900px;overflow: auto;margin:35px auto auto auto;}
#vertical > div {margin: 0;color: White;}
#vertical .panel {padding: 100px 5%;margin-left:40px;height: 3363px;}
#imgLoader {display:none;}
Here is this simple slideshow I'm using:
function slideShow(){
var current = $('#animation .show');
var next = current.next().length ? current.next() : current.parent().children(':first');
current.removeClass('show');
next.addClass('show');
setTimeout(slideShow, 500);
}
$(document).ready(function() {
slideShow();
});
It works but it creates long pauses between images...Is there a way to fix this?
Thanks in advance!
EDIT
this is the HTML code,I guess pauses was the wrong word, what I want to achieve is every image is displayed immediately after the other, right now I have a small gap that nothing is displayed.
<div id="animation">
<img alt="graphic" class="show" src="files/animation_img/GRAPHIC.jpg" />
<img alt="design" src="files/animation_img/DESIGN.jpg" />
<img alt="etc" src="files/animation_img/ETC.jpg" />
</div>
and the CSS:
#animation img
{
position:fixed;
top:400px;
left:700px;
display:none;
visibility:hidden;
width:200px;
height:100px;
}
Try this
function slideShow(){
var current = $('#animation .show');
var next = current.next().length ? current.next() : current.parent().children(':first');
current.removeClass('show');
next.addClass('show');
}
$(document).ready(function() {
setInterval(slideShow, 500)
});