Condition Statement Inside Function

@slanzaApr 03.2006

Hi,

I am fairly new to Javascript and am having trouble making the following work.

I have the following function.

function fnStartInterval(){
intervalID = window.setInterval(“tabview_switch(‘tabview’,X)”, 5000);
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
}

* X should be the value 1, 2 or 3.

Within the “setInterval” code, I would like to test the value of “tabview”.

If it is 1 then I want to call this function … tabview_switch(‘tabview’,2)
If it is 2 then I want to call this function … tabview_switch(‘tabview’,3)
If it is 3 then I want to call this function … tabview_switch(‘tabview’,1)

The result should be that my three tabs keeps changing from one to the next every few seconds.

Any ideas?

Thanks,
Steve

to post a comment

JavaScript

11 Comments(s) _↴

@KramyApr 03.2006 — #

[CODE]var CurTab = 1;
 var MaxTab = 3;
 
 function StartTabFlip(iTime)
 {
 var intervalID = window.setInterval("NextTab('tabview', CurTab);", 5000);
 }
 
 function NextTab(TabViewId, id)
 {
 CurTab++;
 if(CurTab > MaxTab) CurTab -= MaxTab;
 
 tabview_aux(TabViewId, id); <---- ???? Why not just add whatever code that is here?
 }
 }[/CODE]

Can't add anything else without understanding what "tabs" are, but that should be easily modified back into whatever you need.

@slanzaauthorApr 04.2006 — #Thank you so much for your reply.

I tried the code you provided but it keeps throwing an error.

I have played around with it a bit, but I don't fully understand what the code is doing so I am having trouble knowing what to do.

Here is the site so you can see it in action.

www.didax.com

@KramyApr 04.2006 — #Ack, that's quite odd and convoluted javascript. I have no idea why this "tab" system is used when it could be much simpler. It seems to be loading part of the page dynamically, using a form rather than an iframe? ?

I'm not sure what the best way to add what you want is. It kinda has 3 or 4 different ways mixed together in a confusing manner. The best way is probably to use an iframe(inline frame) of a specific size to load a .html or .php document. PHP would allow dynamic product changing, easily updating products stored in a MySQL DB, etc.

I don't know anything about PHP though, or the method your page is using. Oh, and there's a useless call in there that can be deleted:

[CODE]<script type="text/javascript">
 tabview_initialize('TabView');
 </script>[/CODE]

Try renaming everything back into suiting the tab naming style("fnStartInterval", etc.). Now that I think about it, it looks like that code was made for Netscape 4, but that makes my chances of understanding how to add what you want even worse.

Maybe someone else can actually figure out what it's doing and how, and then offer a solution.

@slanzaauthorApr 04.2006 — #Kramy,

I played around with the code for awhile and finally got it to work.

Thanks for all your help!

Steve

@slanzaauthorApr 04.2006 — #Strange. It currently works in IE, but I can not make it work in Firefox or Opera.

Does it have to do with "setInterval"?

@slanzaauthorApr 04.2006 — #Okay. I now have it working in Firefox, but it does throw a Javascript error.

The error is "TabView has no properties".

This is the line where the error occurs, "var Tabs = TabView.firstChild;".

Can anyone see what is causing this?

[CODE]
 <!--
 // Additional Code to Rotate Tabs
 var intervalID = "";
 var CurTab = (Math.round((Math.random()*2)+1));
 var MaxTab = 3;
 
 function fnStartInterval(){
 intervalID = window.setInterval("fnRecycle()", 5000);
 }
 
 function fnRecycle(){
 CurTab++;
 if(CurTab > MaxTab)	CurTab -= MaxTab;
 tabview_initialize('TabView');
 tabview_switch('tabview',CurTab);
 }
 
 function fnStopInterval(){
 if(intervalID!=""){
 window.clearInterval(intervalID);
 intervalID="";
 }
 }
 
 // ----- Original Code for Tab View Navigation -----
 
 function tabview_aux(TabViewId, id)
 {
 var TabView = document.getElementById(TabViewId);
 
 // ----- Tabs -----
 
 var Tabs = TabView.firstChild;
 while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
 
 var Tab = Tabs.firstChild;
 var i   = 0;
 
 do
 {
 if (Tab.tagName == "A")
 {
 i++;
 Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
 Tab.className = (i == id) ? "Active" : "";
 Tab.blur();
 }
 }
 while (Tab = Tab.nextSibling);
 
 // ----- Pages -----
 
 var Pages = TabView.firstChild;
 while (Pages.className != 'Pages') Pages = Pages.nextSibling;
 
 var Page = Pages.firstChild;
 var i    = 0;
 
 do
 {
 if (Page.className == 'Page')
 {
 i++;
 if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
 Page.style.overflow = "auto";
 Page.style.display  = (i == id) ? 'block' : 'none';
 }
 }
 while (Page = Page.nextSibling);
 }
 
 // ----- Functions -------------------------------------------------------------
 
 function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
 function tabview_initialize(TabViewId) { tabview_aux(TabViewId, CurTab); }
 //-->
 [/CODE]

