I'm using jQuery and I'm trying to fade images out and in. Well, it's kinda weird, the image sometimes stays for much longer than expected, sometimes there's no fade, sometimes it only fades in.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var interval;
function startSlider() {
console.log("Slider Started.");
interval = setInterval(function () {
$(".slides > li:first")
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo(".slides");
}, 5000);
}
startSlider();
</script>```
My assumption is that your internet is probably slowing down the execution of the code. If you switch to a different network, or run on a mobile connection, does the fade work as expected?
To ensure the sliding, you can put startSlider() inside jQuery document ready() event.
$(document).ready(function() {
startSlider();
});
here is a test:
<html>
<head>
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var interval;
function startSlider() {
console.log("Slider Started.");
interval = setInterval(function () {
$(".slides > li:first")
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo(".slides");
}, 5000);
}
$(document).ready(function() {
startSlider();
});
</script>
</head>
<body>
<ul class="slides">
<li>item 1 <img src="https://i.imgur.com/HHSuvHp.png" style="width: 100px; height: 100px;"></li>
<li>item 2 <img src="https://i.imgur.com/oKe8JBR.png" style="width: 100px; height: 100px;"></li>
</ul>
</body>
</html>
Thank you all for trying to help, I'm not sure what the issue is but I've messed with the code and now it works:
$(function() {
$('.image img:gt(0)').hide(); // to hide all except the first image when da page loads
setInterval(function() {
$('.image :first-child').fadeOut(1000)
.next().fadeIn(1000).end().appendTo('.image');
}, 3000);
})
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
.image {
position: relative;
}
.image img {
width: 100%;
position: absolute;
border-radius: 2%;
}
.h {
text-align: center;
}
.a {
font-family: 'Poppins', sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>stuff</title>
</head>
<body>
<div class="h">
<h1 class="a">Automatic image transitions</h1>
</div>
<div class="image">
<img src="https://images.unsplash.com/photo-1593642532009-6ba71e22f468?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80" />
<img src="https://images.unsplash.com/photo-1620393470010-fd62b8ab841d?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
<img src="https://images.unsplash.com/photo-1620406968602-f7e7cd9febce?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
<img src="https://images.unsplash.com/photo-1620415406067-68f6d8072fec?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNnx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
<img src="https://images.unsplash.com/photo-1620398399445-a5359701d43c?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNXx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
<img src="https://images.unsplash.com/photo-1620416530190-506ac680d67f?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNnx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
<img src="https://images.unsplash.com/photo-1620321268133-000441fd17aa?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4OHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
<img src="https://images.unsplash.com/photo-1620399489382-8e77838306ff?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4OXx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>
Related
<style>
#first
{
width:100%;
height:1000px;
background:red;
}
#second
{
width:100%;
height:1000px;
background:blue;
}
</style>
<body>
<div id="first">
</div>
<div id="second">
<h1 id="welcome">Welcome</h1>
</div>
</body>
What I want to achieve here is that on scrolling down the document I wanted the "h1 tag to fade in and appear as soon as I reach id="second". How to do that with JS. I have tried a couple of things, but nothing is working out the way I want. I also browsed regarding animation on scrolling and got results but I m not getting what's happening really. Can someone plz help me out in this? I m completely new to JS and trying out various kinds of stuff.
Thank you.
If you want to use the fade-in for multiple elements. Give a class to these elements and use the loop which is already commented.
$(document).ready(function() {
$(window).scroll( function(){
// $('.fadein').each( function(i){
var bottom_of_element = $('#welcome').offset().top + $('#welcome').outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_element ){
$('#welcome').animate({'opacity':'1'},1000);
}
// });
});
});
div {
height: 600px
}
#first {
background: red;
}
#second {
background: green;
}
#welcome {
opacity: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>h1 fade-in</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="first">
</div>
<div id="second">
<h1 id="welcome">Welcome</h1>
</div>
</body>
</html>
So I had the idea to try to make an image slider where instead of fading in and out the sliders just move into place one by one, this is by adding 450px (width of each image slider).
However I'm struggling on how to accomplish this,I want to check wether the slider is the last so that the the slider reverts back to the first and starts again.
This is the code I came up with so far:
$(document).ready(function(){
var interval = 5000;//will move to left 450px each X seconds
var sliders = $('.slider_image');//counts number of sliders
var index = 0;
var show_index = 0;
setInterval(function() {
if(show_index == (sliders.length- 1))
{
$('.sliders_container').animate({ 'left': '0px'}, 2000);
}
else
{
$('.sliders_container').animate({ 'left': '+=450px'}, 1000);
}
}, interval);
});
/*SECTION SLIDER MARG START*/
.section_slider_marg_maincontainer{width:100%; height:275px; outline:2px solid white; position:relative; overflow:hidden;}
.section_slider_marg_items_container{width:auto; height:100%; position:absolute; top:0px; left:0px; display:flex; }
.section_slider_marg_item{height:100%; width:450px; outline:2px solid white; background-size:cover; }
/*SECTION SLIDER MARG END*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section_slider_marg_maincontainer" style="">
<div class="section_slider_marg_items_container sliders_container" style="">
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
</div>
</section>
I would recommend using the Slick JQuery library for this. You can view it here:
http://kenwheeler.github.io/slick/
I edited the index.html file that they provided and here is what I ended up with (this will only work if you have the Slick library downloaded):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Slick Playground</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./slick/slick.css">
<link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
<style type="text/css">
</style>
</head>
<body>
<section class="carousel">
<img src="http://placehold.it/350x300?text=1">
<img src="http://placehold.it/350x300?text=2">
<img src="http://placehold.it/350x300?text=3">
<img src="http://placehold.it/350x300?text=4">
<img src="http://placehold.it/350x300?text=5">
<img src="http://placehold.it/350x300?text=6">
<img src="http://placehold.it/350x300?text=7">
<img src="http://placehold.it/350x300?text=8">
<img src="http://placehold.it/350x300?text=9">
</section>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).on('ready', function() {
$(".carousel").slick({
dots: true
});
});
</script>
</body>
</html>
As Toms was saying, each time you animate, you should increment a variable to keep track.
This probably is not the most elegant solution, but it uses your same code setup.
$(document).ready(function(){
var interval = 5000;//will move to left 450px each X seconds
var sliders = $('.slider_image');//counts number of sliders
var index = 0;
var show_index = 0;
var scrolledPx = 0;
setInterval(function() {
if(scrolledPx >= 450 * sliders.length - 1) {
$('.sliders_container').animate({ 'left': '0px'}, 2000);
scrolledPx = 0;
}
else{
$('.sliders_container').animate({ 'left': '+=450px'}, 1000);
scrolledPx += 450;
}
}, interval);
});
I have a problem with creating 2 elements with different z-index.
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#1.11.3" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.capty.css">
<script src="jquery.capty.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="jquery-jesse.css">
<script type="text/javascript" src="jquery-jesse.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.fix').capty({
cWrapper: 'capty-tile',
height: 36,
opacity: .6
});
$('#list').jesse();
});
</script>
<style>
#list {
max-width: 640px;
margin: 20px auto;
}
div.capty-caption {
z-index: 999;
}
</style>
<title></title>
</head>
<body>
<ul class="jq-jesse" id="list">
<li class="jq-jesse__item">
<a href='http://www.supercoloring.com/sites/default/files/styles/coloring_medium/public/cif/2015/10/number-1-coloring-page.png' target='_blank'><img class="fix" name="#content-target-1" src='http://www.supercoloring.com/sites/default/files/styles/coloring_medium/public/cif/2015/10/number-1-coloring-page.png' width='100' height='100'></a>
<div id="content-target-1">
[x]
</div>
</li>
<li class="jq-jesse__item">
<a href='http://www.supercoloring.com/sites/default/files/styles/coloring_medium/public/cif/2015/10/number-2-coloring-page.png' target='_blank'><img class="fix" name="#content-target-2" src='http://www.supercoloring.com/sites/default/files/styles/coloring_medium/public/cif/2015/10/number-2-coloring-page.png' width='100' height='100'></a>
<div id="content-target-2">
[x]
</div>
</li>
</ul>
</body>
</html>
Example:
http://plnkr.co/edit/8HSgSbc96LlSQ66hgY79?p=info
How can I intercept a click on the caption?
I'm trying to set z-index: 999 for div capty-caption, but it's not working for me.
The event you are looking for is well described in Simple jQuery Plugin For Drag & Drop Sorting Of Lists - jesse
$('#list').jesse({
// executed when the item has dropped
onStop: function(position, prevPosition, item) {
alert('ok');
}
});
The onStop is executed at the end of mouseup event. If you do not need this but only the click event you may always use (I discourage you to follow this path):
$('#list').mouseup(function(e) {
alert('ok');
});
I got this code:
<!DOCTYPE html>
<head>
<title>bla</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-git2.js'></script>
</head>
<body>
<script language="javascript" type="text/javascript">
$("#left").children(".thumb").on({
mouseenter: function () {
$("#preview").attr("src", $(this).attr("src")).show();
},
mouseleave: function () {
$("#preview").hide();
}
});
</script>
<div id="left">
<img src="http://sereedmedia.com/srmwp/wp-content/uploads/kitten.jpg" class="thumb" />
<img src="http://www.warrenphotographic.co.uk/photography/bigs/36522-Tabby-kitten-white-background.jpg" class="thumb" />
<img src="http://www.warrenphotographic.co.uk/photography/bigs/11406-Ginger-kitten-rolling-on-its-back-white-background.jpg" class="thumb" />
<img id="preview" />
</div>
</body>
And CSS:
#preview
{
background:#333;
border: solid 1px #000;
display: none;
color: #fff;
width: 200px;
}
All that from: http://jsfiddle.net/chrissp26/sd3ouo9g/ But it's not working by me like there, what could be the issue?
try putting it inside a $(document).ready like this :
$(document).ready(function() {
$("#left").children(".thumb").on({
mouseenter: function () {
$("#preview").attr("src", $(this).attr("src")).show();
},
mouseleave: function () {
$("#preview").hide();
}
});
});
You are referencing DOM elements before the page is fully loaded. The only reason that code works in the JSFiddle you referenced is that they selected the onLoad option:
As Yourness suggests, use a DOM ready handler (which the JSFiddle onLoad does for you).
The shortcut versions of $(document).ready(function(){...}); are:
$(function(){...});
<script language="javascript" type="text/javascript">
$(function(){
$("#left").children(".thumb").on({
mouseenter: function () {
$("#preview").attr("src", $(this).attr("src")).show();
},
mouseleave: function () {
$("#preview").hide();
}
});
});
</script>
Or the more robust version (which scopes a local $ at the same time):
jQuery(function($){...});
<script language="javascript" type="text/javascript">
jQuery(function($){
$("#left").children(".thumb").on({
mouseenter: function () {
$("#preview").attr("src", $(this).attr("src")).show();
},
mouseleave: function () {
$("#preview").hide();
}
});
});
</script>
Option 3:
Or you can simply put your existing <script> block at the bottom of the body element (after the elements it references).
<body>
<div id="left">
<img src="http://sereedmedia.com/srmwp/wp-content/uploads/kitten.jpg" class="thumb" />
<img src="http://www.warrenphotographic.co.uk/photography/bigs/36522-Tabby-kitten-white-background.jpg" class="thumb" />
<img src="http://www.warrenphotographic.co.uk/photography/bigs/11406-Ginger-kitten-rolling-on-its-back-white-background.jpg" class="thumb" />
<img id="preview" />
</div>
<script language="javascript" type="text/javascript">
$("#left").children(".thumb").on({
mouseenter: function() {
$("#preview").attr("src", $(this).attr("src")).show();
},
mouseleave: function() {
$("#preview").hide();
}
});
</script>
</body>
I have simple list number slider with fade effect. I need to add bullet navigation to control the slider. Pls help me to do so.
jsFiddle Demo
Here is my code :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Slider</title>
<style id="jsbin-css">
.testimonials .quote {
display: none;
}
</style>
</head>
<body>
<div class="testimonials">
<div class="quote">1</div>
<div class="quote">2</div>
<div class="quote">3</div>
<div class="quote">4</div>
<div class="quote">5</div>
<div class="quote">6</div>
<div class="quote">7</div>
<div class="quote">8</div>
<div class="quote">9</div>
<div class="quote">10</div>
</div>
<script>
$(function () {
(function anim(num, delay) {
$('.testimonials .quote')
.slice(0,num)
.fadeIn()
.delay(delay)
.fadeOut()
.promise()
.done(function () {
$('.testimonials').append(this);
anim(num, delay);
});
}(2, 2000));
});
</script>
</body>
</html>