Page scrolls down when clicking on a link - javascript

I have a problem with pages scrolling down when clicking on my links. I'm pretty sure it's because the browser thinks the link is supposed to be an anchor to a certain area on the page.
I'm using this jquery code to hide the main div and show the div corresponding to the link clicked. The main info div and main info2 divs are the same in css. The only thing different is the text inside.
$(document).ready(function(){
$("#home").click(function(){
$("#main_info2").hide();
$("#main_info").show();
});
$("#info").click(function(){
$("#main_info").hide();
$("#main_info2").show();
});
$("#gyms").click(function(){
$("#main_info").hide();
$("#main_info2").show();
});
$("#contact").click(function(){
$("#main_info").hide();
$("#main_info2").show();
});
});
Here is my navigation list:
<ul>
<li><img src="main home page/purhome.jpg"></li>
<li><img src="main home page/purinfo.jpg"></li>
<li><img src="main home page/purgyms.jpg"></li>
<li><img src="main home page/purcontact.jpg"></li>
When I click on the info link for example the home div hides and the info div is shown, but the page scrolls down due to the href="#info". If I change it to href="#" it works fine without scroll, however, the browser url does not reflect the div that is showing if only using the "#".
For example, I want the browser to show http://google/index.php#info and not just http://google/index.php#.
Any ideas?

Here's your problem:
In this line:
<img src="main home page/purhome.jpg">
You are setting up a link which indeed scrolls to a certain area on the page, in this case to itself.
href="#home" means: when clicked on this link make the element with the id of home visible.
The actual link which is clicked, has the id of home.
So it ensures that whatever is inside itself is visible, browsers usually scroll down the page to the specific element with the specified id. This explains the behaviour.
In your case you can just get rid of the href attribute on the links, that should fix it.
Edit
The easiest way for you to get the desired behaviour is to just change your id's to something like this:
HTML
<ul>
<li><img src="main home page/purhome.jpg"></li>
...
</ul>
JavaScript
$("#home-link").click(function() {
$("#main_info2").hide();
$("#main_info").show();
});
...
And you could even change the id of main_info to home to ensure main_info (or home then) is visible after clicking the link, if that is the kind of behaviour you are after.
Edit 2 - reading the hash solution
HTML
<ul>
<li><img src="main home page/purhome.jpg"></li>
...
</ul>
<div id="home">This is the tab content for the "home" tab.</div>
No id needed on the link, but set one on the <div> or on whatever element you use to create your tab content. Now the href attribute on the link will ensure the right thing happens in combination with the JavaScript below which catches the click and shows the right tab based on the hash value .
JavaScript
$("a").click(function() {
// Hide all tab content elements.
$('some-selector-which-selects-all-tab-content-elements').hide();
// Show only the tab content element with an id equal to the hash value.
$(window.location.hash).show();
});

Since you're assigning click event handlers to the a tags there's no need to use the 'href' attributes in your code:
<a id="home">

Related

Making dropdown menu in html & css with javascript or jquery

This is my problem in my <li class="drop-down"></li> then my position in my page is in bottom then when I click that -> drop-down <- then my page is going on top how can i fix that problem, my navigation bar is fixed position.
href="#"
casuses that issue for you. Try linking it to an actual item in your page. Or what you could do:
href="#!"
or a third option:
href="#" class="stop"
with jQuery
$('.stop').click(function(e) {
e.preventDefault();
});
It is the normal behaviour of any browser, that it will navigate to the top of your page if you click on an anchor that's href ttirbute is a hash "#".
If you want to prevent this behaviour, please leve the hash away, or prevent it by using Javascript.
You can use the following without JavaScript
<a href="javascript:;>My link</a>
Or
My link

How to associate elements with trigger links with jQuery?

