I have a row of 8 buttons that show/hide content below them depending on the button selection. That part's working fine. The other thing I want to happen is to scroll down to the selection - the buttons are right at the bottom of the screen, and while clicking a button does swap out the content, people don't see it happening without scrolling to it themselves. So I created an element between the buttons and the content and gave it an id of "scroll-down-to-sections." and added the last line here:
jQuery(document).ready(function ($) {
$(".tab-title").each(function () {
var section_id = $(this).find("a").attr("href");
$(this).find("a").removeAttr("href");
$(this).click(function () {
$(this).siblings().removeClass("active-tab");
$(this).addClass("active-tab");
$(".tab-content").slideUp(500);
$(section_id).slideDown(500);
$("html, body").animate(
{ scrollBottom: $("#scroll-down-to-sections").offset().top },
1000
);
});
});
});
Works great, but the last line isn't working, and I'm sure it should. Any ideas?
I revised the last line to:
$('html, body').animate({scrollTop: $("#scroll-down-to-sections").offset().top}, 1000);
and it works as intended. Sorry for the lame post!
Related
I have a button used to scroll back to the top of the page when clicked.
I want to have an animation effect.
$("#back-to-top").click(function() {
$(document.body).animate({scrollTop: 0}, 800);
return false;
});
When I click on the button, it did scroll back to top. However, I can't scroll down and it seemed when I scroll down the function is called.
When I use
$(document).scrollTop(0);
it works well.
What's the problem?
Here's my Fiddle
I'm new to Fiddle, it just didn't work!
Try like this
$("#back-to-top").click(function(e) {
e.preventDefault();
$("body, html").animate({scrollTop: 0}, 800);
});
Update
According to your fiddle, you have to put this function outside of $(window).scroll( function() {});
Your problem is actually browser based, I tested this in Firefox which it didn't work. I then tested it in Chrome and it worked fine. Try using $('html, body').animate({scrollTop:0},500); instead.
This is my code: Js Fiddle
As you can see I have several sections on top of each other with 100% height. I want to know how I can get it so when the user clicks on "learn more" they scroll to the next section, so the top of the section is at the top of the page.
Normally it would be quite simple as I could do this:
$('body').animate({
scrollTop:$(document).height()
});
However this won't work if the user has already scrolled halfway down on of the sections and then hits the button. It would also be good if I could use the same function for each button press, instead of having three different functions, one for each different section.
I guess the code would be something like (in pseudo): scroll to top sectiona + 1
with jQuery and smooth scrolling
$('a').click(function(){
var nextSection = $(this).closest('section').next('section');
$('html, body').animate({
scrollTop: $(nextSection).offset().top
}, 2000);
});
Why not you pass id's to each section and in href refer to that id like
<section id="sectionOne">
Move to section two
</section>
<section id="sectionTwo">
Move to section one
</section>
You can also try the following.
var amount_to_scroll_by = $(document).scrollTop() + element_to_scroll.getBoundingClientRect().top);
$(document).scrollTop(amount_to_scroll_by); // animate this scroll
Hope this helps :)
Using jquery, you can smoothly scroll to the target.
Here is a SAMPLE
JS:
$("a").click(function(e) {
e.preventDefault();
var target = $(this).attr('href');
$('html, body').animate({ scrollTop : $(target).offset().top + "px"});
});
You should first fix up your anchors and use the hash fragments to allow for native navigation between anchors.
I have created a very simple demo for you to understand this (not using your markup to keep it simple).
Demo: http://jsfiddle.net/abhitalks/9uxGq/15/
(another demo with your markup: http://jsfiddle.net/abhitalks/9uxGq/19/)
You need two anchors, one as click link and the other to mark the position of target as anchor.
For example:
<div>
<a id="LearnMore1"></a> <!-- Used for marking the anchor with hash fragment -->
<h2>Sub Heading 2</h2>
<p>
Some text content here
</p>
Learn More <!-- Used to click to got to next anchor -->
</div>
Note: Of course instead of using a second anchor as a marker, you could use the div (or in your case section) with an id. But, an a is better because it is more semantic for content navigation and it means an anchor.
Once done, this becomes a fallback for you. Now you can easily implement animations using jQuery etc.
It would be as simple as this:
// bind click on anchors (use selectors as per your requirements)
$("a").on("click", function(e) {
e.preventDefault(); // prevent the default behaviour
var nextAnchor = this.hash.replace("#", ""); // get the next marker anchor
var gotoPoint = $("#" + nextAnchor).position().top; // get the position of marker
$('body').animate({ scrollTop: gotoPoint }, 'normal'); // animate the body
});
Alternatively:
// bind click on anchors (use selectors as per your requirements)
$("a").on("click", function(e) {
e.preventDefault(); // prevent the default behaviour
var nextAnchor = $(this).attr('href'); // get the next marker anchor
var gotoPoint = $(nextAnchor).position().top; // get the position of marker
$('body').animate({ scrollTop: gotoPoint }, 'normal'); // animate the body
});
Now applying this to your use case, the demo becomes: http://jsfiddle.net/abhitalks/9uxGq/19/
Hope that helps, and you can work it out in your markup and use-case.
.
So, Im trying to create a button that will either scroll to the next section or a given pixel height. The website is divided into three section which has the same height. So when the user enters the site and everything else is loaded the button fades in, onclick the user is brought down to the second section without scrolling and one click again the third section, and thats the end of the website so when reach the third I want the user to be brought home. Here´s my code:
<script type="text/javascript">
$(document).ready(function() {
if (document.body.scrollTop === 0) {
$("#down").fadeIn();
$("#down").click(function(event){
$("html, body").animate({scrollTop: "+=810px"}, 800);
});
}
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
$("#down").fadeOut();
$("#top").fadeIn();
$("#top").click(function(event) {
$("html, body").animate({scrollTop: 0}, 800);
});
}
};
});
</script>
I can't reproduce the problem in jsfiddle.
Is this not what you're getting?
http://jsfiddle.net/rLY2L/
If it works the first time, but not subsequent times, are there any non-static components that haven't been mentioned?
Event delegation might be the solution to your problem if there are dynamic components being loaded in.
$("body").on("click", "#down", function(e){
// do stuff
});
Event delegation example: http://jsfiddle.net/gd6J2/1/
I see other tutorials about this topic on this website, but this one is different from all the other ones.
I found this tutorial called "Adding a bounce to a slide down". Here is the link for it.
I have put everything how it's supposed to be, just like in that tutorial, but I do not want two buttons representing close and open, I just want a button with an image, like an arrow. Then when you click the arrow, it will slideDown with the information and that kinda stuff and then, when you click the arrow again, it will slideUp and it will hide the information.
That tutorial could do that, but it has two ID'S representing the close button and the open button and I do not want that.
Here is the JS code for that tutorial and there is more, but this is where it get's the affects and stuff like that.
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow", "easeOutBounce");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
Do you see #open and #close? that represents two ID'S for the toggle buttons.
I really want to know how to delete the close and the close will represent the open so, when you click the open it will open and when you click the open again, it will close it self without another ID for it.
I have been trying to figure this out, but couldn't figure it out.
Please tell me, what do I gotta do to achieved this.
If your arrow element has the ID "toggle", you could do:
$(document).ready(function () {
$("#toggle").click(function () {
var $panel = $('#panel');
if ($panel.is(':visible')) {
$panel.slideUp("slow");
} else {
$panel.slideDown("slow", "easeOutBounce");
}
});
});
jsfiddle
you can try slideToggle()
Example:
$(document).ready(function() {
$("#toggle a").click(function () {
$("#toggle a").slideToggle();
});
});
Use $( "#panel" ).toggle( "bounce", { times: 2 }, "slow" );;
See this demo
For more Examples visit : http://api.jqueryui.com/bounce-effect/
It uses the following external js files:
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Hi guys im working on my first website and im trying to implement a sliding menu using jquery.
This is what a got so far :
<a href="javascript:void(0);"onmouseover="ShowBox();" onmouseout="HideBox();"">Show box<a>
<script type="text/javascript">
function ShowBox()
{
$("#SlideMenu").slideDown();
}
function HideBox()
{
$("#SlideMenu").slideUp();
}
</script>
When i MouseOver the control my menu slides down but slides back up automatically.
What I would like is to let the user the time to select and option from the menu and if he doesn't, i would like the menu to close as soon as the mouse leaves the control.
Any idea why this isn't working ?
Thanks in advance.
Do your stuff without the inline JS, and remember to close the <a> element and use a ready function
<a id="test">Show box</a>
<script type="text/javascript">
$(document).ready(function() {
$("#test").on({
mouseenter: function() {
$("#SlideMenu").slideDown();
},
mouseleave: function() {
$("#SlideMenu").slideUp();
},
click: function(e) {
e.preventDefault();
}
});
});
</script>
FIDDLE
As you're using jQuery I believe it would be beneficial for you to use something similar to:
$("#box").hover(
function() {
//.stop() to prevent propagation
$(this).stop().animate({"bottom": "200px"}, "fast");
},
function() {
$(this).stop().animate({"bottom": "0px"}, "fast");
}
);
What this will mean is that whilst the mouse is over the menu, the menu will stay in its open position. When the mouse exits the menu it will close. Obviously change the id, and animation CSS values to suit your needs :)!
Here is a working example:
http://jsfiddle.net/V3PYs/1/
Really there is no problem here - the script is doing exactly what you told it to. However, from what I understand, what you want is for the menu to stay open when you leave the "trigger" element if the user's mouse is now over the menu. Try this:
<script type="text/javascript">
var timeout=250;//timeout in milliseconds to wait before hiding the menu
var menuMouseout;
$(document).ready(function() {
$("#trigger").hover(function(){
$("#SlideMenu").slideDown();
}, function(){
menuMouseout=setTimeout("$('#SlideMenu').slideUp();", timeout);
});
$("#SlideMenu").hover(function(){
clearTimeout(menuMouseout);
}, function(){
menuMouseout=setTimeout("$('#SlideMenu').slideUp();", timeout);
});
});
</script>
This way, the user is left some time after mousing out of the trigger element to get to the menu. You might need to fiddle with the timeout, but this should work. I tested this and it seems to be working. Just be sure, if necessary, to wrap this in $(document).ready to make sure all elements are loaded and ready.
Demo: http://www.dstrout.net/pub/menu.htm
If you're using jQuery this would be the proper way to go about it:
Show box
<script type="text/javascript">
$("#showBoxHref").hover(function() {
$(this).slideDown();
}, function() {
$(this).slideUp();
});
</script>
(just copy/paste this in and it should work)