Skip to main contentdfsdf

NsYta 's List: Bookmarklets


    • Mouseover DOM Inspector v2.0.2 Help


      Overview



      The Mouseover DOM Inspector, or MODI for short, is a favelet (also
      known as a bookmarklet) that allows you to view and manipulate the DOM
      of a web page simply by mousing around the document.



      Browsers currently supported are Firefox, Mozilla, Netscape 8, Opera 7.5+ and MSIE6+ on all of their respective Operating Systems. <!--As of this writing, <a href="http://www.apple.com/macosx/features/safari/">Safari</a> does not support the sourcing of dynamically created script objects so the application does not work in that browser.-->



      To begin using the Mouseover DOM Inpsector, simply add the following
      link to your bookmarks by right clicking and selecting "Add to
      Favorites" or "Bookmark this Link" or whatever the nomanclature of your
      browser of choice.




      Should you encounter problems with this software, please contact me
      and let me know the URL you were on, the browser and operating system,
      if you are using a preference file along with the url to that
      preference file and as detailed a description as you can with what you
      were doing when the problem occured. Suggestions for improvement and
      functionality enhancements are also welcome.



      If you are looking for the older version of MODI (v1.5) you'll find it here.


      Keyboard Commands


      1
      Snaps
      the Data Window back to the top-left corner of the browser window,
      taking the vertical scroll amount into account. Also places the favelet
      back into Freeze Mode.
      A
      Clone the currently highlighted object and its children. Use the "S" key to append it to another object.
      B
      Cycle
      hightlighting preference. Gray backgrounds, red outlines and none. MSIE
      does not support the outline property, so this will toggle backgrounds
      in that browser.
      C
      Apply a random background color to the element. Hitting "C" again will restore the original color.
      D
      Toggle
      the visibility of the Data Window, displaying the element type and
      id/class if found in the "title" attribute of the element.
      E
      Toggle object width from auto (fluid) to its original width.
      F
      Toggle
      Freeze Mode. The favelet will remain active, but the Data Window will
      not follow the cursor. This is the default startup mode for the favelet.
      G
      Toggle the visibility of all the data lists.
      H
      Hide the currently selected element.
      J
      Show all elements hidden with the "H" command.
      K
      Remove all element labels from the page.
      L
      Label the element with its tag name. Clicking the label removes it from the document.
      O
      Outline the element with a red border. MSIE6 does not support this style property.
      P
      Pause the favelet. This will disable the favelet without turning it off.
      R
      Remove the current element from the DOM.
      S
      Append a cloned object to the currently highlighted object. Use the "A" key to clone an object.
      T
      Begining at the HTML element, manually step through the DOM, including non-display elements like META and TITLE
      U
      Toggle
      "Always Transparent" mode. When on, the data window will remain at 60%
      transparency (or a value specified by you in your external preference
      file.) Not available in Opera.
      V
      View
      and edit the HTML source of the current element. You may use this to
      view the HTML of an element on sites serving their content as
      application/xhtml+xml, but you may not modify it.
      W
      Select the parent of the current element. This will allow you to step up through the DOM to the HTML element.
      <!--<dt>N</dt><dd>Select the first child of the current element.</dd>-->
      ESC
      Exit the Favelet/Cancel Edit Mode
      ENTER
      Apply changes in Edit Mode

      Additional Functionality


      Freeze Mode
      The
      new default mode for the favelet, Freeze Mode, places the data window
      at 10,10 (the upper left corner of the screen) and prevents it from
      following the mouse cursor. This mode can be toggled with the "F" key
      to cause the data window to follow the cursor like v1.x
      Parent Node Highlights
      When
      the favelet is in Freeze mode ("F" key) or Pause mode ("P" key), you
      can mouse over the list of elements that make up the Parent Structure
      of the current element to highlight those elements.
      Child Node Highlights
      Works
      exactly the same way as with Parent Node Highlights. Only element nodes
      are highlighted, but all node types are displayed. If the element is a
      text node, its node value will be displayed as the title attribute of
      the list item.
      No Object Notification
      Since
      the favelet does not highlight the BODY or HTML elements when in
      mouse-over mode, it is possible that no element is highlighted. In
      these cases, the data window will become transparent. Not available in Opera.
      Window Drag
      When
      paused ("P") or in frozen ("F"), the Data Window can be moved by
      clicking and dragging from the title bar containing the element name.
      Pause for Input Focus
      In
      order to allow for interaction with inputs and textareas on the
      document, the favelet will go into Pause Mode when one of these element
      types recieve focus. To unpause, simply click away from the input
      element, or hit the "P" key. Thanks to Simon for the suggestion.
      Highlight Indicator
      Cycling
      through the highlight modes with the "B" key will change the Highlight
      Indicator in the top right corner of the data window to reflect the
      current highlight mode. A solid gray square indicates gray background
      highlights, a square with a red border indicates red outlines and the
      absence of an icon indicates no highlights.
      Edit Mode
      In
      edit mode ("V" key), in addition to the "Cancel" and "Apply" links, the
      "ESC" key will cancel, and the "ENTER" key will apply your changes. If
      the site is served as application/xhtml+xml, both keys will close the
      edit window.
      Collapsible Lists
      The
      lists of data displayed in the the data window can be collapsed and
      expanded by clicking their headings. For example, to collapse the
      "Attributes" list, click the "Attributes" heading. All of the lists can
      be opened and closed at once with the "G" key.
      Keep In View
      The
      data window will adjust its position to stay within the view port when
      you scroll vertically. This does not apply when the Data Window is
      longer than the available vertical space in the browser, such as when
      an object with a long list of child nodes is highlighted.
      Bugs?
      Find a bug? Please let me know about it.

      Optional External Preference File



      If the default settings for the application don't suit you, you can
      specify an external preference file for the favelet to use. This file
      is defined in the prefFile variable in the favelet link. For example, when you first bookmark the link it looks like this:



      javascript:prefFile='';
      void(z=document.body.appendChild(document.createElement('script')));
      void(z.language='javascript'); void(z.type='text/javascript');
      void(z.src='http://slayeroffice.com/tools/modi/v2.0/modi_v2.0.js');
      void(z.id='modi');



      If you would like to use a preference file, change it to look like this:


      javascript:prefFile='http://www.YOURSERVER.com/YOUR_PREFERENCE_FILE.js';
      void(z=document.body.appendChild(document.createElement('script')));
      void(z.language='javascript'); void(z.type='text/javascript');
      void(z.src='http://slayeroffice.com/tools/modi/v2.0/modi_v2.0.js');
      void(z.id='modi');



      An example preference file that you can copy, modify and save to your server can be found here:



      http://slayeroffice.com/tools/modi/v2.0/prefs.js



      Things that can be specified in the preference file are:


      • Default color of the background highlights.
      • Default Color and width of the outline hightlights.
      • Starting highlight mode - background color, outline or none.
      • If the Attribute, Dimensions, Parent Structure or Children lists should display by default.
      • If the favelet starts in Freeze Mode or not.
      • Start the favelet with the data window visible or not.
      • Start-up transparency mode and transparency value.
      • Default background color for child node highlights.
      • Any other global variables you feel like over-riding.

      - NsYta on 2008-01-04
      • Current Version: 1.1
      • Last Revision: 08.24.2004
      • Language: Javascript


      This is a favelet that combines most of my development favelets. When
      invoked, a div element will appear in the top left corner of your
      browser window with a list of all the favelets I've included. Simply
      click the link you want to invoke the favelet. An "info" icon is
      available to take you to the favelets information page here on
      slayeroffice.



      Included in the suite:


      • Color List
      • Document Tree Chart*
      • HTML Attribute Viewer
      • HTTP Header Viewer
      • Hidden Field Modifier
      • Javascript Object Tree*
      • MODIv2
      • Mouseover DOM Inspector
      • Object Dimensions
      • Page Info
      • Remove Children
      • Resize Fonts
      • Ruler**
      • Show Source
      • Style Sheet Tweak*
      • Style Sheet Viewer*


      Right click the following link and select "Add to Favorites" or "Bookmark this Link" pending you current choice of browser.

      Favelet Suite



      * These favelets will not appear in the list for MSIE.

      ** My WinIE6 Ruler if you are in MSIE, centricle's otherwise.



      Update v1.1: The suite window is now draggable. Click the title bar and drag.

      - NsYta on 2008-01-04

    • Use
      Click2Zap to remove elements from the page for printing (remove
      text/images to save paper/ink) or reading comfort purposes. Note: I
      also have a more feature-rich version called MyPage.


      Get it


      Click2Zap (right-click, add to favorites or bookmarks)

      <script type="text/javascript" src="http://mrclay.org/js/bookmarklets/bm.php?action=getScript&file=click2zap_1_0_c.js&name=Click2Zap"></script>


      Features


      • click2zap panel fixed to the top right of the window.
      • as you rollover elements, they are highlighted with a yellow background.
      • click the highlighted element to remove it.
      • click undo to replace elements (unlimited).
      • disable allows links to work (though you can always right-click a link)
      • use the print link on the click2zap panel to hide the panel and print.

      Caveats:


      • The page author’s print CSS will still be used, so elements may
        already be removed for you (do a quick print-preview to find out what
        you still need to remove)
      • All element onclick handlers are overwritten, so you may need to reload the page to re-enable these.
      • Plug-ins/embedded media players can’t be removed, but you can try to remove elements containing them.
      • Undo sometimes shifts layout.

      To Do:


      • Have a zap/keep toggle. When in “keep” mode, all surrounding elements are remove on click: potentially easy. (thanks Brian)
      • Activate print styles onscreen to see what will print by default: unknown difficulty
      • Record removed element ids in a cookie and allow one-click removal
        of all of them when you’re on the same site: easy-ish, but cookie code
        adds bloat and you could only record elements with ids.

      Much thanks to Troels Jakobsen’s Bookmarklet Builder



      - NsYta on 2008-01-04

    • MyPage puts
      you in control of the current page: Remove, isolate, edit page items
      with keyboard control. On-screen print-preview emulation lets you see
      how the page will print while editing. (if you dug click2zap, try this out.)



      Get it


      MyPage (right-click, add to favorites or bookmarks)

      <script type="text/javascript" src="http://mrclay.org/js/bookmarklets/bm.php?action=getScript&file=myPage_c.js&name=MyPage"></script>


      Features


      • Click to select/deselect elements (can select multiple)
      • Perform actions via keyboard (mouse over [?] in the top right corner)
        R
        Remove selected element(s)
        U
        Undo removal
        I
        Isolate selected elements (removes everything else!)
        P
        Print-Preview (won’t be 100% accurate, but it’s faster than native
        print-preview on any browser I’ve used, and you can even reverse it in
        IE, FF & Opera. This is perfect for adjusting pages for print)
        W
        Widen last selected element (a selected table cell becomes a selected table row, etc.)
        B
        Backwards (move selection to the previous element)
        N
        Next (move selection to the next element)
        D
        Deselect all
        C
        Copy the last selected element (duplicate is placed directly after the original)
        E
        Edit HTML (of the last selected element)
        Esc
        Escape/Quit

      • Tested in FF1.0, Safari1.2 & Opera 8.5… and IE6!
      • Inspired by the Aardvark Firefox extension. They now have a bookmarklet version, but I find it too buggy In Opera.
      • uncompressed source available

      By request, a step-by-step tutorial…


      1. Note: You must access this page with Javascript enabled.
      2. Under the heading “Get It”, right-click and bookmark/add-to-favorites the link “MyPage”.
      3. Go to any web page.
      4. Click “MyPage” in your bookmarks/favorites.
      5. A red rectangle with a question mark will appear in the top right
        of the window. You can now select/deselect page elements with your
        mouse and use key commands to affect them. (In case you forget the key commands, mouse over the red question mark for a guide)
      6. When you’re done, hit [Esc] or reload the page or just go somewhere else.




      - NsYta on 2008-01-04
    • [Installation] [Which browser is what?] [Tips] [link]

       

      Was sind Bookmarklets? What are bookmarklets?

      Bookmarklets sind kleine Hilfsmittel, die die Möglichkeiten des Webbrowsers erweitern. Bookmarklets are small tools, the possibilities of the web browser. Es sind, wie der Name schon sagt, kleine Bookmarks , also das, was der Internet Explorer auf deutsch Favoriten und Firefox Lesezeichen nennt. There are, as the name suggests, small bookmarks, so that what the Internet Explorer on German favorites, and called Firefox bookmarks. Nur dass sie keine Internet-Adresse speichern, sondern einen Schnipsel JavaScript-Code enthalten. Only that they have no Internet address save, but a snippet of JavaScript code.

      Bookmarklets sind so einfach , daß man sie nicht kaufen kann, sie sind immer gratis . Bookmarklets are so simple that they can not buy, they are always free. Jeder kann sie einfach einsetzen. Anyone can use them easily. Sie sind ungefährlich , da JavaScript nicht auf deinen Computer zugreifen kann. They are not dangerous, because JavaScript is not on your computer can access. Jeder, der JavaScript beherrscht, kann sich selber welche basteln. Anyone with JavaScript language, which itself can tinker. Und
      wenn man welche findet, wie hier auf diesen Seiten, braucht man sie nur
      seinen Bookmarks hinzufügen und erweitert so die Funktionalität seines
      Browsers.
      And what if one finds, as here in these pages, one
      needs only to add his bookmarks and extended the functionality of its
      browser.

      Sofern ein Bookmarklet keine fremde Website aufruft, z.B. If a foreign bookmarklet no site visits, for example, eine Suchmaschine, können sie sowohl online als auch offline verwendet werden. A search engine, they can both online and offline use. Da
      sie aber aus JavaScript-Code bestehen, darf diese Scriptsprache im
      Browser nicht deaktiviert sein, sonst passiert gar nichts.
      As you look from JavaScript code, it may scripting language in the browser is not disabled, otherwise nothing happens.

      Mit den Bookmarklets, die du hier findest, kannst du unter anderem With the bookmarklets that you find here, you can, among other things

      Eine
      weitere interessante Möglichkeit zum Einsatz von Bookmarklets ist die
      Integration in eine Webseite zum Nachschlagen oder Vertiefen einzelner
      Begriffe bei Google, Leo, in der Wikipedia oder bei anderen
      Auskunfts-Seiten.
      Another interesting possibility for the use of
      bookmarklets is the integration into a website to look up individual
      words or deepening in Google, Leo, in the Wikipedia or other
      information pages.
      Wie das geht, steht unten unter CheckUp zum Klauen . How this is done is below CheckUp to claw.

      Eine Bitte: A request:
      Ich habe alle Bookmarklets mit den mir zur Verfügung stehenden Browsern getestet. I have all bookmarklets me with the available browsers. Sollte trotzdem eins bei dir nicht funktionieren oder einen JavaScript-Fehler hervorrufen, maile mir
      den Fehler und das Bookmarklet und schreib mir auch dein
      Betriebssystem, deinen Bowser und seine Version, damit ich sehen kann,
      wo es hakt.
      Should one still does not work with you or a JavaScript error cause, email me the error and the bookmarklet and write me your operating system, your Bowser and his version, so I can see where it hooks.

        High

      Tipps zur Installation Tips for installation

      Installation im Internet Explorer Installation of the Internet Explorer

      Entweder klassisch das Bookmarklet mit der rechten Maustaste anklicken und "Zu Favoriten hinzufügen..." Either the bookmarklet classic, right-click, "Add to Favorites ..." wählen. . Oder,
      für die Lieblings-Bookmarklets, die Links-Symbolleiste aktivieren (Menü
      Ansicht - Symbolleiste...) und den Bookmarklet-Link mit gedrückter
      linker Maustaste an eine beliebige Stelle in diese Leiste ziehen.

      Or, for the favorite bookmarklets, which links toolbar activate (View
      menu - toolbar ...) and the bookmarklet link by holding down the left
      mouse button anywhere in this bar.
      Die dort vorinstallierten Müll-Links von Microsoft kann man getrost mit Hilfe der rechten Maustaste löschen. Those pre-garbage links from Microsoft can be comforted by using the right mouse button to delete.

      Leider
      lassen sich im Internet Explorer die Bookmarklets nicht in einem
      eigenen Favoriten-Ordner auf der Links-Leiste unterbringen, da sie dann
      nicht mehr funktionieren.
      Unfortunately in Internet Explorer
      bookmarklets not in a separate Favorites folder on the Links bar
      accommodated, as they will no longer work.
      Das ist zwar völlig unsinnig und sehr ärgerlich, aber leider nicht zu ändern. This is totally ridiculous and very annoying, but unfortunately not be changed. Dafür
      ist die Links-Leiste theoretisch unbegrenzt groß, denn nicht mehr ins
      Browserfenster passende Einträge werden hinter dem Doppelpfeil rechts
      verborgen.
      That is the left-bar theoretically unlimited size,
      not because the browser window matching entries are behind the double
      arrow to the right hidden.
      Hier ein Screenshot meiner Links Leiste . Here is a screenshot of my links bar. Ich habe den Webadressen, die keine eigenes favicon.ico mitbringen, ein eigenes Icon verpasst. I have the addresses, which do not own favicon.ico bring their own icon missed. Das erleichtert das Finden. This makes it easier to find. Bookmarklets behalten bei mir dagegen ihr Standard-Symbol. Bookmarklets keep with me against their standard symbol.

      Installation in Firefox, Netscape und Mozilla Installation of Firefox, Netscape and Mozilla

      Auch hier wie üblich mit der rechten Maustaste anklicken und im Kontextmenü "Lesezeichen hinzufügen" wählen. Again, as usual, with the right mouse button and the menu "bookmarks". Häufig
      genutzte Bookmarklets fügt man in die Lesezeichen-Symbolleiste
      (Persönliche Symbolleiste) ein, die du im Menü Ansicht - Symbolleisten
      bzw. Ansicht - Anzeigen...
      Frequently used bookmarklets add to the bookmark toolbar (Personal toolbar), which the menu view - toolbars or view - ads ...
      sichtbar machst. Make visible. Einfach den Bookmarklet-Link mit gedrückter linker Maustaste in die Leiste ziehen. Just the bookmarklet link by holding down the left mouse button in the toolbar. Die
      dort voreingestellten Links kann man problemlos mit Hilfe der rechten
      Maustaste löschen oder verschieben, man braucht sie eher selten.
      Those links can be preset trouble with the right mouse button, delete or move, you need them rather rare.

      Ich empfehle, für die Bookmarklets einen eigenen Lesezeichen-Ordner anzulegen. I recommend, for the bookmarklets a bookmark folder. Hier ein Screenshot meiner (um private Links gekürzter) Persönlichen Symbolleiste (Lesezeichen-Symbolleiste) aus Mozilla. Here is a screenshot of my (your private links abridged) personal toolbar (bookmarks toolbar) from Mozilla.

      Installation in anderen Browsern Installation in other browsers

      Bookmarks, auf deutsch Lesezeichen, kann jeder Browser speichern, also auch Bookmarklets. Bookmarks on German bookmarks, any browser, including bookmarklets. Opera
      besitzt auch eine Persönliche Symbolleiste, zu aktivieren im Menüpunkt
      Ansicht, in die man Bookmarklet-Links einfach hineinzieht.
      Opera also has a personal toolbar activated from the View menu, you simply bookmarklet links hineinzieht.
      Wer andere Exoten-Browser benutzt, weiss sowieso, was er tut und wird das Ding auch benutzen können. Who other exotic browser used anyway knows what he is doing and is also the thing can use.

        High

      JavaScript und die Browser JavaScript in the browser

      Leider haben viele Bookmarklets als JavaScripts einen Nachteil: sie sind extrem browserabhängig . Unfortunately, many bookmarklets as JavaScripts one drawback: they are extremely browserabhängig. Ein
      Bookmarklet für den Internet Explorer funktioniert oft im Netscape
      nicht, und eines für den Navigator 4.5 will in der 6er Version nicht
      mehr laufen.
      A bookmarklet for Internet Explorer often does in
      Netscape, and one for the Navigator 4.5 will in version 6 is no longer
      running.
      Und unter Opera ist noch mal wieder alles anders, da läuft meistens gar nichts. And of Opera is yet again everything differently, as is usually nothing. Darum habe ich soweit es geht meine Bookmarklets an alle gängigen Browser angepaßt. Therefore, I have as far as it goes my bookmarklets to all standard browser adapted. Wer
      nicht weiß, wie sein Browser heißt (und 30% aller Internet-Nutzer
      sollen das angeblich nicht wissen), findet den Namen ganz oben in der
      unter Windows blauen Titelleiste.
      Who does not know how his
      browser means (and 30% of all Internet users are allegedly not know),
      is the name at the top of the Windows blue title bar.

      Zeichenerklärung Legend

      Internet Explorer Bookmarklet für den Internet Explorer 5 und 6 Bookmarklet for Internet Explorer 5 and 6

      Netscape and Mozilla Bookmarklet für Netscape 6 / 7, Mozilla und Firefox Bookmarklet for Netscape 6 / 7, Mozilla and Firefox

      Netscape 4 Bookmarklet für den alten Netscape 4 Bookmarklet for the old Netscape 4

      Opera Bookmarklet für Opera 6 und 7 Bookmarklet for Opera 6 and 7

      Frames gibt an, ob das Bookmarklet in geframeten Seiten funktioniert. Frames indicates whether the framed pages in bookmarklet works. Versionen für Frames laufen auch in framelosen Webseiten. Versions for frames run in framelosen websites.
      Toggle gibt an, ob man den Effekt des Bookmarklets ein- und ausschalten kann. Toggle indicates whether the effect of bookmarklets on and off. Ansonsten hilft ein Aktualisieren der Seite. Otherwise helps an update of the page.

      Ein Sorgenkind für jedes JavaScript ist Opera : der kann bis heute fast gar nichts. A problem child for each JavaScript Opera: you can do almost nothing. Aber das sind die User des Norwegers ja gewohnt. But those are the users of the Norwegian yes usual.

      Eine Bitte: A request:
      Ich habe alle Bookmarklets mit den mir zur Verfügung stehenden Browsern getestet. I have all bookmarklets me with the available browsers. Sollte trotzdem eins bei dir nicht funktionieren oder einen JavaScript-Fehler hervorrufen, maile mir
      den Fehler und das Bookmarklet und schreib mir auch dein
      Betriebssystem, deinen Bowser und seine Version, damit ich sehen kann,
      wo es hakt.
      Should one still does not work with you or a JavaScript error cause, email me the error and the bookmarklet and write me your operating system, your Bowser and his version, so I can see where it hooks.

        High

      Tipps zum Erstellen von Bookmarklets Tips for creating bookmarklets

      Editieren von Bookmarklets Editing bookmarklets

      Bookmarklets sind als JavaScripts reine Textdateien, man kann sie also in jedem Texteditor erstellen und bearbeiten. Bookmarklets are JavaScripts pure text files, it can also in any text editor to create and edit. Doch wie bekomme ich sie in einen Editor? But how do I get them in an editor? Ganz einfach, indem man die "Linkadresse" kopiert. Quite simply, by the "link address" copied. Denn als Bookmarks sind sie ja Links bzw. auf deutsch Verknüpfungen. Because as bookmarks, they are indeed links or German links. Das geht wie immer über die rechte Maustaste. That is, as always, on the right mouse button.

      "Dirty Variables" "Dirty Variables"

      Hat
      man ein Bookmarklet erst einmal im Editor, werden sich selbst erfahrene
      JavaScriptler erst einmal über den kryptischen Code wundern.
      Did you have a bookmarklet only once in the editor, himself JavaScriptler experienced only once on the cryptic code surprised.
      Doch der hat seine Gründe. But has his reasons. Zum einen sollten Bookmarklets so kurz wie möglich sein, denn Links dürfen eine bestimmte Länge nicht überschreiten. For one Bookmarklets should be as short as possible, because links can not be a certain length. Wie lang sie sein können, variiert von Browser zu Browser. How long they can vary between browsers. Also werden alle überflüssigen Leerzeichen entfernt und Variablennamen kurz gehalten. So, all superfluous spaces removed and variable names short.

      Weiterhin
      muß beachtet werden, daß die Bookmarklets nicht mit dem auf der
      Webseite eventuell schon vorhandenen JavaScript in Konflikt geraten,
      zum Beispiel durch Verwendung gleicher Variablennamen.
      You must
      also be observed that the bookmarklets not with the on the site may
      already existing JavaScript in conflict, for example by using the same
      variable names.
      Als Ausweg gelten "dirty variables", also kryptische Namen aus einer wilden Kombination von Buchstaben und Zahlen. As a way apply "dirty variables", so cryptic names from a wild combination of letters and numbers. Um
      meine eigenen Bookmarklets leichter lesen und pflegen zu können, habe
      ich einen "halbschmutzigen" Weg gewählt und den Variablen einfach ein
      "tom" hinzugefügt.
      To my own bookmarklets easier to read and maintain, I have a "halbschmutzigen" system and the variables simply a "tom".
      Aus dem beliebten Integer-Variablennamen i wird so itom . From the popular integer variable named i will itom. Ich denke, das sollte in fast allen Fällen reichen. I think it should be in almost all cases wealthy.

      Bookmarklets und Frames Bookmarklets and frames

      Die meisten Bookmarklets, die man im Internet findet, sind nur auf Einzelseiten und nicht in Framesets einsetzbar. Most bookmarklets that you find on the Internet, only to individual pages and not in use framesets. Andere funktionieren nur in Frames und liefern auf framelosen Seiten Scriptfehler. Others work only in frames and deliver on framelosen sides script error. Ich habe nicht bemüht, meine Bookmarklets so abzufassen, daß sie überall funktionieren. I have not tried my bookmarklets manner so that they work everywhere.

      Wer ein Bookmarklet erstellen oder überarbeiten will, sollte dieses berücksichtigen. About a bookmarklet create or revise, this should be considered. Dafür habe ich ein Rahmenscript erstellt, in das das eigentliche Bookmarklet nur eingefügt werden muß. Therefore, I have created a framework script, in which the real bookmarklet only to be inserted. Es handelt sich um eine kleine Textdatei, die beliebig weiter verwendet werden kann und soll. It is a small text file that can still be used and should be.

      Eine Alternative: Lesezeichen-Kürzel in Firefox An alternative: bookmarked shortcuts in Firefox

      Unter
      Firefox kann man statt einiger Bookmarklets auch Lesezeichen-Kürzel
      verwenden, das sind normale Lesezeichen mit einem Schlüsselwort, die
      für die Suche im Internet eine ähnliche Funktionalität besitzen.

      Among Firefox can be held some bookmarklets also bookmarked shortcuts,
      which are normal bookmark with a key word, to search the Internet
      provides similar functionality.
      Hier werden die Suchbegriffe mit einem selbst gewählten Kürzel über die Adresszeile des Browsers eingegeben. Here, the search terms with a self-selected symbol in the address bar of the browser. Eine genaue Beschreibung habe ich unter Firefox Lesezeichen-Kürzel erstellt. A detailed description of Firefox, I have bookmarked shortcuts. Da dieser Browser aber noch mehr kann, sollte man sich auch mal meine Firefox Tipps zur Suche im Web ansehen. Because of these browsers, but can do more, you should also a look at my Firefox tips for searching the Web View.

        High

      Links

      Eine wahre Fundgrube für weitere Bookmarklets ist Steve Kangas' amerikanische bookmarklets.com . A veritable treasure trove for more bookmarklets is Steve Kangas' American bookmarklets.com. Über 150 dieser kleinen Helferlein hat er geschrieben und gesammelt. About 150 of these young helper, he has written and collected. Vor
      allem seine Suche-Bookmarklets sind eine wahre Fundgrube und laden dazu
      ein, dieses auf den deutschsprachigen Raum zu übertragen.
      Above all, its search-Bookmarklets are a veritable treasure trove, and invite you, that the German-speaking region.
      Mal sehen, ob ich mal dazu komme.... Let's see if I have time to come .... Weitere Tonnen von Bookmarklets finden sich bei Jesse Ruderman. More tons of bookmarklets found in Jesse Ruderman.
      Bookmarklets.com Bookmarklets.com
      Jesse's Bookmarklets Site Jesse's bookmarklets site

      Mein
      Lieblings-Bookmarklet, das ich beim Surfen auf englischsprachigen
      Seiten ständig benutze und nicht mehr missen möchte, ist das LEO Wörterbuch Englisch - Deutsch und umgekehrt, das mir auch Redewendungen, Synonyme und ähnliche Worte liefert.
      My favorite bookmarklet that I while surfing on English pages constantly use and would not want to miss, the LEO English dictionary - German and vice versa, which I also idioms, synonyms and related words delivers.
      Für die Zukunft ist auch Deutsch - Französisch geplant. For the future, even German - French planned. Es
      lässt sich auf verschiedene Weise in alle gängigen Browser integrieren,
      als Erweiterung des Kontextmenüs der rechten Maustaste, als Sidebar
      oder als Bookmarklet.
      It can be defined in various ways into
      most browsers integrate, as an extension of the context menus of the
      right mouse button, as a sidebar or as a bookmarklet.
      Wer es noch nicht hat, hole es sich sofort! Whoever it is not, get it now!
      LEO Wörterbuch LEO dictionary
      LEO Wörterbuch als Bookmarklet LEO dictionary as a Bookmarklet

      Erwin
      Forner, der böse alte Mann des Internets, hat einige meiner
      Bookmarklets verwendet und damit ein neues interessantes Feature in
      sein Weblog
      eingebaut: auf jeder Seite, direkt unter seinem nebenstehend
      abgebildeten Selbstportrait, befindet sich eine Rubrik mit sechs meiner
      Bookmarklets als Links.
      Erwin Forner, the angry old man of the
      Internet, some of my bookmarklets, and thus an interesting new feature
      incorporated into his Weblog: on each side, just below his self-portrait depicted margin, there is a section with six of my bookmarklets as links.
      Wer
      die Bedeutung eines Begriffs in seinen Artikeln nicht kennt oder mehr
      dazu wissen möchte, kann diesen markieren und dann einen CheckUp-Link
      zu Google, Leo, der Wikipedia oder anderen Auskunftsseiten klicken und
      dort weitere Informationen erhalten.
      Who is the meaning of a
      concept in his articles not know or would like to know more about this,
      this can and then CheckUp a link to Google, Leo, the Wikipedia or other
      information pages and click for more information.
      Das finde ich pfiffig. I find that smart. Wer will, kann sich dieses Feature auch in seine Webseiten einbauen: CheckUp zum Klauen . Who wants this feature can also incorporate into its websites: CheckUp to claw. Natürlich kann man auch weitere meiner Bookmarklets auf diese Weise nutzen. Of course, you can also further my bookmarklets in this way.
      CheckUp zum Klauen CheckUp to claw

      Weblogs die CheckUp nutzen: Ramona Hapkes Mediablog , TXT-JobBlog Weblogs use the CheckUp: Ramona Hapkes Media Blog, TXT JobBlog


      Zwar keine Bookmarklets, aber trotzdem eine sehr sinnvolle Browsererweiterung ist Peter Hartlichs Suche Total , das allerdings nur im Internet Explorer unter Windows funktioniert. Although no bookmarklets, but still a very useful browser extension is Peter Total Hartlichs search, but only in Internet Explorer for Windows works. Ich
      nutze dieses kleine Hilfmittel gerne im IE. Über eine kleine .reg-Datei
      werden Eintragungen in der Windows-Registry vorgenommen, die direkte
      Suchbefehle an die gängigsten Suchmaschinen über das Adressfeld des IE
      ermöglichen.
      I use this little tool like in a little over IE.
      Reg file contains the entries in the Windows registry, the direct
      search commands to the most popular search engines on the IE address
      field.
      Will ich z.B. Will I eg nach
      Bookmarklets über Google suchen, gebe ich in der Adresszeile nur "gg
      bookmarklets" ein und Google spuckt direkt seine Fundstellen aus.

      After bookmarklets through Google search, I give in the address line
      only "gg bookmarklets" and Google spits directly from its reference
      points.
      Oder
      ich will wissen, aus welchen Filmen ich Lori Singer eigentlich kenne:
      ich gebe dazu nur "imdb lori singer" ein und erhalte sofort alles, was
      die Internet Movie Database über sie weiss (also praktisch alles), ohne
      mich zuerst auf deren Website begeben zu müssen.
      Or, I want to
      know what films I actually know Lori Singer: I admit to only "imdb lori
      singer" and immediately get everything that the Internet Movie Database
      on them white (practically everything), without me first go to their
      website need.
      Sehr
      praktisch ist das auch bei einer Anfrage an Amazon, deren grafiklastige
      Startseite habe ich schon seit Jahren nicht mehr gesehen habe.
      Very handy is also a question to Amazon, whose grafiklastige home, I have for years no longer seen.

      Prädikat sehr empfehlenswert , ich rate allerdings zur Version ohne Auto-Update, da sonst die Browser-Startseite okkupiert wird. Predicate highly recommended, but I guess the version without Auto-update, otherwise the browser-occupied home.
      Suche Total Total Search

      Unter Firefox kann man sich die Funktionalität von Suche Total leicht selber erstellen. Among Firefox you can search the functionality of Total themselves easily. Wie einfach das geht, habe ich unter Firefox Lesezeichen-Kürzel beschrieben. How easy this is, I have Firefox bookmarks shortcuts.

      High
      - NsYta on 2008-01-04
    • Here you will find various bookmarklets for webpages, which can be very useful when you want to manipulate pages or extract specific information about it :) (Note: Bookmarklets with a ~^ near them open up new windows.)


      Page info -- This Shows the page information related to the page, shows amount of a specific element too and lists link element source, in an alert



      Document Info -- This shows list of cookies, url,images,frames,last modified info in a popup window.


      Create Linked-- Creates a window where all links from the current page opens in that window,to emulate Opera's "Create Linked" feature in a tab.


      Increase Font-Size -- This increases the overall font-size by 2px increments


      Decrease Font-Size -- This decreases the overall font-size by 2px increments

      Go to disabled url , undefined ~^ -- This converts text selected disabled urls in forums posts like hxxp:// or h**p:// or f*p:// or fxp:// to the right address and goes to the page


      Back is close Does alternate things when back is no longer available,closes the page or it searches for the previous page that opened the page(and closes the page if possible), or goes up a directory or goes home if no tabs opened


      Top Goes to top level of site


      Show resources , undefined ~^ Shows all resources as links, enabling you to download them or examine the pages

      Search resources Opens a window that allows you to search through particular resources using the dropdowns or to search all with regular expressions, this is like the tag and attribute grabber script, but it only mainly does resources

      - NsYta on 2008-01-04
    • Here is a bookmarklet that lets you debug forms more accurately.

        javascript:
      (function ()
      {
      var s = "<title>Forms list</title><i>No action attribute usually means its pointing to the page's url and that something else is submitting the form</i>";
      var f = document.forms;
      for (var i = 0;i < f.length, t = f[i];i++)
      {
      var g = "";
      g += "<fieldset><legend>Form: " + i + "</legend>";
      for (var z = 0;z < t.attributes.length, x = t.attributes[z];z++)
      {
      a = x.name.toLowerCase();
      a = a.substr(0, 1).toUpperCase() + a.substr(1);
      if (g.indexOf(a + ": " + x.value) == - 1)
      g += x.value != "" ? a + ": " + x.value + "<br/>" : "";
      }
      for (var ty = 0;ty < t.elements.length, yu = t.elements[ty];ty++)
      {
      fg = yu.tagName.toLowerCase();
      fg = fg.substr(0, 1).toUpperCase() + fg.substr(1);
      g += "<fieldset><legend>" + fg + ": " + ty + "</legend>";
      for (var mx = 0;mx < yu.attributes.length, my = yu.attributes[mx];mx++)
      {
      hg = my.name.toLowerCase();
      hg = hg.substr(0, 1).toUpperCase() + hg.substr(1);
      g += my.value != "" ? hg + ": " + my.value + "<br/>" : "";
      }
      g += "</fieldset>";
      }
      g += "</fieldset>";
      s += g;
      }
      var y = window.open();
      y.document.write(s);
      y.document.close();
      }
      )();


      It shows the all elements inside a form and the attributes attached to those including the attributes of the form itself.
      Hope this helps out with form debugging on difficult pages.
      UPDATE: Updated layout a little.
      - NsYta on 2008-01-04
    • Googmarklets (Google Bookmarklets)
      By Ludwik Trammer



      Bookmarklets are short snippets of JavaScript code added to the
      browser as bookmarks. Every time you open such bookmark it executes its
      function, usually using information from the currently opened website.
      Bookmarklets can make daily browsing a lot easier by automating simple
      tasks. You can find many interesting bookmarklets on Squarefree.com.



      Google has an official bookmarklet
      itself. It's very simple – it displays a dialog box in which the user
      can provide search terms. It's a little outdated though, in the times
      when every browser has a search box right in a toolbar. Below you can
      find ten unofficial Google bookmarklets.



      Note: You can install a bookmarklet just by grabbing a
      link and draging it into your bookmarks toolbar. Those bookmarklets
      should work across many different browsers, however, they were tested
      in Firefox 2 and Opera 9 only. (Note that in case you're reading this
      from an RSS reader which strips JavaScript, you need to visit the
      original post.)



      1. Add to Reader

      Adds the current website's feed to Googe Reader/ iGoogle. Note:
      Site has to have RSS feed and support for feed autodiscovery (in other
      words a little RSS icon in the browser's address bar).



      2. Translate it

      Translates the current page into English using Google Translate.



      3. Search this domain

      Asks you for the search term and searches for it in Google within current website's domain only.



      4. Search within links

      Asks you for the search term and searches for it in Google within pages
      that are linked from the current page (using Google's new "On the Fly" feature).



      5. Show Cache

      Shows a version of the current page from the Google Cache.



      <!-- <p>. <a href="javascript:(function(){ document.location.href='http://www.google.com/search?q=info:'+escape(document.location.href) })();">Show page info</a><br/>
      Shows current page's summary from Google search.</p> -->

      6. Show similar pages

      Shows pages that Google considers similar to the current one.



      7. Show linking pages

      Shows pages that link to the current one (or rather, some of them).



      8. Domain's PageRank

      Shows the PageRank for the current domain (using prchecker.info)



      9. Send it with Gmail

      Opens a mail composing window in Gmail with the current page URL
      provided in the mail's body, and its title in the mail's subject.



      10. Add to search index

      Sends the current page's URL for googlebot to check.

      - NsYta on 2008-01-04
      • Here's a bunch of bookmarklets that I use every day in Firefox. I highly recommend them. To use these, drag each one individually into your Favorites or Links toolbar (in IE), or your bookmarks folder/toolbar in Firefox. (Hint: in Firefox you can also assign a single keystroke to each. Then all you need to do is type that letter in the address field and hit enter and the bookmarklet activates.)

          
    • Listed below are links to weblogs that reference Bookmarklets Every Blogger Should Have:








      » Essential Bookmarklets for Every Blogger from Technoogle

      Steve Rubel of Micro Persuasion has put together a list of essential bookmarklets that are used frequently among bloggers.
      Double check what you have and add what you’re missing.

      Technorati IceRocket Tags: Blogger, Bloggers, Steve Rubel, Es... [Read More]









      » Praktische Firefox-Bookmarklets from basimo.de

      Steve Rubel hat eine praktische Liste von Bookmarklets für Firefox zusammengestellt.
      [via lifehack.org]

      ... [Read More]









      » Bookmarklets from inedibleink.com

      Its a mighty-mite technology with a truly awful name. The bookmarklet. It doesnt mark anything. It would be sheer luck if it got within 50 feet of a book. The only redeeming syllable in the name is the suffix -let, becau... [Read More]









      » useful bookmarklets from Asa Dotzler - Firefox and more

      Steve Rubel, over at Micro Persuasion, has a nice list of useful bookmarklets. Check it out, and share any addional ones you use with the rest of the readers here.... [Read More]









      » Bookmarklets Every Blogger Should Have from The Lazy Genius

      Found a great list of Bookmarkets... little widgets that make broswing and blogging easy.

      Here's a bunch of bookmarklets that I use eve... [Read More]









      » Good Bookmarklets Are Easy To Find from Backwords

      Steve Rubel over at Micro Persuasion has this good post about bookmarklets that every blogger needs to have.
      Bookmarklets are little pieces of JavaScript code embedded inside a Bookmark/Favorite link, so that every time you press this link, the JavaSc... [Read More]









      » useful bookmarklets from Asa Dotzler - Firefox and more

      Steve Rubel, over at Micro Persuasion, has a nice list of useful bookmarklets. Check it out, and share any addional ones you use with the rest of the readers here.... [Read More]









      » How to promote your blog for traffic from Platinax Internet

      Whether used for Public Relations and customer communication, or for marketing your business and website online, blogs can be a useful business and marketing tool.
      However, its easy to become overwhelmed when faced with promoting your blog.
      H... [Read More]



      - NsYta on 2008-01-04
    • Steve Rubel in his blog has posted a set of great bookmarklets that preform a certain functions from your bookmark to the site you are visiting. Very handy tool. He introduced the follow bookmarklets with links:



      * Post this to del.icio.us - select some text first and it gets excerpted in the del.icio.us summary

      * Post this to del.icio.us and My Web - simultaneously send a link to Yahoo! My Web and del.icio.us

      * Subscribe to this site on Bloglines

      * Subscribe to this site on Newsgator

      * Subscribe to this site on Google

      * Wikipedia look-up - select some text and click this link and WIkipedia will look it up

      * del.icio.us look-up - tells you who has bookmarked a page you’re reviewing

      * Flickr look-up - search for multiple tags on Flickr, separated by commas

      * Alexa this - will look up any site you’re visiting on Alexa, a great resource for statistics

      * What’s similar? - searches Google for similar pages to the one you’re on

      * BugMeNot - for news sites behind a registration gate

      * TinyURL this - create a short URL for the page you’re visiting

      * Bloglines this - see who has linked to a page on bloglines

      * Technorati this - does the same for Technorati


      All you need to do is drag those link into your favorites or bookmark menu. Go to his site and get those.


      Bookmarklets Every Blogger Should Have - [Micro Persuasion]

      - NsYta on 2008-01-04
    • Path // www.yourhtmlsource.com > Accessibility > BOOKMARKLETS



      Bookmarklets






      <!-- Intro -->

      Bookmarklets are simple little programs that you can integrate into your browser to make your coding, debugging and researching lives a whole lot easier. Best of all, they're easy to use and modify for your own use.






      This page was last updated on 2007-03-20







      <!-- Content Start -->



      Bookmarklets Explained



      Bookmarklets are a type of tiny, powerful, very clever program, written in JavaScript and added to your browser as the URL of a bookmark. “Bookmarks” (Firefox/Safari) and “Favorites” (Internet Explorer) are equivalent, and most bookmarklets will work in either browser, and across platforms. You just click the bookmarklet, and it can apply filters to the page you're viewing, open prompts for searches, or a host of other helpful features. They look like normal links but are in fact dynamic scripts that can perform different tasks depending on what page you're visiting, what text you have highlighted, etc.




      Browser Compatibility Note:



      Some of the following bookmarklets will not work in certain browsers. The best thing to do is to test them by clicking their links on the page here before adding them to your bookmarks folder.





      How they Work



      First, your browser will have to be IE5+, Firefox, Safari or Opera 5+. Then, you need to have JavaScript enabled in your browser.




      Then just add these links as favorites like you would any other. You can even add them to your Internet Explorer Links bar or Netscape Personal Bar for immediate access to the most useful ones. You may get a security alert when 'installing' the scripts, but don't worry, these are all perfectly » safe to use and do not change any settings on your computer.

          Once they're added you can use them straight away — just click their name in your bookmarks menu and the script will run.





      Let's see them



      Ok, I've organised these under headings; bookmarklets can help in a range of tasks. Remember, just click and drag any of the bookmarklet links below into your bookmarks menu.






      Validation




      Validate Markup with W3C Validator

      Opens up the W3C HTML validator with the current page as the subject. Great for simultaneous coding and debugging. The page will open in the same window as the source page.


      Validate CSS with W3C Validator

      The same as the one above, but this will validate any stylesheets linked or imported into the current document.


      Validate Recursive pages with WDG Validator

      Much the same as the W3C validator, but the Web Design Group's validator can follow links to other pages and validate them too.


      Verify Links with W3C Link-checker

      Checks that no links are broken on the page you're looking at. Source: » Favelets.com.



      Coding




      Toggle CSS Stylesheets

      Superb little script that will turn off any linked stylesheet at the touch of a button. Useful as much for coding as it is out of interest. This should really be a feature built-in to most browsers. Click it a second time to enable CSS again. Source: » Favelets.com.


      Zoom In / Zoom Out

      Zoom in and out of the current page in 50% increments — excellent for fixing pixel-level problems. Source: » Sam-I-Am.com.


      Resize to 800x580

      A simple code that resizes your window to the dimensions still most common among web surfers. If your page doesn't look good like this, you're boned. You can also resize to 640x460, 1024x748 or any other dimensions you want — just modify the short code. Note that the heights defined here are 20 pixels shorter than the corresponding monitor resolutions to take the Windows taskbar into account. There are more outlandish dimensions at » favelets.com.


      216 Websafe Color Chart

      Quickly draws a table of the websafe colour palette, in case you've forgotten the HEX codes. The reference page is generated entirely by the bookmarklet.


      Basic ISO Latin Characters

      Creates and displays a shorthand Latin special character reference. Source: » Bookmarklets.com.


      Page Weight

      Returns the combined filesize, in bytes, of the HTML file and all of its images. It doesn't include linked CSS code or scripts in the total however. There's also a utility that prompts you for a filesize in KB and returns the download time on a 56k modem. Source: » DanSays.com.


      Show Comments

      A clever, very cool-looking bookmarklet that adds an icon at each comment in a page's source code. Click the icon to see what the comment contains. Mostly useful out of interest. You need to be online for this to work, as it loads an external JS file. Source: » EndQuote.com.


      Choose Style sheet

      Since most browsers (most noticeably IE) lack support for choosing alternate stylesheets, this provides an interface for choosing an alternate style yourself, if one exists for a page. Source: » Favelets.com.


      Grayscale the Page

      Applies a filter over the page that takes all the colour away. Great, quick way of testing your page for legibility. Slows your machine down a fair bit though. Source: » 508 Compliant.


      IMGs missing ALTs

      Goes through your page checking if all your images have alt attributes. If not, it'll tell you which ones are missing them. Source: » 508 Compliant.


      General page Information

      Whips up a page of information pertaining to the current document, like the number of scripts, images and stylesheets; the creation and modification dates etc. Source: » Ian Lloyd.


      Meta Data

      Cleans up a page's meta data into a nice table for easy reading. Source: » Ian Lloyd.





      Writing




      Count Selected Words

      Counts the number of words in a block of selected text. Very useful. Only works in IE. Source: » DooYoo-uk.


      Look up word on Dictionary.com

      Very handy bookmarklet to have, just select the word you need help with and it'll open the corresponding Dictionary.com definition. There's also a synonym-finder through thesaurus.com. Source: » Blog of Francois.


      Page Freshness

      When you need to find out when a page was last updated, this bookmark will query the server and return the last modification date. If the server isn't configured right you may get some replies that are clearly wrong. Source: » Bookmarklets.com.




      Searching




      Google Search

      Searches Google for the words selected on the page. If you haven't selected anything, it brings up a prompt box to enter words into. Source: » Google.


      IMDb Search

      A personal favourite, I got sent this very useful modification of the Google bookmarklet above by a reader. It'll do a search on any words you have selected, or bring up a prompt for your input; and then search the » Internet Movie Database for you.




      Other Resources




      » Google Toolbar

      This isn't a bookmarklet, but a whole new bar for your browser that allows you to search Google from anywhere, and get a lot of information about a page through some great features like what's related, backward-links and cache-viewing. Excellent.


      » IE Web Accessories

      A really helpful group of new commands for your right-click menu in IE5+. You can generate a links lists (very helpful for checking how your link-text reads out of context), an images list or open frameset pages in a new window. Also there's an Internet Explorer utility that will toggle image loading on and off without having to go into your Internet Options. It's not a bookmarklet, but a small executable program. All in all, some rather essential utilities.













      - NsYta on 2008-01-04
    • Bookmarklet Tool Categories


      Bookmarklets







      Online/Offline


      Online only





      Page Data

        Freshness test, Links on Page, Page with Selected Text, tools to extract data from a webpage.


      Page Look

        Page Color, Auto-Scrolls, Zoom on Image, tools to change the appearance of a webpage.



      Search tools

        Search more quickly, more easily, and in new ways with these Search Bookmarklets. Home of the user-defined hyperlink. You can make your own!








      Navigation

        Back All Frames, Go To Random, Find Simultaneously, tools that affect navigation between pages.



      Windowing

        Resize, Center, Setup, tools that resize or reposition windows. Most Windowing tools require NS 4 or IE 4
















      Special Tools

      Calculate/Convert

        Various calculators and U.S.-International converters.

      Design

        Tools for people who make webpages or write scripts.





       

      What's New






      Miscellaneous

        Date, Tile, Toys - Tools that didn't fit into the other categories.










      About | Help | feedback | Ideas | Make | Links | Home
      - NsYta on 2008-01-04
    • Path // www.yourhtmlsource.com > Accessibility > BOOKMARKLETS



      Bookmarklets






      <!-- Intro -->

      Bookmarklets are simple little programs that you can integrate into your browser to make your coding, debugging and researching lives a whole lot easier. Best of all, they're easy to use and modify for your own use.






      This page was last updated on 2007-03-20






      <!-- Content Start -->



      Bookmarklets Explained



      Bookmarklets are a type of tiny, powerful, very clever program, written in JavaScript and added to your browser as the URL of a bookmark. “Bookmarks” (Firefox/Safari) and “Favorites” (Internet Explorer) are equivalent, and most bookmarklets will work in either browser, and across platforms. You just click the bookmarklet, and it can apply filters to the page you're viewing, open prompts for searches, or a host of other helpful features. They look like normal links but are in fact dynamic scripts that can perform different tasks depending on what page you're visiting, what text you have highlighted, etc.




      Browser Compatibility Note:



      Some of the following bookmarklets will not work in certain browsers. The best thing to do is to test them by clicking their links on the page here before adding them to your bookmarks folder.





      How they Work



      First, your browser will have to be IE5+, Firefox, Safari or Opera 5+. Then, you need to have JavaScript enabled in your browser.



      <script type="text/javascript">
      <!--
      //test for javascript
      document.write('<p>At the moment, you do have JavaScript enabled, so no worries there...</p>');
      //-->
      </script>

      At the moment, you do have JavaScript enabled, so no worries there...




      Then just add these links as favorites like you would any other. You can even add them to your Internet Explorer Links bar or Netscape Personal Bar for immediate access to the most useful ones. You may get a security alert when 'installing' the scripts, but don't worry, these are all perfectly » safe to use and do not change any settings on your computer.

          Once they're added you can use them straight away — just click their name in your bookmarks menu and the script will run.





      Let's see them



      Ok, I've organised these under headings; bookmarklets can help in a range of tasks. Remember, just click and drag any of the bookmarklet links below into your bookmarks menu.



      <!--

      -->


      Validation




      Validate Markup with W3C Validator

      Opens up the W3C HTML validator with the current page as the subject. Great for simultaneous coding and debugging. The page will open in the same window as the source page.


      Validate CSS with W3C Validator

      The same as the one above, but this will validate any stylesheets linked or imported into the current document.


      Validate Recursive pages with WDG Validator

      Much the same as the W3C validator, but the Web Design Group's validator can follow links to other pages and validate them too.


      Verify Links with W3C Link-checker

      Checks that no links are broken on the page you're looking at. Source: » Favelets.com.



      Coding




      Toggle CSS Stylesheets

      Superb little script that will turn off any linked stylesheet at the touch of a button. Useful as much for coding as it is out of interest. This should really be a feature built-in to most browsers. Click it a second time to enable CSS again. Source: » Favelets.com.


      Zoom In / Zoom Out

      Zoom in and out of the current page in 50% increments — excellent for fixing pixel-level problems. Source: » Sam-I-Am.com.


      Resize to 800x580

      A simple code that resizes your window to the dimensions still most common among web surfers. If your page doesn't look good like this, you're boned. You can also resize to 640x460, 1024x748 or any other dimensions you want — just modify the short code. Note that the heights defined here are 20 pixels shorter than the corresponding monitor resolutions to take the Windows taskbar into account. There are more outlandish dimensions at » favelets.com.


      216 Websafe Color Chart

      Quickly draws a table of the websafe colour palette, in case you've forgotten the HEX codes. The reference page is generated entirely by the bookmarklet.


      Basic ISO Latin Characters

      Creates and displays a shorthand Latin special character reference. Source: » Bookmarklets.com.


      Page Weight

      Returns the combined filesize, in bytes, of the HTML file and all of its images. It doesn't include linked CSS code or scripts in the total however. There's also a utility that prompts you for a filesize in KB and returns the download time on a 56k modem. Source: » DanSays.com.


      Show Comments

      A clever, very cool-looking bookmarklet that adds an icon at each comment in a page's source code. Click the icon to see what the comment contains. Mostly useful out of interest. You need to be online for this to work, as it loads an external JS file. Source: » EndQuote.com.


      Choose Style sheet

      Since most browsers (most noticeably IE) lack support for choosing alternate stylesheets, this provides an interface for choosing an alternate style yourself, if one exists for a page. Source: » Favelets.com.


      Grayscale the Page

      Applies a filter over the page that takes all the colour away. Great, quick way of testing your page for legibility. Slows your machine down a fair bit though. Source: » 508 Compliant.


      IMGs missing ALTs

      Goes through your page checking if all your images have alt attributes. If not, it'll tell you which ones are missing them. Source: » 508 Compliant.


      General page Information

      Whips up a page of information pertaining to the current document, like the number of scripts, images and stylesheets; the creation and modification dates etc. Source: » Ian Lloyd.


      Meta Data

      Cleans up a page's meta data into a nice table for easy reading. Source: » Ian Lloyd.





      Writing




      Count Selected Words

      Counts the number of words in a block of selected text. Very useful. Only works in IE. Source: » DooYoo-uk.


      Look up word on Dictionary.com

      Very handy bookmarklet to have, just select the word you need help with and it'll open the corresponding Dictionary.com definition. There's also a synonym-finder through thesaurus.com. Source: » Blog of Francois.


      Page Freshness

      When you need to find out when a page was last updated, this bookmark will query the server and return the last modification date. If the server isn't configured right you may get some replies that are clearly wrong. Source: » Bookmarklets.com.




      Searching




      Google Search

      Searches Google for the words selected on the page. If you haven't selected anything, it brings up a prompt box to enter words into. Source: » Google.


      IMDb Search

      A personal favourite, I got sent this very useful modification of the Google bookmarklet above by a reader. It'll do a search on any words you have selected, or bring up a prompt for your input; and then search the » Internet Movie Database for you.




      Other Resources




      » Google Toolbar

      This isn't a bookmarklet, but a whole new bar for your browser that allows you to search Google from anywhere, and get a lot of information about a page through some great features like what's related, backward-links and cache-viewing. Excellent.


      » IE Web Accessories

      A really helpful group of new commands for your right-click menu in IE5+. You can generate a links lists (very helpful for checking how your link-text reads out of context), an images list or open frameset pages in a new window. Also there's an Internet Explorer utility that will toggle image loading on and off without having to go into your Internet Options. It's not a bookmarklet, but a small executable program. All in all, some rather essential utilities.












      - NsYta on 2008-01-04

      • The bookmarklets are divided into these categories:







        <!--
        <p>
        See also <a href='collection_others.asp'>other bookmarklets</a> made by other people than me.
        </p>
        -->


        The bookmarklets have been tested with various browser versions (Explorer 5.5, 6;
        Netscape 4.7, 6, 7; Opera 7), but only on Windows - not on Mac, Linux, or what have you.
        Report any errors to me.




        A NOTE ABOUT POPUPS: Some bookmarklets open new browser windows. If you're using a
        popup killer there's a chance those bookmarklets won't function properly.
        Likewise, if you're using Opera, your preferences must allow popup windows to be
        created for those bookmarklets to work. Netscape appears to be intelligent (or dumb)
        enough to handle the bookmarklets correctly regardless of your popup settings.
        If you use the Google toolbar as a popup blocker, you can press the Ctrl key
        while selecting a bookmarklet to allow it to create a new window.

      - NsYta on 2008-01-04
1 - 20 of 26 Next ›
20 items/page
List Comments (0)