We Keep Coding

Why nextImg and prevImg can't set elements's src attribution?

var imgs = ["https://i.stack.imgur.com/mucrb.png",
"https://i.stack.imgur.com/0BH67.png",
"https://i.stack.imgur.com/KdNeR.png",
"https://i.stack.imgur.com/StOAl.png",
"https://i.stack.imgur.com/yhvqi.png"];
bs = document.getElementsByTagName("button");
for(var i =0;i<bs.length;i++){
bs[i].addEventListener("click",showImg);
}
pLeft =document.getElementById("left");
pLeft.addEventListener("click",prevImg);
pRight =document.getElementById("right");
pRight.addEventListener("click",nextImg);
function showImg(e){
x = e.target.getAttribute("order");
document.getElementById("loopImg").setAttribute("src",imgs[x-1]);
}
function nextImg(e){
x = e.target.getAttribute("order");
if(x == imgs.length-1){
x = 0;}
else{
x = x+1;}
document.getElementById("loopImg").setAttribute("src",imgs[x]);
}
function prevImg(e){
x = e.target.getAttribute("order");
if(x == 0){
x = imgs.length-1;}
else{
x = x-1;}
document.getElementById("loopImg").setAttribute("src",imgs[x]);
}
#main{
width:600px;
height:400px;
border:1px solid red;
display:grid;
grid-template-columns:60px auto 60px;
grid-template-rows:60px auto 60px;
grid-template-areas:"des des des"
"left loopImg right"
"buttons buttons buttons";
margin:0 auto;
}
#des{
grid-column: 1/4;
grid-row:1/2;
margin:auto;
}
#loopImg{
grid-column:2/3;
grid-row:2/3;
border:1px solid green;
margin:auto;
}
#left{
grid-column:1/2;
grid-row:2/3;
margin:auto;
}
#right{
grid-column:3/4;
grid-row:2/3;
margin:auto;
}
#buttons{
grid-column:1/4;
grid-row:3/4;
margin:auto;
}
button{
width:30px;
height:30px;
border:1px solid green;
border-radius:50%;
}
img{
width:200px;
height:200px;
}
<div id="main">
<div id="des">loop images</div>
<img id="loopImg" src="i1.png" alt="">
<p id="left"><</p>
<p id="right">></p>
<div id="buttons">
<button order="1" >1</button>
<button order="2" >2</button>
<button order="3" >3</button>
<button order="4" >4</button>
<button order="5" >5</button>
</div>
</div>
I want to write a loop images js script.
To click the button ,image can display according to the number in button.
Why nextImg and prevImg can't set elements's src attribution when to click them?
The nextImg can only work for one click, it can't run when to click for the second time.
The prevImg can't work at all.
It can get the order number when to click button key, how to get the order number when to click pLeft and pRight key?
The statement x = e.target.getAttribute("order"); in nextImg and prevImg can't get image's order number,how to fix it?

On the click of left and right, you are trying to get the arribute order of the clicked element. But actually it doesn't have any attribute like that..
What I have done is added a counter as to where is the current selected image. so whenever you click left or right, I decrement/increment the counter and set the image attribute with the waht the counter index says..
var imgs = ["https://i.stack.imgur.com/mucrb.png",
"https://i.stack.imgur.com/0BH67.png",
"https://i.stack.imgur.com/KdNeR.png",
"https://i.stack.imgur.com/StOAl.png",
"https://i.stack.imgur.com/yhvqi.png"];
bs = document.getElementsByTagName("button");
for(var i =0;i<bs.length;i++){
bs[i].addEventListener("click",showImg);
}
pLeft =document.getElementById("left");
pLeft.addEventListener("click",prevImg);
pRight =document.getElementById("right");
pRight.addEventListener("click",nextImg);
function showImg(e){
x = e.target.getAttribute("order");
document.getElementById("loopImg").setAttribute("src",imgs[x-1]);
currentImage = x-1
}
var currentImage = 0;
function nextImg(){
currentImage = (currentImage + 1) % 5
document.getElementById("loopImg").setAttribute("src",imgs[currentImage]);
}
function prevImg(){
if (currentImage === 0) {
currentImage = 4
}
else {
currentImage --;
}
document.getElementById("loopImg").setAttribute("src",imgs[currentImage]);
}
#main{
width:600px;
height:400px;
border:1px solid red;
display:grid;
grid-template-columns:60px auto 60px;
grid-template-rows:60px auto 60px;
grid-template-areas:"des des des"
"left loopImg right"
"buttons buttons buttons";
margin:0 auto;
}
#des{
grid-column: 1/4;
grid-row:1/2;
margin:auto;
}
#loopImg{
grid-column:2/3;
grid-row:2/3;
border:1px solid green;
margin:auto;
}
#left{
grid-column:1/2;
grid-row:2/3;
margin:auto;
}
#right{
grid-column:3/4;
grid-row:2/3;
margin:auto;
}
#buttons{
grid-column:1/4;
grid-row:3/4;
margin:auto;
}
button{
width:30px;
height:30px;
border:1px solid green;
border-radius:50%;
}
img{
width:200px;
height:200px;
}
<div id="main">
<div id="des">loop images</div>
<img id="loopImg" src="i1.png" alt="">
<p id="left"><</p>
<p id="right">></p>
<div id="buttons">
<button order="1" >1</button>
<button order="2" >2</button>
<button order="3" >3</button>
<button order="4" >4</button>
<button order="5" >5</button>
</div>
</div>

