help with simple(?) regexp js function - newbie

[spazzwig]

Hi all,

I have a simple js script to show/hide divs for a tabbed interface. It works
well, but now I'm trying to use it with many multiple instances and hoped
that I could use regexp with it to make it more flexible and lighter in
code.

This is what I have, though it keeps returning an "object required" error (I
assume because it's not matching anything):

function changePopTab (tabname) {
var reg=/\d{2}?/; // the digits are for a day of the month eg 15
= 15th. The "?" is to account for multiple instances of the same date (15a,
15b, ...)
document.getElementById('tab_overview'+reg).style.display = 'none';
document.getElementById('tab_resources'+reg).style.display =
'none';
document.getElementById('tab_'+tabname).style.display = 'block';
}

and for example in the body:

<a ... onclick="changePopTab('overview01');return false; ...></a>
<div id="tab_overview01"...></div>

I guess what I'm trying to do is centralize the js function so that I can
use it with many tab instances (tab_overview01, tab_overview02,
tab_overview03, ...etc) without haveing to declare each ID in the function.

Hope this makes sense, I'm very new at js so any suggestions or alternate
approaches are most welcome.

TIA,

Gabe

|N|O|S|P|A|M| -- onlineq (a t) azonis (d o t) com

ps. I tried using getElementsBySelector and using a css .class instead of a
regexp, but didn't seem to fly (method unknown). Regexp does work with
getElementById I hope?

 

[spazzwig]

I just came across your answer to someone elses very similar question:

function setDivVisibility(visi) {
var divs = document.getElementsByTagName("div");
for (var i=0;i<divs.length;i++) {
if (/docs$/.test(divs.id)) {
div.style.visibility = visi;
}
}
}

setDivVisibility("hidden");

With your answer to my post and the info here I think (hope) I can figure it
out. One last question if you'll indulge me: How would I cache the elements
as you suggest?

Thanks again,
Gabe

|N|O|S|P|A|M| -- onlineq (a t) azonis (d o t) com

 

[spazzwig]

"spazzwig" <[email protected]> writes:

For one thing, you don't need to set the one to "block" inside the loop.
If you just move it outside:
for (var i in divDocs) {
divDocs.style.display = 'none';
}
document.getElementById(visi).style.display = 'block';
it is only executed once.

Oops! That was just sloppy on my part, I should have caught that.

Still, it feels wrong to have to search for the element with id==visi,
when you know the loop has already found it once. So, you can use a
conditional expression (or a full if statement if you are more
comfortable with that):

for (var i in divDocs) {
divDocs.style.display = (divDocs.id == visi)?'block':'none';
}

Now, you tell me that only one is visible at a time, so we don't need
to set all of them to 'none'. So, we just remember the one that is
visible between toggles:

Cool, this is all making more sense to me now.

---
var currentlyVisible;
function initialize() {
currentlyVisible = document.getElementById('theOneThatIsVisibleAtStart');
}

Oops again! I should have been more specific. It's one of the series of Id's
that are visible at start. See my next post, I'll include my adapted code so
you can see what I mean.

function setDivVisibility(visi) {
currentlyVisible.style.display = 'none';
currentlyVisible=document.getElementById(visi);
currentlyVisible.style.display = 'block';
}
---
Call initialize when the page has loaded, so that the "currentlyVisible"
variable points to the one that is visible from the beginning (I assume
there is one). Then each call to setDivVisibility will hide the one that
is visible, and make a new one visible and remember it as

currentlyVisible.

I've adapted this and it works great! Just one thing to change, and that's
the initially visible ID's, which I'm going to ask in a new post with my
code.

Thanks so much! I really appreciate your time to guide me in this.

Gabe

 

[spazzwig]

Awesome! What I have so far works pretty well, just need to adjust one
thing.

Oh, and Lasse... would you like me to credit you in my page code? This is
your code really, so if you do, just let me know what info you want included
in the credit.

Ok, here's what I have:

---
// Create an array of our tabs
var divArray = [];
function cacheDivs() {
var divs = document.getElementsByTagName("div");
for (var i=0;i<divs.length;i++) {
if (/^(tab\_overview|tab\_resources)/.test(divs.id)) {
divArray[divArray.length]=divs;
}
}
for (var i in divArray) {
divArray.style.display = (divArray.id ==
'tab_'+tabname)?'block':'none';
}
}
// Find which tabs are set to open
var openTab;
function initialize() {
openTab = document.getElementById('tab_overview01'); // ** need to change
this so all 'overview' series tabs are open
}
// Function which actually swaps tabs
function changePopTab(tabname) {
openTab.style.display = 'none';
openTab = document.getElementById('tab_'+tabname);
openTab.style.display = 'block';
}
---

---
<body onload="initialize();">

<div id="popup01" .... >
<some content... >
<div id="poptabs">
<div ... >
<a href="javascipt:;" onclick="changePopTab('overview01');return
false;">Overview</a> |
<a href="javascipt:;"
onclick="changePopTab('resources01');return false">Resources &amp; Links</a>
</div>
<div id="tab_overview01" .... >
<content... >
</div>
<div id="tab_resources01" .... >
<content... >
</div>
</div>
</div>
</body>
---

When the page loads, all 'tab_overviewXX' ID's are set as open. Then when
'changePopTab' is called the idea is just to switch the matching
'tab_overviewXX' with 'tab_resourcesXX' (i.e. tab_overview08 <-->
tab_resources08). So the tabs are to toggle information in a pop-up 'layer',
and there are several pop-up 'layers' in a page.

I'm sorry I wasn't as clear earlier, my head was in a bit of a fog (lack of
sleep). If you can help me get this last bit sorted out that would be great!
I have learned a lot already from this discussion, but some of it is a bit
over my head still.

Gabe