Welcome to WebmasterWorld Guest from 34.229.194.198

Forum Moderators: open

Message Too Old, No Replies

How to prevent button on the page loading?

     
12:47 pm on Jan 25, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1088
votes: 1


How to prevent button on the page loading?

I have code like:
<script type="text/javascript">
jQuery(document).ready(function(){

jQuery(window).scroll(function(){
if (jQuery(this).scrollTop() != 0) {
jQuery('.mybutton1').fadeIn();
} else {
jQuery('.mybutton1').fadeOut();
}
});

jQuery('.mybutton1').click(function(){
jQuery("html, body").animate({ scrollTop: 0 }, 850);
return false;
});

});
</script>

What will influence != 0 or > 100 and why is button showing when I load page but when I scroll it will work?
Need help.
2:11 pm on Jan 25, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5019
votes: 24


You're attaching an event listener to the window's scroll event. When the page first loads, that event won't be fired, so you need to also repeat that functionality in the ready method.

jQuery(document).ready(function () {

if (jQuery(window).scrollTop() != 0) {
jQuery('.mybutton1').fadeIn();
} else {
jQuery('.mybutton1').fadeOut();
}

jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() != 0) {
jQuery('.mybutton1').fadeIn();
} else {
jQuery('.mybutton1').fadeOut();
}
});

jQuery('.mybutton1').click(function () {
jQuery("html, body").animate({
scrollTop: 0
}, 850);
return false;
});

});
8:12 am on Jan 29, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1088
votes: 1


It works perfect.
1. What will influence != 0 or > 100
2. Is it correct placement of this javascript as Jquery plugin file/folder or it can be pure javascript file even this is jQuery?
8:50 am on Jan 30, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1088
votes: 1


3. How to show button or footer when there is scrolled to the the end (bottom)? Is there any setting to do it in the correct way with Jquery modification?
2:10 pm on Jan 30, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5019
votes: 24


1. [api.jquery.com...]

The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very top, or if the element is not scrollable, this number will be 0


2. This script does not need to be a jQuery "plugin", but does require jQuery, so as long as you include jQuery first, you can put this in a regular script file.

3. That could be tricky. What if someone doesn't need to scroll at all (ie - they have massive monitor/resolution that can fit everything without scrolling)? Why not just put the button/footer at the bottom? That way, when the user gets there, they will have already seen and/or scrolled down through the content.
7:57 pm on Jan 30, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1088
votes: 1


You are right. Usability issue can be seen if this happens. I gues they detect also resolution to pass this particular issue.

I'm nor sure about your URL:
[api.jquery.com...]

It is not quoted my value:
What will influence != 0 or > 100
It is the current vertical position of the scroll bar for each of the set of matched elements.More than 100px position from the top.Yes?
What is than !=0 ?
8:32 pm on Jan 30, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5019
votes: 24


If scrollTop == 0, the scroll bar is at the very top, or the element is not scrollable. If the element is scrollable, and it is scrolled down more the 100px, then that would match the case of scrollTop() > 100.
3:55 pm on Feb 1, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1088
votes: 1


What is than != 0 as definition?
5:02 pm on Feb 1, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5019
votes: 24


not equal to zero.
7:26 pm on Feb 2, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1088
votes: 1


Thanks for your reply.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members