Sequence Banner

[uHeadphones.Com]

Hi All, I launched my first website a month ago, it is called www.uHeadphones.com. I had a company called Solid Cactus build it(no I do not recommend them) and they included a sequence banner into my Index page. From day one I had an issue with the sequence banner, when I would change tabs on my browser, while on my index page to another tab and then return a few minutes later the sequence banner would be flashing. I called up Solid Cactus and they told me that is because when I leave that tab the browser stops the JavaScript from working but when I return the JavaScript is trying to catch up to where it should have been. Solid Cactus later told me this could not be fixed. This does not happen on safari but it does happen on Google Chrome as well as FireFox. Later on I found this is incorrect. Below is the code they used to build the sequence banner: <div class="homebanner"> <div class="scSequenceBanner"> <div class="scSequenceBannerMain"> <div><a href="aerial7.aspx"><img src="themes/default/images/a7-seq_banner2 .jpg" /></a></div> <div><a href="audiofly.aspx"><img src="themes/default/images/seq_banner1_revised.jpg" /></a></div> <div><a href="sennheiser.aspx"><img src="themes/default/images/seq_banner_one.jpg" /></a></div> <div><a href="sony.aspx"><img src="themes/default/images/seq_banner_two.jpg" /></a></div> </div> </div></div> Can somebody please help me out, so that the Sequence Banner will stop flashing? Thank You

[thescientist]

that can't possibly be all the code. can you at least provide documentation for this library? a link to their site or something?

[uHeadphones.Com]

Here is the top part of the header this might help as well: <!-- START HEADER --><script type="text/javascript" src="themes/default/inc/scripts.js"></script><script type="text/javascript" src="themes/default/inc/jquery.megamenu.js"></script><script language="JavaScript" src="https://seal.networksolutions.com/siteseal/javascript/siteseal.js" type="text/javascript"></script> <div id="header"> <div id="header-top">Free Ground Shipping on all orders over $99</div> <div id="header-left"> <div id="logo"><a href="index.aspx"</a></div> <link rel="shortcut icon" href="/themes/default/images/favicon.ico" type="image/x-icon" /> </div> <div class="searcharea"> <div class="custom-search" id="ctl00_ctl02_searchBox"> <input type="text" class="textbox custom-search-field" type="text" maxlength="100" id="search-textbox" class="textbox" value="Enter keyword(s), item #, etc..." onblur="if (this.value == '') {this.value = 'Enter keyword(s), item #, etc...';}" onfocus="if (this.value == 'Enter keyword(s), item #, etc...') {this.value = '';}" /> <input type="image" class="custom-search-button" alt="Go" src="themes/default/images/btn_header_search.gif" id="search-button" name="ctl00$ctl02$go" /> </div></div> <div id="header-right"> <div class="headerlinks"><a href="index.aspx" title="cart">Home</a> | <a href="login.aspx">Login</a> | <a href="contact-us.aspx">Contact Us</a></div> <div class="shopbtn"> <div class="cartbtn"><a href="cart.aspx">CART</a></div> <div class="fc-cartinfo"><span class="cart_count"> <%Cart.Count%> Item(s) </span> <span class="itemtotal"> <%Cart.Total%> </span><a href="cart.aspx" title="cart"><img src="themes/default/images/arrow_black.gif" alt="View Cart" /></a></div> </div> </div></div>

[uHeadphones.Com]

I also found these files in my File Manager:<script type="text/javascript" src="themes/default/inc/scripts.js"></script><script type="text/javascript" src="themes/default/inc/jquery.megamenu.js"></script> But I was not allowed to attach them in this conversation. Could these be the documentation for the library you are talking about? I am sorry I am new to all of this

[uHeadphones.Com]

