SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Highlight the every instance of the same div

    I've been searching and playing with this script for the past few hours and finally got it work!

    Code:
    <script type="text/javascript">
    function fnSelect(objId)
    {
       fnDeSelect();
       if (document.selection) 
       {
          var range = document.body.createTextRange();
          range.moveToElementText(document.getElementById(objId));
          range.select();
       }
       else if (window.getSelection) 
       {
          var range = document.createRange();
          range.selectNode(document.getElementById(objId));
          window.getSelection().addRange(range);
       }
    }
    function fnDeSelect() 
    {
       if (document.selection)
                 document.selection.empty();
       else if (window.getSelection)
                  window.getSelection().removeAllRanges();
    } 
    </script>
    Code:
    <div id="mydiv">Hi, How are you?</div>
    <input type="button" value="Copy Code" onClick="fnSelect('mydiv')">
    But for the life of my I can't figure out how to grab all instances of the same div. For example, the function will only grab "Hi,"

    Code:
    <div id="mydiv">Hi,</div>
    <div id="div2"></div>
    <div id="mydiv">how</div>
    <div id="div2"></div>
    <div id="mydiv">are</div>
    <div id="div2"></div>
    <div id="mydiv">you?</div>
    however, what I need is a way to get all instances of the same div. Can someone please help me out with this if they have a second?

    Please disregard the same post at the bottom part of this thread http://www.sitepoint.com/forums/showthread.php?t=687547. I can't figure out how to delete it.

  2. #2
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I've just responded to that post.

    Basically ... id is somewhat like a Highlander - there can be only one (of each name).

    If there are to be several divs with the same "id" then use class instead. (Or perhaps even name?)
    Ian Anderson
    www.siteguru.co.uk

  3. #3
    SitePoint Enthusiast TriLLi's Avatar
    Join Date
    Feb 2010
    Location
    BiH, Bugojno
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    you can do it with simple javascript
    Code JavaScript:
    function mark_same_elements(id, tag)
    {
      var el = document.getElementsByTagName(tag);
      for(var i = 0; i < el.length; i++)
     {
       if(el[i].getAttribute('id').toLowerCase() == id.toLowerCase())
       {
           el[i].setAttribute('class', 'same-div');
       }
    }
    }

    enjoy

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks - I appreciate it. But being a complete noob I can't get it to work. In fact, I can't select anything now. This is what I have:

    Code:
    <script type="text/javascript">
    function mark_same_elements()
    {
      fnDeSelect();
      var el = document.getElementById('mydiv');
      for(var i = 0; i < el.length; i++)
     {
       if(el[i].getAttribute('mydiv')() == id())
       {
           el[i].setAttribute('classassignedtodiv', 'mydiv');
       }
    }
    }
    function fnDeSelect() 
    {
       if (document.selection)
                 document.selection.empty();
       else if (window.getSelection)
                  window.getSelection().removeAllRanges();
    } 
    
    </script>
    I used the 'fnDeSelect' function correctly? Being a new php guy I can see the code does the following?

    var el = document.getElementById('mydiv');
    creates a variable 'el' and gets the div 'mydiv'

    if(el[i].getAttribute('rawresults')() == id())
    An if statement for the checking the variable 'el' to see if it is equal

    el[i].setAttribute('classassignedtodiv', 'mydiv');
    if it is then it changes the attribute?

    Here is the button:
    Code:
    <input type="button" value="Copy Code" onClick="mark_same_elements('mydiv')">
    Should it be:
    Code:
    <input type="button" value="Copy Code" onClick="mark_same_elements()">
    ?

    To reiterate all I want to do is have a button that grabs every instance of the same div id (not multiple divs or classes). The trick is that the same id may be spread throughout the page:

    Code:
    <div id="mydiv">Hi,</div>//Highlight me
    
    <div id="div2"></div>
    
    <div id="mydiv">how</div>//Highlight me
    
    <div id="div2"></div>
    
    <div id="mydiv">are</div>//Highlight me
    
    <div id="div2"></div>
    
    <div id="mydiv">you?</div>//Highlight me

  5. #5
    SitePoint Enthusiast TriLLi's Avatar
    Join Date
    Feb 2010
    Location
    BiH, Bugojno
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I will help you
    Code:
    <div id="mydiv">Hi,</div>//Highlight me
    
    <div id="div2"></div>
    
    <div id="mydiv">how</div>//Highlight me
    
    <div id="div2"></div>
    
    <div id="mydiv">are</div>//Highlight me
    
    <div id="div2"></div>
    
    <div id="mydiv">you?</div>//Highlight me
    and button to mark all div-s with id "mydiv"
    Code:
    <input type="button" value="Copy Code" onClick="mark_same_elements('mydiv', 'div')">
    Code CSS:
    .highlight
    {
      border: 1px solid green !important;
    }

    Code JavaScript:
    function mark_same_elements(id, tag)
    {
     var el = document.getElementsByTagName(tag);
     for(var i = 0; i < el.length; i++)
          {
              if(el[i].getAttribute('id').toLowerCase() == id.toLowerCase()) {
                   el[i].className = el[i].className + ' highlight';
               }
           }
    }

    when this function is called all elements with tag name provided as parameter and with id provided as parameter will contain class 'highlight' whichwill assign green border to them.

    You can change fields of this class for example you can add also background but be sure to use !important after field value in order to overwrite same attributes inherited by selected element.

    I hope this will work now

  6. #6
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I'll say this again - YOU CAN ONLY HAVE ONE DIV WITH THE ID "MYDIV"

    If you need more than one div with the same reference, then use either class="mydiv" or name="mydiv". Here's a quick example ...

    Code:
    <div class="mydiv">Hi,</div>
    <div class="div2"></div>
    <div class="mydiv">how</div>
    <div class="div2"></div>
    <div class="mydiv">are</div>
    <div class="div2"></div>
    <div class="mydiv">you?</div>
    <div name="mydiv">Hi,</div>
    <div name="div2"></div>
    <div name="mydiv">how</div>
    <div name="div2"></div>
    <div name="mydiv">are</div>
    <div name="div2"></div>
    <div name="mydiv">you</div>
    <div name="mydiv">now?</div>
    <script type="text/javascript">
    var cls = document.getElementsByClassName("mydiv");
    var nms = document.getElementsByName("mydiv");
    alert ("We have "+cls.length+" mydiv classes, and "+nms.length+" mydiv names");
    </script>
    Ian Anderson
    www.siteguru.co.uk

  7. #7
    SitePoint Enthusiast TriLLi's Avatar
    Join Date
    Feb 2010
    Location
    BiH, Bugojno
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and also one tip HTML element attribute id should be unique on whole page, and javascript method .getElementById(ID) will return first element with that ID because it works with the presumption that there are no duplicates in HTML. This rule is related to all elements not just those with same tag name.

    http://www.w3schools.com/tags/att_standard_id.asp

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you but this noob is still lost.

    TriLLi - your solution works however does not allow the user to right-click as a means of copying. The original script does. It also only works when the 'div' code already exists in the html page - where mine is being echoed out through php. The original script is able to highlight the exhoed text.

    siteguru - your script invokes a pop-up, I'm not too sure where to take it from there.

    Nevertheless, I do appreciate the time both of you have invested.

    So if .getElementById(ID) will only return the first instance the id and the fact that I can only have one div with one id then changing it to a class seems like the easy first step.

    TriLLi - I've been playing with your original code to see if I can get it to work:

    Code:
    <script type="text/javascript">
    function mark_same_elements(id, tag)
    {
      var el = document.getElementsByTagName(tag);
      for(var i = 0; i < el.length; i++)
     {
       if(el[i].getAttribute('mydiv').toLowerCase() == id.toLowerCase())
       {
           el[i].setAttribute('myclass', 'mydiv');
       }
    }
    }
    </script>
    
    <input type="button" value="Copy Code" onClick="mark_same_elements('mydiv', 'myclass')">
    
    <div class="myclass" id="mydiv">
    
    <?PHP echo "Hello World!" ?>
    
    </div>

  9. #9
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a crystal clear example. Through this in your browser and it will all make sense...

    Code:
    <script type="text/javascript">
    function fnSelect(objId)
    {
       fnDeSelect();
       if (document.selection) 
       {
          var range = document.body.createTextRange();
          range.moveToElementText(document.getElementById(objId));
          range.select();
       }
       else if (window.getSelection) 
       {
          var range = document.createRange();
          range.selectNode(document.getElementById(objId));
          window.getSelection().addRange(range);
       }
    }
    function fnDeSelect() 
    {
       if (document.selection)
                 document.selection.empty();
       else if (window.getSelection)
                  window.getSelection().removeAllRanges();
    } 
    </script>
    
    
    <h1>How Do I Only Highlight the Numbers?</h1>
    <form>
    <input type="button" value="Select/Highlight" onClick="fnSelect('mydiv')">
    
    
    <?PHP
    	   
    
    $i = 0; 
    
    while ($i <= 100){
    	ob_flush();
    	flush();
    	$i++;
    echo "<div class=\"my class\" id=\"mydiv\">$i</div>";
    echo "<br />";
    echo "<div id=\"anotherdiv\">I Like Numbers</div>";
    echo "<br />";
    
    // wait for 1 second
    usleep(1000000);
    
    }
    
    ?>
    </form>

  10. #10
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    ]I don't think any of us was struggling to understand what you were asking. Rather we were trying to lead you to the answer, not just give you it. It seems we failed.
    Code PHP:
    <script type="text/javascript">
    function highlight (item) {
    	var items = document.getElementsByName (item);
    	var j=items.length;
    	for (var i=0; i<j; i++) {
    		items[i].className = "highlight";
    	}
    }
    </script>
    <style type="text/css">
    .highlight {
    	background: #FF0000;
    	color: #0000FF;
    }
    </style>
    <h1>This is one way to highlight the target DIVs</h1>
    <form>
    <input type="button" value="Select/Highlight" onClick="highlight('thisone')"><br><br>
     
    <?php
    $i = 0; 
     
    while ($i < 20){
    	$i++;
    echo '<div name="thisone">Highlight this DIV - '.$i.'</div>';
    echo '<br />';
    echo '<div>I Like Numbers</div>';
    echo '<br />';
    }
    ?>
    </form>
    Ian Anderson
    www.siteguru.co.uk

  11. #11
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:


    Quote Originally Posted by soma56 View Post
    I can't figure out how to delete it.
    You can't, at least not later than 30 minutes after you've created the post. In that time you can click "edit" and then "delete".
    I've closed the other thread with a link to this one
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  12. #12
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, I've failed for not being specific. I figured out how to use your initial code to highlight the div. I understand now that it must be a name or class. The way I was highlighting allowed me to click CTRL-C to copy the contents of the highlighted div. With your example it doesn't.

    This is ultimately what I'm searching for.

  13. #13
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you guys given up on me

    I'd be willing to pay a few bucks if someone can figure this out.


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
  •