SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Identifying any element that has a title attribute

    Anyone know if there's a simple way of revealing all elements on a page that have a title attribute? I want to stick a script in a favelet to use as a development tool (highlight all titled elements with red border, etc)

    I don't want it to be limited just to links or form elements.

    If there's not something already out there, I'll probably have a hack at some existing favelets I have on my site, but no harm in asking if one's out there already, eh?
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is kind of what you wanted, but it relies on you specifying what type of tag you want to check: DEMO
    Code:
    <html>
      <head>
    	<title>Show Tags (Specified) with Title</title>
    	<script language="JavaScript" type="text/javascript">
    	<!--
    	  function ShowTags(){
    	 // Must specify tag-name here
    		tagName = 'div';
    		numTags = document.getElementsByTagName(tagName).length;
    		tagArray = document.getElementsByTagName('div');
    		
    		for (i=0;i<numTags;i++) {
    		  if (tagArray.item(i).title !== ""){
    			tagArray.item(i).style.border="1px solid red";
    		  }
    		 }
    	  }
    	//-->
    	</script>
      </head>
      <body onLoad="ShowTags();">
    	<div>No title</div>
    	<div>No title</div>
    	<div title="blah">Title</div>
    	<div>No title</div>
      </body>
    </html>
    However if there's no way of finding ALL tags (not saying that there isn't, just that I'm not aware of it) then you could probably make an array of all tags to be checked and run it through a loop.


    Andy
    From the English nation to a US location.

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Andy beat me to the punch
    but here's what I had...
    Code:
    /* Node Traversal Demo  
       Traverse all Element nodes and set a red border on
       all elements whose title attribute has a value.
    */
    
    window.onload = function()
    {
      /* First we see if the browser supports the
         methods and properties we will use.
         Then we walk the tree starting at document.body
         and visit each element with the highlight function.
      */
      var b = document.body;
      if (b.getAttribute && b.nodeType && b.firstChild) {
        xWalkTree(document.body, highlight);
      }
    }
    
    function highlight(node)
    {
      var t = node.getAttribute('title');
      if (t && t.length) {
        node.style.border = '1px solid red';
      }
    }
    
    /* xWalkTree()
       Traverse the subtree starting at oNode
       and pass each Element node to fnVisit.
    */
    function xWalkTree(oNode, fnVisit)
    {
      if (oNode) {
        if (oNode.nodeType == 1) {fnVisit(oNode);}
        for (var c = oNode.firstChild; c; c = c.nextSibling) {
          xWalkTree(c, fnVisit);
        }
      }
    }

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by awestmoreland
    However if there's no way of finding ALL tags (not saying that there isn't, just that I'm not aware of it)
    document.getElementsByTagName(*) should work I believe .

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What Andy and Vinnie have suggested may be more efficient than mine since I use a recursive function - I'm not sure.

    At any rate, here's a demo of my code above: Node Traversal Demo

  6. #6
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lloydi
    Anyone know if there's a simple way of revealing all elements on a page that have a title attribute?
    I made a simple function that does what you want:
    Code:
    function getTitles()
    {
     var _t=document.getElementsByTagName('*');
    for(var i=0;i<_t.length;i++){
     if(_t[i].getAttribute('title'))
     void(_t[i].style.border='1px solid red');
     }
    }
    Quote Originally Posted by lloydi
    I want to stick a script in a favelet to use as a development tool (highlight all titled elements with red border, etc)
    Here's an example inline inside an href for easy bookmarking:
    http://www.xdevdesign.com/getTitleAttributes.htm

    Thanks for the inquiry by the way. I'm going to use it myself
    ... great idea!

    -xDev

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    xDev's is short and sweet - just right for a bookmark Nice

  8. #8
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    document.getElementsByTagName(*) should work I believe .
    You know, I didn't even try that because it seemed so simple


    Cheers,

    Andy
    From the English nation to a US location.

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This thread got me to experimenting with bookmarklets. But... should I replace all ' ' (space chars) with %20 ? Opera doesn't like it.

  10. #10
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's just IE that does that when you bookmark it. Opera and Mozilla don't use the escape sequences. I think you may have been copying the bookmark url property from ie. If you right-click the link (add link to bookmarks) while in Opera a window pops up to show you the address and stuff before you commit the action... don't see any %20's.

    Cool bookmark by the way. Could be very useful in debugging.
    I get an error in IE6 upon clicking evaluate:
    Error: 'this.form.xDebugTA.value' is null or not an object

    Not sure, but I thought you had to have uppercase arguments for ie to create, append elements or do anything with the DOM:
    document.createElement('FORM');

    I have a convention when making them. I usually define a variable with an underscore before it, i.e. _i, _j or whatever. The reason is that if you go on someone's page and try and use the bookmark, there may be conflicts with the variables if there are any scripts on their page - vars like str, msg, i, a, b etc. and such could cause problems cause everyone uses the same name.

    You might have known this before, IE6 only allows you to have a maximum of 480 characters. Mozilla you can have alot more, can't remember exactly.

    -xDev

  11. #11
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great little tool for condensing js code:
    http://www.brainjar.com/js/crunch/demo.html

  12. #12
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Favelet? Bookmarklet?
    I thought that you were all talking of adding pages to your list of favourites, but I guess you're not.

    Is this a bit of code that will work against the current page when selected from a toolbar or something?


    Andy
    From the English nation to a US location.

  13. #13
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by awestmoreland
    Is this a bit of code that will work against the current page when selected from a toolbar or something?
    Yep! The code is within a link and called by the javascript: protocol in the href. So if you drag the link, right-click and add to Favorites every time you go to a page you can open up your Favorites and click on it just like any other link. Except now you do a javascript on the current page because that's what was in the link to begin with. Try it out.

    http://www.google.com/search?q=Bookmarklets

    The code I made to highlight all the title attributes on the page is now a part of my favorites/bookmarks and I can surf to any page and call it just like a regular favorite.

    -xDev

  14. #14
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xDev
    The code I made to highlight all the title attributes on the page is now a part of my favorites/bookmarks and I can surf to any page and call it just like a regular favorite.

    -xDev
    And it works like a dream - very useful!

    Thanks for doing this - it was far more simple than I thought and can easily be tweaked to do a number of other useful things
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback

  15. #15
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    xDev, thanks for the tips. I made some changes per your suggestions, but I haven't had time to do much with it fun stuff tho.

  16. #16
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot guys. It's good to be appreciated especially when I respect what both of you do so much. Both of your sites are wonderful contributions to web design/development and show us better ways to proceed into the future

    Cheers,
    -xDev

  17. #17
    The doctor is in... silver trophy MarcusJT's Avatar
    Join Date
    Jan 2002
    Location
    London
    Posts
    3,509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    FYI, "bookmarklets" are also often referred to as "favelets", so searching for that will yield yet more results (although some may be IE only).
    MarcusJT
    - former ASP web developer / former SPF "ASP Guru"
    - *very* old blog with some useful ASP code

    - Please think, Google, and search these forums before posting!

  18. #18
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've made quite a few changes to my bookmarklets experiment. :)

    Quote Originally Posted by xDev
    Cool bookmark by the way. Could be very useful in debugging.
    I get an error in IE6 upon clicking evaluate:
    Error: 'this.form.xDebugTA.value' is null or not an object
    I think I've fixed that now. At least, it works for me with IE6/Win2K.

    Quote Originally Posted by xDev
    Not sure, but I thought you had to have uppercase arguments for ie to create, append elements or do anything with the DOM:
    document.createElement('FORM');
    Thanks, I made that change.

    Quote Originally Posted by xDev
    I have a convention when making them. I usually define a variable with an underscore before it, i.e. _i, _j or whatever. The reason is that if you go on someone's page and try and use the bookmark, there may be conflicts with the variables if there are any scripts on their page - vars like str, msg, i, a, b etc. and such could cause problems cause everyone uses the same name.
    Good advice. I had enclosed my variable declarations with curly braces, like this:
    Code:
    {
      var f = document.createElement('FORM');
      f.onsubmit = 'return false';
      var t = document.createElement('TEXTAREA');
      t.id='xDebugTA';
      t.name='xDebugTA';
      t.rows='20';
      t.cols='60';
      var b = document.createElement('INPUT');
      b.type = 'button';
      b.value = 'Evaluate';
      b.onclick = function() {eval(this.form.xDebugTA.value);};
      f.appendChild(t);
      f.appendChild(b);
      document.body.appendChild(f);
    }
    I was thinking that the braces defined a new 'local' scope and the variables would not be global. Of course, I was confusing javascript with C :) so now I just made a function out of it to minimize global variable conflicts. Still needs testing of course ;)
    Code:
    function xEvalTA_load()
    {
      var f = document.createElement('FORM');
      f.onsubmit = 'return false';
      var t = document.createElement('TEXTAREA');
      t.id='xDebugTA';
      t.name='xDebugTA';
      t.rows='20';
      t.cols='60';
      var b = document.createElement('INPUT');
      b.type = 'button';
      b.value = 'Evaluate';
      b.onclick = function() {eval(this.form.xDebugTA.value);};
      f.appendChild(t);
      f.appendChild(b);
      document.body.appendChild(f);
    }
    xEvalTA_load();
    Quote Originally Posted by xDev
    You might have known this before, IE6 only allows you to have a maximum of 480 characters. Mozilla you can have alot more, can't remember exactly.
    I separated my functions into different bookmarklets. Thanks for the tip.


    Thanks to everyone for their contributions to this thread. I think it turned out to be very informative (and fun) for all of us :)


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
  •