prevImg and nextImg don't work because:
Those elements don't have an order attribute, so you get null from e.target.getAttribute("order"), and
In the case of nextImg, if it did have the attribute, its value would be a string, so x = x + 1 would be string concatenation, not addition.
Instead, maintain the current index in a variable, see *** comments:
var imgs = ["https://i.stack.imgur.com/mucrb.png",
"https://i.stack.imgur.com/0BH67.png",
"https://i.stack.imgur.com/KdNeR.png",
"https://i.stack.imgur.com/StOAl.png",
"https://i.stack.imgur.com/yhvqi.png"];
var bs = document.getElementsByTagName("button"); // *** Added var
for(var i =0;i<bs.length;i++){
bs[i].addEventListener("click",showImg);
}
var pLeft =document.getElementById("left"); // *** Added var
pLeft.addEventListener("click",prevImg);
var pRight =document.getElementById("right"); // *** Added var
pRight.addEventListener("click",nextImg);
var currentIndex = 0; // ***
// *** Reusable function so we aren't repeating ourselves constantly below
function displayImage(src) {
// *** Notice the .src property
document.getElementById("loopImg").src = src;
}
displayImage(imgs[0]); // *** Show the first image
function showImg(e){
// *** Note the unary + to convert to number
currentIndex = +e.target.getAttribute("order") - 1;
displayImage(imgs[currentIndex]);
}
function nextImg(e){
currentIndex = (currentIndex + 1) % imgs.length; // *** Wraps around
displayImage(imgs[currentIndex]);
}
function prevImg(e){
currentIndex = (currentIndex - 1 + imgs.length) % imgs.length; // *** Wraps around
displayImage(imgs[currentIndex]);
}
#main{
width:600px;
height:400px;
border:1px solid red;
display:grid;
grid-template-columns:60px auto 60px;
grid-template-rows:60px auto 60px;
grid-template-areas:"des des des"
"left loopImg right"
"buttons buttons buttons";
margin:0 auto;
}
#des{
grid-column: 1/4;
grid-row:1/2;
margin:auto;
}
#loopImg{
grid-column:2/3;
grid-row:2/3;
border:1px solid green;
margin:auto;
}
#left{
grid-column:1/2;
grid-row:2/3;
margin:auto;
}
#right{
grid-column:3/4;
grid-row:2/3;
margin:auto;
}
#buttons{
grid-column:1/4;
grid-row:3/4;
margin:auto;
}
button{
width:30px;
height:30px;
border:1px solid green;
border-radius:50%;
}
img{
width:200px;
height:200px;
}
<div id="main">
<div id="des">loop images</div>
<img id="loopImg" src="" alt="">
<p id="left"><<!-- *** Note using entity for '<' --></p>
<p id="right">></p>
<div id="buttons">
<button order="1" >1</button>
<button order="2" >2</button>
<button order="3" >3</button>
<button order="4" >4</button>
<button order="5" >5</button>
</div>
</div>
Side note: I didn't do a full audit of the code or anything like that. I did notice that in multiple places, the original code was falling prey to what I call The Horror of Implicit Globals. Be sure to declare your variables (bs, x, pLeft, pRight), in the narrowest scope you can.

How To Change News Ticker Movement Direction To Be Left To Right

