how to change the url name while using effect.scrollto method - javascript

Hi i am using scroll to method for ging to particular places on a place but the url name is always same. Can't i have different url endings. I mean url always ends with #. Can't i have #products or #about. I am using this code.please help me
<span>ABOUT US</span>

You can just use the History API to push a URL change to the page when the user clicks on the link (https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history), for example using jQuery:
$("#start1").click(function(e){
e.preventDefault();
Effect.ScrollTo('about',{duration:1.0});
history.pushState(null, null, '#about');
});
Or you could look into using a straight up hash link, e.g. putting href="#about" into the anchor and preventing the hash jumping (How can I update window.location.hash without jumping the document?).
**EDIT
Heres a jsFiddle: https://jsfiddle.net/3uwkcebk/1/

Related

Remove the full hash / anchor from a URL using `$location`

How do I remove the full hash / anchor from a URL using the $location object in angularJS?
For example, I have the following url http://www.myurl.com/town/street, I am using anchor links in my page and I wish to remove the hash/anchor when a user clicks a link that toggles the visibility of a div/content (using ng-show), my code below tries to remove an existing hash/anchor like http://www.myurl.com/town/street#houses however I have notice that when I seem to have the following url http://www.myurl.com/town/street##houses using the code below so my $anchorScroll() doesn't work, then it changes my url to http://www.myurl.com/town/street#/%23houses#houses
if($location.hash().length > 0){
$location.path('#' + $location.hash()).replace();
}
$location.hash(toggleTarget);
$anchorScroll();
How do I just remove the full hash / anchor? Any ideas anyone? Thanks in advance.

How to link a hash link from the URL to Javascript content?

I've once used jQuery UI in order to add the tab feature to one of my project.
Everything was working just fine, and I noticed each tab was bound to a URL hash tag (I do not know you say it in english). As an example, once I clicked on the first tab, #Tab0 was added to my URL.
I want to reproduce this behavior in my current project. But I'm not using jQuery UI tabs, I am porting a desktop application and there are JavaScript buttons which write and replace content inside my page (in the manner of different pages, but without reloading).
How do I proceed to mimic this behavior ? Do I have to manually fetch the tag in the URL and do things accordingly all by JavaScript ?
Thanks,
u could do it this way:
creating an url with hash from current url:
var url = window.location.href + '#Tab0';
reading a hash from current url:
var hash;
if (window.location.href.indexOf('#') > -1)
{
hash = url.split('#')[1];
}
you can do this by using location.hash:
//you can set hash
location.hash = "something";
//and read it eg. http://domain.com#something
console.log(location.hash); //will return the current hash value 'something'
Also you have to remember that if your anchor tag has hashed href attribute e.g. <a href="#something"> it will be appended automatically to current url and browser will try to find given id on the page. Of course you can prevent that default behaviour.

How do I open a link in the same window and tab using the onclick event?

I have a page that has multiple divs. I want to get some information from my database to display in some of those divs and I also want it to be displayed as I click on a link to the home div.
I also need the page to be refreshed or reopened in the same window (not in a new page or tab). Last of all, I need the page to be in the home div.
I tried the code below and it didn't work:
<a href="#home" onclick="window.open('index.jsp#home')" >home</a>
home
home
I used this and it worked
منوی اصلی
change your :
onclick="window.open('index.jsp#home')" >home</a>
to
onclick="parent.location='index.jsp#home'">home</a>
no need to reload.
like this?
<input id="but1" type="button" value="click"></div>
function loadIndex() {
window.location.href = "http://jsfiddle.net/Xotic750/u5nmt/";
}
document.getElementById("but1").addEventListener("click", loadIndex, false);
on jsfiddle
remember jsfiddle is in frames
The problem with changing location.href to the current URL with a hash value is that the page won't reload but jump to the given ID.
If you really want to jump to the home div then you can just jump with location.href='index.jsp' and edit your index file
to set location.href = '#home' on load.
If you want to be able to pass information across to the newly loaded page (to provide a specific id) you could use the query string instead, e.g. to jump page use location.href = 'index.jsp?loaddiv=foo
Then once the page loads read the query string and use the value to jump to the requested div, e.g.
location.search = '#foo'
For details on extracting values from the query string see this question.

