Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > help with simple(?) regexp js function - newbie

Reply
Thread Tools

help with simple(?) regexp js function - newbie

 
 
spazzwig
Guest
Posts: n/a
 
      08-24-2003
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.disp lay = '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?


 
Reply With Quote
 
 
 
 
spazzwig
Guest
Posts: n/a
 
      08-24-2003
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[i].id)) {
> div.style.visibility = visi;
> }
> }
> }
>
> setDivVisibility("hidden");
> ---
>
> If you plan on doing this often, you should probably cache the elements
> once instead of using getElementsByTagName repeatedly.


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



 
Reply With Quote
 
 
 
 
spazzwig
Guest
Posts: n/a
 
      08-25-2003

"Lasse Reichstein Nielsen" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> "spazzwig" <(E-Mail Removed)> writes:


< snip>

> 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[i].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[i].style.display = (divDocs[i].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('theOneThatIsVisibleAtStar t');
> }


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
--

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


 
Reply With Quote
 
spazzwig
Guest
Posts: n/a
 
      08-25-2003
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[i].id)) {
divArray[divArray.length]=divs[i];
}
}
for (var i in divArray) {
divArray[i].style.display = (divArray[i].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_resources0. 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
--

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



 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
new RegExp().test() or just RegExp().test() Matěj Cepl Javascript 3 11-24-2009 02:41 PM
[regexp] How to convert string "/regexp/i" to /regexp/i - ? Joao Silva Ruby 16 08-21-2009 05:52 PM
Ruby 1.9 - ArgumentError: incompatible encoding regexp match(US-ASCII regexp with ISO-2022-JP string) Mikel Lindsaar Ruby 0 03-31-2008 10:27 AM
Programmatically turning a Regexp into an anchored Regexp Greg Hurrell Ruby 4 02-14-2007 06:56 PM
RegExp.exec() returns null when there is a match - a JavaScript RegExp bug? Uldis Bojars Javascript 2 12-17-2006 09:59 PM



Advertisments