Jquery slider not working properly? - javascript

I have a jquery slider , when i load the page all div coming together and after sometime it working perfectly .pls try my code....please
This is the html code i have
is there any way to make this slider as a slide in left type slider instead of fadeout?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
</script>
</head>
<body>
<style>
#slider_one_img{
float: left;
background-image: url('one.jpg');
width: 84px;
height: 86px;
}
#slider_two_img{
float: left;
background-image: url('two.png');
width: 84px;
height: 86px;
}
#slider_three_img{
float: left;
background-image: url('three.jpg');
width: 84px;
height: 86px;
}
#slider_one_text{
width:70%;
text-align: left;
margin-top: 3%;
float: left;
}
#slideshow {
margin: 68px auto;
position: relative;
width: 68%;
height: 120px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
margin-left: 2%;
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
</style>
<div id="slideshow">
<div>
<div id="slider_one_text">My first text</div>
<div id="slider_one_img"></div>
</div>
<div>
<div id="slider_one_text">My second text...erewrew.r.ewr.eqwr.ewrweqrqewrqwerwerwer
</div>
<div id="slider_two_img"></div>
</div>
<div>
<div id="slider_one_text">My third text skjsndgnsdkjgndnskgnksngk</div>
<div id="slider_three_img"></div>
</div>
</div>
</body>
</html>
please help

