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>
Related
I have a sprite image containing 4 different pictures. They are 520px in height. I would like animate them sliding from the first picture to the last picture. I am able to get them to flip through images, however I cannot get them to slide smoothly. Also, when the last image is reached, I need to slide back to the first image. I am unsure how to do this, this is my current code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>FVRC Pics</title>
<meta charset="UTF-8">
<link type="text/css" href="styles/normalize.css" rel="stylesheet" />
<link type="text/css" href="styles/my_style.css" rel="stylesheet">
</head>
<body>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<div id="leftArrow"</div>
<div id="rightArrow"></div>
</div>
</div>
<div id="startApp">
<ul>
<li>Start here!</li>
</ul>
</div>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>-->
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("#leftArrow").click(function() {
$("#slider").css("backgroundPostionX","+=792px");
});
$("#rightArrow").click(function() {
$("#slider").css("backgroundPostionX","-=792px");
});
});
</script>
</body>
</html>
CSS:
h1 {
color: #0000ff; /*blue*/
font-size: 44px;
padding-left: 10%;
}
.container {
max-height: 520px;
background-color: #808080; /*grey*/
}
#leftArrow, #rightArrow {
display: inline-block;
width: 38px;
height: 50px;
}
#leftArrow {
position: relative;
/*top: 0;*/`enter code here`
top: 235px;
left: 2%;
width: 5%;
height: 50px;
background: url('../images/left_arrow.png') 0 0 no-repeat;
z-index: 10;
}
#rightArrow {
position: relative;
/*top: 0;*/
top: 235px;
left: 87.5%;
width: 5%;
height: 50px;
background: url('../images/right_arrow.png') bottom right no-repeat;
z-index: 10;
}
#slider {
position: relative;
height: 520px;
max-width: 792px;
margin: 0 auto;
/*background: url("../images/Animate-Sprite_520a.png") -0 0 no-repeat;*/
background-image: url('../images/Animate-Sprite_520a.png');
background-repeat: no-repeat;
}
#startApp {
width: 235px;
margin: 0 auto;
}
#startApp ul {
list-style-type: none;
}
#startApp ul li a {
display: inline-block;
text-decoration: none;
width: 150px;
text-align: center;
background-color: steelblue;
border: 2px solid #808080;
color: white;
font-size: 32px;
I have .rc divs inside a .rcs div. The .rcs divs are sortable. The .rcs divs are inside a .ra div. The .ra div are draggable.
When I move a .rc from the first .ra to the second one, during the transition, the .rc is hidden.
I don't get this behaviour when I make the .ras div sortable (.ras is the parent of .ra).
Thanks for help.
$(document).ready(function() {
$(".ra").draggable({
zIndex: 100
});
$(".rcs").sortable({
connectWith: ".rcs",
});
});
.ra {
background-color: white;
width: 28%;
height: 200px;
float: left;
border-style: solid;
margin-left: 1%;
overflow: auto;
position: relative;
}
.header {
background-color: white;
color: black;
height: 50px;
width: 26%;
position: absolute;
}
.rcs {
margin-top: 50px;
margin-bottom: : -50px;
height: 150px;
}
.box {
width: 60px;
height: 40px;
float: left;
background-color: black;
border-radius: 3px;
font-size: 80%;
color: white;
margin: 1px;
padding: 1px;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<div class="ras">
<div class="ra">
<div class="header">
<div class="ra_name">Martini, Johnny </div>
</div>
<div class="rcs" id="ra1_rcs">
<div class="box">titre</div>
<div class="box">titre</div>
<div class="box">titre</div>
</div>
</div>
<div class="ra">
<div class="header">
<div class="ra_name">Martin, John</div>
</div>
<div class="rcs">
<div class="box">titre</div>
<div class="box">titre</div>
<div class="box">titre</div>
</div>
</div>
This issue comes from CSS. If you comment overflow: auto; from your CSS like below, it works properly.
.ra {
background-color: white;
width: 28%;
height: 200px;
float: left;
border-style: solid;
margin-left: 1%;
/* overflow: auto; */
position: relative;
}
Online demo (jsFiddle)
code jsFiddle
I applied jquery's click function to 'li#info' element. But when I click, it perform jquery to element of different parent also ('#theme div#info-overlay').
I want, whenever 'li#info' is clicked on the parent element('#theme') then it perform function to its child element only(div#info-overlay).
Like in the code, by clicking on 'Fe' it open overlay on both the block. But i want it to show overlay only to the block for which 'Fe'is clicked.
sorry, I am new in jquery.
I got your point. you just need to change one line of code
because both divs have same ids thats why both are appearing on click
and it's not a good practice to use same id multiple time on a single file.
it will make issue somewhere sometime.
i have change this line
$("div#info-overlay").toggle('100');
into this
$(this).parents('#theme').find("#info-overlay").toggle('100');
check this
JS Fiddle
use this to find div $(this).parents('#theme').find("#info overlay").toggle('100');
$(document).ready(function(){
$("div#theme").hover(function(){
$(".theme .header *").show();
$(".theme .header .overlay").hide();
},function(){
$(".theme .header *").hide();
});
$("li#info").click(function(){
$(".theme .header .overlay").hide();
$(this).parents('#theme').find("#info-overlay").toggle('100');
// $("div#info-overlay").toggle('100');
});
});
/*
theme block
*/
.theme{
width: 100%;
height: 250px;
background-color: #fff;
margin: 20px auto;
}
.theme .header{
width: 100%;
height: 200px;
position: relative;
background-color: #eee;
}
.theme .header *{
display: none;
}
.theme .header .overlay{
position: absolute;
background-color: #fff;
left: 60px;
top: 10px;
width: 83%;
height: 180px;
z-index: 80;
}
.theme .header .about{
position: absolute;
left: 10px;
top: 10px;
}
.theme .header .about li{
display: block;
height: 40px;
width: 40px;
border-radius: 50%;
background-color: #FED200;
opacity: .5;
color: #fff;
padding: 5px 10px;
margin: 5px 0;
}
.theme .footer{
width: 100%;
height: 50px;
padding: 0 20px;
}
.theme .footer .left{
width: 85%;
display: inline-block;
overflow-y:hidden;
height: 50px;
float: left;
padding: 10px 0;
}
#media screen and (min-width:620px) {
.theme{
width: 70%;
}
}
#media screen and (min-width:720px) {
.theme{
width: 49%;
display: inline-block;
}
}
#media screen and (min-width:920px) {
body .container.theme-holder {
width: 70%;
}
}
#media screen and (min-width:1024px) {
body .container.theme-holder {
width: 95%;
}
.theme{
width: 32%;
}
}
#media screen and (min-width:1200px) {
body .container.theme-holder {
width: 85%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate sdfsfdsfdsfsd</p>
</div>
</div>
</div>
</div>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate dfsasdfdsafs</p>
</div>
</div>
</div>
</div>
I am currently redisigning a page - making it so JS handles the upload of the content from a txt file and CSS formats the layout of divs and HTML contains the divs. What i am trying to do is hide the DIVs that DO NOT have any content in it - currently if tehre is no content it will still display the div as a long thin line. I've tried several suggestion, however having trouble of making it work properly. Have tried 'empty cell' option in CSS, but that ruins the layout for some reason.
Here is my HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>BROADCAST</title>
<link rel="stylesheet" href="BCdata/WebStyles.css">
<script src="jquery-ui/jquery-1.9.1.min.js"></script>
<script src="BCdata/ContentHandler.js"></script>
</head>
<body class="main">
<!--------------------------------DONT CHANGE UNLESS NEEDED-------------------------------------------------------------->
<div id="buttons_div">
<!------------------Banner---------------------------------------------------------------------------------------->
<img src="images/broadcastbanner.gif" id="Image35">
<span id="CurrentDate"></span>
</div>
<div id="buttons_div" style="top:10px;">
<!------------Archive Calendars----------------------------------------------------------------------------------->
<img src="images/broadcast2013archive.gif" id="Image4">
<img src="images/broadcast2014archive.gif" id="Image5">
<!--------------Signoff Sheet------------------------------------------------------------------------------------->
<img src="images/broadcastsignoff.gif" id="Image6">
<!----------------------Up and Home------------------------------------------------------------------------------->
<img src="images/Up.GIF" id="Image2">
<img src="images/Home.GIF" id="Image3">
</div>
<!-------------------------------------------CONTENT DIVS------------------------------------------------------------------>
<div id="content_divs" style="top:20px; background-image: url(images/bluebox.png);">
<p id="div1" style="color:white;"></p>
</div>
<div id="content_divs" style="top: 30px; background-image: url(images/whitebox.png);">
<p id="div2"></p>
<p id="div2"></p>
</div>
<div id="content_divs" style="top: 40px; background-image: url(images/redbox2.png);">
<p id="div3" style="color:white;"></p>
</body>
</html>
Here is my CSS
#CurrentDate
{
position: absolute;
top:15px;
left: 210px;
width:700px;
text-align: center;
z-index: 8;
color:white;
font-family:Arial;
font-size:35px;
text-transform: capitalize;
}
.main
{
background-color: #FFFFFF;
background-image: url(backbox.gif);
color: #000000;
text-align: center;
position: relative;
overflow: auto;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
top: 10px;
}
.main #content_divs
{
position: relative;
text-align: left;
z-index: 1;
width: 960px;
margin: 0 auto;
border-style : solid;
border-width: 3px;
border-color: white;
overflow: hidden;
}
h1
{
font-family: Arial;
font-size: 20px;
font-weight: bold;
position: relative;
text-transform: capitalize;
font-weight: bold;
z-index: 5;
}
h2
{
font-family: Arial;
font-size: 13px;
font-weight: bold;
position: relative;
z-index: 5;
}
p
{
font-family: Arial;
font-size: 13px;
position: relative;
z-index: 5;
margin-left: 20px;
margin-right: 20px;
}
#buttons_div
{
position: relative;
}
#Image35
{
position:relative;
border: 0px #000000 solid;
width: 960px;
height: 96px;
z-index: 2;
}
#Image2
{
border: 0px #000000 solid;
position: relative;
left:30px;
width: 90px;
height: 34px;
z-index: 3;
}
#Image3
{
border: 0px #000000 solid;
position: relative;
left:30px;
width: 86px;
height: 34px;
z-index: 4;
}
#Image4
{
border: 0px #000000 solid;
position: relative;
left:-30px;
width: 236px;
height: 34px; z-index: 5;
}
#Image5
{
border: 0px #000000 solid;
position: relative;
left:-30px;
width: 236px;
height: 34px;
z-index: 6;
}
#Image6
{
border: 0px #000000 solid;
position: relative;
left:-30px;
width: 236px;
height: 34px;
z-index: 7;
}
This is JS (content handler)
$(function()
{
$("#div1").load("BCdata/Content061114.txt .Div1 #p1");
});
$(function()
{
$("#div2").load("BCdata/Content061114.txt .Div2 #p1");
});
$(function()
{
$("#div3").load("BCdata/Content061114.txt .Div3 #p1");
});
$(function()
{
$("#CurrentDate").load("BCdata/Content061114.txt #CurrentDate");
});
onload=function()
{
var content_divs=document.getElementById('Div2');
if(!div2.hasChildNodes()){content_divs.style.display='none'}
}
And this is a TEXT file where content is located
<span id="CurrentDate">thursday 6th november 2014, wk 40</span>
<!----Use <p> tag for indentation of a text, otherwise use <div> tag------>
<div class="Div1">
<div id="p1">
<h1 style="color:white;">Congratulations to 66!</h1>
<div>PDFs of 'Record Weeks' are now available on the Intranet.</div>
<h2>Heading 1</h2>
<p>Content is here</p>
<h2>Heading 2</h2>
<p>Content is here</p>
<div><b><i>Click the link on the right to view PDFs</i></b></div>
</div>
</div>
<div class="Div2">
<div id="p1">
<h1 style="color:black;">Poster</h1>
<div>Poster Content</div>
</div>
</div>
<div class="Div3">
<div id="p1">
<h1 style="color:white;">heading Content is here</h1>
<div>Content is ehre blabla</div>
</div>
</div>
Any help is much apreciated - sorry if it seems that i am asking to fix the problem for me, but i am new to this and very keen to learn. Been stuck on this for a while now
You could try :empty pseudo-class.
div:empty {
display: none;
}
<div></div>
<div>div with content</div>
Reference: MDN
Something like this would work.
elementList = document.querySelectorAll('div');
for(var i = 0; i < elementList.length; i++)
{
var element = elementList[i];
(element.children === 0) ? element.style.display = "none": element.style.display = "block";
}
What this does it get all Div elements, puts them in an array, then checks each one, if it does not have a child it sets display to none, if it does it sets display to block.
EDIT
If you don't want it to mess with divs with children atall, just change if statement to:
(element.children === 0) ? element.style.display = "none": "";
We use .children because this only returns Element objects (aka HTML tagged stuff) and not 'absolutely' every child.
demo - http://jsfiddle.net/y7mgmm2u/
thanks to #emmanuel
*:empty {
display:none;
}
<div>
<p><span></span>
</p>
</div>
<div>test</div>
<p></p>
<p>test</p>
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/