I want to change news ticker movement from right to left, to be left to right because I want to use Arabic languages so that important to change movement direction to be left to right. I tried for days but I didn't find any solution
HTML :
$('#ticker2').html($('#ticker1').html());
var temp=0,intervalId=0;
$('#ticker1 li').each(function(){
var offset=$(this).offset();
var offsetLeft=offset.left;
$(this).css({'left':offsetLeft+temp});
temp=$(this).width()+temp+10;
});
$('#ticker1').css({'width':temp+40, 'margin-left':'20px'});
temp=0;
$('#ticker2 li').each(function(){
var offset=$(this).offset();
var offsetLeft=offset.left;
$(this).css({'left':offsetLeft+temp});
temp=$(this).width()+temp+10;
});
$('#ticker2').css({'width':temp+40,'margin-left':temp+40});
function abc(a,b) {
var marginLefta=(parseInt($("#"+a).css('marginLeft')));
var marginLeftb=(parseInt($("#"+b).css('marginLeft')));
if((-marginLefta<=$("#"+a).width())&&(-marginLefta<=$("#"+a).width())){
$("#"+a).css({'margin-left':(marginLefta-1)+'px'});
} else {
$("#"+a).css({'margin-left':temp});
}
if((-marginLeftb<=$("#"+b).width())){
$("#"+b).css({'margin-left':(marginLeftb-1)+'px'});
} else {
$("#"+b).css({'margin-left':temp});
}
}
function start() { intervalId = window.setInterval(function() { abc('ticker1','ticker2'); }, 10) }
$(function(){
$('#news_ticker').mouseenter(function() { window.clearInterval(intervalId); });
$('#news_ticker').mouseleave(function() { start(); })
start();
});
.news {
color: #0065b3;
border-left: 1px solid #0065b3;
border-bottom: 1px solid #0065b3;
font-family: 'Cairo', sans-serif;
}
#ticker1 li, #ticker2 li {
list-style-type:none;
float:left;
padding-right:20px;
position:absolute;
left:0px;
}
#ticker1, #ticker2 {
position:relative;
display:block;
width:4000px;
margin:0;
content=""; display:table;
height:0px;
}
#news_ticker{
height:37px;
overflow:hidden;
color: #0065b3 !important;
border-bottom: 1px solid #0065b3;
border-left: 1px solid #0065b3;
font-family: 'Cairo', sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="news_ticker">
<div id ="ticker1" class="w3-col l9 m8 s8 w3-center w3-xlarge">
<li> العنصر الأول </li>
<li> العنصر الثاني </li>
<li> العنصر الثالث </li>
<li> العنصر الرابع </li>
<li> العنصر الخامس </li>
</div>
<div id="ticker2" class="w3-col l9 m8 s8 w3-center w3-xlarge "></div>
</div>

Changes need to be made to the function abc.
function abc(a,b) {
var marginLefta=(parseInt($("#"+a).css('marginLeft')));
var marginLeftb=(parseInt($("#"+b).css('marginLeft')));
if((marginLefta<=$("#"+a).width())){
$("#"+a).css({'margin-left':(marginLefta+1)+'px'});
} else {
$("#"+a).css({'margin-left':-temp});
}
if((marginLeftb<=$("#"+b).width())){
$("#"+b).css({'margin-left':(marginLeftb+1)+'px'});
} else {
$("#"+b).css({'margin-left':-temp});
}
}
The margin-left for the ticker items need to be incremented by +1 to move left to right. In addition, the temp variable needs to be the changed to negative as we are now working from left to right, instead right to left (The start position for text has changed to opposite axis).

How to get onmouseover and onmouseout settings to work as desired?