I'm not sure how to entitle my question correctly, but here is the problem:
I have a number of div elements on a page and trigger links pointing to each of those elements with anchor ids. Those elements will work as popups.
Show Popup #1
Show Popup #2
Show Popup #3
<div id="pop1" class="popup">...content here...</div>
<div id="pop2" class="popup">...content here...</div>
<div id="pop3" class="popup">...content here...</div>
Now what is the effecient way to associate multiple links to divs for toggling them on link click?
Coding them one by one is not a good option because there can be too many elemens on a page.
$("#t1").click(function(){
$("#pop1").toggle();
});
Since your triggers have a common class trigger, you can do:
$(".trigger").click(function(){
$(this.href).toggle(); // href is "#pop1", "#pop2", etc.
return false; // prevent default action of anchor tag click
});
You can add data-attribute (for example, data-div-id) to your link tags that will contain associated div's id:
Show Popup #1
And then you just trigger it like this:
$('a.trigger').click(function(){
$('div#' + $(this).data('divId')).toggle();
}

Jquery tabs: breaking create-select-reload cycle

I have a page that is using Jquery tabs. The tabs determine not only what I want to show in the tab content area, but also outside of the tabs div as well.
The behavior that I want is, when user selects a tab, reload the whole page with new parameters in the url. (I currently do this by tacking string to location.href, thereby forcing the page to reload.
select: function(event, ui) {
// ... determine new_url
location.href = new_url;
}
And when the page is reloaded, I want the right tab to be active/selected, and I try to do that by detecting parameter for the tab.
create: function(event, ui) {
// ... figure out which tab should be selected
$('.tabs').tabs('select', tab_index);
}
I notice that this forces the browser in unending cycle of create-tabs, select-tab, reload, create-tabs, select-tab... and so on. Is there a way to break out of this?
I realize that JQuery tabs are not for this kind of work but help would be greatly appreciated!! This is my first time trying JQuery tabs.
Some extra notes:
- I am using Rails for some logic
- I attempted to 'ui-state-active' class to the tab that should be selected, that seems to be overwritten. First, first tab (index 0) is set to active, and then in the tabs create function, the tab I want to select is selected.
<li class="tab<%= " ui-state-active" if THIS_TAB_SHOULD_BE_SELECTED %>">
tab 1
</li>
You can't (or shouldn't) mix tabs that reload page every time the user changes tab with ones that just show/hide some content. I'd recommend sticking with one of the two methods. If you want the whle page to change, either show/hide both tabs and that other content, or ajax the new content and replace the old with the new. Alternately, you could do something like the following:
HTML:
<div class="tabs">
<span class="tab-head active">Tab 1</span>
<div class="tab-content active">Lorem ipsum...</div>
<span class="tab-head">Tab 2</span>
<div class="tab-content">Lorem ipsum...</div>
<span class="tab-head">Tab 2</span>
<div class="tab-content">Lorem ipsum...</div>
</div>
CSS:
.tabs {overflow: auto;}
.tab-head {display: inline-block; float:left;}
.tab-content {display:none;}
.tab-content-active {display:block;}
JS:
$(".tabs .tab-head").click(function(){
$(".tab-content,.tab-head",$(this).parent()).removeClass("active");
$(this).addClass("active");
$(this).next(".tab-content").addClass("active");
});
That's roughly what I made for another site a few months ago.
Edit: I'm currently working on a way to assign initial tab positions to every single tabber by passing that data in the fragment_id part of the URL, like this: page.com/path/page.php?foo=bar&baz=quux#tabs=0:1,2:6;, where #tabs=0:1,2:6; is the important part. I'd have an onload handler parse that to show the right tabs form the start and some JS that looks for links that point to the same page with different tab information.

Hide anchors using jQuery

I've created a dynamic page that, depending on the view type, will sometimes utilize the anchor tags and other times not. Essentially, I want to be able to control if on click the page jumps to the anchor. Is it possible to hide anchor tags using jQUery, so they are essentially removed? I need to be able to re-enable the anchors when necessary, and always show the current anchor in the browser's address bar. It seems to work in FireFox, but not in Internet Explorer.
I have three sections: the 'table of contents', the content, and the javascript (jQuery) code
Table of Contents
<a id="expandLink0" class="expandLinksList" href="#green">What is green purchasing</a><br>
<a id="expandLink1" class="expandLinksList" href="#before">Before you buy</a><br>
Contents
<ul id="makeIntoSlideshowUL">'
<li id="slideNumber0" class="slideShowSlide">
<a name="green"></a>
<div>Green Purchasing refers to the procurement of products and service...Back to Top</div>
</li>
<li id="slideNumber1" class="slideShowSlide">
<a name="before"></a>
<div>We easily accomplish the first four bullet points under...Back to Top</div>
</li>
</ul>
jQuery On Page Load
$(".slideShowSlide").each(function() {
$(this).children(":first-child").hide();
});
jQuery to re-enable links
$(".slideShowSlide").each(function() {
$(this).children(":first-child").show();
});
I've also tried prepending an extra character to all anchor names to 'disable' them, but IE won't change the names using attr("name"). The only real manipulation it's letting me do is remove().
Try doing it this way:
$(".slideShowSlide").each(function() {
$(this).children().first().hide();
});
Or even this way:
$(".slideShowSlide").each(function() {
$(this).children(':first').hide();
});

JavaScript anchor- access to id on another HTML page

I have two html pages, when you click on something on the first html, it will go to the second one. What I want to do is to show text according to what you clicked on the first html. different texts are wrapped with different ids. Here's how I wrote:
I'm expecting to see two.html load the text with id "one", but it doesn't work, does anyone know what I did wrong?
Here's the code on second page:
<ul id="menu" class="aaa">
<li><a id="one" href="#">one</a></li>
<li><a id="two" href="#">two</a></li>
<li><a id="three" href="#">three</a></li>
</ul>
And I have a JS file to modify each id:
$("one").observe('click', function() {
$('Pic').writeAttribute('src',"picone.jpg");
$('Bio').update("texthere!");
});
Same for two and three.
Right now if I click on a button on the first page, it will always show
the text and pic for "one", no matter which button I click.
But I want to see the pic and text for "two" if i click on it.
What you want to do is simulate a click on your anchor when the page loads. Since you're using jQuery, the simplest approach (but far form best) would be the following:
$(window).observe('domready', function () {
$(location.hash).click();
});
attach ondomready-event to window. Fetch element with id=one (with jQuery this would be '#one', same as your location.hash would be, very handy in this case), trigger a click on it.
You might need to replace $(location.hash).click(); with $(location.hash).get(0).click() since jQuery tend to return arrays of jQuery-objects.
But a better solution in your case would be to have an event-handler that you can trigger manually, thus circumvent the need of firing events, aswell as drop the anchors and put onclick directly on your li's.
And furthermore, why do you load a second page when all you seem to want to do is to show/hide content dynamically? Do it on the same page...
the #blastuffbla is not an ID but the location hash.
You can acces it by using:
self.document.location.hash
which would return #hash, if you would only want hash you would use:
self.document.location.hash.substring(1)
Hope this helps
tags do not have id's but names to handle the anchors in Urls, you will still need the ID to manage them in JS though.
So your list should be:
<ul id="menu" class="aaa">
<li><a id="one" name="one" href="#">one</a></li>
<li><a id="two" name="two" href="#">two</a></li>
<li><a id="three" name="three" href="#">three</a></li></ul>
Your javascript seemed correct though.
When you say "different ids" how are you setting up your anchors on the 2nd page? The anchor on the 2nd page should look like this:
<a name='one'></a>
Put this right above the text that you want to mark on the 2nd page.
Do you want to scroll the page to the positon of the id "one"? Maybe the content of the page is too small that you cant scroll there. I mean sometimes the browser cant move the element marked with the id to the top of the canvas and looks like it doenst scrolled there. Try to include enough space after the element to make it scrollable to the top of the browser.
Hope that helps.

Categories

Resources