jQuery: Nesting letter transform function - javascript

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>

Related

"Working" script returning Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent

I'm building a page that first gets the HTML data from an external page (Not cross domain), then after the first function completes, it runs a function which is a sideshow. It works... More or less...
The problem that I'm having is that after 5 or 6 slides, the whole thing gets messy and then everything disappears. When checking the console, I found the following message:
Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.
at HTMLDivElement.<anonymous> (xxxxxxxxxxxxxxxxx.com/jquery/jquery-1.12.4.js:6297:21)
at domManip (xxxxxxxxxxxxxxxxx.com/jquery/jquery-1.12.4.js:6066:14)
at jQuery.fn.init.after (xxxxxxxxxxxxxxxxx/jquery/jquery-1.12.4.js:6295:10)
at HTMLDivElement.<anonymous> (xxxxxxxxxxxxxxxxx.com/go/scripts/jqueryautoscroll/autoscroll.js:41:47)
at HTMLDivElement.opt.complete (xxxxxxxxxxxxxxxxx/jquery/jquery-1.12.4.js:7900:12)
at fire (xxxxxxxxxxxxxxxxx.com/jquery/jquery-1.12.4.js:3232:31)
at Object.fireWith [as resolveWith] (xxxxxxxxxxxxxxxxx/jquery/jquery-1.12.4.js:3362:7)
at tick (xxxxxxxxxxxxxxxxx.com/jquery/jquery-1.12.4.js:7755:14)
at jQuery.fx.tick (xxxxxxxxxxxxxxxxx.com/jquery/jquery-1.12.4.js:8069:9)
I presume it has something to do with the container.find(elm + ':first').before(container.find(elm + ':last'));
So I tried commenting all the lines, the error was gone, but then the sliders wouldn't change.
My code is as follows:
jQuery(document).ready(function ($) {
$("#jobshome").load("jobs/newest-jobs .js-toprow", function(){
//rotation speed and timer
var speed = 3000;
var run = setInterval(rotate, speed);
var slides = $('.js-toprow');
var container = $('#jobshome');
var elm = container.find(':first-child').prop("tagName");
var item_height = container.height();
var previous = 'prevabc'; //id of previous button
var next = 'nextabc'; //id of next button
slides.height(item_height); //set the slides to the correct pixel height
container.parent().height(item_height);
container.height(slides.length * item_height); //set the slides container to the correct total height
container.find(elm + ':first').before(container.find(elm + ':last'));
resetSlides();
//if user clicked on prev button
$('#buttonsabc a').click(function (e) {
//slide the item
if (container.is(':animated')) {
return false;
}
if (e.target.id == previous) {
container.stop().animate({
'top': 0
}, 1500, function () {
container.find(elm + ':first').before(container.find(elm + ':last'));
resetSlides();
});
}
if (e.target.id == next) {
container.stop().animate({
'top': item_height * -2
}, 1500, function () {
container.find(elm + ':last').after(container.find(elm + ':first'));
resetSlides();
}
);
}
//cancel the link behavior
return false;
});
//if mouse hover, pause the auto rotation, otherwise rotate it
container.parent().mouseenter(function () {
clearInterval(run);
}).mouseleave(function () {
run = setInterval(rotate, speed);
});
function resetSlides() {
//and adjust the container so current is in the frame
container.css({
'top': -1 * item_height
});
}
});
//a simple function to click next link
//a timer will call this function, and the rotation will begin
function rotate() {
jQuery('#nextabc').click();
}
});
#carouselabc {
position: relative;
width: 60%;
margin: 0 auto;
}
#slidesabc {
overflow: hidden;
position: relative;
width: 100%;
height: 250px;
}
#areadoslideabc {
list-style: none;
width: 100%;
height: 250px;
margin: 0;
padding: 0;
position: relative;
}
#slidesabcdef {
width: 100%;
height: 250px;
float: left;
text-align: center;
position: relative;
font-family: lato, sans-serif;
}
/* Styling for prev and next buttons */
.btn-barabc {
max-width: 346px;
margin: 0 auto;
display: block;
position: relative;
top: 40px;
width: 100%;
}
#buttonsabc {
padding: 0 0 5px 0;
float: right;
}
#buttonsabc a {
text-align: center;
display: block;
font-size: 50px;
float: left;
outline: 0;
margin: 0 60px;
color: #b14943;
text-decoration: none;
display: block;
padding: 9px;
width: 35px;
}
a#prevabc:hover,
a#next:hover {
color: #FFF;
text-shadow: .5px 0px #b14943;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carouselabc">
<div class="btn-barabc">
<div id="buttonsabc">
<a id="prevabc" href="#">Previous</a>
<a id="nextabc" href="#">Next</a>
</div>
</div>
<div id="slidesabc">
<div id="jobshome"></div>
</div>
</div>
Screenshot 1
Screenshot 2
This is how it starts
Your problem seems to happen because of the nested selectors (.js-toprow) that are later moved.
Try replacing all the .find() (matches children any level deep) with .children() (matches only immediate children).
jQuery(document).ready(function ($) {
$("#jobshome").load("jobs/newest-jobs .js-toprow", function(){
//rotation speed and timer
var speed = 3000;
var run = setInterval(rotate, speed);
var slides = $('.js-toprow');
var container = $('#jobshome');
var elm = container.children(':first-child').prop("tagName");
var item_height = container.height();
var previous = 'prevabc'; //id of previous button
var next = 'nextabc'; //id of next button
slides.height(item_height); //set the slides to the correct pixel height
container.parent().height(item_height);
container.height(slides.length * item_height); //set the slides container to the correct total height
container.children(elm + ':first').before(container.children(elm + ':last'));
resetSlides();
//if user clicked on prev button
$('#buttonsabc a').click(function (e) {
//slide the item
if (container.is(':animated')) {
return false;
}
if (e.target.id == previous) {
container.stop().animate({
'top': 0
}, 1500, function () {
container.children(elm + ':first').before(container.children(elm + ':last'));
resetSlides();
});
}
if (e.target.id == next) {
container.stop().animate({
'top': item_height * -2
}, 1500, function () {
container.children(elm + ':last').after(container.children(elm + ':first'));
resetSlides();
}
);
}
//cancel the link behavior
return false;
});
//if mouse hover, pause the auto rotation, otherwise rotate it
container.parent().mouseenter(function () {
clearInterval(run);
}).mouseleave(function () {
run = setInterval(rotate, speed);
});
function resetSlides() {
//and adjust the container so current is in the frame
container.css({
'top': -1 * item_height
});
}
});
//a simple function to click next link
//a timer will call this function, and the rotation will begin
function rotate() {
jQuery('#nextabc').click();
}
});