The Issue
I have a shopping cart for an online store and to view the contents of the shopping bag you hover over a div in the navigation menu. I made a prototype where the shoppingTab div actually touched the trolley div in the navigation bar that made it appear upon hovering. This then allowed me to move my cursor from the shoppingTab div in the navigation bar to the trolley div without the shopping cart disappearing until onmouseout which was strangely set only to the shoppingTab in the navigation bar, not the trolley div itself but I liked this odd little quirk. Therefore I would like to replicate this behaviour on to my new site.
Don't worry: I know what you've read up to this point hasn't been enough information to go off, don't worry there is more detailed stuff sitting below above my current code. You'll get what I mean when you scroll further down :).
PROTOTYPE CODE
Here is the prototype on JSFiddle (and it doesn't work onmouseover???) https://jsfiddle.net/Please_Reply/k1k566wp/1/ so just in case here is the raw code which will work if you copy and paste it into a blank HTML file etc.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.container{
width:960px;
margin:auto;
}
.header{
width:960px;
height:100px;
background-color:#06F;
float:left;
}
#trolley{
width:150px;
height:30px;
background-color:white;
float:right;
border-radius:10px;
color:black;
border:1px solid black;
line-height:30px;
font-family:"Calibri";
cursor: pointer;
}
.shop{
width:960px;
height:700px;
background-color:white;
float:left;
font-family:"Calibri Light";
padding:20px;
}
#shoppingTab{
display:none;
height:400px;
width:400px;
background-color:#CCC;
color:black;
position:relative;
margin-top:1px;
border-radius:10px;
color:black;
border:1px solid black;
padding-left:10px;
float:right;
}
html{
background-color:#00F;
}
.product{
height:200px;
width:150px;
float:left;
border: 1px solid black;
border-radius:10px;
margin-right:20px;
font-size:16px;
text-align:center;
cursor:pointer;
}
.product:hover{
border:1px solid blue;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<span id="name"></span><div id="trolley" onmouseover="tabDisplay('block')" onmouseout="tabDisplay('none')"><center>Shopping Cart <span style='font-family:webdings'>¤</span> <span id="NOI" style="background-color:red; border-radius:360px; color:white; padding-left:5px;padding-right:5px">0</span></center>
<div id="shoppingTab">You have selected <span id="NOI2">0</span> items. Your total is $<span id="totalPrice">0</span><br/><span id="itemsList"></span></div>
</div>
</div>
<div class="shop" style="font-size:28px">Welcome, <span id="name2"></span>.<hr /><br/>Products<br/><hr />
<div class="product" onclick="addToCart('sunglasses', 0, 70)">Pair of sunglasses ($70)<br /><br /><span onclick="change(1)">Click to add to cart</span></div>
<div class="product" onclick="addToCart('shoes', 1, 180)">Pair of shoes ($180)<br /><br /><span onclick="change(3)">Click to add to cart</span></div>
<div class="product" onclick="addToCart('belt', 2, 20)">A belt ($20)<br /><br /><span onclick="change(3)">Click to add to cart</span></div>
</div>
</div>
</body>
</html>
<script>
var customerName = "";
var numberOfItems = 0;
var total = 0;
var items = [];
var stat = []
for(var a = 1; a <= 3; a++){
stat[a] = false;
}
function update(){
document.getElementById("NOI").innerHTML = numberOfItems;
document.getElementById("NOI2").innerHTML = numberOfItems;
document.getElementById("totalPrice").innerHTML = total;
document.getElementById("itemsList").innerHTML = items.join("<br />");
}
function tabDisplay(displayStatus){
shoppingTab.style.display = displayStatus;
}
function addToCart(productName, productID, price){
items[productID] = productName;
total += price;
numberOfItems++;
update();
}
function removeFromCart(productName, productID, price){
items.splice(productID, 1);
total -= price;
if(stat[productID]){
numberOfItems--;
}
update();
}
function change(i){
if(stat[i] == false){
stat[i] = true;
}else{
stat[i] = false;
}
}
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user = getCookie("customer");
if (user != "") {
customerName = getCookie("customer");
document.getElementById("name").innerHTML = customerName;
alert("Welcome again, " + user + ".");
} else {
document.getElementById("name").innerHTML = "please set up an account";
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("customer", user, 30);
document.getElementById("name").innerHTML = user;
}
}
}
function changeCookie(){
var user = getCookie("customer");
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("customer", user, 30);
}
document.getElementById("name").innerHTML = user;
}
checkCookie();
</script>
MY CURRENT CODE
I have a JSFiddle of my current code (Which doesn't work so I copied the code below as well. I think it is because I have pure Javascript in there which it is trying to read as JQuery??? I don't know... anyway if you can't fix the JSFiddle just copy the code that actually works below the JSFiddle link)... https://jsfiddle.net/Please_Reply/9uwj2bed/2/
So basically, in the code below, I need the shoppingCart div to appear when you hover over the shopcartbar div (probably using onmouseover). But in terms of onmouseout, I would like to be able to hover onto the shoppingCart div without it disappearing. I would like the onmouseout to work on both the shopcartbar div and the shoppingCart div just like it somehow does in my prototype???
One other issue when I use onmouseover on the shoppingCart div is that when I hover over any of the .smallProduct divs inside of the shoppingCart div, they seem to trigger onmouseout which is not what I want either, they are part of the shoppingCart div.
<head>
<style>
body{ /* Applies to the <body> tag */
margin:0px; /* Sets the margin on all sides to 0px */
}
.container{ /* The container class */
width:100%; /* This sets the width */
height:100%; /* This sets the height */
background-color:white; /* Sets the background colour */
font-family:"Myriad Pro"; /* Sets the font family */
}
.header{ /* The header class */
width:100%;
background-color:blue;
color:white; /* The sets the colour of the font */
}
div{
display: inline-block; /* Sets the display type */
float:left; /* Sets the float position */
}
#one, #two, #three, #four{
background-color:black;
height:90px;
color:white;
text-align:center;
font-size:25px;
}
#slider{
background-color:blue;
height:10px;
width:100px;
position: absolute; /* Sets the position to a specific type */
left: 0; /* Sets the number of pixels from the left that this object is placed */
bottom:0; /* Sets the number of pixels from the bottom that this object is placed */
}
.inside{
margin-left:30px; /* Specifies the margin from the left side */
margin-right:30px; /* Specifies the margin from the right side */
padding-top:7px; /* Specifies the padding from the top side */
pointer-events:none; /* Specifies the cursor events */
margin-top:25px; /* Specifies the margin from the top side */
}
#shoppingTab{
display:none;
height:670px;
width:400px;
background-color:white;
color:black;
position:relative;
margin-top:-2px;
border-radius:10px;
color:black;
border:1px solid #323232;
padding:10px;
float:right;
z-index:50;
}
.smallProduct{
height:50px;
width:390px;
float:left;
border: 2px solid black;
border-radius:10px;
font-size:16px;
cursor:pointer;
margin-bottom:10px;
overflow:hidden;
}
.smallProduct:hover{
border:2px solid blue;
}
</style>
</head>
<body>
<div class="container"> <!-- This is the container -->
<div class="header"> <!-- This is the header -->
<div style="float:left"> <!-- This is the logo -->
<img src="logo.png" height="120px"/>
</div>
<div style="float:right; font-family:'Myriad Pro'; background-image:url(images/loginsignupbar.png); width:535.1px; height:30px">
<div onmouseover="tabDisplay('block')" id="shopcartbar" style="float:right; font-size:24px; margin-top:-7px">
<img src="images/shoppingCart.png" height="30px"/> Shopping Cart (<span id="numberOfItems">0</span>)
</div>
<div id="shoppingTab" onmouseout="tabDisplay('none')">
Shopping Cart<br />
<div class="smallProduct" style="margin-top:5px" id="thmbproduct0"></div>
<div class="smallProduct" id="thmbproduct1"></div>
<div class="smallProduct" id="thmbproduct2"></div>
<div class="smallProduct" id="thmbproduct3"></div>
<div class="smallProduct" id="thmbproduct4"></div>
<div class="smallProduct" id="thmbproduct5"></div>
<div class="smallProduct" id="thmbproduct6"></div>
<div class="smallProduct" id="thmbproduct7"></div>
<div class="smallProduct" id="thmbproduct8"></div>
Total: $<span id="totalPrice">00</span>.00
</div>
<span id="topnavbar" style="float:right; font-size:24px; margin-top:5.5px">
</span>
</div>
<div style="float:right; clear:right"> <!-- This is the navigation menu -->
<div style="position:relative"> <!-- This is the container of the navigation menu -->
<div id="slider"></div> <!-- This is the slider bar -->
<div id="one" class="item"><div class="inside">Button 1</div></div> <!-- This is just one of the buttons -->
<div id="two" class="item"><div class="inside">Button 2</div></div>
<div id="three" class="item"><div class="inside">Button 3</div></div>
<div id="four" class="item"><div class="inside">Button 4</div></div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
function tabDisplay(displayStatus){
shoppingTab.style.display = displayStatus;
}
</script>
<script type="text/javascript" src="./jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {
$("#slider").animate({
"left": $('#three').position().left + "px",
"width": $('#three').width() + "px"
}, 0);
$(".item").hover(function() {
$("#slider").stop();
$("#slider").animate({
"left": $(this).position().left + "px",
"width": $(this).width() + "px"
}, 500);
});
$(".item").on("mouseout", function() {
$("#slider").stop();
$("#slider").animate({
"left": $('#three').position().left + "px",
"width": $('#three').width() + "px"
}, 500);
});
});
</script>