Wrap your code inside $(document).ready(function(){}). Your code works fine.
Refer jQuery Slide Effect for sliding left or right.
Example:
$(document).ready(function () {
$("#slideshow > div:gt(0)").hide();
setInterval(function () {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
Demo: http://jsfiddle.net/lotusgodkk/y5C4G/7/

Related

Is there a way to keep the 3rd div fixed

Is there any way to make the 3rd div positioned to fixed, because when I clicked the slideUp button, the divs are collapsing. I want all of them to slide up and down in their current position. I think its due to flexbox as it is centering the whole thing. I tried removing that but still it doesn't work.
$(document).ready(function () {
$("#btn2").click(function () {
$("#div1").slideUp();
$("#div2").slideUp("slow");
$("#div3").slideUp(3000);
});
$("#btn1").click(function () {
$("#div1").slideDown();
$("#div2").slideDown("slow");
$("#div3").slideDown(3000);
});
});
h1 {
text-align: center;
}
#btn1 {
position: absolute;
left: 60vw;
}
#btn2 {
position: absolute;
left: 20vw;
}
button {
padding: 15px 60px;
}
#flex {
display: flex;
position: absolute;
top: 30vh;
justify-content: space-around;
width: 99vw;
}
#flex > div {
width: 30vw;
border: 1px solid black;
height: 30vh;
}
#div1 {
background-color: blueviolet;
}
#div2 {
background-color: salmon;
}
#div3 {
background-color: greenyellow;
}
button:active,
button:visited {
background-color: yellow;
}
.white {
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<script src="jquery.min.js"></script>
<title>Assignment</title>
</head>
<body>
<h1>Demonstrate slideUP() and slideDown() with different parameters.</h1>
<button id="btn1">CLick to slideDown boxes</button>
<button id="btn2">CLick to slideUp boxes</button>
<div id="flex">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Please try this once
You just need to add wrapper div and set it's width
.wrapper{
width:33.33%;
}
$(document).ready(function () {
$("#btn2").click(function () {
$("#div1").slideUp();
$("#div2").slideUp("slow");
$("#div3").slideUp(3000);
});
$("#btn1").click(function () {
$("#div1").slideDown();
$("#div2").slideDown("slow");
$("#div3").slideDown(3000);
});
});
h1 {
text-align: center;
}
#btn1 {
position: absolute;
left: 60vw;
}
#btn2 {
position: absolute;
left: 20vw;
}
button {
padding: 15px 60px;
}
#flex {
display: flex;
position: absolute;
top:200px;
justify-content: space-around;
width: 99vw;
}
#flex > div > div {
width: 30vw;
border: 1px solid black;
height: 30vh;
}
#div1 {
background-color: blueviolet;
}
#div2 {
background-color: salmon;
}
#div3 {
background-color: greenyellow;
}
button:active,
button:visited {
background-color: yellow;
}
.white {
background-color: white;
}
.wrapper{
width:33.33%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<script src="jquery.min.js"></script>
<title>Assignment</title>
</head>
<body>
<h1>Demonstrate slideUP() and slideDown() with different parameters.</h1>
<button id="btn1">CLick to slideDown boxes</button>
<button id="btn2">CLick to slideUp boxes</button>
<div id="flex">
<div class="wrapper">
<div id="div1"></div>
</div>
<div class="wrapper">
<div id="div2"></div>
</div>
<div class="wrapper">
<div id="div3"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Don't need to wrap div with extra div so You can achieve with existing div structure with help of justify-content: flex-end; property on #flex div.
And add css on child like: #flex > div { flex: 1 0 calc(100% / 3); max-width: calc(100% / 3);}.
Flexbox Source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You can try below snippet.
$(document).ready(function () {
$("#btn2").click(function () {
$("#div1").slideUp();
$("#div2").slideUp("slow");
$("#div3").slideUp(3000);
});
$("#btn1").click(function () {
$("#div1").slideDown();
$("#div2").slideDown("slow");
$("#div3").slideDown(3000);
});
});
h1 {
text-align: center;
font-size: 20px;
}
button {
padding: 15px 20px;
margin-bottom: 5px;
}
#flex {
display: flex;
position: relative;
justify-content: flex-end;
width: 100%;
}
#flex > div {
flex: 1 0 calc(100% / 3);
max-width: calc(100% / 3);
border: 1px solid black;
height: 30vh;
}
#div1 {
background-color: blueviolet;
}
#div2 {
background-color: salmon;
}
#div3 {
background-color: greenyellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Demonstrate slideUP() and slideDown() with different parameters.</h1>
<button id="btn1">CLick to slideDown boxes</button>
<button id="btn2">CLick to slideUp boxes</button>
<div id="flex">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
You could try this, this will automatically adjust based on how many divs you are putting inside your #flex. You are correct about the problem in your divs are, once they got 0 height, they will tend to disappear, and since they are centered by flex, divs are tend to center itself. Now enclosing it in divs will prevent it from disappearing.
$(document).ready(function () {
$("#btn2").click(function () {
$("#div1").slideUp();
$("#div2").slideUp("slow");
$("#div3").slideUp(3000);
});
$("#btn1").click(function () {
$("#div1").slideDown();
$("#div2").slideDown("slow");
$("#div3").slideDown(3000);
});
$("#flex div div").parent().css({
"width":((100 / ($("#flex div div").parent().length)).toFixed(0)-1)+ "%",
"display":"inline-block",
"vertical-align":"top"
});
});
h1 {
text-align: center;
}
#btn1 {
position: absolute;
left: 60vw;
}
#btn2 {
position: absolute;
left: 20vw;
}
button {
padding: 15px 60px;
}
#flex {
display: table;
position: absolute;
top: 30vh;
justify-content: space-around;
width: 99vw;
}
#flex > div > div{
width: 30vw;
border: 1px solid black;
height: 30vh;
}
#div1 {
background-color: blueviolet;
}
#div2 {
background-color: salmon;
}
#div3 {
background-color: greenyellow;
}
button:active,
button:visited {
background-color: yellow;
}
.white {
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="style.css"/>
<script src="jquery.min.js"></script>
<title>Assignment</title>
</head>
<body>
<h1>Demonstrate slideUP() and slideDown() with different parameters.</h1>
<button id="btn1">CLick to slideDown boxes</button>
<button id="btn2">CLick to slideUp boxes</button>
<div id="flex">
<div>
<div id="div1"></div>
</div>
<div>
<div id="div2"></div>
</div>
<div>
<div id="div3"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
This is another approach. This doesn't rely on display:flex at all. Here we make the flex div have a position:relative and it's child i.e. flex>div or box have a position:absolute.
Now on starting of the JS code, I have added a bit to dynamically take care of the left position of these absolutely positioned child elements. In our case , div1 will end up with left = 0%, div2 with left = 33% and div3 with left = 66% . I have added a smooth transition as well to make up for the delay in positioning the elements.
Now your slideUp and slideDown is working on absolutely positioned elements which actually don't occupy any space like normal position:static (yes this is by default) elements. So you don't need to wrap them in additional individual divs now.
Also this is just one of the many approaches. Felt fancy so sharing it.
$(document).ready(function () {
let leftPos = 0;
let boxes = [...document.querySelectorAll('.box')];
for(let index = 1;index<boxes.length;index++)
{
boxes[index].style.left = `${(100/boxes.length)*index}%`;
}
$("#btn2").click(function () {
$("#div1").slideUp();
$("#div2").slideUp("slow");
$("#div3").slideUp(3000);
});
$("#btn1").click(function () {
$("#div1").slideDown();
$("#div2").slideDown("slow");
$("#div3").slideDown(3000);
});
});
h1 {
text-align: center;
}
#btn1 {
position: absolute;
left: 60vw;
}
#btn2 {
position: absolute;
left: 20vw;
}
button {
padding: 15px 60px;
}
#flex {
position: relative;
top: 30vh;
width: 99vw;
}
#flex > div {
width: 30vw;
position:absolute;
border: 1px solid black;
transition: left 0.5s;
height: 30vh;
}
#div1 {
background-color: blueviolet;
}
#div2 {
background-color: salmon;
left:0
}
#div3 {
background-color: greenyellow;
left:0
}
button:active,
button:visited {
background-color: yellow;
}
.white {
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<script src="jquery.min.js"></script>
<title>Assignment</title>
</head>
<body>
<h1>Demonstrate slideUP() and slideDown() with different parameters.</h1>
<button id="btn1">CLick to slideDown boxes</button>
<button id="btn2">CLick to slideUp boxes</button>
<div id="flex">
<div class='box' id="div1"></div>
<div class='box' id="div2"></div>
<div class='box' id="div3"></div>
</div>
<script src="script.js"></script>
</body>
</html>

Javascript slideshow with delay between images

I have the following code to display a slideshow. It works fine, but what I would like to have happen is have the 1st image fade out, there be a delay of a second or 2, and then have the next image fade in. I have this with 2 images right now, but will have multiple images when I finish. Just did 2 for testing right now.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(5000)
.next()
.fadeIn(5000)
.end()
.appendTo('#slideshow');
}, 8000);
</script>
<style>
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
.myslides{
display: none
}
</style>
<div id="slideshow">
<div>
<img src="images/IMG_5434.JPG" width="240" height="240">
</div>
<div class="myslides">
<img src="images/IMG_5435.JPG" width="240" height="240">
</div>
</div>
Any thoughts or ideas are appreciated.
Thanks
Use .delay(7000) in the chain. It sets a timer to delay execution of subsequent items in the queue.
Here 7000ms will give you a delay of 2 seconds as your image is fading out in 5000ms.
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(5000)
.next()
.delay(10000)
.fadeIn(5000)
.end()
.appendTo('#slideshow');
}, 8000);
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#slideshow>div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
.myslides {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideshow">
<div>
<img src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg" width="240" height="240">
</div>
<div class="myslides">
<img src="https://www.w3schools.com/howto/img_fjords.jpg" width="240" height="240">
</div>
</div>

Flicker on scroll

I have a problem regarding a flicker when changing from absolute to fixed with Javascript. I can't reproduce the problem in Mozilla Firefox, however, both Internet Explorer and Google Chrome have the problem. I can't seem to fix it.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css">
<script src="plugins/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/color/jquery.color.plus-names-2.1.2.min.js"></script>
<script src="plugins/jqueryUI.js"></script>
<script src="plugins/transit.js"></script>
<script src="scripts/centering.js"></script>
<script src="scripts/script.js"></script>
<title>Interdomein</title>
</head>
<div id="mainMenu">
<div class="button" style="margin-left: 88px;"> Home </div>
<div class="button"> Webhosting </div>
<div class="button"> Domeinen </div>
<div class="button"> Support </div>
<div class="button"> Contact </div>
<div class="button"> Inloggen </div>
</div>
<body>
<div id="header">
</div>
</body>
</html>
CSS:
html {
width: 100%;
height: 2000px;
background-color: white;
margin: 0;
}
body {
background-color: black;
width: 960px;
height: 100%;
margin: 0;
padding-top: 30px;
}
#header {
width: 900px;
height: 300px;
}
#mainMenu {
width: 900px;
height: 50px;
border-radius: 10px;
background-color: red;
position: absolute;
top: 30px;
-webkit-backface-visibility: hidden;
-webkit-transform: scale(1);
}
.button {
width: 100px;
height: 50px;
float: left;
line-height: 50px;
text-align: center;
margin-left: 20px;
border-left: black 1px solid;
border-right: black 1px solid;
background-color: rgba(255,255,255,0.3);
}
Javascript/jQuery:
$( document ).ready(function() {
$(window).scroll(fixMenu);
fixMenu();
});
function fixMenu() {
if ($(window).scrollTop() > 0) {
$( "#mainMenu" ) .css( "position", "fixed" );
$( "#mainMenu" ) .stop(1,0).transition({ width: 50 },1000);
$( ".button" ) .hide();
}
else {
$( "#mainMenu" ) .stop(1,0).transition({ width: 900 },250);
setTimeout(function(){ $( ".button" ).show() },250);
$( "#mainMenu" ) .css( "position", "absolute" );
}
}
For a working example, see "interdomein.site11.com". This adress will change over time, but for the next 24 hours it will probably be like this.

