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.

In works the same in other languages that I've studied. The for statement has 3 parts: the initializer, the exit condition, and the iterator. It will execute the initializing statements one time at the start, evaluate the exit condition, run the loop if the exit condition isn't false, and after the loop run the iterator. Your exit condition was an assignment statement: i = numOfTabs; So when it was determining whether to exit the loop it would execute that statement, which assigns a static value to i, evaluate i which would not be false, and since it's not false it would continue the loop. It only exits the loop if that statement evaluates to false. With this instead: for (i = 1; i <= numOfTabs; i++) It's going to exit the loop when i is greater than numOfTabs, so assuming that i and numOfTabs don't get modified inside the loop, that loop will eventually exit.

It was an infinite loop, it kept switching the value of i between 2 values but there wasn't a condition that told it when to stop. The condition that should have told it when to stop instead just set the value of i, so that expression never evaluated to false and the loop never stopped.

Not inside that function. In the actual event handling code this will be set to the element that the event is happening for, that code is this part: <li><a id="navTab_5" onClick="onClickNavTab(5)"... Inside the code in that onclick attribute, which is the actual event handling code, this is set to the element that was clicked on. When you call the function it doesn't run it in the same scope by default, inside the function this will be set to the window object. If you want a reference to the element that was clicked on then you either need to pass this to your function, or there are other ways to call the function so that it runs in a certain scope, e.g.: <li><a id="navTab_5" onClick="onClickNavTab.call(this, 5)"... That will run the function in the scope of this and pass the value 5 to it.

This: for (i = 1; i = numOfTabs; i++) should be this: for (i = 1; i <= numOfTabs; i++)

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.