Develop Reference

adding fade to change background with javascript

I have the following code for changing a divs background image with jquery, i need help to add a fade to the code so the image change with some effect
this is the code
jQuery(window).load(function(){
var images = ['blured/1.jpg','blured/2.jpg'];
var i = 0;
var timeoutVar;
function changeBackground() {
clearTimeout(timeoutVar); // just to be sure it will run only once at a time
jQuery('#maincont').css('background-image', function() {
if (i >= images.length) {
i=0;
}
return 'url(' + images[i++] + ')';
});
// call the setTimeout every time to repeat the function
timeoutVar = setTimeout(changeBackground, 6000);
}
// Call it on the first time and it will repeat
changeBackground();
});
Any help will be great!
i need to just change the background image, without fading the inside divs, this is the html
<div class="maincont" id="maincont">
<div class="containersrch">
<h1 class="lagro">some title</h1>
<div class="joinus">
<span>JOIN</span>
</div>
</div>

Maybe this is what you want?
$(function(){
var imgId = $('#maincont'), imgCount = 1, imgLast = 2;
setInterval(function(){
imgId.fadeOut('slow', function(){
if(++imgCount > imgLast)imgCount = 1;
imgId.css('background', "url('blured/"+imgCount+".jpg')");
imgId.fadeIn('slow');
});
}, 6000);
});
Now you can have multiple images, just change imgLast to the last number and make sure they have the correct URLs in your blured folder. Of course, the code above assumes you are using .jpg. I actually recommend the lossless compression of .png, but it won't matter if it's the image was taken as a .jpg.

Back button js slideshow

I'm not familiare with js and I am trying to make a slider witch contains html divs with animation. This is the js I use:
$(function(){
// find all slides
var slides = $('.main-slide');
// starting index
var i = 0;
// click listener
$('#main-slider-next').click(function(){
// find next index
// i + 1 or 0 if end of slides
i = ++i % slides.length;
// scroll to that index
$('.slider-wrapper').animate(
{'left' : -(slides.eq(i).position().left)},
1000
);
});
});
The code contains a next-slide button, but I am wondering how to make a previous-slide button with js. Does anyone have a clue how I can make that?

quite easy. try:
$('#main-slider-previous').click(function() {
$('.slider-wrapper').animate({
'left': '+=100%'
},1000);
});

You can always use some simple jQuery slider e.g http://www.basic-slider.com/ (or more advanced http://unslider.com/)
All you have to do is to change animation type settings:
animtype : 'fade',
to
animtype : 'slide',
And you're ready to go ;).

Execute two divs in same javascript

I'm trying fade effect in two different div classes at same same-time. For that i need two different scripts, and executing same script for two div(s), it lags. Is there any way to execute both divs in same script like
(.fadein,.fadeo)? FIDDLE- jsfiddle.net/562am/.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script> //Function 1
$(function(){
$('.fadeo img:gt(0)').hide();
setInterval(function(){$('.fadeo :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadeo');}, 2000);
});
</script>
<script> //Function 2
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 2000);
});
</script>

Is this what you meant by combining the two into 1 function?
$(function(){
var classes = ['.fadeo', '.fadein'];
$.each(classes, function (index, elem){
var selectorToHide = elem + ' img:gt(0)',
selectorToFadeOut = elem + ' :first-child';
$(selectorToHide).hide();
setInterval(function() {
$(selectorToFadeOut)
.fadeOut()
.next('img')
.fadeIn()
.end()
.appendTo(elem);
},
2000);
});
});

2 setInterval run on their own - they may produce lags. The correct way is to use 1 interval and do the whole logic there.
With appendTo you're changing the DOM every 2 seconds. This method causes extra performance issues and leads to slower application run. I would suggest you to keep an index with the current image, and change it as you want (this is shown below).
In my example I've calculated the minimum number of images (if separate divs have different image count).
$(function () {
// a value can be fixed - a constant
var imagesCount = Math.min($('.fadeo > img').size(),
$('.fadein > img').size());
var i = 0;
display(i);
setInterval(function () {
i = (i+1) % imagesCount;
display(i);
}, 2000);
});
function display(nth) {
$('.fadeo > img').hide().eq(nth).show();
$('.fadein > img').hide().eq(nth).show();
}

