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 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();
});

Remove height of Div with Height: Auto? JS/CSS

So I have finished building the .JS for my video player and somehow my positioning is making my div stretch (See here: http://prntscr.com/8tsl4m)
I want to remove that part but I am using six-columns class width from skeleton framework, so the div width dynamically changes. Therefore I cannot just define a height because it has to be auto.
Can I remove this with a line of JS or some CSS attribute that I am missing?
Keep in mind that I am just starting to figure out what JS is even used for, and and intermediate in CSS and HTML.
If you need my code then here it is:
$(document).ready(function(){
//INITIALIZE
var video = $('#myVideo');
//remove default control when JS loaded
video[0].removeAttribute("controls");
$('.control').show().css({'bottom':45});
$('.loading').fadeIn(500);
$('.caption').fadeIn(500);
//before everything get started
video.on('loadedmetadata', function() {
$('.caption').animate({'top':-380},300);
//set video properties
$('.current').text(timeFormat(0));
$('.duration').text(timeFormat(video[0].duration));
updateVolume(0, 0.7);
//start to get video buffering data
setTimeout(startBuffer, 150);
//bind video events
$('.videoContainer')
.append('<div id="init"></div>')
.hover(function() {
$('.control').stop().animate({'bottom':45}, 500);
$('.caption').stop().animate({'top':-360}, 500);
}, function() {
if(!volumeDrag && !timeDrag){
$('.control').stop().animate({'bottom':45}, 500);
$('.caption').stop().animate({'top':-380}, 500);
}
})
.on('click', function() {
$('#init').remove();
$('.btnPlay').addClass('paused');
$(this).unbind('click');
video[0].play();
});
$('#init').fadeIn(200);
});
//display video buffering bar
var startBuffer = function() {
var currentBuffer = video[0].buffered.end(0);
var maxduration = video[0].duration;
var perc = 100 * currentBuffer / maxduration;
$('.bufferBar').css('width',perc+'%');
if(currentBuffer < maxduration) {
setTimeout(startBuffer, 500);
}
};
//display current video play time
video.on('timeupdate', function() {
var currentPos = video[0].currentTime;
var maxduration = video[0].duration;
var perc = 100 * currentPos / maxduration;
$('.timeBar').css('width',perc+'%');
$('.current').text(timeFormat(currentPos));
});
//CONTROLS EVENTS
//video screen and play button clicked
video.on('click', function() { playpause(); } );
$('.btnPlay').on('click', function() { playpause(); } );
var playpause = function() {
if(video[0].paused || video[0].ended) {
$('.btnPlay').addClass('paused');
video[0].play();
}
else {
$('.btnPlay').removeClass('paused');
video[0].pause();
}
};
//speed text clicked
$('.btnx1').on('click', function() { fastfowrd(this, 1); });
$('.btnx3').on('click', function() { fastfowrd(this, 3); });
var fastfowrd = function(obj, spd) {
$('.text').removeClass('selected');
$(obj).addClass('selected');
video[0].playbackRate = spd;
video[0].play();
};
//stop button clicked
$('.btnStop').on('click', function() {
$('.btnPlay').removeClass('paused');
updatebar($('.progress').offset().left);
video[0].pause();
});
//fullscreen button clicked
$('.btnFS').on('click', function() {
if($.isFunction(video[0].webkitEnterFullscreen)) {
video[0].webkitEnterFullscreen();
}
else if ($.isFunction(video[0].mozRequestFullScreen)) {
video[0].mozRequestFullScreen();
}
else {
alert('Your browsers doesn\'t support fullscreen');
}
});
//light bulb button clicked
$('.btnLight').click(function() {
$(this).toggleClass('lighton');
//if lightoff, create an overlay
if(!$(this).hasClass('lighton')) {
$('body').append('<div class="overlay"></div>');
$('.overlay').css({
'position':'absolute',
'width':100+'%',
'height':$(document).height(),
'background':'#000',
'opacity':0.9,
'top':0,
'left':0,
'z-index':999
});
$('.videoContainer').css({
'z-index':1000
});
}
//if lighton, remove overlay
else {
$('.overlay').remove();
}
});
//sound button clicked
$('.sound').click(function() {
video[0].muted = !video[0].muted;
$(this).toggleClass('muted');
if(video[0].muted) {
$('.volumeBar').css('width',0);
}
else{
$('.volumeBar').css('width', video[0].volume*100+'%');
}
});
//VIDEO EVENTS
//video canplay event
video.on('canplay', function() {
$('.loading').fadeOut(100);
});
//video canplaythrough event
//solve Chrome cache issue
var completeloaded = false;
video.on('canplaythrough', function() {
completeloaded = true;
});
//video ended event
video.on('ended', function() {
$('.btnPlay').removeClass('paused');
video[0].pause();
});
//video seeking event
video.on('seeking', function() {
//if video fully loaded, ignore loading screen
if(!completeloaded) {
$('.loading').fadeIn(200);
}
});
//video seeked event
video.on('seeked', function() { });
//video waiting for more data event
video.on('waiting', function() {
$('.loading').fadeIn(200);
});
//VIDEO PROGRESS BAR
//when video timebar clicked
var timeDrag = false; /* check for drag event */
$('.progress').on('mousedown', function(e) {
timeDrag = true;
updatebar(e.pageX);
});
$(document).on('mouseup', function(e) {
if(timeDrag) {
timeDrag = false;
updatebar(e.pageX);
}
});
$(document).on('mousemove', function(e) {
if(timeDrag) {
updatebar(e.pageX);
}
});
var updatebar = function(x) {
var progress = $('.progress');
//calculate drag position
//and update video currenttime
//as well as progress bar
var maxduration = video[0].duration;
var position = x - progress.offset().left;
var percentage = 100 * position / progress.width();
if(percentage > 100) {
percentage = 100;
}
if(percentage < 0) {
percentage = 0;
}
$('.timeBar').css('width',percentage+'%');
video[0].currentTime = maxduration * percentage / 100;
};
//VOLUME BAR
//volume bar event
var volumeDrag = false;
$('.volume').on('mousedown', function(e) {
volumeDrag = true;
video[0].muted = false;
$('.sound').removeClass('muted');
updateVolume(e.pageX);
});
$(document).on('mouseup', function(e) {
if(volumeDrag) {
volumeDrag = false;
updateVolume(e.pageX);
}
});
$(document).on('mousemove', function(e) {
if(volumeDrag) {
updateVolume(e.pageX);
}
});
var updateVolume = function(x, vol) {
var volume = $('.volume');
var percentage;
//if only volume have specificed
//then direct update volume
if(vol) {
percentage = vol * 100;
}
else {
var position = x - volume.offset().left;
percentage = 100 * position / volume.width();
}
if(percentage > 100) {
percentage = 100;
}
if(percentage < 0) {
percentage = 0;
}
//update volume bar and video volume
$('.volumeBar').css('width',percentage+'%');
video[0].volume = percentage / 100;
//change sound icon based on volume
if(video[0].volume == 0){
$('.sound').removeClass('sound2').addClass('muted');
}
else if(video[0].volume > 0.5){
$('.sound').removeClass('muted').addClass('sound2');
}
else{
$('.sound').removeClass('muted').removeClass('sound2');
}
};
//Time format converter - 00:00
var timeFormat = function(seconds){
var m = Math.floor(seconds/60)<10 ? "0"+Math.floor(seconds/60) : Math.floor(seconds/60);
var s = Math.floor(seconds-(m*60))<10 ? "0"+Math.floor(seconds-(m*60)) : Math.floor(seconds-(m*60));
return m+":"+s;
};
});
/* video container */
.videoContainer{
width: 100%;
height:auto;
position:relative;
overflow:hidden;
background-color: #f2f5f8;
color: #383737;
border: 0px solid #f2f5f8;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;}
/* video caption css */
.caption{
display:none;
position: relative;
top: -100%;
background-color: #f2f5f8;
font-size:20px;
font-weight:bold;
background-color: #f2f5f8;
}
/*** VIDEO CONTROLS CSS ***/
/* control holder */
.control{
background-color: #f2f5f8;
font-family: Cabin;
color: #383737;
position:relative;
bottom: 75px;
left:0;
width:100%;
z-index:5;
display:none;
height: 40px;
}
/* control top part */
.topControl{
height:11px;
border-bottom:1px solid #404040;
padding:1px 5px;
}
/* control bottom part */
.btmControl{
clear:both;
height: 6px;
opacity: 0.5;
background-color: #eef2f6;
}
.control div.btn {
float:left;
width:34px;
height:30px;
padding:0 5px;
border-right:1px solid #404040;
cursor:pointer;
}
.control div.text{
font-size:12px;
font-weight:bold;
line-height:30px;
text-align:center;
font-family:verdana;
width:20px;
border:none;
color: #383737;
}
.control div.btnPlay{
background:url(images/play.png) no-repeat 0 0;
border-left:1px solid #404040;
}
.control div.paused{
background:url(images/pause.png) no-repeat 0 0px;
}
.control div.btnStop{
background:url(control.png) no-repeat 0 -60px;
}
.control div.spdText{
border:none;
font-size:14px;
line-height:30px;
font-style:italic;
}
.control div.selected{
font-size:15px;
color: #383737;
}
.control div.sound{
background:url(control.png) no-repeat -88px -30px;
border:none;
float:right;
}
.control div.sound2{
background:url(control.png) no-repeat -88px -60px !important;
}
.control div.muted{
background:url(control.png) no-repeat -88px 0 !important;
}
.control div.btnFS{
background:url(control.png) no-repeat -44px 0;
float:right;
}
.control div.btnLight{
background:url(control.png) no-repeat -44px -60px;
border-left:1px solid #404040;
float:right;
}
.control div.lighton{
background:url(control.png) no-repeat -44px -30px !important;
}
/* PROGRESS BAR CSS */
/* Progress bar */
.progress {
width:85%;
position:relative;
float:left;
cursor:pointer;
height: 6px;
background-color: #eef2f6;
}
.progress span {
height:100%;
position:absolute;
top:0;
left:0;
display:block;
}
.timeBar{
z-index:10;
width:0;
height: 6px;
background-color: #db7560;
}
.bufferBar{
z-index:5;
width:0;
height: 6px;
opacity: 0.5;
background-color: #eef2f6;
}
/* time and duration */
.time{
width:15%;
float:right;
text-align:center;
font-size:11px;
line-height:12px;
}
/* VOLUME BAR CSS */
/* volume bar */
.volume{
position:relative;
cursor:pointer;
width:70px;
height:10px;
float:right;
margin-top:10px;
margin-right:10px;
}
.volumeBar{
display:block;
height:100%;
position:absolute;
top:0;
left:0;
background-color:#eee;
z-index:10;
}
/* OTHERS CSS */
/* video screen cover */
.loading, #init{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(images/loading.gif) no-repeat 50% 50%;
z-index:2;
display:none;
z-index: 100;
}
#init{
background:url(images/bigplay.png) no-repeat 50% 50% !important;
cursor:pointer;
z-index: 50;
}
<div class="six columns">
<div class="videoContainer">
<video id="myVideo" controls preload="auto" poster="images/1-thm.png" width="600" height="350" >
<source src="video.mp4" type="video/mp4" />
<p>Your browser does not support the video tag.</p>
</video>
<div class="caption">Screamer 2015 Intro</div>
<div class="control">
<div class="topControl">
<div class="progress">
<span class="bufferBar"></span>
<span class="timeBar"></span>
</div>
<div class="time">
<span class="current"></span> /
<span class="duration"></span>
</div>
</div>
<div class="btmControl">
<div class="btnPlay btn" title="Play/Pause video"></div>
<div class="btnStop btn" title="Stop video"></div>
<div class="spdText btn">Speed: </div>
<div class="btnx1 btn text selected" title="Normal speed">x1</div>
<div class="btnx3 btn text" title="Fast forward x3">x3</div>
<div class="btnFS btn" title="Switch to full screen"></div>
<div class="btnLight lighton btn" title="Turn on/off light"></div>
<div class="volume" title="Set volume">
<span class="volumeBar"></span>
</div>
<div class="sound sound2 btn" title="Mute/Unmute sound"></div>
</div>
</div>
<div class="loading"></div>
</div>
</div>

