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
});
Related
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>
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
Ok, this is my problem... I have two pages. On the first page I have a header (h2) element on which I want to apply a border style. On the second page, there is only one link. When clicking on the link from the second page, to navigate to the first page, it should create a border on the first page around the h2 tag.
Any thoughts on how to do this? Is it possible to do it with regular JavaScript or jQuery?
Thanks!
No, JavaScript is client-side and for this you would require the server to remember if the link was clicked, possibly by recording this in a database or session variable.
That's of course if you're using the tradition model of a website, rather than loading pages already using pure JS.
It would be a pretty stupid way of doing it, but it is possible to do it client side. I would seriously recommend to do it server-side though.
On page 2, link back to page 1 with a hash:
Go back to page one and add a border
And on page 1, check if there's a hash:
if (window.location.hash === '#border') {
$('h2').addClass('withBorder');
}
I think if you are looking this kind of scenario you can achieve it with passing some hash to the url:
i passed a hash named 'second' in the second page url and put this script on second page
$(function(){
var url=window.location;
var hash = url.hash.substr(1);
if(hash == "second"){
$('h2').css('border','solid 1px red');
}
});
Checkout this if helps.
Well there is a way you could do this with JavaScript, although it's tricky and server side is a LOT easier. You would need to use some JavaScript to load different pages without refreshing the entire DOM. I do this with something called pjax. The way it works is to have each page act as a container to load all subsequent pages via ajax. By not doing a full page reload, any style changes you make on one page get carried over to other pages (this dose not survive an actual browser refresh).
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.
Have a look at http://keithloutit.com/#news
I have a similar site, with all the content on the same page.
I would like to know how to fetch the correct part of the url. In this case it would be "news". I suppose its some regexp used on document.location.href? Hope you get the idea, otherwise ill try to elaborate. Thanks
The javascript on the page has to get the hash from the URL:
window.location.hash
and then activate the currect tab.
Note: if you're merely linking to a part of your page that is not part of a tabular system, you don't need javascript. The page will automatically scroll down to the element with that ID.