Div jumps out of space on window resize - javascript

Fixed ! (answer below)
I have this animated banner which i include on all the pages. Unfortunately it jumps out of his space when the browser window gets resized.
You can check it out here: http://www.paparashie.nl/woonkans/
Here's the code:
<style>
#banner{
position: relative;
margin-left:-1000px;
height:195px;
width:1000px;
z-index:1;
}
#banner img{position:absolute;z-index:1}
#banner img.active{z-index:4}
<script>
function cycleImages() {
var $active = $('#banner .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#banner img:first');
$next.css('z-index', 2); //move the next image up the pile
$active.fadeOut(1500, function () { //fade out the top image
$active.css('z-index', 1).show().removeClass('active'); //reset the z-index and unhide the image
$next.css('z-index', 3).addClass('active'); //make the next image the top one
});
}
$(document).ready(function () {
// run every 2s
setInterval('cycleImages()', 2000);
})
</script>
<div id="banner">
<img src="img/logo.png" style="float:left" />
<img class="active" src="img/banner.png" alt="Banner image" />
<img src="img/banner2.png" alt="Banner image" />
<img src="img/banner3.png" alt="Banner image" />
<img src="img/banner4.png" alt="Banner image" />
</div>
So, i changed the margin to margin:0 auto . Next mistake was that i had the include code-line wrapped in a , this messed up everything so i simply removed it.
Noob problems ...

It looks like you trying to build a responsive website...
Try this as slider:
http://www.woothemes.com/flexslider/
Its easy to use and its responsive.

Related

Trying to add smooth Image transition between background images

