So I have a button that toggles a div to show / hide using a .hidden class to display:none and visibility:hidden.
But for some reason, when I anchor said button, it does not scroll down to the hidden class? And in this case, the button won't anchor to anything at all?
Button
anchoring to
<div id="anchor" class="hidden">Stuff</div>
and jQuery is simply:
$(".btn").click(function() {
$("#anchor").toggleClass("hidden");
});
Any thoughts?
You need to remove onclick="return false;" from your element - this is preventing default behavior
JSFiddle Link - working demo
Alternatively - if you need to prevent the default behavior because of some weirdness going on per your comments - you could always manually scroll to it. Here is an animation driven approach with an optional time in ms to finish...
$('.btn').click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $('#anchor').offset().top
}, 200);
});
JSFiddle Link - alternative demo
Lastly - for the "no frills" approach - the following should suffice (reference)...
$('#anchor').get(0).scrollIntoView();
Related
Need to land a particular element on click but without scrolling. Below I have a code but it is scrolling to a particular element on click, Is there any way to go to a particular HTML element without scroll?
$("#button").click(function() {
$("html, body).animate({
scrollTop: $("#myelement").offset().top
}, 2000);
});
Go to p tag
<div style="background-color:lightblue;height:800px" >
</div>
<p id="test">This is some text.</p>
Go to a tag
Check this one for move to any element using ID and anchor
or try this
jsfiddle.net/thepeanut/ohhffte6 url
Below code is working fine. Now, it is going on top instantly without animation. When i am firing click event..
$("#button").click(function() {
$("html, body").scrollTop(0);
});
I have zero experience in jQuery or js but I am trying to learn, so any help is much appreciated. I have a jQuery slide out (for live chat) that I would like to have slide out once a link is clicked. Ideally
Click Here
And this will make the chat slide out. The only code that is in the HTML is the onload
<body onload="initializeLiveHelp();">
You can see how it works here Link Fixed
If you need the jQuery I can get that as well but I was not sure if that was needed or not. Thank You
Try it by toggling the width. So write CSS for the closed state and use this jquery snippet to open it
Toggle width with jQuery
Add an ID to your link so
Click Here
becomes
Click Here
And the jquery something like this (but not exactly). Reference the SO thread for more info and check out the fiddle. Or post more HTML here and I can help further.
$(document).ready( function(){
$('#mylink').click( function() {
var toggleWidth = $("#toggle").width() == 300 ? "200px" : "300px";
$('#toggle').animate({ width: toggleWidth });
});
});
Trigger a click when someone clicks a link:
$("li a").on("click", function(event) {
event.preventDefault();
$(".livehelpslideout a").trigger("click");
}
Preventdefault() disables default behaviour when clicking on a link, otherwise browser will load another page. Your desired behaviour for that is unclear, so you'll need to think about your logic.
So I have looked at a bunch of examples and still cannot seem to figure this one out. I have an element that I am hiding "display:none" until it is expanded by a link using jQuery slideToggle. Working but I need the focus to go to the new element div. I've tried a bunch of examples and nothing seems to be working so I'll post it here.
Here is the fiddle:
JS FIDDLE
So on click of this link here:
<div><p>Blah Blah <a id="whyDivLink" class="staticLinkHelper" title="Wblah blah bl title" style="color: #8f0222; text-decoration: underline">Click Me?</a></p>
</div>
I am trying to do two things, well three but two would be marvelous.
1. Scroll to this DIV which is just a bit further down the page.
2. Focus on the text that is now showing.
Apparently because the node is hidden, then it will not focus to it or something to that affect and it has nothing to scrollTo or when I have tried it just scrolls all the way to the top. But I have a fixed header so that does not work because then it is just hidden. So what I have now is basically working and scrolling to the div and from what I can tell... focusing on it. But I need to set it a ways from the top and when I try it breaks the scrolling. Any one see what I am doing wrong?
$(function() {
$("#whyDivCloser").click(function () {
$("#whyDiv").slideToggle("slow");
});
});
$(function() {
$('#whyDivLink').click(function (evt) {
$("#whyDiv").slideToggle("slow");
});
});
Any help would be appreciated
Looks like when you apply display:none initially to the div, clicking on the a link won't lead user to the targeted div anymore. To fix this, you can try using code to hide the div initially using slideToggle, of course the initial state of the div is display:block, slideToggle will hide it for you instead of setting display:none initially while clicking on the link will work expectedly (jump to the targeted div).
JS:
$(function() {
$("#whyDiv").slideToggle("slow"); //add this line to hide it initially
$("#whyDivCloser").click(function () {
$("#whyDiv").slideToggle("slow");
});
});
$(function() {
$('#whyDivLink').click(function (evt) {
//append .focus() to focus the text
$("#whyDiv").slideToggle("slow").focus();
});
});
Updated Demo.
can you tell me how to stop function propagation. I need to fire up some function again after first click action. I using scrollTo jquery plugin for scroll my content and when i click in my 'fire' button content scroll nicely, but i can't do this again... Thx 4 help.
This is my function:
$('.arrow_down').bind('click', function(event){
$('.recipe_single_view_right_panel').scrollTo({top:'280px', left:'0'}, 800 );
event.stopPropagation();
});
You will not need to use a big, feature-rich plugin to achieve that.
All you need to do is to alter the scrollTop - property of the wrapping element. I created a fiddle with a simple example: http://jsfiddle.net/k9bdY/
The wrapping element is set to overflow: scroll, animating the scrolling-position on click is fairly simple then when using jQuery:
$('.scroll-btn').on("click", function(e){
e.preventDefault();
$('#wrapper').animate({
scrollTop: "+=200px"
}, 800);
});
here is my code :
$('#pagelinks > a').click(function () {
$('html,body').animate({ scrollTop: 0 }, 200);
setTimeout(function() {$('#my_div').hide("slide",{direction:"right"},500);},250);
return false;
});
My problem is this : When I click on a link, it scrolls up at the top correctly but then automatically scrolls down ( seems to be around where I clicked ) and hide the content of my_div by sliding it and stay there.
I don't want it to scroll down to where I clicked but rather stay at the top. I tried everything I know but nothing works.
Note that if I put just hide() instead of hide("slide",{direction:"right"},500) there is no scroll down. Plus the scroll down occurs on Firefox and Opera but not in Chromium.
Thanks for your help,
Nolhian
I can think of two options:
1) Don't use a-links with anchors if you don't use the anchor part the way it was ment to.
2) stop the default event from occuring by passing on event to the click function and using preventDefault.
example:
.click(function(e){ e.preventDefault(); });