I have this function:
$(document).ready(function() {
$("#toggle-area").click(function() {
$("#show-area").toggle(300);
});
});
It displays some text when user click on the link. The problem is I have 12 links, one below the other, and the vertical scrollbar appears. However, when I scroll down and click on the 12th link (for example), my scrollbar jumps on the top of the page and I have to scroll down until the end to see the text that appeared.
How do I avoid this jump, and keep my list where it was before the click?
Here is the link - JSFiddle
Thanks in advance.
You could use preventDefault to skip the default hyperlink behaviour.
suppose #toggle-area are a hyperlink element.
$(document).ready(function() {
$("#toggle-area").click(function(e) {
$("#show-area").toggle(300);
e.preventDefault();
});
});
Related
I have written code for the mobile site so that when you click the menu item, the page body becomes fixed and cannot scroll (so that we are able to scroll through the drop down menu, without the background scrolling). However, whenever I click the menu button, the page jumps to the top of the website. I am trying to get it so that when you click the menu button, the page stays where it is, and does not jump to the top. Any help is greatly appreciated.
OUR WEBSITE
jQuery( function($) {
$( ".x-btn-navbar" ).on('click', function(e) {
$('body').toggleClass("noScroll");
e.preventDefault();
});
});
.noScroll {
position: fixed;
}
EDIT I have tried putting e.preventDefault(); into my jQuery but it still doesn't work. The "duplicate" page that I was linked to does not work. This has been marked as a duplicate but it is not. I am trying to get help so that I can get my website to work. Please unmark as duplicate.
I have a series of divs, that serve as a demo page. Initially I have only the first div showing, with the other 2 hidden using jQuery hide() on page load.
There is a button on each div which triggers a jQuery event of hiding the current div and showing the next div in the sequence.
I would like on the very last div (div 3), once displayed to also show the previous 2 divs, but to have div 3 still display. Meaning, the user can scroll up to see the other two divs, but without scrolling they will still be viewing div 3.
$(document).ready(function () {
$(".page-2").hide();
$(".page-3").hide();
$(".overlay").show();
$(".overlay-button").click(function () {
$(".overlay").hide();
$(".page-1").fadeOut(1000);
$(".page-2").show("slow");
});
$(".arrow-down").click(function () {
$(".page-2").fadeOut(1000);
$(".page-3").show();
$(".page-2").show();
$(".page-1").show();
});
});
This code brings the view back up to the first div (".page-1").
The problem is that when you have all of them open the height of the page changes and the scrollbar gets left behind, to fix this you can force the scrollbar to scroll to the bottom of the page with the following snippet:
$('html, body').scrollTop($(document).height());
I am trying to get the following behavior to occur: When the popup element is shown, I want to prevent any and all elements from scrolling unless they are the popup and the elements within it. The behavior currently is that when scrolling within the popup element, you will reach the bottom or the top and the rest of the document continues to scroll.
About the code:
The popup itself is a fixed div that appears on the page (on click) when an anchor link is clicked, so the 'prevent scroll' action should occur when the anchor is clicked.
I have put random elements to represent that the content outside the popup is out of your control to style it; therefore it should not matter what this content is other than it being straight forward HTML elements.
The below jsFiddle contains what I have accomplished so far. My problem is certainly in 'how' to grab these elements that I need scroll prevention to occur upon.
Here is is: jsFiddle.
Your help is greatly appreciated!
You can change the overflow of the body and do something like this:
// shows pop up
$("#showPopup").click(function () {
$('body').css({
overflow: 'hidden'
});
$(".popup").fadeToggle(500);
$(".overlay").fadeToggle(500);
// selects anything but the popUp and its children and
$('body > *:not(.popup)').css({
"overflow-y": "hidden"
});
});
// closes pop up
$(".closePopup").click(function () {
$('body').css({
overflow: 'auto'
});
$(".overlay").fadeToggle(500);
$(".popup").fadeToggle(500);
$('body > *:not(.popup)').css({
"overflow-y": "scroll"
});
});
Setting the overflow to hidden will hide the scroll bar when the pop up is shown. Then, when you close it you set the overflow to auto and then you can scroll the page.
First time asker, long time lurker.
I'm doing a fadein/out toggle that displays 1 of 2 charts depending on which button you click.
That bit works just fine, but I'm getting a weird page-jump glitch. Now, it's not the usual jump-to-the-top behaviour. I have that part covered in the code, and it doesn't do that.
Every time I click on one of the toggles, the page scrolls downward to the point where the chart area is at the bottom of the window.
But it gets weirder. If I make the browser window very short or very narrow (it's a responsive site), it stops doing this glitch. It's also not happening on iPhone or iPad at all, even though if I set the browser width to the same width as it would be on an iPad, the desktop browser still does the jumping.
There are no elements that are added/removed based on the viewport width in the area that's jumping around, and there are no anchor IDs that would be accidentally used as jump points.
Unfortunately I can't show the actual page to you, but I can show the script and a bit of the HTML.
The code for both toggles is the same, just with the IDs switched around.
The script:
$('#left-toggle > a').click(function(c)
{
c.preventDefault();
c.stopPropagation();
$('#right-toggle').removeClass('toggle-active');
$('#left-toggle').addClass('toggle-active');
$(pricing_subscriptionID).fadeOut('fast', function(){
$(pricing_singleID).fadeIn('fast', function(){
});
});
});
The HTML for the toggles:
<div id="chart-toggle">
<div id="left-toggle" class="toggle-active">Single Pricing</div>
<div id="right-toggle">Subscription Pricing</div>
</div>
"toggle-active" is just for styling.
Any ideas?
It seems to be almost wanting to centre the toggles on the page, but it's not quite putting them in the middle either.
JSFiddle: http://jsfiddle.net/TmrLw/
It's because of your link to #. Here are some ways you can fix this:
1. Replace "#" with something else
Instead of
Subscription Pricing
Try this:
Subscription Pricing
This will give you the cursor pointer you're looking for and avoid the page jump.
2. Create a class with the pointer effect
If you use this CSS rule:
.pointer {
cursor: pointer;
}
Then you can wrap your text with this class instead:
<div class="pointer">Subscription Pricing</div>
3. Remove the default effect of "#"
This Javascript will get rid of its default effect:
$('a[href="#"]').click(function(e)
{
// Cancel the default action
e.preventDefault();
});
Hope this helps
Probably its because the link's href is # which links to the top of the document.
try to remove the href attribute
Need help.
I have make some menus with vertical scroll on hover event, there are 3 menus (home,download,contact). The Scroll effect on hover event has worked, but on click event some bug occur (some menus can't scroll down/scroll to grey side with animation) when other menus has been clicked. the bug occur when i clicked menus in some sequence:
1. download then contacts
2. contact then download
3. contact then home
this is my code in jsFiddle
and when i run the code on firefox with firebug some error appear after i do mouse over and mouse out on clicked menu.
Error Print screen:
Thank for advance :)
The reason behind the freezing of the scroll event, when you click on a menu is that, after you click , the menu becomes disabled, hence your background-pos never changes and so , the method css(bg-pos) becomes undefined and you are again trying to do (undefined).split(), which is not possible and hence the animation freezes.
What you need to do is on click, you need to enable the menus again. This is done through this code:
$.fn.stopBG = function (x, y, speed) {
if(event.which == 1){
$("#home").removeClass('disable1').addClass('enable1');
$("#download").removeClass('disable2').addClass('enable2');
$("#contact").removeClass('disable3').addClass('enable3');
}
var pos = this.css('background-position').split(' ');
I have updated your fiddle, see this one : http://jsfiddle.net/VSTAm/3/
I have tried this fix in chrome...it works properly there.