When I use my script
$(document).ready(function(){
console.log("it started");
swapsies();
});
function swapsies() {
$('.lang').on('click', function(){
console.log("here");
//.when(
$.when(
$(this).animate({ "margin-left": "-=10" }, 500),
$('.active').animate({ "margin-left": "+=10" }, 500)
).done(function(){
console.log("done");
});
});
}
Both elements, this and active supposed to move and switch places, but only active element is moving! I dont know, maybe it is because of the wait function
Here is my html so you could run this:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js" ></script>
<title>Test swapsies</title>
</head>
<body>
<div id="fied">
<button type="button" id="bb">Click Me!</button>
<div id="swapthis">
<ul>
<li class="active lang">En</li>
<li class="lang">Fr</li>
<li class="lang">Es</li>
</ul>
</div>
</div>
</body>
</html>
And css:
li{
display:inline;
background-color: aquamarine;
font-size: 24px;
}
.active{
background-color: blanchedalmond;
}
Please help me figure out how to make both elements to move - the one that was clicked on and the one that uses .active class.
you should make the element you click moving more left.
instead of "-=10"
$(this).animate({ "margin-left": "-=10" }, 500)
using "-=20"
$(this).animate({ "margin-left": "-=20" }, 500)
I've test your code on jsfiddle.
The fact the element you click is not moving showing exactly the code is working.
Since you're asking the element on its left moving right 10 px (which makes itself moves right 10px) and then asking the element moving left 10 px, makes it not moving at all.
but since you might not want the element on its right moves too, you should also handling those elements' margin
I've modify your code like this:
$('.lang').on('click', function(){
var dist = 10;
console.log("here");
//.when(
$.when(
$(this).animate({ "margin-left": "-="+dist*2 }, 500),
$(this).next().animate({ "margin-left": "+="+dist }, 500),
$('.active').animate({ "margin-left": "+="+dist }, 500)
).done(function(){
console.log("done");
});
});
increasing dist if you want to move more.
$(document).ready(function() {
console.log("it started");
swapsies();
});
function swapsies() {
$(".lang").on("click", function(e) {
$(e.target)
.parent()
.siblings()
.removeClass("active")
.animate({"left":"0"}, -500)
.end()
.addClass("active")
.animate({"margin-left": "-=10", "left":"0px"}, 500, function() {
$(this).prependTo($(this).parent())
.animate({"margin-left": "+=10", "left":"-=10"}, 500, function() {
$(this).siblings().animate({"left": "0"}, 500)
.promise().then(function() {
console.log("done")
})
})
});
});
}
li {
position: relative;
display: inline;
background-color: aquamarine;
font-size: 24px;
padding: calc(0%);
margin-left: calc(0%);
margin-right: calc(0%);
width: calc(1%);
}
.active {
background-color: blanchedalmond;
left:-10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="fied">
<button type="button" id="bb">Click Me!</button>
<div id="swapthis">
<ul>
<li class="active lang">En
</li>
<li class="lang">Fr
</li>
<li class="lang">Es
</li>
</ul>
</div>
</div>
Related
I'm trying to make a sticky navbar that becomes fixed after scrolling past the hero section. I'm trying to use materialize to do this, but I'm not very good at javascript so I can't figure it out. I'm trying to use Materialize Pushpin to do it (http://materializecss.com/pushpin.html)
Here's my code so far: https://jsfiddle.net/2kc0fgj5/
The part I'm trying to make sticky is the .menu div. What would be the method I would use javascript I would use to make the navbar behave this way?
<head>
<title>Voice</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<section id="hero" class="segment">
<div id="hero-content" class="valign-wrapper">
<div id="hero-child" class="center-align">
<img src="resources/images/voice-circle.png" id="voice-circle" /><br/>
Learn More<br/>
Order Now
</div>
</div>
</section>
<div class="menu">
<nav>
<div class="nav-wrapper white">
Voice
<i class="material-icons">menu</i>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Features</li>
<li>Testimonials</li>
<li>Workshops</li>
<li>Prices</li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>Features</li>
<li>Testimonials</li>
<li>Workshops</li>
<li>Prices</li>
</ul>
</div>
</nav>
</div>
<section id="features" class="segment">
</section>
</body>
The accompanying CSS:
.segment {
height: 100vh;
width: 100%;
background-color:aquamarine;
}
.divide {
height: 50vh;
width: 100%;
}
#hero {
background-image: url('resources/images/hero%20header.png');
background-size: auto 100vh;
background-position: center;
}
.bpblue-text {
color: #21A1EC;
}
#nav-mobile>li>a {
color: #21A1EC;
}
#voice-circle {
width: 30%;
height: auto;
}
.hero-btn {
margin: 10px;
width: 300px;
}
#hero-content {
width: 100%;
height: 100vh;
}
#hero-child {
width: 100%;
}
And the current javascript, so far only having smooth scrolling and a side navigation bar
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function (event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function () {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
$(".button-collapse").sideNav();
EDIT: fixed link and added code.
You Need some Fixes in HTML and JS
HTML
change this section line 20 and 21
<div class="menu">
<nav>
to
<div id="menu">
<nav class="menu" data-target="menu">
JS
$(document).ready(function () {
var menu = $('.menu');
var target = $('#' +menu.attr("data-target"));
menu.pushpin({
top: target.offset().top,
});
});
Working Fiddle
Hope this Helps..
you can add this to your js file
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop()>150){
$('nav').addClass('sticky-nav');
}
});
)};
and this to CSS file
.sticky-nav{
position: fixed;
top:0;
}
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
I have the following code...
Once an image is clicked it is animated (e.g. Resized and moved) to look like it is flipping over to reveal another image. This works perfectly fine when the code is applied to images, but when I want to apply it to a containing div, that contains tags and a few more images, all goes wrong.
THIS WORKS:
<img alt="" src="image_1.jpg" id="image1" />
<img alt="" src="images_2.jpg" id="image2" />
JS
$(document).ready(function() {
var margin = $("#image1").width()/2;
var width = $("#image1").width();
var height = $("#image1").height();
$("#image2").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#image1").click(function(e) {
e.preventDefault();
$(this).stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500});
window.setTimeout(function() {
$("#image2").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500});
},500);
});
$("#image2").click(function(e) {
e.preventDefault();
$(this).stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500});
window.setTimeout(function() {
$("#image1").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500});
},500);
});
});
THIS DOESN'T WORK
<div class="containerOne">
<img src="image_1.jpg" alt="" />
<img src="image_3" alt="" />
</div>
<div class="containerTwo">
<img src="image_2" alt="" />
</div>
JS
$(document).ready(function(){
var margin = $(".containerOne").width()/2;
var width = $(".containerOne").width();
var height = $(".containerOne").height();
$(".containerTwo").stop().css({
width:'0px',
height:''+height+'px',
marginLeft:''+margin+'px',
opacity:'0.5'
});
$(".departmentProducts").click(function(e) {
e.preventDefault();
$(this).find('.containerOne').stop().animate({
width:'0px',
height:''+height+'px',
marginLeft:''+margin+'px',
opacity:'0.5'
}, { duration:500 });
window.setTimeout(function() {
$(".containerTwo").stop().animate({
width:''+width+'px',
height:''+height+'px',
marginLeft:'0px',
opacity:'1'
},{ duration:500 });
},500);
});
$(".departmentProduct").click(function(e) {
e.preventDefault();
$(this).find('.containerTwo').stop().animate({
width:'0px',
height:''+height+'px',
marginLeft:''+margin+'px',
opacity:'0.5'
},{ duration:500 });
window.setTimeout(function() {
$(".containerOne").stop().animate({
width:''+width+'px',
height:''+height+'px',
marginLeft:'0px',
opacity:'1'
},{ duration:500 });
},500);
});
});
See this jQuery plugin here. Named Flippy and seems to be lightweight.
Your code look well, but i think that you are using animate() on your div container of
, you image not change his visual properties, because his properties steel the same, I recomend to you check this link https://api.jquery.com/animate/ ,
look this simple example how animate a div.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>animate demo</title>
<style>
div {
background-color: #bca;
width: 100px;
border: 1px solid green;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="go">ยป Run</button>
<div id="block">Hello!</div>
<script>
// Using multiple unit types within one animation.
$( "#go" ).click(function() {
$( "#block" ).animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
</script>
</body>
</html>
Hope Hepls.
I am trying to figure out how .stop() and clearQueue() work.
Here is my sample code in jsfiddle: http://jsfiddle.net/PsTQv/1/
You will see the animation is queuing if hove over several blocks.
To work around with this, I tried to use stop() and clearQueue.Simple add stop after hide() or show() or both won't work.The behaviors like:
1. .stop().hide() : text disappears at last;
2. .stop.show(): text is alway there, won't be hidden any more
3. add both: Same as only add to show()
4. add .clearQueue().stop() in the beginning: text disappears at last, like .stop().hide()
I want to understand what the differences between clearQueue and stop to explain the behaviors above.Also I want to figure out how to achieve the animation without queueing in this example, that is, hover over the block and the text shows up in the slide effect.
Thanks
You need to clear the animation queue in the callback function that executes when the slide animation is done:
$('.block').hover(function(){
$('section').hide('fast');
//$('section').stop().show('slide',{direction:'left'},1000);
$('section').show('slide',{direction:'left'},1000,function(){$(this).clearQueue()});
},function(){});
jsFiddle
var inAnimation = new Array();
$("div").hover(function(){
if (!inAnimation[$("div").index(this)] ) {
$(this).animate({ width: "200px" });
}
}, function() {
inAnimation[$("div").index(this)] = true;
$(this).animate({ width: "100px" }, "normal", "linear", function() {
inAnimation[$("div").index(this)] = false;
})
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>clearQueue demo</title>
<style>
div {
margin: 3px;
width: 40px;
height: 40px;
position: absolute;
left: 0px;
top: 30px;
background: green;
display: none;
}
div.newcolor {
background: blue;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
<script>
$( "#start" ).click(function() {
var myDiv = $( "div" );
myDiv.show( "slow" );
myDiv.animate({
left:"+=200"
}, 5000 );
myDiv.queue(function() {
var that = $( this );
that.addClass( "newcolor" );
that.dequeue();
});
myDiv.animate({
left:"-=200"
}, 1500 );
myDiv.queue(function() {
var that = $( this );
that.removeClass( "newcolor" );
that.dequeue();
});
myDiv.slideUp();
});
$( "#stop" ).click(function() {
var myDiv = $( "div" );
myDiv.clearQueue();
myDiv.stop();
});
</script>
</body>
</html>
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/