2

I'm trying to find a way to create a bookmarklet which will load (from an external file) a new layer/div with other html and css and overlay it on the existing page.

Does anyone have a bookmarklet example for this they could share please?

I can create the div with the new html content and CSS classes I am just not sure how to write the bookmarklet and javascript/jquery function to load new content on top of the existing page.

Thank you very much!

matino
  • 17,199
  • 8
  • 49
  • 58
user895635
  • 21
  • 1
  • 4
  • DO you have something you have already tried? – Kyle Nov 30 '11 at 13:50
  • I've been looking at some code that I can learn from but my JS are very basic and I don't understand how to do it. I couldn't find any examples so hence I asked the SO community. The html part I can handle, it's setup up a bookmarklet to call the external file which hosts the html I don't understand how to do. – user895635 Nov 30 '11 at 18:19
  • I'm not trying to be spammy, but I wrote [a bookmarklet generator](http://zbooks.zzzzbov.com/) a while back that will execute the linked script file with jQuery. You can [view the source](http://zbooks.zzzzbov.com/assets/js/zbooks-1.2.js) if you'd like. – zzzzBov Nov 30 '11 at 21:09

1 Answers1

2

Try this code, obviously it can be improved, but it works. You have to minifiy it and be sure to add "javascript:" before pasting it in your browser address bar.

javascript : (function (e, a, g, h, f, c, b, d) {
    if (!(f = e.jQuery) || g > f.fn.jquery || h(f)) {
        c = a.createElement("script");
        c.type = "text/javascript";
        c.src = "http://ajax.googleapis.com/ajax/libs/jquery/" + g + "/jquery.min.js";
        c.onload = c.onreadystatechange = function () {
            if (!b && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
                h((f = e.jQuery).noConflict(1), b = 1);
                f(c).remove()
            }
        };
        a.documentElement.childNodes[0].appendChild(c)
    }
})(window, document, "1.3.2", function ($, L) {

    //your code here (a div with some content)
    $("<div style='width:500px;height:400px; border:5px solid black;  background-color:white; box-shadow:10px 10px 10px black; position:fixed; top: 150px; left:150px; z-index:99999'><h1 style='margin:150px'>hello world</h1></div>").appendTo("body");
});

EDIT:

here is the same code using an external document embedded in an iframe:

javascript:(function(e,a,g,h,f,c,b,d){if(!(f=e.jQuery)||g>f.fn.jquery||h(f)){c=a.createElement("script");c.type="text/javascript";c.src="http://ajax.googleapis.com/ajax/libs/jquery/"+g+"/jquery.min.js";c.onload=c.onreadystatechange=function(){if(!b&&(!(d=this.readyState)||d=="loaded"||d=="complete")){h((f=e.jQuery).noConflict(1),b=1);f(c).remove()}};a.documentElement.childNodes[0].appendChild(c)}})(window,document,"1.3.2",function($,L){$("<div style='width:500px;height:400px; border:5px solid black;  background-color:white; box-shadow:10px 10px 10px black; position:fixed; top: 150px; left:150px; z-index:99999'><iframe style='width:100%; height:100%;' src='http://www.htmlcodetutorial.com/frames/hello.html'></iframe></div>").appendTo("body");});
yPhil
  • 8,049
  • 4
  • 57
  • 83
Alvaro Prieto
  • 2,107
  • 2
  • 13
  • 12
  • WOW! It works... thank you Alvaro! How could I call an external html file rather than hard coding in the div with content? -- this is great though. Thank you so much! – user895635 Nov 30 '11 at 21:16
  • Could you help with the question of the external html file rather than the div/css in the bookmarklet Alvaro? Then this would be the perfect answer! Many thanks. – user895635 Nov 30 '11 at 21:57
  • Use an Iframe, I added an example above :-) – Alvaro Prieto Nov 30 '11 at 22:01
  • Is there a way _not_ to use an iframe? Because I would like some content underneath on the original page to show through .. and with an iframe it will not. Thank you Alvaro... almost solved :) – user895635 Nov 30 '11 at 22:04
  • Iframes can be transparent too. If you dont want to use iframes, then use jquery .ajax and .html to insert dinamically content from an external url. Good luck :-) – Alvaro Prieto Nov 30 '11 at 22:08
  • Alvaro, do you have an example of this part "jquery .ajax and .html to insert dinamically content from an external url" ... then all will be done and I can practise this. many thanks!!! – user895635 Nov 30 '11 at 22:09
  • The one-line example worked in a Bookmarklet for me very nice. Can you make it movable, and close-able? (with ESC and "X"). Thanks – BearCode Mar 18 '14 at 04:36