In your div btmControl, there is the code
<div class="volume" title="Set volume">
<span class="volumeBar"></span>
</div>
for which I cannot see the use right now.
Try changing the corresponding height value in the css part (.volume and .volumeBar) or consider removing it (if it really is not useful)
Because it is set to
display:block;
it should create a new line and not fill in a row along with the other divs.
So display:inline; will also provide a possible solution
Furthermore, the following divs will also be aligned in a new line. I propose this is the line break you do not want to have...
(For an example of display:block effect click here)
But anyway, a fiddle version for this problem would be of great help!

resizing image using jquery

html
<div id="inside"><div id="inside1"><img id="inner_images" src="1.jpg" alt=""/></div><span>photo details</span></div>
<div id="inside"><div id="inside1"><img id="inner_images" src="2.jpg" alt=""/></div><span>photo details</span></div>
this is the html code for two images , likewise i have to create a gallery with lot of images.
CSS
#inner_images {display:block; margin-left:auto; margin-right:auto; margin-top:auto;}
#inside {overflow: hidden; display:inline; width: 265px; height:340px; border: #8c8585 `solid 1px; padding:0; spacing:0;}
#inside1 {width:250px; height:250px; border-bottom: #8c8585 solid 1px ; }
#details {width:250px; height:90px;}
and jquery is
var max_h =250;
var max_w =250;
$(document).ready(function()
{
$('img#inner_images').load(function()
{
var w1=$(this).width();
var h1=$(this).height();
if(h1>w1)
{
w1=Math.ceil(w1/h1*max_h);
h1=max_h;
}
if(w1>h1)
{
h1=Math.ceil(h1/w1*max_w);
w1=max_w;
}
$(this).css({height:h1, width:w1});
});
});
the problem is that this code only resizes the first image and rest of the image is left as it is.
`

$('img#inner_images').each(function()
{
var w1=$(this).width();
var h1=$(this).height();
if(h1>w1)
{
w1=Math.ceil(w1/h1*max_h);
h1=max_h;
}
if(w1>h1)
{
h1=Math.ceil(h1/w1*max_w);
w1=max_w;
}
$(this).css({height:h1, width:w1});
});

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 ;)