Jquery slider modification?

HI i have a sample code for jquery slider and it contains 3 div slides..
It working perfectly ,but i need 3 donts(small circles) also in same slider.
Can any one help me ,how to add those.
What i have now is
what i want is same slider but i also want 3 dots representing each slider and it should open corresponding slider when we click on dots.
my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
</script>
</head>
<body>
<style>
#slider_one_img{
float: left;
background-image: url('one.jpg');
width: 84px;
height: 86px;
}
#slider_two_img{
float: left;
background-image: url('two.png');
width: 84px;
height: 86px;
}
#slider_three_img{
float: left;
background-image: url('three.jpg');
width: 84px;
height: 86px;
}
#slider_one_text{
width:70%;
text-align: left;
margin-top: 3%;
float: left;
}
#slideshow {
margin: 68px auto;
position: relative;
width: 68%;
height: 120px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
margin-left: 2%;
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
</style>
<div id="slideshow">
<div>
<div id="slider_one_text">My first text</div>
<div id="slider_one_img"></div>
</div>
<div>
<div id="slider_one_text">My second text...erewrew.r.ewr.eqwr.ewrweqrqewrqwerwerwer
</div>
<div id="slider_two_img"></div>
</div>
<div>
<div id="slider_one_text">My third text skjsndgnsdkjgndnskgnksngk</div>
<div id="slider_three_img"></div>
</div>
</div>
</body>
</html>
You could do something like this as an example
http://jsfiddle.net/danhayman/yxnet/
jQuery:
$("#dot-wrapper div").click(function(){
var index = $(this).index();
$("#dot-wrapper div").removeClass("current").eq(index).addClass("current");
$("#image-wrapper div").removeClass("current").eq(index).addClass("current");
})
CSS:
#image-wrapper div{
width: 10em;
height: 10em;
display: none;
}
#image-wrapper .current{
display: block;
}
#image-wrapper div:nth-child(1){
background-color:red;
}
#image-wrapper div:nth-child(2){
background-color:green;
}
#image-wrapper div:nth-child(3){
background-color:blue;
}
#dot-wrapper div{
width: 1em;
height: 1em;
border-radius: .5em;
background-color: gray;
display: inline-block;
cursor: pointer;
margin: .5em;
}
#dot-wrapper .current{
background-color: black;
}
HTML:
<div id="image-wrapper">
<div class="current"></div>
<div></div>
<div></div>
</div>
<div id="dot-wrapper">
<div class="current"></div>
<div></div>
<div></div>
</div>

Html Slider Is not Working

My Html Code for slider
<div id="slideshow">
<div>
<img src="5658667829_2bb7d42a9c_m.jpg">
</div>
<div>
<img src="5638093881_a791e4f819_m.jpg">
</div>
My Css Code for slider
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
My Jquery Code for slider
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
This is my code for slider which is not working please help for this.
its working for me.
You miss the closing tag of slideshow div.
Whatever it is my code is belove
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>slider</title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
<style>
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div id="slideshow">
<div>
<img src="123.jpg">
</div>
<div>
<img src="321.jpg">
</div>
</div>
</body>
</html>
Try use document ready for your jquery code

Categories