in the following example there are several DIVs that use transition effect, how can you scroll the viewport up and down smoothly with the expansion so that the user can always see the full square?
<!DOCTYPE html>
<html>
<head>
<style>
div {
border-style: solid;
border-width: 1px;
width: 100px;
height: 100px;
background-color: #0000ff;
transition: 0.5s;
}
div:hover {
background-color: #ffcccc;
width: 100px;
height: 200px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
the best solution, of course, in my opinion , is using new ResizeObserver()
const divs = document.querySelectorAll("div");
const resizeObserve = new ResizeObserver((entries) => {
entries.forEach(({ target }) =>
target.scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "nearest"
})
);
});
divs.forEach((item) => {
resizeObserve.observe(item);
});
<!DOCTYPE html>
<html>
<head>
<style>
div {
border-style: solid;
border-width: 1px;
width: 100px;
height: 100px;
background-color: #0000ff;
transition: 0.5s;
}
div:hover {
background-color: #ffcccc;
width: 100px;
height: 200px;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</body>
</html>
you can do that only with scrollIntoView too.
const divs = document.querySelectorAll('div')
divs.forEach(item=>{
item.addEventListener('mouseenter',(e)=>{
e.currentTarget.addEventListener('transitionend',(e)=>{
e.currentTarget.scrollIntoView({behavior: "smooth", block: "nearest", inline: "nearest"});
})
})
})
<!DOCTYPE html>
<html>
<head>
<style>
div {
border-style: solid;
border-width: 1px;
width: 100px;
height: 100px;
background-color: #0000ff;
transition: 0.5s;
}
div:hover {
background-color: #ffcccc;
width: 100px;
height: 200px;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</body>
</html>
Related
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>
There is a button and a drop-down menu, tell me please What should I do so after the click on a menu area it wont hide, and after the click out of the menu area it will hide? Now it opens by clicking, and closes by clicking on the button and on the menu area.
$(function(){
$('.click').click(function() {
$('.click-menu').slideToggle(200);
});
});
.click {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
border-radius: 50%;
position: relative;
cursor: pointer;
}
.click span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.click-menu {
display: none;
position: absolute;
top: 110px;
left: 50px;
}
.click-menu div {
width:300px;
text-align: center;
background-color: green;
margin-top: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="click">
<span>CLICK</span>
<div class="click-menu">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
It's probably not the best way to do it but it works :
$(function(){
$('.click').click(function() {
$('.click-menu').slideToggle(200);
});
$('html').click( function(e) {
if( $(e.target).closest('.click').length===0 && $(e.target).closest(".click-menu").length===0) {
$('.click-menu').slideUp(200);
}
});
});
.click {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
border-radius: 50%;
position: relative;
cursor: pointer;
}
.click span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.click-menu {
display: none;
position: absolute;
top: 110px;
left: 50px;
}
.click-menu div {
width:300px;
text-align: center;
background-color: green;
margin-top: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="click">
<span>CLICK</span>
</div>
<div class="click-menu">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
You need to call the event on the span, not the parent. Style the span accordingly. Then detect on a click on the html whether there is a parent named "click". If not, close the menu.
$(function(){
$('.click span').click(function() {
$('.click-menu').slideToggle(200);
});
$("html").click(function(e){
if ( $(e.target).parents(".click").length ) {
e.stopPropagation();
} else {
$('.click-menu').slideToggle(200);
}
});
});
.click {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
border-radius: 50%;
position: relative;
cursor: pointer;
}
.click span {
position: absolute;
height: 100%;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.click-menu {
display: none;
position: absolute;
top: 110px;
left: 50px;
}
.click-menu div {
width:300px;
text-align: center;
background-color: green;
margin-top: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="click">
<span>CLICK</span>
<div class="click-menu">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
I would really aprreciate help on my code logic.
I have a loop of 100 divs and i want that when i a mouse overs on any one of the div it should display a popup(i have gotten just little adjustments left to make).
the problem is i can't seem to make the popup work on all divs when hovered on...only the first one works..
Please help show me what i am doing wrong. thank you
below is my code
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<link href="/css/index.css" rel="Stylesheet"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#popDiv').hover(
function() { $('#divTable').show(); },
function() { $('#divTable').hide(); }
);
});
</script>
</head>
<body >
<div id="wrapper">
<div id="container">
<form action="/models/top100.js">
<div id="divTable" class="tooltip" href="#">
<table id= "tbDetails" class="popup" >
<tbody><tr>
<td class="col1"></td>
<td class="col2"></td>
<td class="col3"></td>
<td class="col4"></td>
</tr> </tbody>
</table>
</div>
<div id="bodydiv"> <div id="leftdiv" >
<% for (var i = 0; i < 100; i++) { %>
<div id="popDiv">
</div>
<div id="tabDiv"></div>
<% } %>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
and the css
a.tooltip {outline:none; }
a.tooltip strong {line-height:20px;}
a.tooltip:hover {text-decoration:none;}
.tooltip {
z-index:10;display:none; margin-right:50px;
width:135px; line-height:16px;
position:absolute; color:#111;
border:1px solid #D2D2D2; background:#ffffff;
}
.tooltip.show { display: inline-block; }
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
.popup
{
width:135px;
height:50px;
text-align: center;
background-color: yellow;
display: inline-block;
vertical-align: middle;
margin-right: 50px;
line-height: 50%;
}
#wrapper
{
margin: auto;
}
#container
{
position:absolute;
margin:0px auto;
}
#bodydiv
{
margin:0 auto;
padding:0px;
}
#leftdiv
{
margin-top:30vh;
margin-left:15vh;
width:90vh;
height:75vh;
float:left;
}
#popDiv
{
display:inline-block;
border-width: 2px;
border-style: solid;
border-color: rgb(236, 80, 184);
background-color: rgb(236, 80, 184);
margin-left:10vh;
width:5vh;
height:20vh;
}
#tabDiv
{
width:70vh;
height:20vh;
display:inline-block;
border-width: 2px;
border-style: solid;
background-color: rgb(179, 80, 236);
border-color: rgb(122, 204, 241);
}
thanks in advance
You are using ID selector when writing hover function so that'll work only for the first element in the DOM. Instead you need to use class selector and give class name to divs like this.
$(document).ready(function() {
$(".test").hover(function() {
$(this).css("background-color", "yellow");
}, function() {
$(this).css("background-color", "white");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Hover the mouse pointer over this</div>
<div class="test">Hover the mouse pointer over this</div>
<div class="test">Hover the mouse pointer over this</div>
P.S Your id should be unique within the page.
Give your divs the same class, and us it in your hover.
$(document).ready(function () {
$('.popDiv').hover(
function () {
$('#divTable').show();
},
function () {
$('#divTable').hide();
}
);
});
.popup {
width: 135px;
height: 50px;
text-align: center;
background-color: yellow;
display: inline-block;
vertical-align: middle;
margin-right: 50px;
line-height: 50%;
}
#wrapper {
margin: auto;
}
#container {
position: absolute;
margin: 0px auto;
}
#bodydiv {
margin: 0 auto;
padding: 0px;
}
#leftdiv {
margin-top: 30vh;
margin-left: 15vh;
width: 90vh;
height: 75vh;
float: left;
}
#popDiv {
display: inline-block;
border-width: 2px;
border-style: solid;
border-color: rgb(236, 80, 184);
background-color: rgb(236, 80, 184);
margin-left: 10vh;
width: 5vh;
height: 20vh;
}
#tabDiv {
width: 70vh;
height: 20vh;
display: inline-block;
border-width: 2px;
border-style: solid;
background-color: rgb(179, 80, 236);
border-color: rgb(122, 204, 241);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="container">
<form action="/models/top100.js">
<div id="divTable" style="display: none" class="tooltip" href="#">
<table id="tbDetails" class="popup">
<tbody>
<tr>
<td class="col1"></td>
<td class="col2"></td>
<td class="col3"></td>
<td class="col4"></td>
</tr>
</tbody>
</table>
</div>
<div id="bodydiv">
<div id="leftdiv">
<!--<% for (var i = 0; i < 100; i++) { %>-->
<div class="popDiv" style="width: 200px; height: 50px; background-color: green">
1
</div>
<div class="popDiv" id="tabDiv" style="width: 200px; height: 50px; background-color: red">2</div>
<!--<% } %>-->
</div>
</div>
</form>
</div>
</div>
Hello I have the following code and need to be able to position both elements within the box (#third) that is contained within a container. Please provide code for the positioning of both elements. I need to position the following elements (see the following lines)
append('$${t}^x\sqrt{t}^x$$'); and
append('<label>Filename:</label> <input type="text" name="file" id="file" />');
<!-- saved from url=(0022) -->
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest /MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
//ev.target.id this gives us the id of the symbol being dragged
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
//ev.target.appendChild(document.getElementById(data));
switch(data)
{
case("drag8"):
$('#second').append('$${t}^x\sqrt{t}^x$$');
$('#container').append('<div id="third" ondrop="drop(event)" ondragover="allowDrop(event)"></div>');
$('#third').append('$${t}^x\sqrt{t}^x$$');
$('#third').append('<label>Filename:</label> <input type="text" name="file" id="file" />');
break;
default:
}
MathJax.Hub.Queue(["Typeset",MathJax.Hub,"second"]);
MathJax.Hub.Queue(["Typeset",MathJax.Hub,"third"]);
}
</script>
<style>
#header {
width: 100%;
background-color: white;
height: 30px;
}
#container {
width: 600px;
height:1500px
background-color: #ffffff;
margin: auto;
}
#first {
width: 100px;
border: 2px solid black;
float: left;
height: 400px;
}
#second {
width: 300px;
border: 2px solid black;
top:0;
float: right;
height: 100px;
}
#third {
position: absolute;
top: 180px;
border: 2px solid black;
right:430px;
width: 200px;
height: 100px;
}
#third .power1{
width: 20px;
height: 10px;
float: left;
border: 2px solid black;
}
#clear {
clear: both;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="container">
<div id="first">
<span id="drag8" style="text-decoration:overline;" draggable="true" ondragstart="drag(event)" >$${t}^x\sqrt{t}^x$$</span>
</div>
<div id="second" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<div id="clear"></div>
</div>
</body>
Merge the 3 appends
$('#container').append('<div id="third" ondrop="drop(event)" ondragover="allowDrop(event)">$${t}^x\sqrt{t}^x$$<label>Filename:</label> <input type="text" name="file" id="file" /></div>');
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>