I need to set a easeOutBounce for a webpage back-to-top button .
I have below code for .scrollTop but unable to add
{
duration: 2000,
easing: "easeOutBounce"
}
Existing .js:
$(document).ready(function() {
// Show or hide the sticky footer button
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('.back-to-top').fadeIn(200);
} else {
$('.back-to-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.back-to-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 300);
});
});
Like this:
$(document).ready(function() {
// Show or hide the sticky footer button
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('.back-to-top').fadeIn(200);
} else {
$('.back-to-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.back-to-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 900, 'easeOutElastic');
});
});
.wrap{height:2000px;}
.in1, .in2{height:250px;margin-top:50px;}
.in1 {border:1px solid blue;}
.in2 {border:1px solid red;}
button{margin-top:50px;font-size:3rem;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="wrap">
<div class="in1"> Scroll down</div>
<div class="in1">Down a bit more</div>
<button class="back-to-top">Back To Top</button>
</div>
Or, like this:
$(document).ready(function() {
// Show or hide the sticky footer button
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('.back-to-top').fadeIn(200);
} else {
$('.back-to-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.back-to-top').click(function(event) {
event.preventDefault();
$('html, body').animate(
{scrollTop: 0},
{
easing: 'easeOutElastic',
duration: 1500
}
);
});
});
.wrap{height:2000px;}
.in1, .in2{height:250px;margin-top:50px;}
.in1 {border:1px solid blue;}
.in2 {border:1px solid red;}
button{margin-top:50px;font-size:3rem;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="wrap">
<div class="in1"> Scroll down</div>
<div class="in1">Down a bit more</div>
<button class="back-to-top">Back To Top</button>
</div>
Useful sites:
http://easings.net/ (usage examples at bottom)
http://www.learningjquery.com/2009/02/quick-tip-add-easing-to-your-animations
Install just the easings to get around requirement for jQueryUI
Related
For example im trying to make a scroll button that would scroll down multiple divs.
This is some example code of what i mean.
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
I know how to make the button scroll too just one div but i cant figure out how to make the button first scroll to 1 then 2 then 3 and etc.
Here is the code for the button
<section id="scrolldownButton" class="button">
<span></span>Scroll
</section>
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});
Try it:
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 500, 'linear');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
<section id="scrolldownButton" class="button">
<span></span>Scroll
</section>
To achieve this you can set a class on the current active element, then use next() to find the element to scroll to the next time the button is clicked. Once you reach the end of the elements you want to scroll through you can go back to the start. Note that I added a common content class to the div elements to make this more reliable. Try this:
$(function() {
$('a[href*="#"]').on('click', function(e) {
e.preventDefault();
var $target = $('.content.active').next('.content');
if ($target.length == 0)
$target = $('.content:first');
$('.active').removeClass('active');
$target.addClass('active');
$('html, body').animate({
scrollTop: $target.offset().top
}, 500, 'linear');
});
});
.content {
height: 250px;
}
#scrolldownButton {
position: fixed;
top: 20px;
right: 50px;
}
.active {
background-color: #EEE;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1" class="content active">1</div>
<div id="2" class="content">2</div>
<div id="3" class="content">3</div>
<div id="4" class="content">4</div>
<div id="5" class="content">5</div>
<section id="scrolldownButton" class="button">
Scroll
</section>
Consider the following piece of HTML:
<div id="outer">
<div id="inner">
<p id="content">
Some content
</p>
</div>
</div>
I can make #inner slide out to the right from the screen using the following jQuery:
$("#slide").animate(
{
'marginLeft':'100%'
},400,
function(){
$(this).slideUp('fast');
$(this).css("margin-right","100%");
$(this).css("margin-left","0");
}
);
However, how can I make that same element, with new content (from AJAX response), slide back in from the left?
I was thinking about resetting the margins (from margin-left:100% to margin-left:0; margin-right:100%) while it was out of view and then use an animation to slide it in from the left:
$("#slide").animate(
{
'marginRight':'0'
},400,
function(){
$(this).slideDown('fast');
}
);
This slides it back into view, but not from the left of the screen. Any ideas? I got the .slideUp() from a different StackExchange question but don't know why it's needed for a horizontal slide.
Simply reset the margin using .css() method:
$(function() {
$("#outer").click(function() {
$(this).animate({
'marginLeft': '100%',
'opacity': 0
}, 200, function() {
//==================================
//call synchronous ajax here or move this block
//to the ajax done callback function
//some ajax change
$(this).css({
"background": "blue"
}).text("came back with new content");
$(this).css({
'marginLeft': '-100%'
});
$(this).animate({
'marginLeft': '0',
'opacity': 1
}, 200);
//=================================
});
});
});
#outer {
width: 100px;
height: 100px;
display: block;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
<div id="inner">
<p id="content">Click Me</p>
</div>
</div>
Reset the margin using .css, check it out here: https://jsfiddle.net/gdjypc7w/2/
JS
function getSummary(id) {
$.ajax({
type: "GET",
url: 'Your URL',
data: "id=" + id,
success: function (data) {
// the data
$('#summary').html(data);
}
});
}
$("button").click(function () {
$("#inner").animate({
marginLeft: $("body").width()
}, 1000, function () {
//$("#content").text(getSummary(id); Use your id here to retrieve new data
$("#content").text("New content");
$("#inner").css("margin-left", "-100%");
$("#inner").animate({
marginLeft: "0px"
}, 1000);
});
});
I have this HTML code
HTML
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
and this CSS code
CSS
#d1, #d2, #d3, #d4, #d5{ float:left; height:500px; width:200px; display:none;}
Script:
<script>
$(document).ready(function() {
$(window).scroll(function() {
if ($("#d2").height() <= ($(window).height() + $(window).scrollTop())) {
$("#d1").css("display","block");
}else {
$("#d1").css("display","none");
}
});
});
</script>
Question:
When I scroll page down each div display one by one.
When scroller reach at "#d2" the div "#d1" should be displayed, When scroller reach at "#d3" div "#d2" should be displayed.... and when scroller reach at the end of page "#d5" should be displayed.
You may try this similar case:
http://jsfiddle.net/j7r27/
$(window).scroll(function() {
$("div").each( function() {
if( $(window).scrollTop() > $(this).offset().top - 100 ) {
$(this).css('opacity',1);
} else {
$(this).css('opacity',0);
}
});
});
http://jsfiddle.net/HGCaF/6/
I am trying to make my div move more smoother when moving down the page and back up, it's hard to describe but if you take a look at the link you will begin to understand what I mean,
Here is a sample structure of the webpage:
<div id="window">
<div id="title_bar">
<div id="button">-</div>
</div>
<div id="box">
</div>
</div>
Here's one way of doing that:
CSS:
#window{
width:400px;
border:solid 1px;
position:absolute;
}
JavaScript:
$("#button").click(function(){
$("#box").slideToggle();
if($(this).html() == "-"){
$(this).html("+");
setTimeout(function() {
$('#window').css('top', 'auto');
$('#window').animate({ 'bottom': '0' }, 500);
}, 500);
}
else{
$(this).html("-");
setTimeout(function() {
$('#window').animate({ 'top': '0' }, 500);
$('#window').css('bottom', 'auto');
}, 500);
}
});
Works in FF, I haven't tested other browsers.
I have this form Im creating and when you click on the "Next" button I want to slide the next form() across to the left this is my function
jQuery('input[name^=Next]').click(function () {
current.animate({ marginLeft: -current.width() }, 750);
current = current.next();
});
That function isn't working the way I want to. it slides the text in the container across not the whole container it could be a css problem for all I know.
And my form which has a class name .wikiform doesn't center horizontally. here is my full code. I'm not that experience in javascript so you would be appreciated. cut and paste and try it out
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.4.js"></script>
<script type="text/javascript" language="javascript" src="Scripts/jquery-easing.1.2.pack.js"></script> <script type="text/javascript" language="javascript">
(function ($) {
$.fn.WikiForm = function (options) {
this.Mode = options.mode || 'CancelOk' || 'Ok' || 'Wizard';
var current = jQuery('.wikiform .view :first');
function positionForm() {
//jQuery('.wikiform').css( {'top':
jQuery('body')
.css('overflow-y', 'hidden');
jQuery('<div id="overlay"></div>')
.insertBefore('.wikiform')
.css('top', jQuery(document).scrollTop())
.animate({ 'opacity': '0.8' }, 'slow');
jQuery('.wikiform')
.css('height', jQuery('.wikiform .wizard .view:first').height() + jQuery('.wikiform .navigation').height())
.css('top', window.screen.availHeight / 2 - jQuery('.wikiform').height() / 2)
.css('width', jQuery('.wikiform .wizard .view:first').width())
.css('left', -jQuery('.wikiform').width())
.animate({ marginLeft: jQuery(document).width() / 2 + jQuery('.wikiform').width() / 2 }, 750);
jQuery('.wikiform .wizard')
.css('overflow', 'hidden')
.css('height', jQuery('.wikiform .wizard .view:first').height() );
}
if (this.Mode == "Wizard") {
return this.each(function () {
var current = jQuery('.wizard .view :first');
var form = jQuery(this);
positionForm();
jQuery('input[name^=Next]').click(function () {
current.animate({ marginLeft: -current.width() }, 750);
current = current.next();
});
jQuery('input[name^=Back]').click(function () {
alert("Back");
});
});
} else if (this.Mode == "CancelOk") {
return this.each(function () {
});
} else {
return this.each(function () {
});
}
};
})(jQuery);
$(document).ready(function () {
jQuery(window).bind("load", function () {
jQuery(".wikiform").WikiForm({ mode: 'Wizard', speed:750, ease:"expoinout" });
});
});
</script>
<style type="text/css">
body
{
margin:0px;
}
#overlay
{
background-color:Black; position:absolute; top:0; left:0; height:100%; width:100%;
}
.wikiform
{
background-color:Green; position:absolute;
}
.wikiform .wizard
{
clear: both;
}
.wizard
{
position: relative;
left: 0; top: 0;
width: 100%;
list-style-type: none;
}
.wizard .view
{
float:left;
}
.view .form
{
}
.navigation
{
float:right; clear:left
}
#view1
{
background-color:Aqua;
width:300px;
height:300px;
}
#view2
{
background-color:Fuchsia;
width:300px;
height:300px;
}
</style>
<title></title>
</head>
<body><form action="" method=""><div id="layout">
<div id="header">
Header
</div>
<div id="content" style="height:2000px">
Content
</div>
<div id="footer">
Footer
</div>
</div>
<div id="formView1" class="wikiform">
<div class="wizard">
<div id="view1" class="view">
<div class="form">
Content 1
</div>
</div>
<div id="view2" class="view">
<div class="form">
Content 2
</div>
</div>
</div>
<div class="navigation">
<input type="button" name="Back" value=" Back " />
<input type="button" name="Next " class="Next" value=" Next " />
<input type="button" name="Cancel" value="Cancel" />
</div>
</div></form></body></html>
Try changing this line:
var current = jQuery('.wizard .view :first');
(which was selecting the form element directly under 'view')
to this:
var current = jQuery('.wizard .view:first');
// The first element with a class of 'view' under an element with a class of
// 'wizard'
Update, due to comments below:
To make a simple scrolling widget, you need the following:
An outer <div> with a fixed width and height
An inner <div> with a fixed height and a very long width.
Code to change the left offset of the inner <div>.
You can see a simple example of a widget like this here: http://jsfiddle.net/andrewwhitaker/feJxu/
For the OP's specific problem, I've modified the code that assigns CSS properties to look like this:
$('.wikiform')
.css('height', $('.wikiform .wizard .view:first').height() + $('.wikiform .navigation').height())
.css('top', window.screen.availHeight / 2 - $('.wikiform').height() / 2)
.css('width', $('.wikiform .wizard .view:first').width())
.css('left', -$('.wikiform').width())
.css('overflow', 'hidden') // ADDED
.animate({marginLeft: $(document).width() / 2 + $('.wikiform').width() / 2
}, 750);
$('.wikiform .wizard')
.css('width', '10000px') // ADDED. May need to be longer depending on content.
.css('height', $('.wikiform .wizard .view:first').height());
I've also changed the animation that 'next' does:
$('input[name^=Next]').click(function() {
$(".wizard").animate({
left: "-=" + current.width() + "px"
}, 750);
}); // Similar logic for 'back'
What this is doing is basically altering the left offset of the view with a huge width (.wizard) and scrolling a new form into the view with a fixed width and height (.wikiform). See a working sample here: http://jsfiddle.net/andrewwhitaker/J9L8s/