We Keep Coding

Bookmarklet to go to URL based on selected text

How could I write a bookmarklet for Google Chrome that will take the selected text, append it to a predetermined URL, and then go to the modified URL.
For example, let's say the base URL is http://www.mybaseurl.com/. (This base URL is hardcoded in the bookmarklet code.) Now, suppose that on a random webpage I select the text dog. Then, if I click the bookmarklet while that text is selected, I want the bookmarklet to cause the browser to visit the following URL: http://www.mybaseurl.com/dog.
How can this be done?

You can get the currently selected text with window.getSelection(). So this bookmarklet can redirect based on the selected text:
javascript:window.location.href="http://www.mybaseurl.com/"+window.getSelection()

This method will open the url in a new window or tab (depending on browser settings), instead of opening the url in the current tab. So, you won't lose your place. It uses window.open instead of location=
javascript:(function(){s=document.selection?document.selection.createRange().text:window.getSelection?window.getSelection().toString():document.getSelection?document.getSelection():'';if(s==''){s=prompt('You%20did%20not%20select%20any%20text%20to%20search%20for.%20Enter%20the%20text%20to%20search%20for%20:','');}if(s){window.open('https://mxtoolbox.com/SuperTool.aspx?action=ptr%3a'+s, '_blank')};})()

href doesn't change browser address bar

Why does my browser address bar not change on href. I have a link called "about" on my homepage. About opens in a div. When I click about it opens in the div but the url address bar remains same i.e "www.example.com/homepage" when I want it to change to "wwww.example.com/homepage/about". I have tried
windows.location.href="/about"
but it takes me to a new page rather than opening in the div. Is there a way of achieving what I am looking for — i.e. to change the address bar once the link open in the div.

You have to change your function to change the history state.
You can add something like this to change the address in the address bar:
history.pushState(null, null, '/about');
https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history for more info.

I dont think this is possible. The browser will always show the address of the page loaded, and that cannot be changed without loading a new page.
You could achieve something similar using hashes if it is really important. it should be possible to change the url using something like this:
window.location.hash="about";
That should change the browser URL to www.xxxx.com/homepage#about without reloading the page.
and then if the user copies the URL or bookmarks the page then they will load that URL, which in turn would allow your javascript to detect the hash and load the appropriate content in the div.

You may be looking for window.location.hash
REgards

How to give user trying to copy URL other URL than the A HREF value?

I use skeleton framework to sketch tabs inside IFRAME widget. Each tab has code like this:
<a class="active" href="#skeletonTab0" target="_top">Name of tab</a>
href pointed to #.... is required for the menu to work.
When user right clicks on this tab and selects "copy URL" he gets the URL of the widget host http://dummyhost.com/index.php#skeletonTab0.
But because the widget is embedded on site http://importantnews.com i would like him to copy URL to:
http://importantnews.com/index.php?showTab=0
Is there any way to make it so that a will have href pointed to #skeletonTab0 but when user tries to copy the URL he will get proper URL on important news?
Basically the question is if i can provide user trying to copy URL from a href other href than actual href?
EDIT: Today, i've found a working example of something similar to what i try to obtain, but still figure out how to make this work for me.
Look at this site:
https://plus.google.com/100784670873737717716/posts/PAEa7sFcKMS
When you click "What i learned" it redirects you to http://www.readwriteweb.com.
When you copy the URL of this link you get http://www.readwriteweb.com.
But when you click the link plus.url.google.com* redirecting to http://www.readwriteweb
Have you any ideas?

Not really, no. What you could do is have the link point to http://importantnews.com/index.php?showTab=0 but register an onclick listener so that when the link is clicked, the default action (i.e. going to that link) is cancelled and replaced by your desired action.

How do you hide the URL when you hover a hyperlink?

When you hover over a hyperlink you see in the corner of your browser the url you're gonig to. I'm using javascript to navigate through my tabs div. When I hover over the tab I see the url. I would like to hide this. Is this possible?
Link to example

Don't do it! Clients like to see where links are going. This behavior isn't up to you.
The only thing you could reasonably do is set the link to go to nowhere, and set the onclick attribute with sourcecode that does a window.location.

If you don't use the "href" attribute, the link won't show up.
Simply do this:
<a id="tab1">Tab 1</a>
$('#tab1').click(function(event) {
switchTabs();
});
This will register a click event (using jQuery) on the link without displaying any URL to the user. This is the proper way for handling links that don't redirect the user.

Hide Text
Then in that function you can have a switch case statement which uses window.location to send the user to another page.
Downsides to this include alienating your users which disable Javascript, and search engines probably won't follow this link.

window.location.href vs clicking on an Anchor

What's the difference between clicking on:
<a href />
vs.
calling window.location.href = ...
?

Wherever possible, you should use <a href="foo.html"> over window.location.href, for a number of very good reasons.
If you have javascript disabled, none of the links would work.
Spiders, such as Google Bot, do not interpret javascript, and so they won't follow any of your links.
IT BREAKS THE INTERNET. No, really though - the World Wide Web is built on the very basis of discoverable linkages between pages. Hiding these linkages with non-standard .. err, links, goes against that very premise.
It makes for a bad user experience: a user expects that when they mouse over a link, they will have access to some information:
the destination displayed in the status bar (very important!)
right-click -> copy link location
middle-click -> open new tab
etc
Using window.location breaks all of these
It's much easier!

Setting window.location.href = 'thepage.html' is the same as calling:
window.open('thepage.html', '_self');
I.e. the target is limited to the same window, as that is where the location property is. This has the same effect as clicking a link without a target attribute:
...
You can use the open method instead to specify a different target, like a new window:
window.open('thepage.html', '_blank');
This has the same effect as clicking a link with that target:
...
You can also use the open method to open a new window. The return value is a reference to the window, so you can use that to set the location of that window instead of the current window:
var w = window.open('about:blank', '_blank');
w.location.href = 'thepage.html';

Don't forget that in addition to the above answers, clicking on a hyperlink (anchor tag) will trigger that element's onclick handler (if any), whereas the Javascript version clearly doesn't and just changes the window's location.
It is possible to manually invoke the onclick handler from Javascript if you want to simulate a click, but you must remember to do this manually. The snippets you posted would differ in this regard, which could be the cause of any behavioural differences.

With the anchor you can specify the target property, but with window.location.href you can't.
Generally the anchor is used when a user wants to redirect the browser to another location, window.location.href is used when the redirection is done using javascript.

In addition to the other answers given, clicking on an <a> element with the href attribute sapecified will cause the browser to navigate to the URL in the href, regardless of whether JavaScript is enabled or not.

document.referrer contains a reference on the server and client to the url of the page that contained the link the user clicked to get to the new page-
scripted location methods do not.