SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Mar 2002
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    finding PART of an Id and returning based on the result

    Hi there,

    I'm trying to modify this code (below) so that it does what it does with the var "thisLevel" already, but also reads PART of the Id to make a decision as to what image to associate with it (a bullet actually). Currently, there is one 'plus' and one 'minus' image bullet for the whole thing, but <b>I'd like different levels of menuitems to use different images for the bullets</b>.

    My < div > id's in the Body section are all based on the following structure: tree0_menuitemA, tree1_menuitemA, tree5_menuitemC etc.

    For example, if the Id being acted on with "_levelId" in the code is "tree3_menuitem6" or if it is "tree2_menuitem1", I want it to do what it already does in the first part, but to assign a different image for the returned value based on whether it is a"tree2_" or a "tree3_" (or "tree1_", "tree2_", etc.), i.e. so that:

    "this.Img.src="bulPlus_tree0.src" for all "tree0_" menuitems, and:
    "this.Img.src="bulPlus_tree1.src" for all "tree1_" menuitems.

    In old BASIC I'd use something like "Left$" and "Str$(5)" together, and write a routine that goes like: if "tree0_" then this.Img.src="bulPlus_tree0.src

    ...but don't remember exactly how. Here's the code:

    var bulPlus_tree0 = new Image();
    bulPlus_tree0.src = "./images/bulPlus_tree0.png"
    var bulMinus_tree0 = new Image();
    bulMinus_tree0.src = "./images/bulMinus_tree0.png"

    function hideLevel( _levelId, _imgId ) {
    var thisLevel = document.getElementById( _levelId );
    var thisImg = document.getElementById( _imgId );
    thisLevel.style.display = "none";
    thisImg.src = bulPlus_tree0.src;
    }

    function showLevel( _levelId, _imgId ) {
    var thisLevel = document.getElementById( _levelId );
    var thisImg = document.getElementById( _imgId );
    if ( thisLevel.style.display == "none") {
    thisLevel.style.display = "block";
    thisImg.src = bulMinus_tree0.src;
    }



    Any help muchos appreciated

    Shawn
    Last edited by shawn gibson; Mar 11, 2002 at 21:06.

  2. #2
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    yet again no time

    Sorry, I've NEVER got time to read through the posts,
    so i just read the titles and give a quick answer
    based on them. Sorry if that means my answer is out of
    the normal.

    I often use parts of id's to reference other objects.

    I have recently changed my approach to this.

    say you have the following

    <div id="pen"></div>
    <div id="pen_holder" onmouseover="evt();"></div>
    <div id="pen_shooter"></div>
    </div>

    and you want to refer to shooter from holder... but the pen bit's going to change... (ie you have a cat_holder, dog_holder etc) ... well then instead of using id refs, you could try using dom hierarchy:

    fucntion evt(){
    var oref = document.window.event.srcElement;
    var pref = oref.offsetParent;
    var shooter = pref.lastChild;
    shooter.innerHTML = "This shows in shooter";
    }

    Using this method there need NOT be any id's or names in the divs, since the dom hierarchy handles redirection.

    however if you CAN'T use this kind of method, and the two objects are not related well in the dom, then you may well use id refs.

    in our example:

    var de = document.getElementById;
    function evt(){
    var idref = document.window.event.srcElement.id;
    var U_arr = idref.split(/_/);
    var obj_ref = de(U_arr[0]+'_shooter');
    obj_ref.style.backgroundColor='#9900CC';
    }
    NOTES:
    In case you're not used to it...
    U_arr is an array (variables always split into
    arrays if there are multiple results)
    so effectively U_arr=new Array('pen','holder');

    using this you could reference other holders or other pens.

    eg:
    var holders=document.getElementsByTagName('DIV');
    for (i=0;i<holders.length;i++){
    if (holders[i].match(/_holder/){
    de(holders[i]).innerHTML='Another Holder!';
    }
    }

    I don't know if this is useful, and i've not tested ANY of the javascript, it's all off the top of my head,
    but good luck

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  3. #3
    SitePoint Member
    Join Date
    Mar 2002
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well it's sure a hell of a lot further ahead than I am right now, so whether it works or not, deconstructing it will help a LOT.

    Thanks very much Flawless.

    shawn

  4. #4
    SitePoint Member
    Join Date
    Mar 2002
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK that is way beyond me. I think you gave me too many options (a good thing, but not for a dummy like me).

    Let's look at this another way. say I have the following id's:

    tree0_menuitem1
    tree0_menuitem2
    tree1_menuitem1
    tree1_menuitem2
    tree1_menuitem3
    tree2_menuitem1
    ...
    tree3_menuitem...
    ...
    tree4_menuitem...

    I want to change the "thisImg.src = bulPlus_tree0.src"
    in the following code to reflect the "treeX_"

    Here's the original code:

    function hideLevel( _levelId, _imgId ) {
    var thisLevel = document.getElementById( _levelId );
    var thisImg = document.getElementById( _imgId );
    thisLevel.style.display = "none";
    thisImg.src = bulPlus_tree0.src;
    }


    Since I don't know javascript well-enough yet, here's a totally non-functional example of what I'm trying to achieve, modifying the parts necessary (into english) to do what I want:

    function hideLevel( _levelId, _imgId ) {
    var thisLevel = document.getElementById( _levelId );
    var thisImg = document.getElementById( _imgId );
    thisLevel.style.display = "none";
    IF "_levelId" INCLUDES "tree0_" then thisImg.src = bulPlus_tree0.src ELSE IF "_levelId" INCLUDES "tree1_" then thisImg.src = bulPlus_tree1.src ELSE IF "_levelId" INCLUDES "tree2_" then thisImg.src = bulPlus_tree2.src
    }

    i.e. replace "thisImg.src = bulPlus_tree0.src; " in the original with:

    IF "_levelId" INCLUDES "tree0_" then thisImg.src = bulPlus_tree0.src ELSE IF "_levelId" INCLUDES "tree1_" then thisImg.src = bulPlus_tree1.src ELSE IF "_levelId" INCLUDES "tree2_" then thisImg.src = bulPlus_tree2.src

    Sorry for being such a dummy here. I'm totally new at this.
    Last edited by shawn gibson; Mar 12, 2002 at 06:29.

  5. #5
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IF "_levelId" INCLUDES "tree0_" then thisImg.src = bulPlus_tree0.src ELSE IF "_levelId" INCLUDES "tree1_" then thisImg.src = bulPlus_tree1.src ELSE IF "_levelId" INCLUDES "tree2_" then thisImg.src = bulPlus_tree2.src
    }

    equates to:

    var level_numb=substr(_levelId, 5, 6);
    thisImg.src=eval('bulPlus_tree'+level_numb+'.src);

    you must make sure you are calling the function with hidelevel(this.id, ...)
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •