Operaised -- The blog

Creating a bar(using userjs) for opera

, ,

Opera doesn't have the abilty to create third party toolbars in a sense of grabbing variables and putting them inside its own UI, here is a short tutorial in how to create your own 'toolbar' using the power of UserJS.

First of all, define a variable to the bar that is created.
For example;

var toolbar = document.createElement('div');


Then add a style to the bar you have made, make sure positioning and height/width is defined and imo its better to have it like this:

toolbar.style='position:fixed;top:0;background-color:white;border:1px dotted black;';


And for reference, its best to add an id to the bar as reference for later.

toolbar.id='newbarw00t';


And to add the html content, use innerHTML. Like this:

toolbar.innerHTML='< a href="http://my.opera.com">opera community site</ a>';


And finally, append the bar to the page!

Don't use document.body as that takes in account the current pages style. Use document.documentElement instead; like this.

document.documentElement.appendChild(toolbar);




Source panel(sort of)Highlight Bookmarklet for 9.

Comments

AyushAyushJ Monday, March 5, 2007 9:42:13 AM

Then increase the top margin of document :
document.documentElement.style.marginTop+=height of div


Example-
var toolbar = document.createElement('div');
toolbar.style='position:fixed;left:0;top:0;width:100%;height:24;z-index:99;border-bottom:1px solid';
toolbar.innerHTML='<a href="http://my.opera.com/community/forums/forum.dml?id=114">Community > User JS</a>';
document.documentElement.appendChild(toolbar);
document.documentElement.style.marginTop+=25



Write a comment

You must be logged in to write a comment. If you're not a registered member, please sign up.