Develop Reference

jQuery: Nesting letter transform function

This is the code:
$(document).ready(function() {
var isRandom = false;
$('#one, #two').html(function(i, html) {
var chars = $.trim(html).split("");
return '<span>' + chars.join('</span><span>') + '</span>';
});
$('#one').click(function() {
isRandom = !isRandom;
if (isRandom) {
$('span').each(function() {
$(this).css({
"position": "absolute"
});
$(this).animate({
left: Math.random() * window.outerWidth / 2,
top: Math.random() * window.outerHeight / 2,
});
});
} else {
$('span').each(function() {
$(this).css({
"position": "relative"
});
$(this).animate({
left: 0,
top: 0,
});
});
}
});
});
html,
body {
width: 100%;
height: 100%;
}
div {
font-family: Arial;
font-size: 20px;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one">Click me</div>
<div id="two">Flying letters based on #one</div>
<div>No flying letters</div>
If you click the first div, the letters from #one and #two start moving. That's exactly how it should look like. But then: If you want to get the previous state, you would need have to click a letter from #once. It also should work if you click one of the two other div.
How is it possible to do that? Would be happy if somebody could help me!

You can add click event on #two to do that as below -
$('#two').click(function() {
if (isRandom) {
isRandom = false;
$('span').each(function() {
$(this).css({
"position": "relative"
});
$(this).animate({
left: 0,
top: 0,
});
});
}
});
Final code (I have extracted into functions for better understanding) -
$(document).ready(function() {
var isRandom = false;
$('#one, #two').html(function(i, html) {
var chars = $.trim(html).split("");
return '<span>' + chars.join('</span><span>') + '</span>';
});
$('#one').click(function() {
isRandom = !isRandom;
if (isRandom) {
fly();
} else {
restore();
}
});
$('#two').click(function() {
if (isRandom) {
isRandom = false;
restore();
}
});
function fly() {
$('span').each(function() {
$(this).css({
"position": "absolute"
});
$(this).animate({
left: Math.random() * window.outerWidth / 2,
top: Math.random() * window.outerHeight / 2,
});
});
}
function restore() {
$('span').each(function() {
$(this).css({
"position": "relative"
});
$(this).animate({
left: 0,
top: 0,
});
});
}
});
html,
body {
width: 100%;
height: 100%;
}
div {
font-family: Arial;
font-size: 20px;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one">Click me</div>
<div id="two">Flying letters based on #one</div>
<div>No flying letters</div>

You can simply change your selector to some class which is same to all divs then inside event handler you just need to check if the div which is clicked has id has one using && if yes then only if part will get executed .
Demo Code :
$(document).ready(function() {
var isRandom = false;
$('#one, #two').html(function(i, html) {
var chars = $.trim(html).split("");
return '<span>' + chars.join('</span><span>') + '</span>';
});
//chnage slector
$('div.sameclass').click(function() {
isRandom = !isRandom;
//check if the div which is clicked has id one..
if (isRandom && $(this).attr("id") == "one") {
$('span').each(function() {
$(this).css({
"position": "absolute"
});
$(this).animate({
left: Math.random() * window.outerWidth / 2,
top: Math.random() * window.outerHeight / 2,
});
});
} else {
$('span').each(function() {
$(this).css({
"position": "relative"
});
$(this).animate({
left: 0,
top: 0,
});
});
}
});
});
html,
body {
width: 100%;
height: 100%;
}
div {
font-family: Arial;
font-size: 20px;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one" class="sameclass">Click me</div>
<div id="two" class="sameclass">Flying letters based on #one</div>
<div class="sameclass">No flying letters</div>

Javascript animation on scroll

I trying to do simple animation on element on page
$(window).on('scroll',function () {
if($(window).scrollTop() > 500){
$('#top-page').animate({ right: '50px' }, "slow");
}else{
$('#top-page').animate({ right: '-50px' }, "slow");
}
});
the problem in that it never go to else condition.

The scroll event fires many times during scrolling, so every time it fires a new animation is being added to animation queue. The queue grows to enormous size and you can't wait when the "right" animation would play.
To avoid this, you can use .stop() method which flushes the queue:
$(window).on('scroll', function() {
var sign = $(window).scrollTop() > 50 ? '' : '-';
$('#top-page').stop().animate({right: sign + '50px'}, "slow");
});
body {
height: 300vh
}
#top-page {
position: fixed;
top: 0;
right: -50px;
background: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top-page">TOP PAGE</div>

$(window).on('scroll',function () {
//var body = document.body; // For Safari
var html = document.documentElement; // Chrome, Firefox, IE and Opera
if(html.scrollTop > 500){
$('#top-page').animate({ right: '50px' }, "slow");
}else{
$('#top-page').animate({ right: '-50px' }, "slow");
}
});

jQuery Carousel Plugin button delay issue

I'm making a carousel jQuery plugin, but can't figure out why the left and right buttons only work after a couple seconds...if you try clicking one of them right away, the fade effect has an undesired delay, but if you wait a bit first, then click, then it fades immediately like it's supposed to. I tried removing the interval, and that didn't help. Please run the code snippet below to see what I mean. The really odd part is that if you change the effect from "fade" to "split", the effect happens right away when you click the button.
(function ($) {
/* jSlide */
$.fn.jSlide = function( options ) {
var settings = $.extend({
buttons: true,
speed: 3000,
effect: "slide",
sizing: "auto",
fadeSpeed: 1000
}, options );
//Main wrapper
var styles = {
'position': 'relative',
'overflow': 'hidden'
};
$(this).css( styles );
//Anchors & Sizing
this.children().each( function () {
//Sizing
if ( settings.sizing == "auto" ) {
var styles = {
'position': 'absolute',
'width': 'auto',
'height': 'auto',
'min-width': '100%',
'min-height': '100%'
}
$(this).css( styles );
} else if ( settings.sizing == "fullWidth" ) {
var styles = {
'position': 'absolute',
'width': '100%',
'height': 'auto'
}
if ( settings.effect == "split" ) {
styles.width = '200%';
}
$(this).css( styles );
} else if ( settings.sizing == "fullHeight" ) {
var styles = {
'position': 'absolute',
'width': 'auto',
'height': '100%',
}
$(this).css( styles );
}
//Anchors
if ( settings.effect == "split" ) {
$(this).wrap('<div class="j-slide-wrapper"></div>').wrap('<div class="j-split-anchor"></div>');
$(this).clone().appendTo($(this).closest('.j-slide-wrapper')).wrap('<div class="j-split-anchor"></div>');
} else {
$(this).wrap('<div class="j-slide-wrapper"></div>');
}
var length = $('.j-slide-wrapper').length;
$('.j-slide-wrapper').each( function (index) {
$(this).css('z-index', length - index)
}).promise().done(function () {
$('.j-slide-wrapper').each( function () {
$(this).animate({
'opacity': 1
}, 1000)
});
});
});
//Buttons
if ( settings.buttons ) {
this.prepend(
'<button id="j-slide-left-btn" class="j-slide-btn styled-button"></button>' +
'<button id="j-slide-right-btn" class="j-slide-btn styled-button"></button>'
)
}
var length = $('.j-slide-wrapper').length;
$('.j-slide-btn').css('z-index', length + 1);
//Effect
var i = 0,
wrapper = $(this).find('.j-slide-wrapper');
timer = setInterval( function () {
var length = wrapper.length;
if (settings.effect == "fade") {
fadeSlides(i, wrapper, length, 'right', settings.fadeSpeed);
} else if ( settings.effect == "split" ) {
splitSlides(i, wrapper, length, 'right');
}
if (i + 1 == length) {
i = 0;
} else {
i = i + 1;
}
}, settings.speed);
$('#j-slide-left-btn').click( function() {
clearInterval(timer);
var length = wrapper.length;
if ( settings.effect == "fade" ) {
fadeSlides(i, wrapper, length, 'left', settings.fadeSpeed);
} else if (settings.effect == "split") {
splitSlides(i, wrapper, length, 'left');
}
if (i - 1 < 0) {
i = length - 1;
} else {
i = i - 1;
}
});
$('#j-slide-right-btn').click( function() {
clearInterval(timer);
var length = wrapper.length;
if ( settings.effect == "fade") {
fadeSlides(i, wrapper, length, 'right', settings.fadeSpeed);
} else if (settings.effect == "split") {
splitSlides(i, wrapper, length, 'right');
}
if (i + 1 == length) {
i = 0;
} else {
i = i + 1;
}
});
function fadeSlides (i, wrapper, length, dir, speed) {
wrapper.eq(i).css('z-index', 3);
wrapper.filter(':gt(' + i + ')').css('z-index', 1);
wrapper.filter(':lt(' + i + ')').css('z-index', 1);
if ( dir == 'right') {
if ( i + 1 == length) {
wrapper.eq(0).css('z-index', 2);
wrapper.eq(0).fadeTo(1, 1);
} else {
wrapper.eq(i + 1).css('z-index', 2);
wrapper.eq(i + 1).fadeTo(1, 1);
}
} else {
if ( i - 1 < 0) {
wrapper.eq(length - 1).css('z-index', 2);
wrapper.eq(length - 1).fadeTo(1, 1)
} else {
wrapper.eq(i - 1).css('z-index', 2);
wrapper.eq(i - 1).fadeTo(1, 1)
}
}
wrapper.eq(i).fadeTo(speed, 0, function() {
$(this).css('z-index', 1);
});
}
function splitSlides (i, wrapper, length, dir) {
wrapper.eq(i).css('z-index', 2);
if ( dir == 'right') {
if ( i + 1 == length) {
wrapper.eq(0).css('z-index', 1);
wrapper.eq(0).find('.j-split-anchor').each( function () {
$(this).animate({
left: 0
}, 0);
});
} else {
wrapper.eq(i + 1).css('z-index', 1);
wrapper.eq(i + 1).find('.j-split-anchor').each( function () {
$(this).animate({
left: 0
}, 0);
});
}
} else {
if ( i - 1 < 0) {
wrapper.eq(length - 1).css('z-index', 1);
wrapper.eq(length - 1).find('.j-split-anchor').each( function () {
$(this).animate({
left: 0
}, 0);
});
} else {
wrapper.eq(i - 1).css('z-index', 1);
wrapper.eq(i - 1).find('.j-split-anchor').each( function () {
$(this).animate({
left: 0
}, 0);
});
}
}
wrapper.eq(i).find('.j-split-anchor:first-child').animate({
'left': '-100%'
}, 750);
wrapper.eq(i).find('.j-split-anchor:last-child').animate({
'left': '100%'
}, 750);
}
return this;
}
} (jQuery));
$(window).on("load", function () {
$('#split-images').jSlide({
effect: "fade",
sizing: "auto",
speed: 3000,
});
});
body, html{
height: 100%;
width: 100%;
overflow-x: hidden;
padding: 0;
margin: 0;
}
#split-images{
display: block;
width: 100%;
height: 100%;
}
.j-slide-wrapper{
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
/* .j-slide-wrapper::before{
display: table;
table-layout: fixed;
content: "";
}
.j-slide-wrapper::after{
display: table;
table-layout: fixed;
content: "";
clear: both;
} */
.j-split-anchor {
width: 50%;
height: 100%;
float: left;
position: relative;
overflow: hidden;
}
.j-slide-wrapper:nth-of-type(n + 2) .j-split-anchor:first-child{
left: -100%;
}
.j-slide-wrapper:nth-of-type(n + 2) .j-split-anchor:last-child{
left: 100%;
}
.j-split-anchor:first-child img{
right: 0;
-ms-transform: translateX(50%);
-moz-transform: translateX(50%);
-o-transform: translateX(50%);
-webkit-transform:translateX(50%);
transform: translateX(50%);
}
.j-split-anchor:last-child img{
left: 0;
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
-webkit-transform:translateX(-50%);
transform: translateX(-50%);
}
/* ************************************** BUTTONS ************************** */
.j-slide-btn{
position: absolute;
height: 25px;
width: 25px;
top: 50%;
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform:translateY(-50%);
transform: translateY(-50%);
z-index: 3;
opacity: 0.7;
}
#j-slide-left-btn{
background: #3f3a3e url(../images/arrow-left-light.png) center center no-repeat;
left: 2%;
}
#j-slide-right-btn{
background: #3f3a3e url(../images/arrow-right-light.png) center center no-repeat;
right: 2%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="split-images">
<img src="https://pixabay.com/static/uploads/photo/2015/03/25/06/48/love-688582_960_720.jpg" alt= "" />
<img src="https://prod01-cdn04.cdn.firstlook.org/wp-uploads/sites/1/2016/04/GoogleWH-lead-FIN-article-header.jpg" alt= "" />
<img src="https://lh4.googleusercontent.com/KRvgImt_ugjuflC9uMurL5Dln3PTeofLN9xQtHESNs_ehRbFDezNrD9IkBYmzPqFeZ6tFb_lG08=s640-h400-e365" alt= "" />
</div>

I think the issue comes from a confusion between speed and fadeSpeed vars.
speed or setting.speed is mostly used for setTimout delays (3000s).
But fadespeed (1000ms) is used as an argument to fadeSlides() function as defined here:
function fadeSlides (i, wrapper, length, dir, speed) {...});
On load, you define this:
$(window).on("load", function () {
$('#split-images').jSlide({
effect: "fade",
sizing: "auto",
speed: 3000,
});
});
And on document ready, you extend jSlide like this:
(function ($) {
/* jSlide */
$.fn.jSlide = function( options ) {
var settings = $.extend({
buttons: true,
speed: 3000,
effect: "slide",
sizing: "auto",
fadeSpeed: 1000
}, options );
//... More code lines skipped here
}
} (jQuery));
I'm not 100% sure... But, have a look to it.
The "longer delay" I noticed on the snippet behaviour and that I mentioned in comments of your question strangely look like 3000ms rather than 1000ms.

The issue was in this bit of code:
$('.j-slide-wrapper').each( function (index) {
$(this).css('z-index', length - index)
}).promise().done(function () {
$('.j-slide-wrapper').each( function () {
$(this).animate({
'opacity': 1
}, 1000)
});
});
The slides couldn't animate again, because they were already in the process of an animation! To fix this, I reduced the animation time from 1000 to 1. Eventually, I'd like a better solution- to fade in the entire carousel once all of its images have loaded in, but for now this will do.

Box auto silding fromleft to right

I have three boxes and now, there are working as i expected. But, I need this work automatically every 30 secs without 'click' event. Please see this fiddle http://jsfiddle.net/ykbgT/8493/. Any idea?
code as below
<div id="box1" class="box">Div #1</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
$('.box').click(function () {
$('.box').each(function () {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
} else if ($(this).offset().left > $('.box').width()) {
$(this).animate({
left: '50%',
}, 500);
} else {
$(this).animate({
left: '-150%',
}, 500);
}
});
});

