changing URL into clicked elements on the page without reloading the page - javascript

Update browser address bar without reload
I found this about making the URL change without updating.
I want to make a website like
http://fancytext.blogspot.ie/
but instead of adding the symbols to the text box there I want the symbols to overwrite the URL on the address bar is this possible with javascript or ruby?

You can "push" any text into the address bar using pushState and it's simple like hell:
window.history.pushState({url: yourUrl}, null, yourUrl);
remember:
you could use full address, when you try to push url, other ways the path in url will be appended to current url, when you try to use slashes (if I remember correctly)
Working example is my own site, where address is changing while you scrolling thru page http://dariuszm.pl (may not work on older browsers)

Definitely possible. You simply need to put a hash (#) before your symbol. Anything after the # does not result in a page change.
You can easily set it without JavaScript by the href in an a tag...
Ⓐ
But if you're desperate to use JavaScript, it can be done there as well...
<script>
location.hash = '#Ⓐ';
</script>

Related

javascript that writes in the google chrome url bar

I want to try and right some code that will guess the default ip of a router that you are currently connected to. To do this, i would write a bit of javascript code that would type into the google chrome URL bar and attempt to search it. For instance: it would type 192.168.0.0 , then 192.168.0.1, etc... currently my largest problem with this is that i have no idea how i would write code that would locate and type into the url bar, i could do it with any other user input. How would i do this?
URL bar is not part of the window so you couldn't just locate it using javascript as with DOM elements.
To read and write to URL you could use window.location (more to find here: https://developer.mozilla.org/en-US/docs/Web/API/Window/location).
If you change window.location to another address, it will force browser to load new content, in the same way as reloading a page. Remember that loading new page will probably lead to discarding your javascript code if it was loaded from within the website.
Another way is to use iframe and dynamically change its url, like here: dynamically set iframe src
If you want to make tool that iterates through possible addresses, i would recommend writing it as a Chrome extension. More about it and tutorial are available here: https://developer.chrome.com/extensions

How to hide URL from link?

I'm having a little problem and I am a bit of a noob to coding but can do HTML ok-ish. So ok, How do I remove the # from my url, currently it is /#contact but I just want /contact. There is an option in my custom.js to hide the hash but when I do that, the /{pagename} disappears and all I see in the address bar is my domain. It's a landing page with javascript so they aren't pages as such, it just scrolls down the page to the correct section.
So I have seen somewhere that I need to add return false to something like click event? I can't find this enywhere in any of the js files. The other thing was the window.location.href but can't find that either.
Here is the only thing I've found in all of my js files.
jQuery(document).ready(function() {
/* navigation local scroll ----------- */
jQuery("ul.nav").localScroll({
event:'click',
hash:true,
easing:'easeInQuad',
duration:1000,
offset:-45
});
So in essence, what do I need to do to remove the hash.
First, some explanations: #contact at the end of your URL, means that your browser will try to reach an element in your HTML which have the id attribute equals to "contact".
Next, your solutions:
You won't be able to only remove the hash before content with only client technology (i.e: javascript), you need to go through your server to rewrite your URL (e.g: using Apache Rewrite module).
But indeed, what you could do, if you don't mind about losing content in your URL, is to prevent the URL from changing when you scroll to this element in your javascript, using event.preventDefault();... or with your localScroll stuff, it can be done by setting the hash option to false :
jQuery("ul.nav").localScroll({
event:'click',
hash:false, // oh yeah
easing:'easeInQuad',
duration:1000,
offset:-45
});

Using Javascript to alter every url on page

I am not sure if there is a name for what I want to do, but I would like to use javascript to alter every url on a webpage on my website. So if someone posts a url such as:
visit http://www.blah.com
when viewing this page, I want javascript to change it to:
visit http://www.mysite.com/count.php?out=http://www.blah.com
I know about the two urls in one I will handle that part, I just used this as an example of placing the same text in front of every url in the page. Kinda like how thewaybackmachine does it. Thanks.
Using jQuery:
$("a").attr('href', "http://test.com?blah=" + $(this).attr('href'));
This code searches for all a tags on the page, and replaces the contents of the href attribute with http://test.com?blah= followed by the original contents of the href attribute.
To try it out, You can copy it, hit 'f12', paste it into the console, hit enter, and see it's effects on this page right here! (also breaking all your links...)
Here's a way, without the need for JQuery. (loading and parsing a pretty big library in order to just do one simple thing may be a bit much..)
[].slice.call(document.querySelectorAll('a')).map(function(a){ a.href = 'http://somesite.com/count.php?' + a.href })

How to put hash after hostname (before path) in browser address bar

On my site I am using ajax to get elements of the page. When I do this, I am simply adding the address to the hash in address bar. But this generates links that don't look so good, in example, when user wants to go to hostname.com/path, my javascript puts in the address bar something like this: hostname.com/path#/path.
Recently I saw on my local social network site, that it is possible to manipulate the path part of the link. The site I am talking about, is somehow modifying everything after the first /. So when I am entering mysocialsite.com/path, it erases the /path part and replacing it with #/path. How can I do this? As fas as I knew, it is not possible to modify URL (besides # part), but apparently I was wrong.
Edit: This is exactly what I want to do:
I am going to somepage.com/path/to/resource. Typed that in my
address bar and clicked enter.
Now page has loaded, and the javascript on that page changed the link to somepage.com/#path/to/resource, without doing any further page reloads or any similar stuff.
You might be looking for pushstate:
var infoToStoreIfYouNeedThis = { foo: "bar" }; // might not need this at all
history.pushState(infoToStoreIfYouNeedThis , "Title of new page", "/#newLocation");
That will change the url to "domein.ext/#newLocation" without reloading the page. If you goto /#anotherLocation and then press the browsers back, you go to /#newLocation.
Carefull though, not IE9 and lower, supportchart can be found here
If you dont mind the reload (which you probally do):
window.location = "/#newLocation"
Sure you can. There is nothing stopping you from having a controller to handle /, and then client-side code to handle # afterwards. Note that you can't get rid of the initial /, but you can do something like:
http://example.com/#/path/segment2/segment3

Update window hash (at url)

So I have this js code for an image gallery:
(this.settings.update_window_hash) {
var thumb_link = this.images[this.current_index].thumb_link;
if (thumb_link.attr("id")) {
window.location.hash = "#image-"+ thumb_link.attr("id"); //#url
} else {
window.location.hash = "#image-"+ this.current_index;
};
};
So as you've probably assumed this appends $image-(int) to the url. So if I have a
gallery with multiple images if the thir image is selected the url will look like this:
mysite.com/gallery.html#image-3
All good. But I dont really like this to be appended to the end of the url. So is there
any problem if I remove this part of the script entirely? So regardless the number of
image currently selected the url will look like this:
mysite.com/gallery.html
I've tested it and it works okay. But I'm not very experienced with javascript and I want
to make sure I'm not making a mistake. So
IS IT OKAY IF I REMOVE THIS SCRIPT ENTIRELY? WILL IT CAUSE ANY PROBLEMS?
HUGE THANKS.
Hashes at the end of the URL are optional and not required so YES, you can remove that script if you want (I'm not sure what problem you're trying to solve by removing it). In general, you get more useful answers if you tell us what problem you're trying to solve rather than what solution you're trying to use.
Hashes are used when you want the URL of the page to direct the viewer to some subcontent on that page. If you remove them, your page will still work just fine, but the URL of the page will not reflect which image is displaying. So, if the viewer saves that URL and comes back to it or links to it or anything that keeps a reference to the URL, it will go to the generic version of the page, not the onethat shows a specific image. Whether that is OK is totally up to you and how your page works.
Just use:
location.replace(location.href + "#myhash");
The location.replace method overwrites the current step in browser history. For an example of this in action see http://prettydiff.com/slideshow/
The stuff after the octothorpe normally represents a "name" or "id" from the web page. You can have an anchor tag (<a name='thevalue'>) and the browser will interpret the text after the octothorpe (http://example.com#thevalue) by scrolling to the associated section on the page.
Unless the page has special JavaScript to behave differently. In your case, it depends upon the full functionality of the web page you're writing. If you have smoke tests/unit test/use case tests/other QE tests, you should execute those to ensure that your changes don't break anything.
See http://www.w3schools.com/html/html_links.asp for more description of the standard usage.

Categories