How to make an image slider in javascript

I am implementing an image slider in javascript/jquery.
The demo should work like this.
http://londatiga.net/tutorials/scrollable/
Anyway I don't won't to rely on jquery.tools.min.js because this lib is out of date (the last update is about 8 months ago ).
I decide to make the js code by me.
When clicking on next or prev button I would like to shift the images on the list of one item/image.
The script shifts the items but the display is quite crappy, because the next items is not displayed.
The list is made of 4 images. At the beginning only the first two images are displayed, then when clicking on the next button I would like to display the second and the third image.
Actually the script shows just the first and the second image even if I click on the next button.
Here is the demo: http://jsfiddle.net/xRQBS/5/
Here is the code (1)
Any hints how should I fix it?
thanks
(1)
/*global jQuery */
(function ($) {
var imgs = [
'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSsarNmO4Vdo5QwHfznbyxPmOyiYQ-KmBKUFsgEirvjW6Kbm7tj8w',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfIAfLXj3oK1lso1_0iQploSKsogfJFey3NnR0nSD9AfpWjU7egA',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1dO4FVDDitdS85aLOCsOpQyHHTysDhD4kHQ749bMtNxaj5GMKnA',
'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRAPO77sVu-Xk80S_txagySoTq8gKHgeiS63a9TYtKbPpGYVI5X'
];
var $list = $('.list-images');
var $slider = $('.slider');
var slideImage = function (direction) {
var unit = 150;
var left = parseInt($slider.attr('left'), 10) || 0;
left = (direction === 'prev') ? left - 150 : left + 150;
$slider.css('left', left + 'px');
};
$(function () {
$.each(imgs, function (i, img) {
$list.append($('<li>').append($('<img>').attr('src', img)));
});
$('body').on('click', '.direction', function () {
slideImage($(this).attr('data-tid'));
});
});
}(jQuery));
​

With the animate function:
$slider.animate({'left': left + 'px'}, 1000);
http://jsfiddle.net/xRQBS/6/

I'm assuming that you want the shift to be more of an animation. If so, take a look at jQuery's animate. Something like this:
$slider.animate({left: left + 'px'});
That will give it a sliding effect, which what I'm assuming you want :)

Javascript Conflict with 2 scripts - Need Help!

If someone could help with a jscript issue I'd be very grateful! I have two scripts for different sections of the page which I'm placing in the head, but are in conflict on the same page and just can't seem to get them to work together. Both are as follows:
<script type="text/javascript">
jQuery.noConflict();
function updatesubcat() {
$category = $('topcat').options[$('topcat').selectedIndex].value;
if ($category.match(' redir')) {
jQuery('#subcategory').html('');
window.location.href='/<%=server.HTMLEncode(Session("PublicFranchiseName"))%>/' + $category.replace(' redir','') + '.html';
} {
PagetoDiv("/ajax/home_subcategory.asp?c="+$category,"subcategory");
}
}
</script>
**AND:**
<script type="text/javascript">
$(document).ready(function() {
//Execute the slideShow, set 4 seconds for each images
slideShow(4000);
});
function slideShow(speed) {
//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');
//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});
//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));
//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});
//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);
//pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
//Hide the caption first, and then set and display the caption
$('#slideshow-caption').slideToggle(300, function () {
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').slideToggle(500);
});
//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');
}
</script>
This editor is not allowing the script tags - but they are placed obviously at the top and bottom of each script
Any help much appreciated!
Thanks,

If you use jQuery.noConflict(); (as i know) You must use jQuery() instead of $()
or
jQuery(document).ready(function($) {
$(selectors).actions
}

The $ is a variable that references the jQuery object. I'm guessing the other scripts on the page also use the $ for a variable and this is causing the problem. You'll want to use the jQuery.noConflict() method, but you must assign it to a variable that you'll replace in your code.
var jq = jQuery.noConflict();
This will change your usage from:
$category = $('topcat').options[$('topcat').selectedIndex].value;
to something like this:
$category = jq('topcat').options[$('topcat').selectedIndex].value;
You don't have to use jq like I did, any variable should do the trick. Hope this helps.