Is there a way to keep the 3rd div fixed - javascript

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>

Related

How can I correct this JavaScript

I'm practising with JavaScript and hiding the image and the button. The footer keeps coming to the top of the page every time I execute the command. How can I correct this? I've tried many different options and I can't seem to get it to work right like position: sticky, bottom:0; for example.
I'm extremely new to this coding thing so I'm pretty sure I have no idea what I'm doing.
jQuery(document).ready(function() {
$(".myButton").click(function(){
$(".poem").show();
$(".resize").show();
$(".main-image").hide();
});
$(".resize").click(function(){
$(".poem").hide();
$(".resize").hide();
})
})
#charset "utf-8";
/* CSS Document */
.main-image {
display: block;
width: 25%;
margin-bottom: 30px;
}
.container {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100%;
}
.overlay-content {
position: absolute;
bottom: 15%;
text-align: center;
width: 25%;
}
.resize {
position: absolute;
z-index: 1;
top: 0;
right: 0;
}
footer {
background-color: brown;
border: solid;
position: sticky;
bottom: 0;
}
.myButton {
margin-left: 50%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>practice_overlay</title>
<link href="Overlay.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script_storage.js"></script>
</head>
<body>
<div class="container">
<p class="introduction">Lorem Ispum</p>
<img class="main-image" src="Devry Web Design Intro Course/Pictures/crystal-tear-3.jpg">
<div class="overlay-content">
<button class="resize">X</button>
<h1>Hello World</h1>
</div>
<p class="poem">Lorem Ispum</p>
</div>
<button class="myButton">X</button>
<footer>Lorem Ispum</footer>
</body>
</html>
You could use CSS grid - with the setup in the snippet below, you can "safely" work inside the div.outer part of the layout, without making the other parts of your page "jumping around" :)
jQuery(document).ready(function() {
$(".myButton").click(function() {
$(".poem").show();
$(".resize").show();
$(".main-image").hide();
});
$(".resize").click(function() {
$(".poem").hide();
$(".resize").hide();
})
})
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
display: grid;
grid-template-rows: calc(100vh - 30px) 30px;
grid-template-columns: 100%;
}
.outer {
background: gray;
padding: 8px 16px;
overflow-y: scroll;
display: flex;
flex-direction: column;
}
.container {}
#image {
height: 30px;
width: 30px;
}
.myButton {
margin: 0 auto;
}
footer {
background-color: brown;
padding: 8px 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<div class="outer">
<div class="container">
<p class="introduction">Introduction</p>
<img id="image" src="https://picsum.photos/30" alt="small image" />
<div class="overlay-content">
<button class="resize">X</button>
<h1>Hello World</h1>
</div>
<p class="poem">Lorem Ispum</p>
</div>
<button class="myButton">X</button>
</div>
<footer>
footer
</footer>
</div>

How do i make an unordered list show and hide when a different div (menu i created) is clicked?

$(".menu").click(function () {
if ('.pagelinks').style.display = 'none';
{
$('.pagelinks').style.display = 'block';
}
else
{
$('.pagelinks').style.display = 'none';
}
})
html,body
{
margin:0;
width: 100%;
overflow:hidden;
box-sizing: border-box;
height: 100%;
}
body
{
background: url(best8.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position: center;
}
header
{
width: 100%;
background-color: black;
height: 85px;
position: fixed;
}
.heading1
{
color:white;
position: relative;
align-content: center;
margin: 3em ;
top: 100px;
left: 675px;
}
.logo img
{
left: 0;
filter: brightness 100%;
position: fixed;
}
.menu
{
margin: auto;
margin-left: 75%;
display: block;
position: fixed;
top: 11px;
}
.nav div
{
height: 5px;
background-color: white;
margin: 4px 0;
border-radius: 25px;
transition: 0.3s;
}
.nav
{
width: 30px;
display: block;
margin: 1em 0 0
}
.one
{
width: 30px;
}
.two
{
width: 20px;
}
.three
{
width: 25px;
}
.nav:hover div
{
width: 30px;
}
.pagelinks
{
margin: auto;
margin-left: 49%;
position: fixed;
top: -10px;
display: none;
}
.pagelinks ul
{
list-style-type: none;
}
.pagelinks ul li
{
float: left;
padding:30px;
margin: auto;
transition: 0.3;
color: white;
font-size: 20px;
font-weight: bold;
padding-top: 40px;
opacity: 0.6;
}
.pagelinks ul li:hover
{
color: green;
transition: 0.6s;
}
.logo img:hover
{
opacity: 0.6;
}
<!DOCTYPE html>
<html>
<head>
<title>Goesta Calculators</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://use.typekit.net/axs3axn.js"></script>
<script>try{Typekit.load({ async: true});}catch(e){}</script>
<link href="style.css" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="main.js" type="text/javascript"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<img src="NewLogo.PNG" >
<div class="menu">
<a href="" class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</a>
</div>
<nav class="pagelinks">
<ul>
<li>About</li>
<li>Contact</li>
<li>Calculators</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="heading1">
<h1>Estimate. Plan your future.</h1>
</div>
</body>
</html>
I'm trying to make an unordered list show/hide when another div with .menu class, is clicked. I've tried several different ways in javascript from research online but nothing is working. I also want it to transition slowly and smoothly. When I click the menu (I'm assuming because its a link) the page seems to refresh.
First, your condition syntax is very wrong.
if ('.pagelinks').style.display = 'none';
Don't put semicolon in there. And wrap your condition with open and close parenthesis.
Second, use .css() if you want to modify your css.
Here's the working version of your jQuery
$(".menu").click(function () {
if ($('.pagelinks').css("display") == 'none')
{
$('.pagelinks').css("display", "block");
}
else
{
$('.pagelinks').css("display", "none");
}
})
Also, don't use anchor tag on your nav if it is only a trigger. Use <div> instead.
Like this
<div class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
And if you have problem with the cursor not transforming into a hand, just have this in your css
.nav:hover
{
cursor: pointer;
}
Working Sandbox of your code HERE

How to expand the search bar from center to both sides with transition

I am trying to expand hidden search bar from center of div to both sides of div by clicking on search icon, using css. But it always expand to one side either left or right. I need transition to both sides simultaneously.
I need solution with purely css without javascript or jquery. I tried animations, transitions, positions everything but didn't find any solution. How I can solve this.
$(document).ready(function(){
$('.search-label').on("click",function(e){
$(".form-groups").addClass("move");
$("#for-grp").addClass("search-open");
$("#for-grp").removeClass("box-visible");
$(".close-label").removeClass("d-block");
});
});
.main
{
position:relative;
width: 50%;
background-color: aliceblue;
}
.form-groups{
width: 0%;
transition: width 1s;
}
.pull-right
{
float: right;
}
.search-label
{
position: absolute;
top: 0;
}
.sibling
{
clear: right;
}
#for-grp
{
width: 90%;
display: block;
margin-left:25px;
height: 20px;
}
.box-visible
{
visibility:hidden;
}
.move
{
width:100%;
}
.search-open
{
border: none !important;
border-bottom: 1px solid grey !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.close-label
{
position:absolute;
right:0px;
}
.d-block
{
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="main">
<div class="form-groups pull-right" style="display:inline" id="search">
<span class="search-label bg-white">
<i class="fa fa-search icon_search"></i>
</span>
<input type="text" placeholder="Search" id="for-grp" class="box-visible">
</div>
<span class="close-label d-block"><i class="fa fa-close"></i></span>
</div>
</body>
</html>
There is no style to it but maybe this is what your looking for
$(document).ready(function(){
$('i.fa-search').on("click",function(e){
$('.holder').addClass('open');
});
});
.main
{
position:relative;
width: 100%;
margin: auto;
background-color: aliceblue;
}
input {
width: 0%;
display: none;
}
i.fa {
position: absolute;
top: 0;
}
i.fa-search {
left: 0;
}
i.fa-close {
right: 0;
display: none;
}
.holder {
position: relative;
margin: auto;
width: 0%;
transition: width 1s;
}
.holder.open {
width: 50%;
}
.holder.open input {
width: 100%;
display: block;
}
.holder.open i.fa-close {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="main">
<div class="holder">
<input placeholder="Search" type="text">
<i class="fa fa-search"></i>
<i class="fa fa-close"></i>
</div>
</div>
</body>
</html>

jQuery animate working in fiddle but not smooth online

I've made a sort of accordion with three expanding divs (#a, #b, #c) in fiddle, but when I save it locally and open it in a browser the transitions are no longer smooth. I noticed specifically after clicking #b with #a expanded. I've included the HTML that references the CSS and JavaScript code. What's the cause and what is the best way to solve it?
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="outer">
<div class="middle">
<div class="inner" id="a">1</div>
<div class="inner" id="b">2</div>
<div class="inner" id="c">3</div>
</div>
</div>
</div>
<script src="accordion.js"></script>
</body>
Here is a link to the fiddle: http://jsfiddle.net/tJugd/3794/
It seems like it only happens when either #a is expanded and #b or #c are clicked or #b is expanded and #c is clicked.
Try using single click event handler for animations with .animate() easings property set to "linear", css transition for effects, set width of .middle div elements to 33%
$(".middle div").click(function() {
$(this).siblings().animate({
width: "10%",
opacity: 0.6
}, 0, "linear");
$(this).animate({
width: "80%",
opacity: 1
}, 0, "linear");
});
div.inner {
max-width: 0;
display: table-cell;
overflow: hidden;
}
div.outer {
display: table;
overflow: hidden;
width: 100%;
height: 100%;
}
div.middle {
display: table-row;
overflow: hidden;
}
#holder {
width: 100%;
height: 100%;
margin: 0px auto;
overflow: hidden;
position: fixed;
}
#a {
width: 33%;
height: 100%;
background-color: red;
}
#b {
width: 33%;
height: 100%;
background-color: blue;
}
#c {
width: 33%;
height: 100%;
background-color: green;
}
.wrapper {
height: 90vh;
overflow: hidden;
}
#a,
#b,
#c {
transition: width 500ms, opacity 500ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="wrapper">
<div class="outer">
<div class="middle">
<div class="inner" id="a">1</div>
<div class="inner" id="b">2</div>
<div class="inner" id="c">3</div>
</div>
</div>
</div>
jsfiddle http://jsfiddle.net/tJugd/3798/
Try this
window.onload = function() {
[].forEach.call(document.querySelectorAll('.inner'), function(el) {
el.addEventListener('click', function(e) {
this.parentElement.className = 'middle ' + this.id;
});
});
} //]]>
div.inner {
max-width: 0;
display: table-cell;
overflow: hidden;
}
div.outer {
display: table;
overflow: hidden;
width: 100%;
height: 100%;
}
div.middle {
display: table-row;
overflow: hidden;
}
#holder {
width: 100%;
height: 100%;
margin: 0px auto;
overflow: hidden;
position: fixed;
}
#a {
height: 100%;
background-color: red;
}
#b {
height: 100%;
background-color: blue;
}
#c {
height: 100%;
background-color: green;
}
#a,
#b,
#c {
width: 10%;
opacity: 0.6;
transition: all 3000ms;
}
.middle.a #a,
.middle.b #b,
.middle.c #c {
width: 80%;
opacity: 1;
}
.wrapper {
height: 90vh;
overflow: hidden;
}
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>- jsFiddle demo</title>
</head>
<body>
<div class="wrapper">
<div class="outer">
<div class="middle c">
<div class="inner" id="a">1</div>
<div class="inner" id="b">2</div>
<div class="inner" id="c">3</div>
</div>
</div>
<div class="wrapper">
</div>
</div>
</body>
</html>

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>

Categories