SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    San Francisco
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Setting borders in bookmarklets?

    I've just created a bookmarklet for Firefox 8 (and possibly other browsers, but I tested it in Firefox) to aid in checking for appropriate alt attributes on images.

    javascript:var%20imgs%20=%20document.getElementsByTagName('img');for%20(i=0;i<imgs.length;i++)%7Bif%20(imgs.item(i).hasAttribute('alt'))%7Bif%20(imgs.item(i).getAttribute('alt')=='')%7Bimgs.item(i).setAttribute('title','***%20empty%20alt%20attribute%20***');%7Delse%7Bimgs.item(i).setAttribute('title',imgs.item(i).getAttribute('alt'));%7D%7Delse%7Bimgs.item(i).setAttribute('title','***%20no%20alt%20attribute%20***');%7D%7D//released%20under%20GPL%203.0

    This copies information about the alt attribute on an image to a title attribute in order to allow cursoring over and seeing the contents or lack thereof as a tooltip.

    Here's where I hit the wall: I'd like to add a visual cue as well in the form of borders around each image. But when I try the following code:

    javascript:var%20imgs%20=%20document.getElementsByTagName('img');for%20(i=0;i<imgs.length;i++)%7Bif%20(imgs.item(i).hasAttribute('alt'))%7Bif%20(imgs.item(i).getAttribute('alt')=='')%7Bimgs.item(i).setAttribute('title','***%20empty%20alt%20attribute%20***');imgs.item(i).style.border='2px%20dotted%20black';%7Delse%7Bimgs.item(i).setAttribute('title',imgs.item(i).getAttribute('alt'));imgs.item(i).style.border='2px%20dashed%20green';%7D%7Delse%7Bimgs.item(i).setAttribute('title','***%20no%20alt%20attribute%20***');imgs.item(i).style.border='2px%20solid%20red';%7D%7D//released%20under%20GPL%203.0

    instead of drawing a border, it goes to a new page with the bookmarklet script in the location bar and "2px dotted black" as the page content. No JavaScript errors from this in the error console, either. Any ideas how to get it to set the border attributes on all images instead?

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Try putting your bookmarklet in a self-executing function

    Code:
    (function() { /* Code here */ })();
    That ought to do the trick.

    You might also be interested in Eric Meyer's "Diagnostic CSS" http://meyerweb.com/eric/tools/css/diagnostics/
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    San Francisco
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. It's working now. Here's what I wound up with:

    javascript:(function()%20{var%20imgs%20=%20document.getElementsByTagName('img');for%20(i=0;i<imgs.length;i++){if%20(imgs.item(i).hasAttribute('alt')){if%20(imgs.item(i).getAttribute('alt')==''){imgs.item(i).setAttribute('title','***%20empty%20alt%20attribute%20***');imgs.item(i).style.border='2px%20dotted%20black';}else%20if(imgs.item(i).getAttribute('alt')=='%20'){imgs.item(i).setAttribute('title','***%20space%20alt%20attribute%20***');imgs.item(i).style.border='2px%20dotted%20orange';}else{imgs.item(i).setAttribute('title',imgs.item(i).getAttribute('alt'));imgs.item(i).style.border='2px%20dashed%20green';}}else{imgs.item(i).setAttribute('title','***%20no%20alt%20attribute%20***');imgs.item(i).style.border='2px%20solid%20red';}}/*released%20under%20GPL%203.0*/})%20();

    The tricky part was changing
    //released%20under%20GPL%203.0
    to
    /*released%20under%20GPL%203.0*/
    so that it would recognize that I closed the function in the bookmarklet.


Tags for this Thread

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
  •