@KramyApr 04.2006 — #You still have a script call in there somewhere.

[CODE]<script type="text/javascript">
 tabview_initialize('TabView');
 </script>[/CODE]

On my Firefox it's flipping tabs, but it gets caught in two endless loops during page load. The code looks mostly Netscape 4 compatible, but then I started thinking...is getElementById supported by Netscape 4? Nope, so that means all that code can be changed. ?

I'm not exactly sure where your panel code is, but I think it's this bunch:

[CODE]<div class="Page1">
 <div class="tri_1"><img src="images/pixel.gif" width="1" height="1" alt="" border="0"></div>
 <table border="0" cellspacing="5" cellpadding="0">
 <tr>
 <td width="104" align="center" valign="middle" class="eleven"><a href="http://www.didax.com/178-2986"><img src="images/images_sm/178-2986thbnl.gif" border="0" alt="Numero Single Pack" align="absmiddle"></a><br><img src="images/pixel.gif" width="1" height="5" alt="" border="0"><br><a href="http://www.didax.com/178-2986">Numero Single Pack</a></td>
 
 <td width="104" align="center" valign="middle" class="eleven"><a href="http://www.didax.com/195-163"><img src="images/images_sm/195-163thbnl.jpg" border="0" alt="Place Value Flip Stand" align="absmiddle"></a><br><img src="images/pixel.gif" width="1" height="5" alt="" border="0"><br><a href="http://www.didax.com/195-163">Place Value Flip Stand</a></td>
 <td width="104" align="center" valign="middle" class="eleven"><a href="http://www.didax.com/2-146"><img src="images/images_sm/2-146thbnl.gif" border="0" alt="Math, Literature and Unifix®" align="absmiddle"></a><br><img src="images/pixel.gif" width="1" height="5" alt="" border="0"><br><a href="http://www.didax.com/2-146">Math, Literature and Unifix®</a></td></tr><tr>
 
 <td width="104" align="center" valign="middle" class="eleven"><a href="http://www.didax.com/2-25"><img src="images/images_sm/2-25thbnl.jpg" border="0" alt="100 Unifix Cubes" align="absmiddle"></a><br><img src="images/pixel.gif" width="1" height="5" alt="" border="0"><br><a href="http://www.didax.com/2-25">100 Unifix Cubes</a></td> 
 
 <td width="104" align="center" valign="middle" class="eleven"><a href="http://www.didax.com/2-5165"><img src="images/images_sm/2-5165thbnl.gif" border="0" alt="Mathematics Today" align="absmiddle"></a><br><img src="images/pixel.gif" width="1" height="5" alt="" border="0"><br><a href="http://www.didax.com/2-5165">Mathematics Today</a></td> 
 
 <td width="104" align="center" valign="middle" class="eleven"><a href="http://www.didax.com/2-5239"><img src="images/images_sm/2-5239thbnl.gif" border="0" alt="Addition" align="absmiddle"></a><br><img src="images/pixel.gif" width="1" height="5" alt="" border="0"><br><a href="http://www.didax.com/2-5239">Addition</a></td> 
 </tr>
 <tr><td align="center" valign="middle" colspan="3" height="12"><img src="images/pixel_mdblue.gif" width="322" height="1" alt="" border="0"></td></tr>
 <tr>
 <td align="center" colspan="3" class="eleven"><span class="elevenbolddkgrey">View Math Products by Grade:</span><br><img src="images/pixel.gif" width="1" height="3" alt="" border="0"><br><a href="http://www.didax.com/shop/searchresults.cfm/GradeID/-1/SubjectID/3/.cfm" title="Pre K">Pre K</a>&nbsp;&nbsp;<a href="http://www.didax.com/shop/searchresults.cfm/GradeID/0/SubjectID/3/.cfm" title="Kindergarten">K</a>&nbsp;&nbsp;<a href="http://www.didax.com/shop/searchresults.cfm/GradeID/1/SubjectID/3/.cfm" title="Grade 1">1</a>&nbsp;&nbsp;<a href="http://www.didax.com/shop/searchresults.cfm/GradeID/2/SubjectID/3/.cfm" title="Grade 2">2</a>&nbsp;&nbsp;<a href="http://www.didax.com/shop/searchresults.cfm/GradeID/3/SubjectID/3/.cfm" title="Grade 3">3</a>&nbsp;&nbsp;<a href="http://www.didax.com/shop/searchresults.cfm/GradeID/4/SubjectID/3/.cfm" title="Grade 4">4</a>&nbsp;&nbsp;<a href="http://www.didax.com/shop/searchresults.cfm/GradeID/5/SubjectID/3/.cfm" title="Grade 5">5</a>&nbsp;&nbsp;<a href="http://www.didax.com/shop/searchresults.cfm/GradeID/6/SubjectID/3/.cfm" title="Grade 6">6</a>&nbsp;&nbsp;<a href="http://www.didax.com/shop/searchresults.cfm/GradeID/7/SubjectID/3/.cfm" title="Grade 7">7</a>&nbsp;&nbsp;<a href="http://www.didax.com/shop/searchresults.cfm/GradeID/8/SubjectID/3/.cfm" title="Grade 8">8</a>&nbsp;&nbsp;<a href="http://www.didax.com/shop/searchresults.cfm/GradeID/9/SubjectID/3/.cfm" title="Grade 9">9</a>&nbsp;&nbsp;<a href="http://www.didax.com/shop/searchresults.cfm/GradeID/10/SubjectID/3/.cfm" title="Grade 10">10</a>&nbsp;&nbsp;<a href="http://www.didax.com/shop/searchresults.cfm/GradeID/11/SubjectID/3/.cfm" title="Grade 11">11</a>&nbsp;&nbsp;<a href="http://www.didax.com/shop/searchresults.cfm/GradeID/12/SubjectID/3/.cfm" title="Grade 12">12</a>&nbsp;&nbsp;<br><img src="images/pixel.gif" width="1" height="10" alt="" border="0"><br><a href="http://www.didax.com/shop/searchresults.cfm/SubjectID/3/CategoryID/1/.cfm" title="Math Products on Sale!" class="elevenboldred">Math Products on Sale!</a></td>
 
 </tr>
 </table>
 </div>[/CODE]