I am attaching the sequence banner code from the scripts.js file here: // Start Sequence Banner(function($){ $.fn.scSequenceBanner = function(options){ var defaults = { slideOnClass : "scSBon", slidePausePos : "center", slideWidth : 931, showNumbers : true, slideAuto : true, slideTimer : 5, showNumbersX : 19, showNumbersY : 231 }; var settings = $.extend({},defaults,options); return this.each(function(){ var mainObj = $(this); var subMainObj = mainObj.children("div"); var slideObjs = mainObj.children("div").children("div"); var slideNumber = subMainObj.children("div").length; var currNum = 0, pauseBtn; // set main containers width subMainObj.css('width',(settings.slideWidth)+"px"); // if slideAuto is True start interval function startInterval(){ var slideTime = settings.slideTimer*1000; scSBInterval = setInterval(processAuto,slideTime); } // scrolling function function processBtn(_btnnum){ var numberBtns = numberContainer.children("a"); numberBtns.removeClass(settings.slideOnClass); numberBtns.eq(_btnnum).addClass(settings.slideOnClass); currNum=_btnnum; } // auto scroll process function processAuto(){ (currNum==(slideNumber-1)) ? currNum = 0 : currNum += 1; (settings.showNumbers) ? processBtn(currNum) : ''; processTransition(currNum); } // transition function function processTransition(_btnnum){ subMainObj.children().eq(_btnnum).animate({opacity:1},300).css('z-index',1); subMainObj.children().not(slideObjs.eq(_btnnum)).animate({opacity:0},300).css('z-index',0); } // show number buttons function showNumbers(){ numberContainer = $(document.createElement("div")).addClass("scSequenceButtons").css("top",settings.showNumbersY).css("right",settings.showNumbersX); slideObjs.each(function(i){ numberContainer.append($(document.createElement("a")).click(function(e){processBtn(i); processTransition(i); (settings.slideAuto) ? clearInterval(scSBInterval) : ''; e.preventDefault();}).addClass("scSButton").text(" ")); }); mainObj.append(numberContainer); numberContainer.children("a").eq(0).addClass(settings.slideOnClass); } // pause button functionality function showPause(){ pauseBtn.animate({top:0},400); } function hidePause(){ pauseBtn.animate({top:-pauseBtn.height()},400); } $.fn.opacity = function(_value) { return $(this).css('opacity',_value); }; // feature initialization $.fn.initialize = function(){ slideObjs.each(function(){ slide = $(this); slide.width(settings.slideWidth).height(mainObj.height()); slide.not(slideObjs.eq(0)).opacity(0).css('z-index',0); slideObjs.eq(0).opacity(1).css('z-index',1) }); (settings.showNumbers) ? showNumbers() : ''; if(settings.slideAuto){ mainObj.hover(function(){clearInterval(scSBInterval); showPause();},function(){startInterval(); hidePause();}); startInterval(); pauseBtn = $(document.createElement("div")).addClass("scSequencePause"); mainObj.append(pauseBtn); switch(settings.slidePausePos){ case "right": pauseBtn.css({top:-pauseBtn.height(),left:(mainObj.width()-pauseBtn.width())}); break; case "left": pauseBtn.css({top:-pauseBtn.height(),left:0}); break; case "center": pauseBtn.css({top:-pauseBtn.height(),left:(mainObj.width()/2-pauseBtn.width()/2)}); break; } } } }); }})(jQuery);// End Sequence Banner /************************************* Document on Load jQuery Functions **********************************/ jQuery(document).ready(function() { // simple text popup for privacy link // $("#simpleTextLink").scSimpleText({popClose:".simpleTextRight"}); //Hide the left column on the homepage if ($('body').hasClass('index-page')){ $('.page-column-center').addClass('homecolumn'); $('.page-column-left').hide(); } // sequence banner - Adjust slide width and position of slide numbers if($('.scSequenceBanner').length > 0){ var scSB = $('.scSequenceBanner').scSequenceBanner({slideWidth:931,showNumbersX:19,showNumbersY:231, showNumbers:true ,slideTimer:5 ,slideAuto:true }); scSB.initialize(); }

[uHeadphones.Com]