Try replacing this section:
function tabDisplay(displayStatus){
shoppingTab.style.display = displayStatus;
}
With this:
$( "#shopcartbar, #shoppingTab" ).mouseenter(function() {
$("#shoppingTab").show();
})
.mouseleave(function() {
$("#shoppingTab").hide();
});

Animated show and hide randomisation

I would like to know if it is possible to take my "comment" elements and apply some sort of effect so that they randomly appear one at a time within the black container. The "comments" also appear in random locations within the container.
Is it a more glorified show/hide Jquery effect?
I have set up a JSFiddle
.review{
background-color:black;
width:100%;
height:500px;
}
#comment1{
position:relative;
top:50%;
width:20px;
height:20px;
background-color:#ffffff;
}
<div class="review">
<div id="comment1"></div>
<div id="comment2"></div>
<div id="comment3"></div>
<div id="comment4"></div>
<div id="comment5"></div>
</div>

EDIT updated my solution according to your comments
DEMO https://jsfiddle.net/mattydsw/u2kdzcja/8/
var elements = $('.review div');
var lastShown = 0;
function fadeInRandomElement() {
// choose random element index to show
var randomIndex = Math.floor(Math.random()*elements.length);
// prevent showing same element 2 times in a row
while (lastShown == randomIndex) {
randomIndex = Math.floor(Math.random()*elements.length);
}
var randomElement = elements.eq(randomIndex);
// set random position > show > wait > hide > run this function once again
randomElement
.css({
top: Math.random()*100 + "%",
left: Math.random()*100 + "%"
})
.fadeIn(2000)
.delay(8000)
.fadeOut(2000, fadeInRandomElement);
}
fadeInRandomElement();
.review{
background-color:black;
width:100%;
height:500px;
}
.review div {
position: absolute;
display: none;
width:20px;
height:20px;
background-color:#ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="review">
<div id="comment1">1</div>
<div id="comment2">2</div>
<div id="comment3">3</div>
<div id="comment4">4</div>
<div id="comment5">5</div>
</div>

Just use a class for the effect, and Math.random function for getting random comment shown..
div[id*='comment']{
background: #aaa;
position: absolute;
left: -200px;
opacity: 0;
width:200px;
line-height: 40px;
text-align: center;
color: white;
height: 40px;
-webkit-transition: 1s all ease;
transition: 1s all ease;
}
div[id*='comment'].show{
left: 0;
opacity: 1;
}
and here's the jQuery
function generate() {
$("[id*='comment']").each(function(){
$(this).removeClass("show");
})
var number= Math.floor(Math.random() * 5) + 1
$("#comment"+number).addClass("show");
}
$(function(){
setInterval(generate, 2000);
})
here's a working fiddle
Thanks :)