You can use a javascript method called setinterval();
setInterval() - executes a function, over and over again, at specified
time intervals.
JSFIDDLE DEMO
setInterval(function(){
$('.box').each(function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
} else if ($(this).offset().left > $('.box').width()) {
$(this).animate({
left: '50%',
}, 500 );
} else {
$(this).animate({
left: '-150%',
}, 500 );
}
});
}, 30000);

setInterval(function() {
$('.box').each(function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
} else if ($(this).offset().left > $('.box').width()) {
$(this).animate({
left: '50%',
}, 500);
} else {
$(this).animate({
left: '-150%',
}, 500);
}
});
}, 30000);

calling functions and click animations

I have one rectangle, 2 functions that animates different this rectangle at different window widths, and im calling the functions with a click. it Must work when screen resizes as well.
Problems:
1- it seems like when I load one function then the other cant work, only the first.
2- It doesn't work on the first click.
3- I have to write the same code for when the document is ready and when the document resize.
How can I fix this 3 points. thx. code below.
$(document).ready(function () {
function lateralMove() {
$(".rectangle-1").off("click").click(function () {
$(this).animate({
left: "+=50"
}, 500);
})
}
function horizontalMove() {
$(".rectangle-1").off("click").click(function () {
$(this).animate({
top: "+=50"
}, 500);
})
}
$(window).resize(function () {
screenWidth = $(this).width()
})
$(".rectangle-1").click(function () {
if (screenWidth > 300) {
lateralMove()
} else if (screenWidth <= 300) {
horizontalMove()
}
})
screenWidth = $(window).width()
if (screenWidth > 300) {
blackMove()
} else if (screenWidth <= 300) {
horizontalMove()
}
})
.rectangle-1 {
position: relative;
background-color: #000;
height: 100px;
width: 100px;
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!doctype html>
<html>
<head></head>
<body>
<div>
<div class="rectangle-1"></div>
</div>
</body>
</html>

just cal a different function depending n a screen width:
function do_mobile(){
//do
}
function do_desktop(){
//do
}
$(".rectangle-1").on("click", function(){
if( $(window).width() > 300 ){
do_desktop();
}
else{
do_mobile();
}
})

This was just a matter of cleaning up your code (you had a function call to a function called blackMove() that was undefined) and you also needed to wrap the "assign movement" portion of your code in a function and call it on document ready and on window resize.
Here's the code pen:
http://codepen.io/nhmaggiej/full/azXgqw/
$(document).ready(function () {
function verticalMove() {
$(".rectangle-1").off("click").click(function () {
$(this).animate({
left: "+=50"
}, 500);
})
}
function horizontalMove() {
$(".rectangle-1").off("click").click(function () {
$(this).animate({
top: "+=50"
}, 500);
})
}
function assignMovement() {
screenWidth = $(this).width()
if (screenWidth > 600) {
verticalMove()
} else if (screenWidth <= 600) {
horizontalMove()
}
};
$(window).resize(function () {
assignMovement();
})
assignMovement();
});

This will move the square onload, onresize and when the square is clicked.
jsFiddle
function lateralMove(elementX) {
elementX.animate({
left: "+=50"
}, 500);
}
function horizontalMove(elementX) {
elementX.animate({
top: "+=50"
}, 500);
}
function elementMove() {
screenWidth = $(window).width();
elementX = $(".rectangle-1");
if (screenWidth > 300) {
lateralMove(elementX);
} else if (screenWidth <= 300) {
horizontalMove(elementX);
}
}
//move on resize
//Use a Timeout to ensure that the resize event is only fired once per change.
$(window).resize(function () {
clearTimeout(this.id);
this.id = setTimeout(elementMove, 500);
});
//move on click
$(".rectangle-1").click(function () {
elementMove();
})
//move on load
elementMove();