Try assigning an Id to those 3 tabs. Then use getElementById in this fashion.

[CODE]function tabview_aux(IDnumber)
 {
 if(IDnumber != 1) document.getElementById("Tab1").style.display = 'none';
 if(IDnumber != 2) document.getElementById("Tab2").style.display = 'none';
 if(IDnumber != 3) document.getElementById("Tab3").style.display = 'none';
 document.getElementById("Tab"+IDnumber).style.display = 'block';
 }[/CODE]

My guess is that's about all the code you'll need, but if not it isn't too hard to add the style.overflow or other parts. You could also have it accept the current tab if you wanted, and only change things for it.

[CODE]function tabview_aux(iNewTab, iCurTab)
 {
 if(iNewTab != iCurTab)
 {
 var OldTab = document.getElementById('Tab'+iCurTab);
 var NewTab = document.getElementById('Tab'+iNewTab);
 
 OldTab.style.display = 'none';
 NewTab.style.display = 'block';
 }
 }[/CODE]

Hopefully removing the loops will fix them being endless. ?

@slanzaauthorApr 04.2006 — #Kramy,

1. I tried removing that script call but the code fails without it. Here is the link to the original code. [URL=http://www.php-development.ru/javascripts/tab-view.php]http://www.php-development.ru/javascripts/tab-view.php[/URL]

2. I'm not sure what you mean about two endless loops. The only endless loop I see is that it keeps changing the current tab, which is what I want.

I don't really understand Javascript very much, but since the script works fine without the auto flipping of the tabs, I assume the problem exists because I am not passing some variable that is passed when a tab is actually "clicked on".

Would that make any sense?

@KorApr 04.2006 — #Here is the link to the original code[/quote]
I am not sure it is yours, but...:

"Tab View control is a combination of CSS and JavaScript that allows switching between several pages without loading them from server."

Are u sure the phrase is correct? You can not switch, nomatter the method, between several pages without [I]loading[/I] them in a way or another.

You may have previosely loaded, or you may change the session, or you may use AJAX to load them in the same session, but anyway, you must [B]LOAD[/B] them, isn't that? :rolleyes:

@KramyApr 04.2006 — #I'm not getting any problems with the tabs on your site other than it has endless loops that almost lock Firefox up until I click the "Stop Script" button that pops up. No idea why I get it, but it doesn't happen in other browsers, or apparently in [i]your[/i] Firefox, so I guess it's not an issue.

@slanzaauthorApr 04.2006 — #Kor,

The script is not mine. I found it while searching for a way to creating tabs that load data without refreshing the page.

Kramy,

That is strange. The page works well for me in firefox, however in the upper right hand corner of the screen there is a small javascript error icon. If I click on that it loads the error message everytime the tab changes.

Also in #JavaScript _↴

Error in Internet Explorer only xmlhttp request help My PC not recognising Javascript code

Success!

Help @slanza spread the word by sharing this article on Twitter...

Tweet This

Condition Statement Inside Function

11 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Condition Statement Inside Function

11 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #JavaScript _↴