Coh3n

Updated the code a little. Haven't made any progress after messing with it for a couple hours.

Hello! I'm looking to add a next and previous button to my slideshow (rotating images), but I can't get the code to work right. I just get some odd behavior. Clicking next will work until I get to the last image, then there's a really long delay. Previous will only work when on the first image, and again it delays after one click. Hopefully someone can help. Thanks in advance. E: Resolved. Turns out the solution was pretty simple. Fixed code is below. var currentInterval = 0;var currentItem = 0;var INITIAL_FADE_IN = 1500; // initial fade-in time (in milliseconds) ITEM_INTERVAL = 4000; // interval between items (in milliseconds) FADE_TIME = 2500; // cross-fade time (in milliseconds)// Interval code derived from:// http://trendmedia.com/news/infinite-rotating-images-using-jquery-javascript/function elementRotator(startIndex) { //start after HTML, images have loaded var InfiniteRotator = { init: function() { currentItem = startIndex; // show first item $('.rotating_element').eq(currentItem).fadeIn(INITIAL_FADE_IN); // start the rotating startInterval(); } }; InfiniteRotator.init();};function startInterval() { // loop through the items currentInterval = setInterval(function() { $('.rotating_element').eq(currentItem).fadeOut(FADE_TIME); if (currentItem >= ($('.rotating_element').length - 1)) currentItem = 0; else currentItem++; $('.rotating_element').eq(currentItem).fadeIn(FADE_TIME); }, ITEM_INTERVAL);}$(window).load(function() { elementRotator(Math.floor((Math.random() * ($('.rotating_element').length - 1)) + 1));});function nextImage() { clearInterval(currentInterval); $('.rotating_element').eq(currentItem).fadeOut(FADE_TIME / 2); if (currentItem >= ($('.rotating_element').length - 1)) currentItem = 0; else currentItem++; $('.rotating_element').eq(currentItem).fadeIn(FADE_TIME / 2); startInterval();}function prevImage() { clearInterval(currentInterval); $('.rotating_element').eq(currentItem).fadeOut(FADE_TIME / 2); if (currentItem <= 0) currentItem = ($('.rotating_element').length - 1); else currentItem--; $('.rotating_element').eq(currentItem).fadeIn(FADE_TIME / 2); startInterval();}

Oh that's neat. Thanks very much.

I got it to work by commenting out all the console.debug calls; however, I don't particularly like this. Is there a way to call the debug methods so it works in all browsers?

Everything on the page loads, but the body is empty, and clicking the navigation tabs doesn't work. Also, this sounds bad, but what console? E: Oh, I found it. It says that "'console' is undefined."

I tried that, but it didn't seem to work. Maybe I missed something? Nothing in that method works in IE, not even the changing for the page's title. Everything works just fine in FF and Chrome, though. Here's the updated code. I really only changed a few lines to use .className and .title instead of get/setAttribute. I'm assuming that's what you meant? /** * Called when a navigation tab is clicked. Sets the current active tab to inactive * and sets "newActiveTab" to the active tab (i.e. highlights the new tab). * * @author Cohen Adair * @param numOfTabs: how many navigation tabs there are. * @param obj: the object (i.e. tab) being clicked. */function onClickNavTab(numOfTabs, obj){ // loop through each tab, finding which one is active, then disabling it and breaking out of the loop for (var i = 1; i <= numOfTabs; i++) { var navTab = document.getElementById("navTab_"+i); console.debug("loop #"+i); // if the active tab is found, set it inactive (or no class name at all) if (navTab.className == "active") { console.debug("found active navigation tab"); navTab.className = ""; break; } } obj.className = "active"; //obj.setAttribute("class", "active"); // set the tab that was clicked to active, so it becomes highlighted // hide all the text before displaying the section that was clicked $("#body_about_me").hide(); $("#body_projects").hide(); $("#body_blogs").hide(); $("#body_articles").hide(); $("#body_portfolio").hide(); // change the title of the page depending on which tab is clicked document.title = obj.title; // store the initial height so it can be reset before animation var initialHeight = $("#body_main").height(); // set the body's height to auto so we can get the height to animate to $("#body_main").css("height", "auto"); var bodyAnimateTime = 1500; // display the sections text depending on which tab is clicked switch(obj.getAttribute("id")) { case "navTab_1": $("#body_about_me").show(bodyAnimateTime); break; case "navTab_2": $("#body_projects").show(bodyAnimateTime); break; case "navTab_3": $("#body_portfolio").show(bodyAnimateTime); break; case "navTab_4": $("#body_blogs").show(bodyAnimateTime); break; case "navTab_5": $("#body_articles").show(bodyAnimateTime); break; default: alert("Tab isn't inluded in switch statement."); tab = ""; } // show the tab's content and get the final height of the body var finalHeight = $("#body_main").height(); console.debug("finalHeight = "+finalHeight); // reset body's height so it stats the animation from what the user sees $("#body_main").height(initialHeight); // make sure the web page takes up the entire window (no blank area at the bottom) var minHeight = window.innerHeight - $("#footer").height() - $("#header").height() - 10; if (finalHeight <= minHeight) finalHeight = minHeight; // reset body and footer locations so they can animate down to reveal content $("#body_main").animate({height: finalHeight}, bodyAnimateTime); $("#footer").animate({marginTop: finalHeight + 10}, bodyAnimateTime); createCookie("previousTab", obj.getAttribute("id"), 0);}

