I'm probably missing something really obvious here. I've basically created a 'back to top' button that animates to the top of the page when clicked. The script doesn't seem to be pairing up with the jQuery i've written:
Back to top
<script type="text/javascript">
$(document).ready(function(event){
$('.back-to-top').click(function(){
event.preventDefault();
$('body').animate({"scrollTop": "0px"}, 600)
})
})
</script>
Other jquery elements are working fine on the site.
Currently when the button is pressed the screen scrolls to the top of the page instantly which means the preventDefault isn't working, the animation time of 600ms isn't working or both.
Like I said it might be something really obvious but any help would be appreciated.
event parameter should of onclick function of back to top button
http://jsfiddle.net/hellosze/MMgXu/ check this link
try
$('.back-to-top').click(function(event){
event.preventDefault();
$('body').animate({"scrollTop": "0px"}, 600)
})
Related
alrighty Ive got what I hope is a rather easy question today for people knowledgeable in jquery. I have an toggle that activates on clicking a specific element, in this case I have targeted my logo image with an id of #logobutton. it works wonderfully however theres a problem, the animation also activates whenever I click on any and all other links on the page and even some random div boxed (like my nav bg). please note im very new to this javaScript jazz so I may be missing something you would consider quite obvious. thanks for the help!
here is the fiddle with all relevant code http://jsfiddle.net/tRf36/1/
jquery:
!--jquery script, must be above all jquery elements-->
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<!--script for bg toggle-->
<script type="text/javascript">
$( document ).ready(function() {
$("#logobutton").click(function() {
$(".galbox").toggleClass("galbox-change");
});
});
</script>
<!--bg fade hide on load-->
<script>
$(document).ready(function(){
$("#gallerybox").fadeTo(3000, 0.00, function() {
$("#gallerybox").fadeTo(1000, 1.00);
});
});
</script>
hopefully someone can see if I have something targeted incorrectly or whatever is causing the issue of my generic rather than specific selection of clickable area to activate this bg animation.
My previous answer was completely off base, sorry for that. Looking at the jsfiddle that you posted it appears that you have the logo button like this <button ... /> the browser is then ignoring the /> and just wrapping everything in a button. So that means that both the gallery box and the nav bar are surrounded by the button that is activating the animation. Changing the button to be like this should fix it:
<button type="button" class="logo" id="logobutton" value=""></button>
close <button> tag properly using </button>
All elements below button are treated as children if you do not close properly.
Two aspects conspire to cause the effect:
You have nested your nav bar divs inside the #logobutton button.
Event bubbling causes events triggered on an embedded element to eventually reach the #logobutton button, being processed by the registered event handler.
A solution is to check for the triggering element of the click event:
$("#logobutton").click(function (eve) {
if ($(eve.target).attr("id") === "logobutton") {
$(".galbox").toggleClass("galbox-change");
}
});
You can test this modification with this fiddle.
You can learn more about event bubbling in particular and event processing in browsers following these links:
quirksmode (ppk)
MDN
No matter what method I use to detect scrolling on the page the event is triggered twice. Please see the code for the different methods I have tried.
<body onmousewheel="alert('Why are you alerting twice?')">
or
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(window).scroll(function(){
alert("Why are you alerting twice?");
});
</script>
or
window.onscroll = please_scroll;
function please_scroll() {
alert("Why are you alerting twice?");
}
I have even tried using $.debounce.
In case it is of any use I will explain what I am trying to do:
When the user scrolls the wheel either up or down, the page will animate the scroll to the next full width content div. I have code that is successfully doing this onclick of my menu, but I would also like it to happen as the user scrolls, essentially auto assisting them with scrolling to each part of my page. This is the function I currently have for scrolling:
function scrollTo(id){
// Scroll
$('html,body').animate({scrollTop: $("#"+id).offset().top - 110},'slow',function(){
animation_active = "false";
});
}
many devices can trigger scroll events which appear to happen once more often. simply use a timeout for that:
var timeout;
$(window).scroll(function() {
clearTimeout(timeout);
timeout = setTimeout(function() {
// do your stuff
}, 50);
});
you can play with the value 50, i recommend something between 50 and 150.
Why wont this work in IE, if I move the scroll bar to the middle then Refresh it will not reset to zero, instead it stays where is was last left?
$(document).ready(function(){
$(window).scrollLeft(0);
});
Thanks
This script should work as you need
$(document).ready(function ()
{
$(window).bind("scroll", ScrollOnLoad);
// IE fix, remove scroll handler after 150ms
setTimeout(UnbindScroll, 150);
});
function ScrollOnLoad() {
UnbindScroll();
$(window).scrollLeft(0);
}
function UnbindScroll() {
$(window).unbind("scroll", ScrollOnLoad);
}
As you find out, the behaviour of IE is different. It triggers scroll event even after document.ready. This script will hook up on this event and scrollLeft(0) after refresh (in all browsers).
The complicated part is, how to solve new comers, when user visits the page for a first time. Then Internet Explorer does not fire scroll event. And our handler is still in play (and would scroll left when user first time scroll right).
We have to unbind scrollLeft manually. That's why after 150ms is the handler unbounded anyway.
try
$(window).load(function(){
$('body, html').scrollLeft(0);
});
try
$(document).ready(function(){
$('body, html').scrollLeft(0);
});
I have a product page and i would like to add a tech spec button to the page which will open and close a show hide that is to be situated below the product description. I need the user to be taken down to the tech spec when the show hide opens.
I think i need to use jquery but when the show/hide is hidden, i.e nobody has pressed the button the footer should come up, so there shouldnt be any white space.
any examples links that i could refer too?
could anyone be kind to make me a little jsfiddle?
Thanks
Really simple with jQuery slideToggle:
http://jsfiddle.net/r7Qf7/12/ (example with new scrolling on button click).
Scrolling to the tech specs section once the button is clicked can be accomplished with the animate function in jQuery, like so.
$('html,body').animate({
scrollTop: $("#techspecs").offset().top
}, 'slow');
First, you've got to add the click event to the button, after the document is ready:
$(document).ready(function(){
$("#Button_ID").click(function(){
$('#Tech_Spec').toggle();
});
});
jsfiddle: http://jsfiddle.net/YEtBy/
I want to show and hide a piece of code if i scroll and the page is for example half way, i have tried to use window scroll but this doesnt works(no errors, clean code, different browsers, different jQuery versions), but this doesn't trigger anything, so i am looking for a better way to show and hide a div if i scrolldown.
used this to trigger an event(not working)
$(window).scroll(function(){
alert('works')
});
Try using the window.onload function (that's how they use it in jQuery examples):
window.onload = (function(){
$(window).scroll(function () {
if( $(window).scrollTop() > 200 ) {
// Display something
}
})
})