Here is the code from the jquery.megamenu.js file: /* jQuery MegaMenu Plugin Author: GeekTantra Author URI: http://www.geektantra.com*/var isIE6 = navigator.userAgent.toLowerCase().indexOf('msie 6') != -1; jQuery.fn.megamenu = function(options) { options = jQuery.extend({ activate_action: "click", deactivate_action: "mouseleave", show_method: "slideDown", hide_method: "slideUp", justify: "right", mm_timeout: 250 }, options); var $megamenu_object = this; if( options.activate_action == "click" ) options.mm_timeout = 0; $megamenu_object.children("li").each(function(){ jQuery(this).addClass("mm-item"); jQuery(".mm-item").css({ 'float': options.justify }); jQuery(this).find("div:first").addClass("mm-item-content"); jQuery(this).find("a:first").addClass("mm-item-link"); var $mm_item_content = jQuery(this).find(".mm-item-content"); var $mm_item_link = jQuery(this).find(".mm-item-link"); $mm_item_content.hide(); jQuery(document).bind("click", function(){ jQuery(".mm-item-content").hide(); jQuery(".mm-item-link").removeClass("mm-item-link-hover"); }); jQuery(this).bind("click", function(e){ e.stopPropagation(); }); var $mm_timer = 0; // Activation Method Starts jQuery(this).bind(options.activate_action, function(e){ e.stopPropagation(); var mm_item_link_obj = jQuery(this).find("a.mm-item-link"); var mm_item_content_obj = jQuery(this).find("div.mm-item-content"); clearTimeout($mm_timer); $mm_timer = setTimeout(function(){ //Emulate HoverIntent mm_item_link_obj.addClass("mm-item-link-hover"); mm_item_content_obj.css({ 'top': ($mm_item_link.offset().top + $mm_item_link.outerHeight()) - 1 +"px", 'left': ($mm_item_link.offset().left) - 5 + 'px' }) if(options.justify == "left"){ var mm_object_right_end = $megamenu_object.offset().left + $megamenu_object.outerWidth(); // Coordinates of the right end of the megamenu object var mm_content_right_end = $mm_item_link.offset().left + $mm_item_content.outerWidth() - 5 ; // Coordinates of the right end of the megamenu content if( mm_content_right_end >= mm_object_right_end ) { // Menu content exceeding the outer box mm_item_content_obj.css({ 'left': ($mm_item_link.offset().left - (mm_content_right_end - mm_object_right_end)) - 2 + 'px' }); // Limit megamenu inside the outer box } } else if( options.justify == "right" ) { var mm_object_left_end = $megamenu_object.offset().left; // Coordinates of the left end of the megamenu object var mm_content_left_end = $mm_item_link.offset().left - mm_item_content_obj.outerWidth() + $mm_item_link.outerWidth() + 5; // Coordinates of the left end of the megamenu content if( mm_content_left_end <= mm_object_left_end ) { // Menu content exceeding the outer box mm_item_content_obj.css({ 'left': mm_object_left_end + 2 + 'px' }); // Limit megamenu inside the outer box } else { mm_item_content_obj.css({ 'left': mm_content_left_end + 'px' }); // Limit megamenu inside the outer box } } switch(options.show_method) { case "simple": mm_item_content_obj.show(); break; case "slideDown": mm_item_content_obj.height("auto"); mm_item_content_obj.slideDown('fast'); break; case "fadeIn": mm_item_content_obj.fadeTo('fast', 1); break; default: mm_item_content_obj.each( options.show_method ); break; } }, options.mm_timeout); }); // Activation Method Ends // Deactivation Method Starts jQuery(this).bind(options.deactivate_action, function(e){ e.stopPropagation(); clearTimeout($mm_timer); var mm_item_link_obj = jQuery(this).find("a.mm-item-link"); var mm_item_content_obj = jQuery(this).find("div.mm-item-content");// mm_item_content_obj.stop(); switch(options.hide_method) { case "simple": mm_item_content_obj.hide(); mm_item_link_obj.removeClass("mm-item-link-hover"); break; case "slideUp": mm_item_content_obj.slideUp( 'fast', function() { mm_item_link_obj.removeClass("mm-item-link-hover"); }); break; case "fadeOut": mm_item_content_obj.fadeOut( 'fast', function() { mm_item_link_obj.removeClass("mm-item-link-hover"); }); break; default: mm_item_content_obj.each( options.hide_method ); mm_item_link_obj.removeClass("mm-item-link-hover"); break; } if(mm_item_content_obj.length < 1) mm_item_link_obj.removeClass("mm-item-link-hover"); });// Deactivation Method Ends }); this.find(">li:last").after('<li class="clear-fix"></li>'); this.show();};

[justsomeguy]

I don't have an answer why it advances quickly when you switch back to it, there might be something in jQuery for the automated .NET scripts that would cause that behavior, but it is not true that browsers pause Javascript when you switch tabs and then try to "catch up" when you switch back. I work with Javascript all day, I haven't seen that behavior in any browser.

[uHeadphones.Com]

Ok thank you for the response do you have an idea on how I could get this fixed as soon as possible? It sounds like everyone says it shouldn't be happening but it is and I am not qualified enough to be able to figure out the ways to fix it.

[justsomeguy]

It's hard to suggest a solution without really understanding the problem. The slideshow code isn't all that complicated, and it's not handling the window events that would cause something like that. Windows have blur and focus events that fire when the window either loses or receives focus, but the code isn't using those. That's why I suggested it may be part of the automated scripts that .NET generates, but even that is pretty doubtful. When I switch back, I can verify that the Javascript code that actually does the transition does not run a bunch of times. It does continue to run while the tab does not have focus. It almost seems like either the browser or jQuery is caching the redrawing that happens when the animation fires. I don't see the same behavior in Opera. This looks like an issue with Chrome and Firefox, where they will not redraw the page if it changes while it does not have focus, and then when they regain focus it tries to do all of the page updates. I've never seen this behavior in my projects, but I don't use jQuery. It doesn't really feel like a jQuery issue though. One solution would be to simply stop the animation when the page loses focus, and then restart it. You should be able to do that by adding these lines: window.addEventListener('focus', function(){startInterval(); hidePause();});window.addEventListener('blur', function(){clearInterval(scSBInterval); showPause();}); just before or after this line: mainObj.hover(function(){clearInterval(scSBInterval); showPause();},function(){startInterval(); hidePause();}); There might be a scoping problem there, if that doesn't work then we can adjust it.

[uHeadphones.Com]

You are the man....So far it is working lets hope this keeps up...I have been looking and asking around for so long trying to fix that I can't believe it was that easy

[uHeadphones.Com]

Are you familiar with search bars as well? I am having an issue where when I click the search bar in Safari, Firefox and Google Chrome it refreshes my index page. This only started about a week ago and I never changed any of the JS or HTML for it. I will post the HTML and the JS for this below: HTML in Header: <div class="searcharea"> <div class="custom-search" id="ctl00_ctl02_searchBox"> <input type="text" class="textbox custom-search-field" type="text" maxlength="100" id="search-textbox" class="textbox" value="Enter keyword(s), item #, etc..." onblur="if (this.value == '') {this.value = 'Enter keyword(s), item #, etc...';}" onfocus="if (this.value == 'Enter keyword(s), item #, etc...') {this.value = '';}" /> <input type="image" class="custom-search-button" alt="Go" src="themes/default/images/btn_header_search.gif" id="search-button" name="ctl00$ctl02$go" /> </div></div> Script.JS:function loadSearch() { var searchText = document.getElementById("search-textbox"); var searchButton = document.getElementById("search-button"); searchButton.onclick = function() { if (searchText.value != '') { window.location = '/search.aspx?find=' + encodeURIComponent(searchText.value).replace(/%20/g, '+'); return false; } };} MC.addLoadEvent(loadSearch);// Start Simple Text Popup//(function($){// $.fn.scSimpleText = function(options){ // var defaults = { // popCloseTxt : '' // }; //var settings = $.extend({},defaults,options); //return this.each(function(){ // var nextElm = $(this).next(); // var closeElement = $(document.createElement("a")).attr("href","").text(settings.popCloseTxt).addClass("scSimpleTextClose").click(function(e){nextElm.fadeOut("slow"); e.preventDefault();}); //$(this).click(function(e){ // nextElm.fadeIn("slow"); //nextElm.append(closeElement); // e.preventDefault(); // }); // });// }// End Simple Text Popup Once again I am sorry for this it might be a little bit of work for you. I really appreciate the help

[justsomeguy]

I'm not sure why it's doing that, I've put breakpoints all over your code but I can't find whatever is running to submit the form when you click on the textbox.

[uHeadphones.Com]

Man this sucks idk why it is doing that either. I have asked around and no one can figure it out. I think I am just going to call my hosting company and pay a specialized person to fix it, hopefully that works and is semi affordable. Do you know any other ways that I would be able to get the coding and search bar fixed in a reasonable time?

[justsomeguy]

Like people pointed out in the other topic, it looks like it's just a link from the logo area. This line: <div id="logo"><a href="index.aspx" /></div> should probably be this: <div id="logo"><a href="index.aspx"> </a></div> Even though it looks like that tag is closed, if I inspect the DOM on the page it wraps the entire search area in that link also, so that link is applying to more than just the logo.

[uHeadphones.Com]

Hey More Than Human, Here is the updated code everything is fixed now. <!-- START HEADER --><script type="text/javascript" src="themes/default/inc/scripts.js"></script><script type="text/javascript" src="themes/default/inc/jquery.megamenu.js"></script><script language="JavaScript" src="https://seal.networksolutions.com/siteseal/javascript/siteseal.js" type="text/javascript"></script><link rel="shortcut icon" href="/themes/default/images/favicon.ico" type="image/x-icon" /><div id="header"> <div id="header-top">Free Ground Shipping on all orders over $99</div> <div id="header-left"> <div id="logo"><a href="index.aspx" /><img src="themes/default/images/logo.gif" alt="Headphones.com" /></a></div></div><div class="searcharea"><div class="custom-search" id="ctl00_ctl02_searchBox"><input type="text" class="textbox custom-search-field" id="search-textbox" name="ctl00$ctl02$search" onfocus="if(this.value == this.defaultValue){this.value='';}" onblur="if(this.value == ''){this.value= this.defaultValue;}" value="Enter keyword(s), item#, etc..." /><input type="image" class="custom-search-button" id="search-button" alt="Go" src="themes/default/images/btn_header_search.gif" id="ctl00_ctl02_go" name="ctl00$ctl02$go" /></div></div> The red is where they fixed the header logo can stopped it from hitting the search bar....the orange part I have a question about..my site is uHeadphones.Com not headphones.com, why did they change it to headphones.com? is this going to affect my site? Also they changed up the search bar code a little bit. Thank You for all of the help

[justsomeguy]

The alt text of an image is the text that displays when you hover your mouse over the image (if there is no title), or if the image couldn't be loaded for whatever reason. It's not going to hurt anything, but it would make sense to change it.

[uHeadphones.Com]

Hi JustSomeGuy, Previously we had spoken about an issue with my sequence banner(Text is Above) we had fixed it by working with the js script and working with stars and stop on the "focus" and "blur". Recently I have been having the same issue again but only in Firefox and Chrome. Do you know why the issue has reverted back to before we had fixed it? Below I will attach the Js script for the Sequence Banner. // Start Sequence Banner(function($){ $.fn.scSequenceBanner = function(options){ var defaults = { slideOnClass : "scSBon", slidePausePos : "center", slideWidth : 931, showNumbers : true, slideAuto : true, slideTimer : 5, showNumbersX : 19, showNumbersY : 231 }; var settings = $.extend({},defaults,options); return this.each(function(){ var mainObj = $(this); var subMainObj = mainObj.children("div"); var slideObjs = mainObj.children("div").children("div"); var slideNumber = subMainObj.children("div").length; var currNum = 0, pauseBtn; // set main containers width subMainObj.css('width',(settings.slideWidth)+"px"); // if slideAuto is True start interval function startInterval(){ var slideTime = settings.slideTimer*1000; scSBInterval = setInterval(processAuto,slideTime); } // scrolling function function processBtn(_btnnum){ var numberBtns = numberContainer.children("a"); numberBtns.removeClass(settings.slideOnClass); numberBtns.eq(_btnnum).addClass(settings.slideOnClass); currNum=_btnnum; } // auto scroll process function processAuto(){ (currNum==(slideNumber-1)) ? currNum = 0 : currNum += 1; (settings.showNumbers) ? processBtn(currNum) : ''; processTransition(currNum); } // transition function function processTransition(_btnnum){ subMainObj.children().eq(_btnnum).animate({opacity:1},300).css('z-index',1); subMainObj.children().not(slideObjs.eq(_btnnum)).animate({opacity:0},300).css('z-index',0); } // show number buttons function showNumbers(){ numberContainer = $(document.createElement("div")).addClass("scSequenceButtons").css("top",settings.showNumbersY).css("right",settings.showNumbersX); slideObjs.each(function(i){ numberContainer.append($(document.createElement("a")).click(function(e){processBtn(i); processTransition(i); (settings.slideAuto) ? clearInterval(scSBInterval) : ''; e.preventDefault();}).addClass("scSButton").text(" ")); }); mainObj.append(numberContainer); numberContainer.children("a").eq(0).addClass(settings.slideOnClass); } // pause button functionality function showPause(){ pauseBtn.animate({top:0},400); } function hidePause(){ pauseBtn.animate({top:-pauseBtn.height()},400); } $.fn.opacity = function(_value) { return $(this).css('opacity',_value); }; // feature initialization $.fn.initialize = function(){ slideObjs.each(function(){ slide = $(this); slide.width(settings.slideWidth).height(mainObj.height()); slide.not(slideObjs.eq(0)).opacity(0).css('z-index',0); slideObjs.eq(0).opacity(1).css('z-index',1) }); (settings.showNumbers) ? showNumbers() : ''; if(settings.slideAuto){ mainObj.hover(function(){clearInterval(scSBInterval); showPause();},function(){startInterval(); hidePause();}); window.addEventListener('focus', function(){startInterval();hidePause();}); window.addEventListener('blur', function(){clearInterval(scSBInterval);showPause();}); startInterval(); pauseBtn = $(document.createElement("div")).addClass("scSequencePause"); mainObj.append(pauseBtn); switch(settings.slidePausePos){ case "right": pauseBtn.css({top:-pauseBtn.height(),left:(mainObj.width()-pauseBtn.width())}); break; case "left": pauseBtn.css({top:-pauseBtn.height(),left:0}); break; case "center": pauseBtn.css({top:-pauseBtn.height(),left:(mainObj.width()/2-pauseBtn.width()/2)}); break; } } } }); }})(jQuery);// End Sequence Banner Thank You for the Help.

[justsomeguy]

What exactly is the issue?