Hey there, So I just recently found out that my website doesn't work properly in IE. My website is www.coh3n.com if you would like to take a look. From what I can tell, there's something wrong in my JS/jQuery code; more specifically, my onClickNavTab() method. I was hoping someone here may be able to help me. Here's the code: /*** Called when a navigation tab is clicked. Sets the current active tab to inactive* and sets "newActiveTab" to the active tab (i.e. highlights the new tab).** @author Cohen Adair* @param numOfTabs: how many navigation tabs there are.* @param obj: the object (i.e. tab) being clicked.*/function onClickNavTab(numOfTabs, obj){// loop through each tab, finding which one is active, then disabling it and breaking out of the loopfor (var i = 1; i <= numOfTabs; i++){ var navTab = document.getElementById("navTab_"+i); console.debug("loop #"+i); // if the active tab is found, set it inactive (or no class name at all) if (navTab.getAttribute("class") == "active") { console.debug("found active navigation tab"); navTab.setAttribute("class", ""); break; }} obj.setAttribute("class", "active"); // set the tab that was clicked to active, so it becomes highlighted // hide all the text before displaying the section that was clicked$("#body_about_me").hide();$("#body_projects").hide();$("#body_blogs").hide();$("#body_articles").hide();$("#body_portfolio").hide(); // change the title of the page depending on which tab is clickeddocument.title = obj.getAttribute("title"); // store the initial height so it can be reset before animationvar initialHeight = $("#body_main").height(); // set the body's height to auto so we can get the height to animate to$("#body_main").css("height", "auto"); var bodyAnimateTime = 1500; // display the sections text depending on which tab is clickedswitch(obj.getAttribute("id")){case "navTab_1": $("#body_about_me").show(bodyAnimateTime); break;case "navTab_2": $("#body_projects").show(bodyAnimateTime); break;case "navTab_3": $("#body_portfolio").show(bodyAnimateTime); break;case "navTab_4": $("#body_blogs").show(bodyAnimateTime); break;case "navTab_5": $("#body_articles").show(bodyAnimateTime); break;default: alert("Tab isn't inluded in switch statement."); tab = "";} // show the tab's content and get the final height of the bodyvar finalHeight = $("#body_main").height(); console.debug("finalHeight = "+finalHeight); // reset body's height so it stats the animation from what the user sees$("#body_main").height(initialHeight); // make sure the web page takes up the entire window (no blank area at the bottom)var minHeight = window.innerHeight - $("#footer").height() - $("#header").height() - 10;if (finalHeight <= minHeight) finalHeight = minHeight; // reset body and footer locations so they can animate down to reveal content$("#body_main").animate({height: finalHeight}, bodyAnimateTime);$("#footer").animate({marginTop: finalHeight + 10}, bodyAnimateTime); createCookie("previousTab", obj.getAttribute("id"), 0);} Thanks in advance,Coh3n