This is the code I currently have:
$('ul.whats_new_ul li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.whats_new_ul li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
if(tab_id == 'Messages'){
$('#what_new_back').css('background-image', 'url(img/mobile-app/global/whts_new.jpg)' );
}else if(tab_id == 'gift'){
$('#what_new_back').css('background-image', 'url(img/mobile-app/global/gift_back.jpg)' );
}else if(tab_id == 'locators'){
$('#what_new_back').css('background-image', 'url(img/mobile-app/global/locater.jpg)' );
}else if(tab_id == 'menu'){
$('#what_new_back').css('background-image', 'url(img/mobile-app/global/menu_back.jpg)' );
}
});
to see it clearer in action - this link here - under section What's New
I wondering how do I add a smooth transition between clicks and make sure the background image has the slideUp animation when each tab is clicked?
See this please:
Animate background image change with jQuery
It is not possible to animate the background itself, but it is possible to animate the element containing the background.
Without your HTML and CSS I can't give you a correct response but I think that this demo can help you
http://css3.bradshawenterprises.com/cfimg/
Basically you can't animate backgrounds, you need to use divs or imgs and animate them.
"Demo 6 -Fading between multiple images on click"
<div id="cf7" class="shadow">
<img class='opaque' src="/images/Windows%20Logo.jpg" />
<img src="/images/Turtle.jpg;" />
<img src="/images/Rainbow%20Worm.jpg;" />
<img src="/images/Birdman.jpg;" />
</div>
You can use a wrapper (#backgrounds, #content), use position:absolute and z-index.
Something like
<div style="position:relative">
<div id="content" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:20">
...
</div>
<div id="backgrounds" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10">
<img .../>
<img .../>
...
</div>
</div>

JQuery - fade in (animate) img with replace and attr change

HTML:
<td>
<div class="content" style=""><img src="FoodBlockPic.png" style="max-width: 100%;"></div>
</td>
<td>
<div class="content" style=""><img src="DeliveryBlockPic2.png" style="max-width: 100%;" id="deliveryPIC"></div>
</td>
<td>
<div class="content" style=""><img src="PickupBlockPic2.png" style="max-width: 100%;"></div>
</td>
</tr>
JQuery:
<script>
$(document).ready(function(){
$('#deliveryPIC').hover(function() {
var src = $(this).attr("src").replace("DeliveryBlockPic2.png", "DeliveryBlockPicAlt.png");
$(this).attr("src", src);
// $('#deliveryPIC').fadeIn("slow");
// $('#deliveryPIC').hide();
$('#deliveryPIC').fadeIn();
}, function() {
var src = $(this).attr("src").replace( "DeliveryBlockPicAlt.png", "DeliveryBlockPic2.png");
$(this).attr("src", src).stop();
// $('#deliveryPIC').fadeIn("slow");
// $('#deliveryPIC').hide();
$('#deliveryPIC').fadeIn();
});
});
</script>
I would simply like to animate the transition between the original picture and it's replaced src picture on hover and animate again when off hover. I am having trouble figuring out how to do this b/c just fade in does not work, fade in with hide makes the transition kind of glitchy, and the top fade in statement also does nothing by itself... Would mouseon, mouseoff be best here, and if so, how would I animate that transition? With my current code, the image swap works properly, but I can't seem to figure out the animation/fade-in/fade-out. Thanks for the help!!! :D
If you want to replace the src attribute you need to know that you have to wait until the image will finish the fadeOut animation before you can replace the src ,otherwise, the image just disappear but not with animation.
$('img').hover(function(){
var img = $(this);
img.fadeOut(function(){
img.attr('src', img.attr('data-src2')).fadeIn();
});
}, function(){
var img = $(this);
img.fadeOut(function(){
img.attr('src', img.attr('data-src1')).fadeIn();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://i.stack.imgur.com/1JQvA.png" data-src1="http://i.stack.imgur.com/1JQvA.png" data-src2="http://i.stack.imgur.com/Y4qVb.png" />
If you want that the fadeIn and the fadeOut will occurred simultaneously, you have to put the both of the images and hide the second. When mouse over you can animate them both simultaneously. Something like this:
$('.wrapper').hover(function(){
$('img').fadeToggle('slow');
}, function(){
$('img').fadeToggle('slow');
});
.wrapper {
position:relative;
width:69px;
height:68px;
}
.wrapper img {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.wrapper img:last-child {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<img src="http://i.stack.imgur.com/1JQvA.png" />
<img src="http://i.stack.imgur.com/Y4qVb.png" />
</div>

jQuery FadeIn and FadeOut animation show white color inbetween

I have change the background image of div every 5 seconds to make it look nices i am adding image to div as background. My script adds white color in between image transition which make it look bad, i tried to fix it but not much seems to work. Below code snippet now shows image using FadeIn effect if i add FadeOut to this then it addes white between transition.
var imgSrcs = [
"../img/bg1.jpg",
"../img/bg2.jpg",
"../img/bg3.jpg",
"../img/bg4.jpg",
"../img/bg5.jpg"
];
var index = 1;
$('.intro').css("background-image", "url(" + imgSrcs[0] + ")")
$('.intro').fadeIn('slow', animateBackground());
function animateBackground() {
window.setTimeout(function () {
var url = imgSrcs[index];
index++;
if (index == 5)
index = 0;
$('.intro').delay(5000).fadeIn(1000, function () {
$(this).css("background-image", "url(" + url + ")")
}).fadeIn(1000, animateBackground())
});
}
I am not sure how to fix this so it will work image FadeOut & FadeIn between images
Fiddle http://jsfiddle.net/7xxx6ah3/5/
use this
<script type="text/javascript">
$('#background_cycler').hide();//hide the background while the images load, ready to fade in later
</script>
<img class="active" src="images/img1.jpg" alt=""/>
<img src="images/img2.jpg" alt="" />
<img src="images/img3.jpg" alt="" />
<img src="images/img4.jpg" alt=""/>
<img src="images/img5.jpg" alt="" />
</div>
<style>
#background_cycler{padding:0;margin:0;width:100%;position:absolute;top:0;left:0;z-index:-1}
#background_cycler img{position:absolute;left:0;top:0;width:100%;z-index:1}
#background_cycler img.active{z-index:3}
</style>
<script>
function cycleImages() {
var $active = $('#background_cycler .active');
var $next = ($('#background_cycler .active').next().length > 0) ? $('#background_cycler .active').next() : $('#background_cycler img:first');
$next.css('z-index', 2);//move the next image up the pile
$active.fadeOut(1500, function () {//fade out the top image
$active.css('z-index', 1).show().removeClass('active');//reset the z-index and unhide the image
$next.css('z-index', 3).addClass('active');//make the next image the top one
});
}
$(window).load(function () {
$('#background_cycler').fadeIn(1500);//fade the background back in once all the images are loaded
// run every 7s
setInterval('cycleImages()', 7000);
})
</script>

Hide Content Loading Gif

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;}

jQuery simple slideshow creates long pauses

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)
});

Categories