Please refer the following link: http://jsfiddle.net/wrb2t6z6/
HTML
<div class="review">
<div id="comment1" class="children"></div>
<div id="comment2" class="children"></div>
<div id="comment3" class="children"></div>
<div id="comment4" class="children"></div>
<div id="comment5" class="children"></div>
</div>
CSS
.review{
background-color:black;
width:100%;
height:500px;
}
.children{
position:relative;
top:50%;
width:20px;
height:20px;
margin:auto;
}
JQUERY
$(function(){
setInterval(generate, 500);
})
function generate() {
$("[id*='comment']").each(function(){
$(this).css("background-color", "black")
})
var number= Math.floor(Math.random() * 5) + 1
$("#comment"+number).css("background-color", "white")
}

Show / Hide / Toggle - Javascript / jQuery

I'm very new with Javascript.
I'm trying to do something with Show/Hide functions.
html:
<html>
<head>
<title> New Document </title>
<style>
#button01 {
width:100px;
height:50px;
margin:10px;
padding:6px 0 0 0;
background-color:#f0f0f0;
}
#button01:hover {
background-color:#ffcccc;
}
#button01 a {
display:block;
width:40px;
height:40px;
margin:auto;
background:url("button01.png")
}
#button01 a:hover {
width:40px;
height:40px;
background:url("button01-hover.png")
}
#hidden01 {
display:none;
width:300px;
height:200px;
margin:0 0 10px 0;
border:4px solid #ffcccc;
}
#button02 {
width:100px;
height:50px;
margin:10px;
padding:6px 0 0 0;
background-color:#f0f0f0;
}
#button02:hover {
background-color:#cccccc;
}
#button02 a {
display:block;
width:40px;
height:40px;
margin:auto;
background:url("button02.png")
}
#button02 a:hover {
width:40px;
height:40px;
background:url("button02-hover.png")
}
#hidden02 {
display:none;
width:300px;
height:200px;
margin:0 0 10px 0;
border:4px solid #cccccc;
}
</style>
</head>
<body>
<div style="width:300px;">
<div id="button01"></div>
<div id="button02"></div>
</div>
<div id="hidden01"> </div>
<div id="hidden02"> </div>
</body>
</html>
script:
function toggle(offset){
var i, x;
var stuff = Array('hidden01', 'hidden02'); //put all the id's of the divs here in order
for (i = 0; i < stuff.length; i++){ //hide all the divs
x = document.getElementById(stuff[i]);
x.style.display = "none";
}
// now make the target div visible
x = document.getElementById(stuff[offset]);
x.style.display = "block";
window.onload = function(){toggle(0);}
}
That's working, but I want to fix 2 things:
1- Close/Hide hidden divs if I click on it's corresponding button;
2- After clicking a button, fix hover button image. If click again unfix;
I've tried almost all the scripts posted and can not find a solution. I don't want to open the divs at same time.
If opens one, close the others.

