this makes the back to top div appear when scrolling down 100 pixels, but if a person is already scrolled down and does a refresh, the page stays scrolled down, but the div is not shown.
<div id="gototopwrap">Back To Top</div>
<script>
$(function(){
$(window).scroll(function() {
$('#gototopwrap').toggle($(document).scrollTop() > 100);
});
});
</script>
i tried doing this, but it didn't work:
$(function myFunction(){
$(window).scroll(function() {
$('#gototopwrap').toggle($(document).scrollTop() > 100);
});
});
myFunction();
also tried it like this, and still nothing:
function myFunction(){
$(window).scroll(function() {
$('#gototopwrap').toggle($(document).scrollTop() > 100);
});
}
myFunction();
i'm already wrapping in document ready. i think the issue is that it's only listening for the the scroll and only acts on scroll.
Trigger the event which will fire your function
$(window).scroll(function() {
$('#gototopwrap').toggle($(document).scrollTop() > 100);
}).trigger("scroll");
Bind both events:
$(window).on('load scroll', function() {
$('#gototopwrap').toggle($(document).scrollTop() > 100);
});
Something like this should work
$(function(){
$(window).scroll(function() {
$('#gototopwrap').toggle($(document).scrollTop() > 100);
});
if($(document).scrollTop() > 100)
{
$('#gototopwrap').toggle();
}
});
Related
This is my code:
jQuery(document).ready(function($){
$(window).on('scroll', function(){
if($(window).scrollTop() >= $('#element').offset().top){
$('.menu').addClass('addclass');
}
});
});
It adds addclass to the menu when reaching id = "element" at the top of the page and scrolling further to the bottom.
But how to remove addclass when id = "element" is again below the top of the pages.
Simply use toggleClass or removeClass:)
jQuery(document).ready(function($){
$(window).on('scroll', function(){
if($(window).scrollTop() >= $('#element').offset().top){
$('.menu').addClass('addclass');
}
else
{
$('.menu').toggleClass('addclass');
//or use $('.menu').removeClass('addclass');
}
});
});
Just do the reverse:
jQuery(document).ready(function($){
$(window).on('scroll', function(){
if($(window).scrollTop() < $('#element').offset().top){
$('.menu').removeClass('addclass');
}
});
});
I have a jquery code that I've indicated below. These codes run, When I start scrolling (I mean when the height of scroll is more than 100)
But I want to run just for once, immediately after height of 100, and not to be run more than once.
$(window).scroll(function(){
if ($(window).scrollTop() > 100 ){
//some codes...
}
});
How can I do this? Thank you :)
As soon as your condition is met, unbind the scroll handler:
$(window).scroll(function(){
if ($(window).scrollTop() > 100 ){
//Kill the handler
$(window).off("scroll");
//some codes...
}
});
use
$(window).unbind('scroll');
When you enter first time
$(window).scroll(function(){
if ($(window).scrollTop() > 100 ){
$(window).unbind('scroll');
//some codes...
}
});
Bind the scroll event to $(window), then when scrollTop() > 100, execute your action then unbind the scroll event from $(window)
$(document).ready(function() {
$(window).bind('scroll', function() {
if ($(this).scrollTop() > 100) {
$('body').prepend('Scroll top > 100');
$(window).unbind('scroll');
}
});
});
body { min-height: 1000px }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
http://codepen.io/pen/
ok this can be done with the help of global variable or flag in order to see the effect first put lots of data into the page so that you can see vertical scroll.
<script>
var flag = 0;
$(document).ready(function() {
$(window).scroll(function() {
if (flag == 0) {
if ($(window).scrollTop() > 100) {
alert('1st time');
flag = 1;
}
} else if (flag == 1) {
alert('second time and u can comment this alert');
}
});
});
</script>
The .off() function will stop the function from firing after the first time.
$(document).ready(function () {
$(window).on('scroll.myEvent', function() {
if ($(document.body.scrollTop > 100))
{
$(window).off('scroll.myEvent');
alert('fired');
}
});
});
Example: http://jsfiddle.net/2k3s9jx8/
Upon clicking on a textarea, I need it to change the height of the textarea to 60px and slide down at the same time so it all looks like one smooth animation.
Here's the JSFiddle: http://jsfiddle.net/MgcDU/6399/
HTML:
<div class="container">
<div class="well">
<textarea style="width:462px" placeholder="Comment..."></textarea>
</div>
</div>
Thanks. :)
The method you need is called animate() and is well documented.
Now for your fiddle, I wrote the jQuery code that demonstration the animate method plus the focus() and blur() methods:
jQuery(document).ready(function ($){
var element = $('.well textarea');
var orig_height = element.height();
var new_height = 60;
// onfocus event handler
element.focus(function (){
$(this).animate({height: new_height + 'px'});
});
// onblur event handler
element.blur(function (){
$(this).animate({height: orig_height + 'px'});
});
});
Something like this?
$('#comment').click(function() {
$(this).css('height', '60px');
});
It works much better as an animate...
$("textarea").on('focus',function (e, ui) {
$(this).animate({
height: "60px"
}, 1500);
});
jsFiddle Demo
$('#comment').click(function () {
$(this).fadeIn(3000, function() {
$(this).css('height', '60px');
});
$(this).focusout(function() {
$(this).css('height', '20px');
});
});
How do I run a jquery function on window events: load, resize, and scroll?
Here is my code
I'm trying to detect if a div is viewable and then if it is run some ajax code...
<script>
function topInViewport(element) {
return $(element).offset().top >= $(window).scrollTop() && $(element).offset().top <= $(window).scrollTop() + $(window).height();
}
</script>
<script>
topInViewport($("#mydivname"))
{
// ajax code goes here
}
You can use the following. They all wrap the window object into a jQuery object.
Load:
$(window).load(function () {
topInViewport($("#mydivname"))
});
Resize:
$(window).resize(function () {
topInViewport($("#mydivname"))
});
Scroll
$(window).scroll(function () {
topInViewport($("#mydivname"))
});
Or bind to them all using on:
$(window).on("load resize scroll",function(e){
topInViewport($("#mydivname"))
});
You can bind listeners to one common functions -
$(window).bind("load resize scroll",function(e){
// do stuff
});
Or another way -
$(window).bind({
load:function(){
},
resize:function(){
},
scroll:function(){
}
});
Alternatively, instead of using .bind() you can use .on() as bind directly maps to on().
And maybe .bind() won't be there in future jquery versions.
$(window).on({
load:function(){
},
resize:function(){
},
scroll:function(){
}
});
just call your function inside the events.
load:
$(document).ready(function(){ // or $(window).load(function(){
topInViewport($(mydivname));
});
resize:
$(window).resize(function () {
topInViewport($(mydivname));
});
scroll:
$(window).scroll(function () {
topInViewport($(mydivname));
});
or bind all event in one function
$(window).on("load scroll resize",function(e){
I have a button on a page and I want that when it is clicked, the page scrolls to the 0 position.
HTML
<button id="button">Back to top </button>
jquery
$(document).scroll(function(){
var scroll_pos = $(window).scrollTop()
if(scroll_pos > 10){
$('#button').click(function(){
// what code to enter here??
});
}
});
Try this code:
$("#button").on("click", function() {
$("body").scrollTop(0);
});
Method on binds a click event to the button and scrollTop scrolls your body to 0 position.
you can use window function for scrollTop jquery
$("#button").click( function() {
$(window).scrollTop(0);
});
When you click button, this page scroll to top of the position.
Try It
$("#button").click(function() {
$("html").scrollTop(0);
});
or
$("#button").click(function() {
$("html").animate({ scrollTop: 0 }, "slow");
});