Where can I find documentation to support this behavior?

I'm looking over some previous developers code and I come across this line:
location.href = '#' + variable;
Which has the effect of updating location.hash. Remove the '#' and of course it redirects to the non-existent url. Playing around a bit it seems I can set the hash via location.href as long as the value starts with '#'. This line or similar is used a lot, but I can't seem to find any documentation the supports this behavior of it updating location.hash by setting location.href this way.
I would like to see something showing this isn't just a happy accident that this works so I don't have to re-code all the situations where this is used. Anything you can link me to would help.
Would it be better to just changes these to properly set the location.hash anyway?
Thnks
At a guess this is because setting location.href to value is supposed to have the same behaviour as clicking a link whose href=value would; it's not supposed to replace the contents of the address bar, because then you'd have to build absolute URLs everytime you wanted to use location.href.
Assigning values to location and location.href was apparently there back in Javascript 1.0, so it's entirely possible this wasn't properly specified anywhere – neither the Mozilla or Microsoft documentation go into detail. HTML5 specifies the behaviour, most likely retroactively.
This is a good place to start your journey on the location properties.
https://developer.mozilla.org/en/window.location
By the way, #something is a valid url and assigning a new url to window.location cause the browser to navigate to the new destination.
#something is called hash and direct the browser to an anchor on the current document, or to the top of the document if the anchor does not exists.
http://docstore.mik.ua/orelly/webprog/DHTML_javascript/0596004672_jvdhtmlckbk-chp-10-sect-2.html
So what happens is when you set location.href to something that is not seen as an absolute path. The browser will automatically put the current url prepended to whatever value you are trying to set it to.
So "#section1" = "www.mysitethatistoocoolforschool.com#section1"
and "section1" = "www.mysitethatistoocoolforschool.comsection1" (this does not exist)
This URLs with a '#' char are called anchor based URLs, they're not supposed to redirect the user from the page, instead they just update the position of the page by some offset, the same way as setting the location.hash you cited.
As stated by Sii this works because when you change the location.href value it's like you're clicking on a link for example then you have the following equivalence:
<a href="#toc" >Go to Table of Contents</a>
Is the same as:
location.href = "#toc";
Both of them would result in your location.hash variable to have the value toc.

How to implement go-to javascript links? (plus highlight)

Is there a standard way for making all the links in a site, with the form href=#something, become 'go-to' links? (does this kind of links have a name?)
Let me describe these links further: When you click them, #something is added to the url. And if you go directly to that url from your browser, it takes you to that page, and then it scrolls down to that link.
Take this link as example: http://en.wikipedia.org/wiki/Universe#cite_note-Craig-45
Edit: As you can see, the div gets highlighted. How to make that happen automatically?
You're referring to anchor tags. Here's an example of a JavaScript-less internal link:
Go to my div!
<div id="myDiv">
This is content
</div>
If you want to send someone to myDiv using JavaScript, then you could do it this way:
<span onclick="window.location.hash = '#myDiv'">Go to my div!</span>
<div id="myDiv">
This is content
</div>
Here's a jsFiddle that demonstrates both the HTML and JavaScript methods.
You can also use a similar method to allow the use to navigate to page and then scroll them to the appropriate element on the page. Simply add the hash (#) plus the ID of the element to the URL. For example:
Go to my page and then div!
Or, with JavaScript
Go to my page and then div!
Use the id attribute of the a tag. Place the following at the location you would like to link to:
<a id="example"></a>
You can then link to that using:
Go to example
If you want to link to a specific anchor on a different page, simply use the # character after the URL:
Go to different page example
Here's an example.
The thing after the # is called an anchor, and is defined using the a-tag: <a id="something">.
If you just have #something as a link, like <a href="#something">, it will resolve relatively to the current page. So if your page is at http://myurl/mypage.html then it will open http://myurl/mypage.html#something.

Categories

Resources