You're using jQuery, so use jQuery.
$(function() {
function toggle(offset) {
$('div[id^=hidden]').hide().eq(offset).show();
}
toggle(0);
});
I don't know what you mean by the two things you want to fix, however. Please clarify.
Edit
Okay, I see what you're going for now. I've cleaned up your code a lot.
HTML
<div style="width:300px;">
<div id="button1"><a></a></div>
<div id="button2"><a></a></div>
</div>
<div id="hidden1"> </div>
<div id="hidden2"> </div>
CSS
#button1, #button2 {
width:100px;
height:50px;
margin:10px;
padding:6px 0 0 0;
background-color:#f0f0f0;
}
#button1:hover {
background-color:#fcc;
}
#button2:hover {
background-color:#ccc;
}
#button1 a, #button2 a {
display:block;
width:40px;
height:40px;
margin:auto;
}
#button1 a {
background:url(http://lorempixum.com/40/40?1)
}
#button2 a {
background:url(http://lorempixum.com/40/40?3)
}
#button1 a:hover, #button1.hover a {
background:url(http://lorempixum.com/40/40?2)
}
#button2 a:hover, #button2.hover a {
background:url(http://lorempixum.com/40/40?4)
}
#hidden1, #hidden2 {
display:none;
width:300px;
height:200px;
margin:0 0 10px 0;
border:4px solid #fcc;
}
JavaScript
var $buttons = $('div[id^=button]'),
$hiddenDivs = $('div[id^=hidden]'),
HOVER_CLASS = 'hover';
$buttons.live('click', function() {
var $this = $(this),
i = $this.index();
$buttons.removeClass(HOVER_CLASS);
$this.addClass(HOVER_CLASS);
$hiddenDivs.hide().eq(i).show();
}).first().click();
Demo
Last edit
Changed JavaScript and CSS. http://jsfiddle.net/mattball/bNCNQ/
CSS
#button1:hover a, #button1.hover a {
background:url(...)
}
#button2:hover a, #button2.hover a {
background:url(...)
}
JS
$buttons.live('click', function () {
var $this = $(this),
i = $this.index(),
show = !$this.hasClass(HOVER_CLASS);
$buttons.removeClass(HOVER_CLASS);
$this.toggleClass(HOVER_CLASS, show);
$hiddenDivs.hide().eq(i).toggle(show);
});

Here's a working demo: http://jsfiddle.net/R6vQ4/33/.
All of your JavaScript code can be condensed into this little block (and this isn't even as small as it can get):
$(document).ready(function()
{
$('div[id^=button]').click(function()
{
var element = $('#hidden' + $(this).attr('id').substr(6));
$('div[id^=button]').css('cssText', 'background-color: none');
if (element.is(':visible'))
{
$(this).css('cssText', 'background-color: none');
$('div[id^=hidden]').hide();
} else {
$('div[id^=hidden]').hide();
element.show();
$(this).css('cssText', 'background-color: ' + $(this).css('background-color') + ' !important');
}
});
});
The state of the button "sticks" when you press it, but my technique is a bit hacky, so feel free to change it.
When you use jQuery, you actually use it ;)