New to Jquery and all. I need some help with the anchor links. .
I’ve used the ScrollTo plugin for header images for each topic and I have created a menu to change the content in the div(s) that contain readable content with ajax, so it looks like different pages with headers using the one page.
everything works well, but on browser refresh the page jumps down after the menu and on to the header.
Would anyone know a script that would deactivate all anchor links in the page so that page onload the page loads as default index.html instead of index.html#some_anchor
or any other ideas to stop it jumping.
any help would be appreciated.
You can return false within your onclick functions which are going to the hash links…that way when you refresh it wont contain any hash links in the url.
This is relatively easy to do in jQuery, but I’m not sure it’s going to have the effect you want it to have… We could very quickly disable all anchor tags effect on the urls with the following code:
$('a').click(function() {
return false;
})
It would be more advisable to assign a class to the specific anchor tags we want to disable. For example if we used the class “menu”, the code would look like this:
$('a.home').click(function() {
return false;
})
I’m not familiar with the ScrollTo plugin and it’s possible that by disabling the modification of URL’s it will stop working (thought this isn’t likely if the plugin is decently written).
$('a.home').click(function() {
return false;
})
I tried this code and added the classed to the links, but it still jumps down on brower refresh.
so I’ve been looking about and found this http://jelaniharris.com/2008/remove-anchors-from-a-url-in-javascript/
*Remove Anchors from a Url in Javascript, concept is good idea and might work for the browser refresh problem, and would look better in the url.
only thing is I cant get the dawn thing to work –
if you’ve got any work arounds to get this script to do what its supposed to do this would be very valuable information and make my day that little bit more jolly!
any idea’s?
It is difficult for me to tell you why it is not working in your case unless you can post an example of your code. Here is an example of this technique which works:
<script type="text/javascript">
$(document).ready(function() {
$('a.menu').click(function(){
return false;
})
})
</script>
<a href="#thisWontShowUp" class="menu">Test Anchor</a>
On a side note, anyone know why the syntax highlighting is breaking here after the script closing tag?
the index.html#some_anchor still appear in the URL ?
heres the code …
$(document).ready(function() {
$('a.button').click(function(){
return false;
})
})
The Link.
<li><div id="a1a"><a href="#section1" class="button"><span> Home </span></a></div></li>
<li><div id="a2a"><a href="#section1b" class="button"><span> Repairs, Upgrades & Installations </span></a></div></li>
<li><div id="a3a"><a href="#section1c" class="scroll start button"><span> Network security, antivirus & connectivity </span></a></div></li>
<li><div id="a4a"><a href="#section2" class="button"><span> Websurfing for Minors </span></a></div></li>
<li><div id="a5a"><a href="#section2b" class="button" ><span> Data-solutions</span></a></div></li>
<li><div id="a6a"><a href="#section2c" class="button"><span> Computer Tutoring</span></a></div></li>
<li><div id="a7a"><a href="#section2c" class="button"><span> Find a Technician</span></a></div></li>
and the scrollTo section:
<!-- // *** [ Header ScrollTo Jquery plugin ] *** // -->
<div class="section">
<ul>
<li class="sub" id="section1">
<!-- Start of boxes horizontal slider -->
</p>
<div id="boxed-header" class="boxgrid caption"> <img src="images/header1.jpg" />
</div>
<!-- End of boxes horizontal slider -->
</li>
<li class="sub" id="section1b" title="section 1-b">
<!-- Start of image -->
<img src="images/Header2.jpg" />
<!-- End of image -->
</li>
<li class="sub" id="section1c" title="Section 1-c">
<!-- Start of image -->
<img src="images/Header3.jpg" />
<!-- End of image -->
</li>
</ul>
</div>
<div class="section">
<ul>
<li class="sub" id="section2" title="section 2" >
<!-- Start of image -->
<img src="images/Header4.jpg" />
<!-- End of image -->
</li>
<li class="sub" id="section2b" title="Section 2-b">
<!-- Start of image -->
<img src="images/Header5.jpg" />
<!-- End of image -->
</li>
<li class="sub" id="section2c" title="section 2-c">
<!-- Start of image -->
<img src="images/Header6" />
<!-- End of image -->
</li>
</ul>
</div>
Any ideas on how to remove the #some_anchor in url would be fabulous news to my ears, or in case eyes! 
Hmmm… I think we’re getting closer to figuring this out. Looking at the code you pasted, it looks like you might not be using the ScrollTo plugin exactly as intended.
ScrollTo appears to expect you to bind events to each of the clickable elements, rather than using any kind of anchor tag to point the browser to the elements you wish to view. If ScrollTo is correctly powering your scrolling, you should be able to change the href attribute of all your anchor tags to “#” and have the scrolling still work. It shouldn’t be dependent on any traditional document anchors.
If you’re implementing ScrollTo in your code could you show us your javascript? Looking at the ScrollTo demo on their site, it should resemble something like this.
$('a.back').click(function(){
$(this).parents('div.pane').scrollTo( 0, 800, { queue:true } );
return false;
});
If you don’t have any code that looks like this I suggest you take a look at the ScrollTo documentation to read a better explanation of how to implement it than I can give you.
problem solved, I did infact implement the plugin incorrectly and changed the code to work by id’s rather than anchors …
thanx for all your help, it was much so apprieated. cheers all!