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>
Related
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>
I am a newbie to Javascript, I wanted to implement a for loop that would go through each div as selected by its class.
The simple idea is to reveal DIVs when I click on a button. But it has to be sequential: I click DIV1 appears, when I click again DIV2 appears and so on. Currently my code only changes the class of one DIV and not the rest. Here are my code samples:
$(document).ready(function(){
// jQuery methods go here...
var count = document.getElementById("page1").childElementCount;
for(var i = 0; i < count; i++){
var myClass = ".panel" + i;
$("button").click(function(){
$(myClass).addClass("showing animated fadeIn")
});
}
});/**document ready **/
.showing{
background-color: red;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body>
<button class="one">Click Me!</button>
<div id="page1">
<div class="panel1">
</div>
<div class="panel2">
</div>
<div class="panel3">
</div>
<div class="panel4">
</div>
</div><!-- page one -->
<div id="trial">
</div>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="trial.js"></script>
</body>
</html>
Please let me know what I am missing especially in the for loop or if I can do something else to be able to grab a DIV and add a class every time I click on the button.
Firstly, the HTML attribute class is made for multiple elements with the same style/behaviour. You should use id if it is to dissociate one panel for another.
You have to store a count variable to know which panel has to appear next.
And always try to do what you want in Javascript without jQuery if it is possible !
var i = 1;
function clickBtn() {
if (!document.getElementById("panel-" + i))
return;
document.getElementById("panel-" + i).classList.add("visible");
i++;
}
.panel {
width: 50px;
height: 50px;
display: none;
margin: 5px;
background-color: #bbb;
}
.panel.visible {
display: block;
}
<button onclick="clickBtn()">click me</button>
<div>
<div id="panel-1" class="panel"></div>
<div id="panel-2" class="panel"></div>
<div id="panel-3" class="panel"></div>
<div id="panel-4" class="panel"></div>
</div>
You could use counter like clickCount instead of for loop
$(document).ready(function(){
// jQuery methods go here...
var clickCount = 1;
$("button").click(function(){
var myClass = ".panel" + clickCount;
$(myClass).addClass("showing animated fadeIn")
clickCount++;
});
});/**document ready **/
.showing{
background-color: red;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body>
<button class="one">Click Me!</button>
<div id="page1">
<div class="panel1">
</div>
<div class="panel2">
</div>
<div class="panel3">
</div>
<div class="panel4">
</div>
</div><!-- page one -->
<div id="trial">
</div>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="trial.js"></script>
</body>
</html>
You've got this a little bit backwards; you're trying to attach an event handler to the button for each element. Instead, you should have one event handler for the button, which cycles through the elements.
You could set a variable to keep track of which element is currently highlit, but it's easier to just determine that based on the current state of the DOM:
$(document).ready(function() {
$('button.one').click(function() {
$('.showing') // find the current element
.removeClass('showing') // clear it
.next() // find its next sibling
.addClass('showing'); // show that
if ($('.showing').length === 0) {
// nothing is showing, so show the first one
$('#page1 div:eq(0)').addClass('showing')
}
})
})
#page1 div {height: 10px}
#page1 div.showing {background-color: red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="one">Click Me!</button>
<div id="page1">
<div class="panel1"></div>
<div class="panel2"></div>
<div class="panel3"></div>
<div class="panel4"> </div>
</div>
There's a small cheat in the above -- if the current element is the last one, then it won't have a next() to highlight. That's why I waited to check for the case where there's nothing visible until after moving the highlight; that way it will work for both the first click, and for when you need the highlight to loop back around to the first element.
If you intended to have the elements reveal themselves in sequence and not hide earlier ones, just get rid of the .removeClass('showing') line:
$(document).ready(function() {
$('button.one').click(function() {
$('.showing') // find the current element
.next() // find its next sibling
.addClass('showing'); // show that
if ($('.showing').length === 0) {
// nothing is showing, so show the first one
$('#page1 div:eq(0)').addClass('showing')
}
})
})
#page1 div {height: 10px}
#page1 div.showing {background-color: red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="one">Click Me!</button>
<div id="page1">
<div class="panel1"></div>
<div class="panel2"></div>
<div class="panel3"></div>
<div class="panel4"> </div>
</div>
What you can do is count the amount of children that you have, and compare the amount of clicks through a given iterator you have to see what should be shown.
I added an extra functionality that hides the elements again once the max amount of divs has been shown.
Hope this helps.
$(document).ready(function() {
$('#page1').children().each(function () {
$(this).hide();
});
});
var panel="panel";
var pannelNum=0;
var count = $("#page1").children().length;
$(".one").on( "click", function() {
pannelNum=pannelNum+1;
if(pannelNum > count) {
$('#page1').children().each(function () {
$(this).hide();
});
pannelNum=0;
}
else {
clicked=panel+""+pannelNum;
$('.'+clicked).show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="one">Click Me!</button>
<div id="page1">
<div class="panel1">
this is panel 1!
</div>
<div class="panel2">
this is panel 2!
</div>
<div class="panel3">
this is panel 3!
</div>
<div class="panel4">
this is panel 4!
</div>
</div><!-- page one -->
<div id="trial">
</div>
I am making a div which would show on button click and hide on clicking again.I am using toggleClass function of jquery. The problem is I need animation while the div opens and closes. I have tried transition:1s, in all relevant classes and even on body, but in vain.
This is the fiddle: http://jsfiddle.net/9dq2p7dw/105/
Here is the code for my jquery:
$(document).ready(function(){
$(".view").click(function(){
$(".view-more").toggleClass("hide show", 500);
});
});
You can use .fadeToggle
$(document).ready(function(){
$(".view").click(function(){
$(".view-more").fadeToggle( "hide show", "linear" );
});
});
.hide{
display:none;
}
.show{
display:block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="view">View All</a>
<div class="view-more hide" >
<div class="col-md-6">
<h1>
asasasas
</h1>
</div>
<div class="col-md-6">
<h1>
sasasas
</h1>
</div>
</div>
Use transition: all 0.3s ease;
Refer CSS transitions
$(document).ready(function() {
$(".view").click(function() {
$(".view-more").toggleClass("hide show", 500);
});
});
.hide {
opacity: 0;
transition: all 1s ease;
}
.show {
opacity: 1;
transition: all 1s ease;
}
.view-more{
background-color:#F0C798;
padding:10px;
box-sizing:border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="view">View All</a>
<div class="view-more hide">
<div class="col-md-6">
<h1>
asasasas
</h1>
</div>
<div class="col-md-6">
<h1>
sasasas
</h1>
</div>
</div>
JS Fiddle Link
If all you wish to do is hide and show a div upon clicking a button, you can do so in simpler way.
$(".view").click(function(){
$(".view-more").toggle(function() {
$(this).animate({height: '200'});
}, function() {
$(this).animate({height: '100'});
});
});
When given a list of functions as arguments, the .toggle(fn1, fn2) method will alternate between the functions given starting with the first one. This automatically keeps track of the toggle state for you - you don't have to do that.
jQuery doc is here. There are multiple forms of .toggle() depending upon the arguments used so you don't always find the right one when searching the jQuery doc.
try this, You can't animate display, rather try this, may be this will help you
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggleClass demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
.col-md-6{
background:red;
}
</style>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<a class="view">View All</a>
<div class="view-more hide" >
<div class="col-md-6">
<h1>
asasasas
</h1>
</div>
<div class="col-md-6">
<h1>
sasasas
</h1>
</div>
</div>
<script>
$(document).ready(function(){
$(".view").click(function(){
$(".view-more").toggle(500);
});
});
</script>
</body>
</html>
I need to rotate and move an image at the same time, actually works just one time, but then just move and not rotating.
This is what i have:
<!Doctype html>
<html>
<head>
<meta charset ="utf-8">
<title>JQuery Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(MyMain);
function MyMain(){
$(".cartman").hover(MoveCartman,Normal); //on hover Eric Cartman
var v1=100; //variable to move Cartman
function MoveCartman(){
$(this).attr("src","CartmanNude.png");
$(this).css({
"margin-top":v1+"px",
"transform":"rotateZ(-360deg)",
"transition":"1s"
});
if (v1<200){v1+=100;}
else {v1=0;}
}
function Normal(){
$(this).attr("src","CartmanNormal.png");
}
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div style="padding:0px">
<img class="img-responsive cartman" src="CartmanNormal.png">
</div>
</div>
</div>
</body>
</html>
I think this should work fine but I dont know why the function on hover is not working more than just 1 time.
Sorry for my bad english and thanks.
Try substituting lowercase d for D at doctype declaration , adding all to transition value before duration ; css "margin-top": "0px" , "transform": "rotateZ(0deg)" to Normal function
.cartman {
transition: all 1s;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(MyMain);
function MyMain() {
$(".cartman").hover(MoveCartman, Normal); //on hover Eric Cartman
var v1 = 100; //variable to move Cartman
function MoveCartman() {
$(this).attr("src", "http://lorempixel.com/100/100/cats");
$(this).css({
"margin-top": v1 + "px",
"transform": "rotateZ(-360deg)"
});
if (v1 < 200) {
v1 += 100;
} else {
v1 = 0;
}
}
function Normal() {
$(this).attr("src", "http://lorempixel.com/100/100/technics")
.css({
"margin-top": "0px",
"transform": "rotateZ(0deg)"
});
}
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div style="padding:0px">
<img class="img-responsive cartman" src="http://lorempixel.com/100/100/technics">
</div>
</div>
</div>
</body>
</html>
I've a problem with my code. I suppose that the draggable items disable the links inside my page.
I've try and I want use this code inside an IOS phonegap app.
The two links inside the "navigation" div appear disabled in IOS.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-touch-fullscreen" content="yes" />
<script type="text/javascript" src="game1js/head.min.js"></script>
<script type="text/javascript" src="../jquery.min.js"></script>
<script>
$(document).ready(function() { $("#win").delay(13000).fadeOut(3000); });
</script>
<link rel="stylesheet" type="text/css" href="game1css/style.css" />
<style>body {
background-image: url("img/game1_bkg.jpg"); background-repeat:no-repeat; overflow: hidden;
} </style>
</head>
<body>
<div id="touchme1" class="touchBox"><img src="img/game1_1.png"/></div>
<div id="touchme2" class="touchBox"><img src="img/game1_2.png"/></div>
<div id="touchme3" class="touchBox"><img src="img/game1_0.png"/></div>
<div id="touchme4" class="touchBox"><img src="img/game1_3.png"/></div>
<div id="touchme5" class="touchBox"><img src="img/game1_4.png"/></div>
<div id="touchme6" class="touchBox"><img src="img/game1_5.png"/></div>
<div id="touchme7" class="touchBox"><img src="img/game1_6.png"/></div>
<div id="touchme8" class="touchBox"><img src="img/game1_7.png"/></div>
<div id="touchme9" class="touchBox"><img src="img/game1_8.png"/></div>
<div id="touchme10" class="touchBox"><img src="img/game1_9.png"/></div>
<div id="win" style="margin: auto; position: absolute;bottom: 0;left: 0;top: 0;right: 0; z-index:100;"><img src="img/start.png" id="messageWin"></div>
<div id="drop" class="dropArea"><b>Trascina qui i numeri</b><br><div id="n1" style="float:left;"></div><div id="n2" style="float:left;"></div></div>
<script>
head.js("game1js/jquery.min.js","game1js/ui.js","game1js/touch.js", function (){
$("#touchme1, #touchme2, #touchme3, #touchme4, #touchme5, #touchme6, #touchme7, #touchme8, #touchme9, #touchme10").draggable({revert:true});
var sum=0;
$("#drop").droppable({
drop: function( event, ui ) {
console.log($(ui.draggable).attr("id"));
if($(ui.draggable).attr("id")=="touchme1"){
document.getElementById("n1").innerHTML = "<img src='img/game1_1.png'/>";
sum++;
$(ui.draggable).remove();
}
if($(ui.draggable).attr("id")=="touchme9"){
document.getElementById("n2").innerHTML = "<img src='img/game1_8.png'/>";
sum++;
$(ui.draggable).remove();
}
if($(ui.draggable).attr("id")!="touchme1" && $(ui.draggable).attr("id")!="touchme9"){
//$(ui.draggable).remove();
}
if (sum==2){
document.getElementById('messageWin').src="img/end.png";
$("#win").delay(100).fadeIn(3000);
document.getElementById('myAudio').src="../audio/01_end.mp3";
document.getElementById('myAudio').play();
localStorage.setItem('level1', 1);
setTimeout(function() {window.location.href='../index.html';},10000);
}
$(this).css({'border':'#777 dashed 3px', 'background':'transparent'});
},
over: function(event, ui) {
$(this).css({'border':'#a33 dashed 3px','background':'#eee'});
},
out: function (event, ui){
$(this).css({'border':'#777 dashed 3px', 'background':'transparent'});
}
});
});
</script>
<div style="visibility: hidden;"><audio src="../audio/01_instructions.mp3" autoplay controls="false" id="myAudio"></div>
<div id="navigation" style="z-index:100; position: absolute; top: 650px; left: 455px;">
<img src="../img/left.png" width="64px">
<img src="../img/reload2.png" width="64px">
</div>
</body>
</html>
Do you have an idea to fix the code ?
Thanks.