www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] Hide image question - Noob

  1. #1
    Join Date
    Nov 2009
    Posts
    7

    resolved [RESOLVED] Hide image question - Noob

    Hi Guys,

    Im messing with some code and Im a noob at best.

    Code:
    <script>
    var elements =document.getElementsByTagName('*');
      for (i=0; i<elements.length; i++){
        if (elements[i].className=='btnContinue'){
          elements[i].style.display="none"
    }
    }
    which I understand will search all elements of the page , find the class name given and hide it.

    I found the button name using fiddler:

    Code:
    <input type="button" onclick="javascript: open_url(items.asp');" name="btnContinue" id="btnContinue" title="Click here to continue to items" value="Continue items" onmouseout="javascript: this.className='big_button_z';" onmouseover="javascript: this.className='big_button_z_hover';" class="big_button_z">
    here's the rub - I need to hide an image but all fiddler tells me is the below and Im not sure how I can use the same code to hide it..I have tried ID but it fails.

    Code:
    <img border="1" align="absmiddle" title="plus" style="cursor:pointer;CURSOR:hand" src="plus.gif" alt="plus image" onclick="javascript:window.do(2);" id="Plus">
    Can I use the same piece of code CORRECTLY or is there a different snippet I can use for images?

    Thanks in advance..

  2. #2
    Join Date
    Nov 2010
    Posts
    1,029
    if you just want to hide that one image you can use its id like this:

    Code:
    document.getElementById("Plus").style.display="none"
    (no need for the for loop as IDs are unique)

  3. #3
    Join Date
    Nov 2009
    Posts
    7

    Talking

    thats insane!

    Works like a charm - thanks so much xelawho.

    I embarrassingly tried different over complicated snippets for 5 hours straight.


    Top man

  4. #4
    Join Date
    Nov 2010
    Posts
    1,029
    generally speaking, I tend to give up after a couple of hours and post a question here, but we all have our own methods

    in case you're curious, if your element doesn't have an id for some reason and you can't give it one, you can use the other loop with all sorts of attributes:

    Code:
    <img border="1" align="absmiddle" title="plus" style="cursor:pointer;CURSOR:hand" src="plus.gif" alt="plus image" onclick="javascript:window.do(2);" id="Plus">
    
    var elements =document.getElementsByTagName('*');
      for (i=0; i<elements.length; i++){
        if (elements[i].title=='plus'){
          elements[i].style.display="none"
    }
    }
    
    var elements =document.getElementsByTagName('*');
      for (i=0; i<elements.length; i++){
        if (elements[i].alt=="plus image"){
          elements[i].style.display="none"
    }
    }
    but be aware when you're doing this - any other elements with that title or alt will also be hidden, which may be a good or bad thing.

    to use the loop with className you would have to add a class to the img tags attributes, like so:
    Code:
    <img border="1" class="something" align="absmiddle" title="plus" style="cursor:pointer;CURSOR:hand" src="plus.gif" alt="plus image" onclick="javascript:window.do(2);" id="Plus">
    class is very useful when you want to be able to manipulate multiple elements at the same time, id is handy when you want to pick one element out quickly and perform an action only on it.

    hope that helps!

  5. #5
    Join Date
    Nov 2009
    Posts
    7
    Did I mention Im a stubborn noob? I subscribe to "solve it yourself and you will never forget it" Its tough at times

    I'm going to store your examples they will definitely be used.

    The type of site I work with can only be changed with this type of script ran before or after the page loads - I'm not able/allowed to edit core pages so these examples are brilliant.

    If I could I would have just carved up the asp page and saved myself BUT I did learn some great pointers from you - thanks so much again.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles