Hi i'm a JavaScript novice and need some help. I am trying to create a toolbar which can be viewed on any website through the use of a bookmarklet, the toolbar is simply just a div with a few links. But i am stuck on how to achieve this. Any help to accomplish this would be greatly appreciated.
most bookmarklets that do something complecated like "creating a toolbar" simply add an external script to the page that the bookmarklet is invoked on.
Basically all you have to do is write a link that contains javascript, which can be acheived by starting the href="" with javascript:
so lets just start with a script in an href that will add an external JavaScript to your page
addScript = function ( url ) {
myScript = document.createElement('script');
myScript.src = "url";
document.head.appendChild(myScript);
};
addScript("http://google.com/");
so if you shrink that down into a url you get..
click to add toolbar
however you want to make this bookmark-able so theres one more level of confusion we have to add... and this part has to be done in different ways depending on the browser
addBookmark( url, title ) {
if (window.sidebar) { // Firefox
window.sidebar.addPanel(url,bookmarkName,"");
} else if(window.external) { // IE
window.external.AddFavorite(url,bookmarkName);
}
}
You can include that on the page where you're going to have your add bookmark button. A couple things to note though
this isnt going to work in opera.. but who cares about opera
webkit browsers (chrome & safari) dont allow javascript to create bookmarklets
Finally you need to mash it all up into one ugly link
click to add bookmark
In the end though I suggest you look into making a Google Chrome Extension or a Firefox Plugin instead of a bookmarklet since you have more capability with either of the two.
As far as how to make a toolbar with JavaScript, well you're just going to have to make another question for that.. Its too much and you haven said enough about what you wan to do for me to answer it here.
bombedmetor,
Greg Guida's tip on including an external script will allow you to create an awesome, clean bookmarklet-based toolbar. Why? Because you'll be able to use JavaScript libraries like JQuery, etc.
Here's a quick example along the lines you asked for to help get you started. The bookmarklet creates a div element with a link to the Stack Overflow homepage.
javascript:void(function(){var divElmt=document.createElement('div');link1=document.createElement('a'); link1.href='http://stackoverflow.com';link1.innerHTML='StackOverflow Homepage';divElmt.style.backgroundColor='yellow';divElmt.style.position='fixed';divElmt.style.top='0px';divElmt.style.width='10em';divElmt.style.height='5em'; divElmt.style.border='solid red 4px';divElmt.style.zIndex='100'; divElmt.appendChild(link1);document.body.appendChild(divElmt);})();
To use the above bookmarklet, you create a new bookmark in your favorite browser and add the code above where you would normally place the URL.
The code does the following:
Creates a new div element.
Creates a new anchor element and sets the value of the href attribute.
Assigns some basic values to the style attributes of the new div (so you can see it easily).
Appends the anchor as a child element of the new div.
Appends the new div element as a child of the body element.
If all goes well, you should see a yellow box with a link to the Stack Overflow homepage at the top-right of your page after using the bookmarklet. bombedmetor - I hope this helps get you started. After you get comfortable with how these things work, you can apply Greg's wisdom to create your toolbar bookmarklet in a way that can be added to people's browsers with just a click or two.
Something to keep in mind: As Greg indicates, bookmarklet code is treated as the contents of the href attribute of an anchor element. This is why I used single quotes in the code above.
Some sites/articles to check out:
http://en.wikipedia.org/wiki/Bookmarklets
http://www.latentmotion.com/how-to-create-a-jquery-bookmarklet/
Related
This may sound like a really stupid question for you guys, but how can I use the inspect elements tool on Chrome to identify the source of a particular section of a website? To make it simpler to understand, I want to modify the footer of a particular website (WordPress based).
The problem is that the footer was customized (which means I can’t edit through the WP backend) so I need to find where exactly or what’s generating this footer.
Does this make any sense to you?
I'm pretty sure you can't do this in Developer tools as wordpress is PHP based, chrome only sees the compile code.
What I would do in your situation is to try searching the theme folder for an ID, Class or piece of code that is unique to the footer and try that way.
This can be done by visting the website, right clicking and selecting Inspect.
The developer tools dropdown will appear. In the top left corner there is an icon with a pointer hovering over a screen (this is the inspect element tool). Click this, and move your pointer on to the part of the webpage you wish to find the HTML for.
The html for that part of the website will be highlighted in the developer window, making it easy for you to see.
You can then either , edit inline in the browser to get an immediate view of the changed code (this will not be permanent, or change you code file), or use that location, to return to your WP editor and make permanent changes.
I am Developing the Politics & Information Google Chrome Extension but I have run into a problem, I am attempting to insert a JS Script into one of the div's of the Webpage, the result is nothing, absolutely nothing pops up
I know i have the right area because if I use += "Hello"; it displays the text there properly, but when I actually do +="" the script doesn't seem to run. To all them devs out there, any suggestions?
How I am doing it:
theinfotable.children[0].innerHTML += '';
JavaScript (Google Chrome Extension inserted from the Contentscripts.js file)
I can see that the Code Inserted, but the script still doesn't seem to load: (And I know this code works when I have my own page instead of inserting)
http://oi61.tinypic.com/2irkx9c.jpg
Rather than use .innerHTML, have you tried creating a new element and appending it?
var injectable = document.createElement("script");
injectable.innerHTML = "console.log('Injected!');" // Your script here
// or injectable.src = "location" if you'd rather link
theinfotable.children[0].appendChild(injectable);
I'm not entirely sure why this occurs, if I had to guess it's an idiosyncrasy in how things are parsed or a security measure, but appendChild should do the trick. Basically, from what I understand it's the difference between
innerHTML +=: converting HTML to a string, and adding to that string, and re-parsing that string with new content
and...
appendChild: creating a DOM node, appending said DOM node, recalculating/refreshing the document for styling recalculations.
And somewhere in the parsing, your new script info is ignored.
I figured out the problem, the page was blocking my script as "Insecure" at the top right there was a little Shield Icon and after clicking on it I just had to put "Show Insecure Scripts" and it popped up.
(If anyone feels like telling me so people don't have to do this, that'd be great :D) I would rather people just have it pop up instead of having to stay for it to pop up
Using the Chrome browser (technically, Iron), I want to have a bookmarklet that will override the expand macro in Confluence (technically Atlassian Confluence 5.2.3), so that none of the sections are collapsed after using the bookmarklet.
Why? When I search in Confluence for a keyword that is behind the expand macro, an article will be identified in the search results with the keyword somewhere in the article, but when you navigate to the article, I can't find the word. So I perform a find in page (ctrl+f) for the word, and it doesn't appear. After I click on all the expand macro links, and try the find in page again, I am able to find my keyword.
Since I am no coder, I have done my best... using the code found here:
Javascript debut - from Chrome console to a bookmarklet and using the I wrote the following:
javascript:void((function(){function getElementsByClassName(classname, node){if(!node) node = document.getElementsByTagName("body")[0]; var a = [];var re = new RegExp('\\b' + classname + '\\b'); var els = node.getElementsByTagName("*");for(var i=0,j=els.length; i<j; i++)if(re.test(els[i].className))a.push(els[i]);return a;};var elems = getElementsByClassName('ajs-content-hover');for (var i=0;i<elems.length;i+=1){elems[i].style.display = '';}})());
I believe the expand action is coming from a class named ajs-content-hover, on certain divs. I could be completely wrong about this. Why I think this is the class:
I browsed to a page using the expand macro, used the Browser Developer Tools (ctrl-shift-I), went to the elements tab, clicked a link I know uses the expand macro - that was currently not expanded (that's the default behavior), and identified the following html:
<div id="content-hover-1" class="ajs-content-hover" style="display: none;"><div class="contents" style="width: 300px;"></div></div>. I found multiple divs of this type, with different IDs, but the same class and the same style.
My first bookmarklet changed the style for the entire page, which is not what I wanted (resulted in a blank page). So I thought targeting the class might be appropriate, but that isn't working either.
Hopefully, this is sufficient explanation to demonstrate the problem, steps taken, motive (sometimes questioned on SO), and desired state. I am looking for an explanation that can get me to a working bookmarklet.
I solved this by taking advantage of the jQuery library that ships alongside Confluence.
This allows you to easily target elements using CSS-selectors.
Also, if you haven't done so already, use the console in Chrome or use Firebug, to test your code.
When using the standard expand macro, the 'link' (really just a span) you click to expand the panel, has a class called expand-control.
Simply select all of the click targets using the class name, then call the 'click' event. All closed panels will be opened and all open panels will be closed.
javascript:$('.expand-control').click();
I am trying to write a bit of code in a script that changes the color and/or text formatting of a browser's tab--any tab, not just the currently selected one--when a given process completes, so that I can tell, without tabbing back to said tab, if the process is finished or not.
What I'm looking for is the specific bit of code or call to make that accesses the tab's style (or whatever); something where I could go
tabWhereScriptFinishedExecution.style.color("#77ffa5");
tabWhereScriptFinishedExecution.style.fontWeight("bold");
or something. Tab Mix Plus and its different effects on the tabs reflecting various states and whatnot were what got me thinking about this.
I'm using Firefox, and working this into a Greasemonkey script, so I'd like to avoid using JQuery if possible.
As far as I know it is not possible to do the way you are trying to achieve it. You cannot style the tab text. It is part of the browser. Tab Mix Plus you are referring to is a plug in for Firefox.
I've been trying to figure out how to let a Greasemonkey user script open up a search engine page in the background and fetch search results. I've tried to look up examples to open up HTML pages, but afaik all examples of requests handle ajax calls instead of html calls.
Any hints would be grateful.
The standard Greasmonkey GM_xmlhttpRequest function (link to API) can handle any type of request, not just JSON. Under examples, check out the GET request code snippet.
Watch out though. Search engines like Google will not appreciate the screen scrapping (and will probably block you if you grab too many results too quickly).
Haven't done this in GreaseMonkey (don't know really in fact if you can do it);
though if you really want to do it by opening a new tab, and if you're not using any GM-specific stuff in your code (and don't want to run the code automatically, well, this can be an obstacle), you can take a look at Custom Buttons extension.
With it, you can create buttons that have access to Firefox internals and invoke stuff like gBrowser.addTab().
But working with CB is a bit more tricky than in GM.
These posts may help if you're interested:
JavaScript alert not working in Firefox 6
Mozilla: Tabbed browser / Manipulating content of a new tab
Code sample copied from Mozilla:
var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.addTab("http://www.google.com/"));
newTabBrowser.addEventListener("load", function () {
newTabBrowser.contentDocument.body.innerHTML = "<div>hello world</div>";
}, true);
I've done something similar.
All you have to do is save the GM_xmlhttpRequest response in a DIV.
With this DIV you can do whatever you want (show, hide, display only some of the content, etc)
Just take a look at my script source code.
I'm positive it will help you.
I know you don't need, Mr. 14k rep, but i'll break it down for you anyway :)
function conectar() calls GM_xmlhttpRequest [GET] and stores only the part of the content that i want to use in #divtempora, which is a dummy div that the user never sees (hidden).
Then function resp_dxlegacy() walks through the dummy div, save the info i want in a variable and calls conectar() again passing this parameter and storing the content in another div, which is, finally, displayed to the user.