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.
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>
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>
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>
I am trying to use the jquery jscrollpane plugin http://jscrollpane.kelvinluck.com/ in my website. I followed the instructions, but the scroll bar does nothing. I am probably overlooking something simple, but I have been trying for hours and cant figure out what I am doing wrong. I included the following in the header:
<link type="text/css" rel="stylesheet" href="CSS/style.css">
<link type="text/css" rel="stylesheet" href="CSS/jscrollpane.css">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Amaranth">
<script src="script/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="script/jquery.jscrollpane.js" type="text/javascript"></script>
<script src="script/jquery.mousewheel.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(document).ready(function() {
var element = $('.scroll-pane').jScrollPane({
showArrows: true,
verticalDragMaxHeight: 16,
horizontalDragMaxWidth: 0,
contentWidth: '0px'
});
var api = element.data('jsp');
api.reinitialise();
});
});
</script>
The following CSS:
.scroll-pane {
width: 100%;
height: 100%;
overflow: auto;
margin-bottom: 8px;
}
.jspContainer {
overflow: hidden;
position: relative;
}
.jspPane {
position: absolute;
}
.jspVerticalBar {
position: absolute;
top: 0;
right: 0;
width: 12px;
height: 100%;
}
.jspCap {
display: none;
}
.jspHorizontalBar .jspCap {
float: left;
}
.jspTrack {
background: url(../images/scroll_bar.png);
position: relative;
}
.jspDrag {
background: url(../images/scroll_drag.png) no-repeat;
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspArrow {
text-indent: -20000px;
display: block;
cursor: pointer;
padding: 0;
margin: 0;
}
.jspArrowUp {
width: 12px;
height: 14px;
background-image: url(../images/scroll_up.png);
}
.jspArrowDown {
background-image: url(../images/scroll_down.png);
}
.jspArrow.jspDisabled {
cursor: default;
}
.jspVerticalBar .jspArrow {
height: 14px;
}
.jspVerticalBar .jspArrow:focus {
outline: none;
}
.jspCorner {
background: #eeeef4;
float: left;
height: 100%;
}
And this is my HTML:
<div class="daily_special">
<div class="pane">
<div class="scroll-pane jspScrollable" style="overflow: hidden; padding: 0px; width: 240px;" tabindex="0">
<div class="jspContainer" style="width: 240px; height: 220px;">
<div class="jspPane" style="padding: 0px; top: 0px; width: 224px;">
<div style=" width: 210px;">
<h3>Weekly Specials</h3>
<a><img src="images/weekly_special_home.jpg"></a>
Today is the day we release our Spring/Summer menu!! Come down to FSB and try some of our delicious new additions! Cheers!
<span> </span>
</div>
</div>
<div class="jspVerticalBar">
<div class="jspCap jspCapTop"></div>
<a class="jspArrow jspArrowUp jspDisabled"></a>
<div class="jspTrack" style="height: 192px;">
<div class="jspDrag" style="height: 16px; top: 0px;">
<div class="jspDragTop"></div>
<div class="jspDragBottom"></div>
</div>
</div>
<a class="jspArrow jspArrowDown"></a>
<div class="jspCap jspCapBottom"></div>
</div>
</div>
</div>
> view our full MENU </div>
</div>
I would greatly appreciate any suggestions.
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>