help with simple(?) regexp js function - newbie

Discussion in 'Javascript' started by spazzwig, Aug 24, 2003.

  1. spazzwig

    spazzwig Guest

    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, Aug 24, 2003
    #1
    1. Advertising

  2. spazzwig

    spazzwig Guest

    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");
    > ---
    >
    > 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
     
    spazzwig, Aug 24, 2003
    #2
    1. Advertising

  3. spazzwig

    spazzwig Guest

    "Lasse Reichstein Nielsen" <> wrote in message
    news:...
    > "spazzwig" <> 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.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
    --

    |N|O|S|P|A|M| -- onlineq (a t) azonis (d o t) com
     
    spazzwig, Aug 25, 2003
    #3
  4. spazzwig

    spazzwig Guest

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

    |N|O|S|P|A|M| -- onlineq (a t) azonis (d o t) com
     
    spazzwig, Aug 25, 2003
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. drasko

    Simple RegExp function

    drasko, Jul 17, 2006, in forum: C Programming
    Replies:
    4
    Views:
    267
    drasko
    Jul 20, 2006
  2. Greg Hurrell
    Replies:
    4
    Views:
    171
    James Edward Gray II
    Feb 14, 2007
  3. Joao Silva
    Replies:
    16
    Views:
    391
    7stud --
    Aug 21, 2009
  4. Daedalus
    Replies:
    14
    Views:
    193
    Daedalus
    Jun 25, 2004
  5. Kenneth Brun Nielsen

    Newbie: Simple conditional on regexp match

    Kenneth Brun Nielsen, Aug 6, 2008, in forum: Perl Misc
    Replies:
    3
    Views:
    141
Loading...

Share This Page