'+getText+'
'); // space the new element 10px from the first $('p.scrollText:last').css({"left":getWidth1+10}); //get the width of the new second element var getWidth2 = $('p.scrollText:last').width()+10; //store both elements as variables var pFirst = $('p.scrollText:first'); var pLast = $('p.scrollText:last'); //set the scroll speed var sSpeed = 20000; //start the scroll $(pFirst).animate({left:"-="+getWidth1+"px"},sSpeed,"linear",continueScroll1); $(pLast).animate({left:"-="+getWidth2+"px"},sSpeed,"linear"); //check where the first element is sitting function continueScroll1() { var offset1 = $(pFirst).offset(); var offset2 = $(pLast).offset(); //check if the first element's left offset is now past 0, which it should be if (offset1.left<=0){ //if it is, put the first element to the right of the second element $(pFirst).css({"left":getWidth2+10}); //scroll both elements left again $(pFirst).animate({left:"-="+getWidth1+"px"},sSpeed,"linear"); $(pLast).animate({left:"-="+getWidth1+"px"},sSpeed,"linear",continueScroll2); } } //check where the second element is sitting function continueScroll2() { var offset1 = $(pFirst).offset(); var offset2 = $(pLast).offset(); //check if the second element's left offset is now past 0, which it should be if (offset2.left<=0){ //if it is, put the second element to the right of the first element $(pLast).css({"left":getWidth1+10}); //scroll both elements left again $(pFirst).animate({left:"-="+getWidth1+"px"},sSpeed,"linear",continueScroll1); $(pLast).animate({left:"-="+getWidth1+"px"},sSpeed,"linear"); } } //******FADING FEATURE************** //set the container to a variable for later reference var fT = $('#bannerThree'); //find out how many children are in the parent container var total = $(fT).children().length; //set the starting index var start = "1"; var tD = 0; //hide the children $(fT).children().hide(); //give the children an id equal to the index + 1 so we can target them $(fT).children().each( function(i) { $(this).attr({id:i+1}); } ); //run the function that does the fades and the timer runFades(); function runFades() { //check that we haven't incremented past the total number of children if (start <= total) { //fade in the first container $('#'+start).fadeIn(1000); var tD = $('#'+start).attr('class'); //alert($('#'+start).attr('class')); //run the timer for the fade out window.setTimeout(function() { $('#'+start).fadeOut(1000, function() { //when the timer is done, increment the id (index) so the next one will fade in/out start++; //run this whole function again so we fade them all in sequence runFades(); }); }, tD); }else{ //or if we've eclipsed the total number of children, reset the id (index) and run the function again start = 1; runFades(); } } //*********FADING GRAPHIC FEATURE ****************** //set a variable to the targeted elements for future reference var wF = $('#feature_1_inner').children(); //find out how many children are in the parent container var fTotal = $(wF).length; //set the starting index var fStart = 1; //set the default value of the clicked thumbnail index var clickStart = 1; //set the fading speed var fadeTime = 1000; var clearQueue = true; var gotoEnd = true; //hide the elements so we can fade them all. $(wF).hide(); //make sure there are more than 1 element otherwise we don't need to do anything if (fTotal > 1) { $('#feature_1_inner').prepend(''); $(wF).each( function(i) { $(this).attr({id:"featureimage"+(i+1)}); //build in nav buttons for multiple features so you can pick them manually $('#feature_nav').append(""); }); runFeatureFadeIn(); } //FADE IN FUNCTION WITH TIMER function runFeatureFadeIn () { //check that the index hasn't exceeded the total number of photos if (fStart <= fTotal) { //fade in the photo that matches the value of start $('#feature_1_inner #featureimage'+fStart).fadeIn(fadeTime, //when done fading in, run the timer to display the photo for 4 seconds function () { t = window.setTimeout( function(){ //reset the fade time in case a thumbnail had been clicked fadeTime = 1000; //run the fade out function runFeatureFadeOut(); } , 4000); } ); //highlight the thumbnail that matches the photo being displayed $('#navbutton'+fStart).css({"background":"yellow"}); }else{ //if we've eclipsed the total number of photos, reset everything and run the fade in function window.clearTimeout(t); t = 0; fStart = 1; clickStart = 1; fadeTime = 1000; runFeatureFadeIn(); } } //FADE OUT FUNCTION function runFeatureFadeOut () { //clear the setTimeout value window.clearTimeout(t); //reset it to the default t=0; //stop the current animation and clear the animation queue $('#navbutton'+fStart).stop(clearQueue); //remove the highlight from the matching thumbnail $('#navbutton'+fStart).css({"background":"#C6011F"}); //run the fade out $('#feature_1_inner #featureimage'+fStart).fadeOut(fadeTime, function() { //check if a thumbnail had been clicked if(clickStart < fStart || clickStart > fStart) { //if one had been clicked, reset start to match that value and //start the next fade in from that index fStart = clickStart runFeatureFadeIn(); }else{ //otherwise just increment start and clickstart so they match //and run the fade in fStart++; clickStart++; runFeatureFadeIn(); } } ); } //CLICK THUMBNAIL FUNCTION //catch the clicks on the thumbnails $('#feature_nav span').click( function() { //set a varible to the value of the thumbnail's index //clickStart = $(this).attr('class'); clickStart = ($('#feature_nav span').index(this))+1; //reset the fadetime to when you click a thumbnail, it jumps immediately //to the photo you clicked without a fade fadeTime = 0; //clear the running timeout window.clearTimeout(t); //reset the setTimeout variable t=0; //stop the animation queue and finish the function for the photo displaying $(wF).stop(clearQueue,gotoEnd); //check if the photo displaying and the thumbnail clicked match if (clickStart == fStart) { //if so, don't do anything and maintain the thumbnail highlight $(this).css({"background":"yellow"}); }else{ //otherwise remove the thumbnail highlights $('#feature_nav span').css({"background":"#C6011F"}); //set this thumbnail to have a highlight $(this).css({"background":"yellow"}); //run the fadeout function will will now fade in 0 ms as set above runFeatureFadeOut(); } } ); $('#store_locations').click( function() { if ($.browser.msie && $.browser.version.substr(0,1)>6) { var storeLink = $(this).children().attr('href'); window.location = storeLink; } }); })