Bookmarklet: adds top frame to current page (w/o reload) 4

[jpo245]

Hi everyone, been puzzling over this for awhile.

Is there anyway i can click a bookmarklet, that dynamically adds a banner style top frame that slides out over the current page I am viewing.

I hope to be able to do this, WITHOUT reloading the current page I am viewing.

So for example,

Browsing : [No frames]

http://google.com

*Hit Bookmarklet, top frame slides out*
Browsing : [Top frame]

http://yahoo.com,

[Bottom Frame]

http://google.com

Loading an entire new page that defined the two frames was a solution, but that sucks coz i'd have to RELOAD the old frame [google.com] as well.


Anyhelp would be much appreciated.

Thanks!

 

[dwarfthrower]

Sounds like what you really want to do is insert a Div tag at the top of the current page... easy enough to do.

What did you mean by 'bookmarklet'?

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}

 

[jpo245]

Hi dwarfthower, basically a bookmarklet is one of those little buttons right below your browser address bar.

Usually the bookmarklet just points to "

http://somesite.com",

if u click on it.

However, instead of "

http://somesite.com",

u can also put in javascript instead.

Sites like

http://del.icio.us

have their own JS bookmarklet that allows u just to click on it, and it will pop up an "Add link" page in a new window.

Could u advise on how i'd insert a div tag on top of the current page? Many thanks!!

 

[dwarfthrower]

OK... to add a bookmark to say... firefox, go to Bookmarks / manage bookmarks and create a new bookmark for your button bar.

Enter the following (Cut & paste) into the location:

javascript:void(newDiv=document.createElement("div"));void(newDiv.setAttribute("style","background-color:#ffeeee;"));void(newDiv.innerHTML="This is a new Div");if(document.body.firstChild != null){void(document.body.insertBefore(newDiv,document.body.firstChild));}else{void(document.body.appendChild(newDiv));}

and voila... a shiny new bookmark that adds a div tag to the top of whatever document you happen to be browsing at the time.

You'll need to do some fiddling with the code to get whatever code you actually wanted in the div tag.

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}

 

[jpo245]

Hi dwarfthrower, THANKS ONE BILLION TIMES!!
Basically, i've been spending 4 days finding out how to load a top frame dynamically without reloading everything else...

I did come close to the "insert div method" but never really thought much of it...

Now i have an evenmore elegant solution!!

Thanks again, can't wait to try it out...

 

[tsdragon]

If you do a google search on the term bookmarklets you will find a bunch of links to pages containing all kinds of bookmarklets for all kinds of things.

The real challenge in writing bookmarklets is that it all has to be on a single line, and it can't be any longer than the maximum allowed size of a url in your browser.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[kaht]

adam has also graciously provided a few helpful bookmarklets in the faq section:

faq216-4345

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.

 

[kaht]

hmm..... thanks for the star

but adam0101 really deserves one on my behalf, maybe he'll pop in so we can "hook him up"?

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.

 

[tsdragon]

Outstanding FAQ! If adam does pop in he definitely deserves a star!


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[jpo245]

Hey dwarfthrower, i've been trying to tweak the code to do something meaningful, and have a question...
I noticed that the below were used to "append" or "insert" the new html code:

document.body.firstChild,
document.body.insertBefore
document.body.appendChild(newDiv)


My question is am i able to insert ANY kind of html in?
For example, forms, style, AJAX even, and any access to cookies too?

I have overcome the problem of 500 chars max for IE browser bookmarks by bootstrapping a remote js file, so no problem with that.

The reason why i ask this is because i intend to insert a slide out "form" that the user can type some information in, and then submit it to my server. I also hope to be able to prompt him to login in if his cookie is not set. All this via the appended/inserted div tag at the top...

Possible u think?

 

[tsdragon]

>> am i able to insert ANY kind of html in?

As long as you insert the html into a place that it is allowed, you shouldn't have a problem.

>> I have overcome the problem of 500 chars max for IE browser bookmarks by bootstrapping a remote js file, so no problem with that.

Would you mind sharing how you did that?

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[jpo245]

Hi tsdragon:

javascript:s=document.body.appendChild(document.createElement('script'));s.id='fs';s.language='javascript';void(s.src='

http://www.locationofyourjsfile.org/bootstrapjs.js');

 

[tsdragon]

Thanks for the useful tip! A star for you! I've been wondering about a good way to work around that character limit since I first discovered bookmarklets and found there WAS a limit. Never got the chance to try to figure out a way around it. Now I don't have to.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.