That's great, thank you.

Makes sense. I've really only done some Pascal programming, which doesn't have an iterator -- it's just always 1 (at least that's all I know). It's done like for i := 0 to 9 dobeginend; So it would just execute the loop 10 times. I was in the same thought process for Java, where it would just execute for when i = 1 until i = numOfTabs. I didn't think about the "i = numOfTabs" being an assignment.

Oh okay I understand. A for loop in Java works a little different than what I'm used to. Yeah, after I researched it a little more, I found that was the case. I now pass an "obj" parameter to the function, which got everything working like I wanted. Thanks a lot for the help. Do you guys have some sort of "prefix" system in place where I can tag this thread as "resolved"? It's useful for threads that no longer need attention.

Wow, funny how something so simple can cause such a big problem. Thanks for the fix! Question though, why did it cause the browser to crash? The way I had it, wouldn't the loop just execute twice? When i = 1 and when i = numOfTabs, or does the i++ screw that up? Also, now that it doesn't crash, it gives a "this.setAttribute() is not a function" error. Shouldn't "this" be the element object of what is being clicked?

Hi! I recently started creating my own website out of pure interest, teaching myself, so I apologise in advance for any "weird" code I could post. I've been trying to create a navigation list on my hompage (seen here -- do not click the tabs unless you want to see your browser crash). I know I can simply have a different HTML page for each "tab" (i.e. Home, About Me, etc.), but I really hate having repeated code, and I figure there has to be an alternative. This is what I've come up with so far: function onClickNavTab(numOfTabs){ var i; // loop through each tab, finding which one is active, then disabling it and breaking out of the loop for (i = 1; i = numOfTabs; i++) { var navTab = document.getElementById("navTab_"+i); console.debug("loop #"+i); // if the active tab is found, set it inactive (or no class name at all) if (navTab.getAttribute("class") == "active") { console.debug("found active navigation tab"); navTab.setAttribute("class", ""); break; } } this.setAttribute("class", "active"); // set the tab that was clicked to active, so it becomes highlighted} And I'm using it like this: <div id="header"> <div id="title"><u>CA</u> | Cohen Adair </div> <div id="nav"> <ul> <li><a id="navTab_1" onClick="onClickNavTab(5)" class="active" href="#">Home</a></li> <li><a id="navTab_2" onClick="onClickNavTab(5)" href="#">About Me</a></li> <li><a id="navTab_3" onClick="onClickNavTab(5)" href="#">Projects</a></li> <li><a id="navTab_4" onClick="onClickNavTab(5)" href="#">Blogs</a></li> <li><a id="navTab_5" onClick="onClickNavTab(5)" href="#">Articles</a></li> </ul> </div> <img src="img/pr_sunset.png" alt="pr_sunset.png" class="cover" /> </div> And the relevant CSS code: /***************************************************************************** The properties that setup the navigation list at the top right of the* homepage.****************************************************************************/#nav { position: absolute; left: 50%; top: 28px; margin-left: -25px;} /* Displays the list across the page */#nav ul li { display: inline; font-size: 19px; } #nav ul li a { padding: 5px 13px 5px 13px; /* Top, Right, Bottom, Left */ text-decoration: none; color: black; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;} #nav ul li a:hover, #nav ul li a.active { background-image: url(img/bg_light.png); border-top: 1px solid black; } I'm still getting used to Java syntax, and don't have a lot of background in object oriented programming, but you should be able to understand what I'm tring to do from my comments. The javascript function onClickNavTab() is supposed to just "deactivate" the current tab and "activate" the clicked tab. Problem is, when I click another tab, my Firefox crashes... every time. Thanks in advance,Cohen E: Also, if anyone else uses Eclipse, I was wondering if there was a way for it to show me "function is not defined" errors. It shows me syntax errors, but runtime errors I guess they would be don't show up until I try the code in my browser.