jquery check if img is inside div

// w a s d
$(document).ready(function(e){
var keys = {};
$(document).keydown(function(event){
keys[event.which] = true;
}).keyup(function(event){
delete keys[event.which];
});
var $d = $("img");
function gameLoop() {
if (keys[68]) {
$d.css("left", function(i,oldVal) { return parseInt(oldVal) + 5 + "px"; });
}
else if (keys[65]) {
$d.css("left", function(i,oldVal) { return parseInt(oldVal) - 5 + "px"; });
}
if (keys[83]) {
$d.css("top", function(i,oldVal) { return parseInt(oldVal) + 5 + "px"; });
}
else if (keys[87]) {
$d.css("top", function(i,oldVal) { return parseInt(oldVal) - 5 + "px"; });
}
setTimeout(gameLoop, 20);
}
gameLoop();
$(document).focus();
});
// arrows
$(document).ready(function(e){
var keys = {};
$(document).keydown(function(event){
keys[event.which] = true;
}).keyup(function(event){
delete keys[event.which];
});
var $d = $("img");
function gameLoop() {
if (keys[37]) {
$d.css("left", function(i,oldVal) { return parseInt(oldVal) - 5 + "px"; });
}
else if (keys[39]) {
$d.css("left", function(i,oldVal) { return parseInt(oldVal) + 5 + "px"; });
}
if (keys[40]) {
$d.css("top", function(i,oldVal) { return parseInt(oldVal) + 5 + "px"; });
}
else if (keys[38]) {
$d.css("top", function(i,oldVal) { return parseInt(oldVal) - 5 + "px"; });
}
setTimeout(gameLoop, 20);
}
gameLoop();
$(document).focus();
});
$(document).ready(function(){
if($(".goal:has(img)")){
alert("yes");
}
});
img {
position : absolute;
left: 0;
top: 0;
}
.goal{
width: 10px;
height: 10px;
background-color: green;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>Super Mario!</title>
<link rel='stylesheet' type='text/css' href='style.css'/>
</head>
<body>
<img src="http://i1061.photobucket.com/albums/t480/ericqweinstein/mario.jpg"/>
<div class="goal"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="script.js"></script>
</html>
I want an alert box that pops up when the Mario(img) is inside the goal(div). Thanks for the help. don't mind my js code it's just something random and I don't know if it's close to right, Thanks!
Edit: the div is the green dot on the top right corner.
Try with $(".goal").find("img").length > 0
$(document).ready(function() {
if ($(".goal").find("img").length > 0) {
alert("yes");
} else { alert( "no" ); }
});
img {
position: absolute;
left: 0;
top: 0;
}
.goal {
width: 10px;
height: 10px;
background-color: green;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>Super Mario!</title>
<link rel='stylesheet' type='text/css' href='style.css' />
</head>
<body>
<img src="http://i1061.photobucket.com/albums/t480/ericqweinstein/mario.jpg" />
<div class="goal"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="script.js"></script>
</html>
I want an alert box that pops up when the Mario(img) is inside the
goal(div).
It seems, that you don't need to check if the element img is inside the div or not. What you want to do is just check if the coordinates of your mario img are within the range of the goal div.
Easiest would be to use element.getBoundingClientRect, to obtain the DOMRect object which will hold the size and position of your elements. Use this to figure out if your mario is in the range of your goal.
Create a function to check the position every time keyboard navigation happens. Like this:
function checkMario() {
var goalPost = $('.goal')[0].getBoundingClientRect();
var mario = $('#mario')[0].getBoundingClientRect();
if ((goalPost.left - mario.left) < 60) {
$('#result').text('yesssss');
} else {
$('#result').text('no yet');
}
}
Example Snippet:
In this example, I have kept it simple to simply calculate if the left position is within the range of the div. You will then need to refine it further to check for all sides.
Try using your keyboard left/right keys to move the mario in to the goal.
$(document).ready(function(e) {
var keys = {};
$(document).keydown(function(event) {
keys[event.which] = true;
}).keyup(function(event) {
delete keys[event.which];
});
var $d = $("img");
function gameLoop() {
if (keys[68]) {
$d.css("left", function(i, oldVal) {
return parseInt(oldVal) + 5 + "px";
});
} else if (keys[65]) {
$d.css("left", function(i, oldVal) {
return parseInt(oldVal) - 5 + "px";
});
}
if (keys[83]) {
$d.css("top", function(i, oldVal) {
return parseInt(oldVal) + 5 + "px";
});
} else if (keys[87]) {
$d.css("top", function(i, oldVal) {
return parseInt(oldVal) - 5 + "px";
});
}
setTimeout(gameLoop, 20);
}
gameLoop();
$(document).focus();
});
// arrows
$(document).ready(function(e) {
var keys = {};
$(document).keydown(function(event) {
keys[event.which] = true;
}).keyup(function(event) {
delete keys[event.which];
});
var $d = $("img");
function gameLoop() {
if (keys[37]) {
$d.css("left", function(i, oldVal) {
return parseInt(oldVal) - 5 + "px";
});
checkMario();
} else if (keys[39]) {
$d.css("left", function(i, oldVal) {
return parseInt(oldVal) + 5 + "px";
});
checkMario();
}
if (keys[40]) {
$d.css("top", function(i, oldVal) {
return parseInt(oldVal) + 5 + "px";
});
checkMario();
} else if (keys[38]) {
$d.css("top", function(i, oldVal) {
return parseInt(oldVal) - 5 + "px";
});
checkMario();
}
setTimeout(gameLoop, 20);
}
gameLoop();
$(document).focus();
});
function checkMario() {
var goalPost = $('.goal')[0].getBoundingClientRect();
var mario = $('#mario')[0].getBoundingClientRect();
if ((goalPost.left - mario.left) < 60) {
$('#result').text('yesssss');
} else {
$('#result').text('no yet');
}
}
img {
position: absolute;
left: 0; top: 0; width: 60px;
}
.goal {
width: 10px; height: 10px;
background-color: green; float: right;
}
p { margin-top: 64px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id='mario' src="http://i1061.photobucket.com/albums/t480/ericqweinstein/mario.jpg" />
<div class="goal"></div>
<br/>
<p id="result"></p>
Your question have 2 cases.
Image inside of div at any level, children and it's children too. In that case,
if ($(".goal").find('img').length) {
// yes
}
If you want to check only children and not children of children you can try
if($(.goal).find('> img').length) {
// yes
}
Change your selector and check the length of the result: $(".goal img").length
$(document).ready(function() {
if ($(".goal img").length) {
alert("yes");
}
});
img {
position: absolute;
left: 0;
top: 0;
}
.goal {
width: 10px;
height: 10px;
background-color: green;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>Super Mario!</title>
<link rel='stylesheet' type='text/css' href='style.css' />
</head>
<body>
<img src="http://i1061.photobucket.com/albums/t480/ericqweinstein/mario.jpg" />
<div class="goal">
<img>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="script.js"></script>
</html>
try this
$(document).ready(function(){
if($("img").closest('.goal').length){
alert("yes");
}
});
Check for image tag length using find .
$(document).ready(function(){
if ($('.goal').find('img').length >0 )
alert("yes");
else
alert("no");
});
img {
position : absolute;
left: 0;
top: 0;
}
.goal{
width: 10px;
height: 10px;
background-color: green;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>Super Mario!</title>
<link rel='stylesheet' type='text/css' href='style.css'/>
</head>
<body>
<img src="http://i1061.photobucket.com/albums/t480/ericqweinstein/mario.jpg"/>
<div class="goal"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="script.js"></script>
</html>

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.

Creating a jQuery vertical scroll loop

I'm trying to write a jQuery script that will continually scroll these <p> tags within their <div> parent. I got the idea from this site.
function shuffle(){
$('#wrapper > p').each(function(){
h = ($(this).offset().top + 130);
if( h > 500 ){
console.log(h);
$(this).css ('top', 0 );
return;
}
if( h == 270 ){
$(this).addClass('current' );
}
if( h == 360 ){
$(this).removeClass('current' );
}
$(this).animate({
top: h,
easing: 'easeIn'
}, 500, '');
if( h > 1350 ){
$(this).css ('top', 0 );
}
});
window.setTimeout(shuffle, 2500);
}
var i = 0;
$('#wrapper > p').each(function(){
starter = $(this).css('top', ((i * 90) ) + 'px' );
starterWhite = ($(this).offset().top + 130);
if((i*90) == 270)
$(this).addClass('current');
$(this).css('top', starter );
i++;
});
window.setTimeout(shuffle, 2000);
#wrapper {
height: 500px;
overflow: hidden;
position: relative;
}
p {
position: absolute;
margin: 0;
padding: 0;
}
.current {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
</div>
Problem is when I try to make it scroll the <p> tags overlap, and the highlighted tag doesn't change. Any idea how to make it work? Here's a JSFiddle of what I got so far.
Check this out:
// Constants, you can play with it
var STEP = 90;
var CURRENT_INDEX = 3;
// Variables for calculating
var currentTop = STEP * CURRENT_INDEX;
var nextForCurrentTop = STEP * (CURRENT_INDEX + 1);
var $numbers = $('#wrapper > p');
// In this case = 7
var count = $numbers.length;
var secondToLastTop = STEP * (count - 1);
$numbers.each(function(i) {
var $this = $(this);
$this.css('top', i * STEP + 'px');
if (i === CURRENT_INDEX) {
$this.addClass('current');
}
});
window.setTimeout(shuffle, 2000);
function shuffle() {
$numbers.each(function() {
$this = $(this);
// Calculating the new position of the element
h = parseInt($this.css('top')) + STEP;
// In this case = 540
if (h > secondToLastTop) {
$this.css('top', 0);
return;
}
// In this case visually = 3rd element
if (h === currentTop) {
$this.addClass('current');
}
// In this case visually = 4th element
if (h === nextForCurrentTop) {
$this.removeClass('current');
}
$this.animate({
top: h,
easing: 'easeIn'
}, 500, '');
});
window.setTimeout(shuffle, 2500);
}
#wrapper {
height: 500px;
overflow: hidden;
position: relative;
}
p {
position: absolute;
margin: 0;
padding: 0;
}
.current {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
</div>
I improved and commented code from your example, removed magic numbers. You can play with constants.

Div slider in reverse

This is the link of an example of divslider: http://jsfiddle.net/jtbowden/ykbgT/light/
But in this example the divs are moving from right to left
but i want to move the divs from left to right now.. this website already has an editor inside it.
so please help me move the divs in reverse direction. because on my code i want to go both sides
$('.box').click(function() {
$('.box').each(function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
} else if ($(this).offset().left > $('#container').width()) {
$(this).animate({
left: '50%',
}, 500 );
} else {
$(this).animate({
left: '-150%',
}, 500 );
}
});
});​
Here's what worked for me on your JS Fiddle:
$('.box').click(function() {
$('.box').each(function() {
if ($(this).offset().left < 0) {
$(this).animate({
left: '50%',
}, 500 );
} else if ($(this).offset().left > $('#container').width()) {
$(this).css({
'left': '-150%',
} );
} else {
$(this).animate({
left: '150%',
}, 500 );
}
});
});​
Is this what you mean?
#box1 {
background-color: green;
left: 150%; /* changed this */
}
#box3 {
background-color: red;
left: -150%; /* changed this */
}
​
and
$('.box').click(function() {
$('.box').each(function() {
if ($(this).offset().left > $('#container').width()) {
$(this).css("left", "-150%");
} else if ($(this).offset().left < 0) {
$(this).animate({left:'50%'},500);
} else {
$(this).animate({left:'150%'},500);
}
});
});​

Categories

Resources