Style.width and left doesn't work
Question
I want to make the effect of a "photo strip" in a menu div with this background
Im changing the width and left of the div to simulate this effect with javascript/jquery but it doesn't work this way, for now is "onclick" but i want to make it automatically may be with setInterval ?
Here's the HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Prueba</title>
<link type = "text/css" rel = "stylesheet" href = "PruebaIndex.css">
<script type = "text/javascript" src = "jquery-2.1.4.js"></script>
<script>
$(document).ready(function(){
var slider = document.getElementById("#slider");
var speed = 10;
$("#slider").click(function(){
slider.style.width = (slider.style.width+speed)+"px";
slider.style.left = (slider.style.left-speed)+"px";
});
});
</script>
</head>
<body>
<div id = "wrapper">
<div id = "slider">
</div>
</div>
</body>
</html>
And here's the CSS Code:
*{
padding: 0;
margin: 0;
}
#slider {
padding: 0;
margin: 0;
background-color: black;
background-image: url("TiraFotografica.PNG");
background-repeat: repeat;
width: 800px;
height: 304px;
position: relative;
overflow: hidden;
}
#wrapper {
width: 800px;
height: 1000px;
margin: 0 auto;
text-align: center;
overflow: hidden;
}
I tried anothers different ways, like window.onload , putting the code after all in body , trying $(object).width, etc.. the problem is that when i click this doesn't move, then later i'll try to do automatically..
I have another doubt, this menu will get divs inside (options), when i make this div ("#slider") move, those divs moves too (the options)?
EDIT: I added this by DinoMyte
var speed = 10;
$("#slider").click(function(){
$(this).css("width",(parseInt($(this).css("width").replace("px","")) + speed) + "px");
$(this).css("left",(parseInt($(this).css("left").replace("px","")) - speed) + "px");
});
Now it works fine, just need to make this automatically without clicks
sorry for my bad english..
1 answers
solution1
1 ACCPTED 2015-11-18 21:10:15
The issue is that slider.style.width would give you the width + "px" , so (slider.style.width+speed) isn't going to work. You need to replace "px" first. Also you need to parse the current width value to an integer.
slider.style.width = parseInt(slider.style.width.replace("px","")) +speed)+"px";
The better way to do this :
var speed = 10;
$("#slider").click(function(){
$(this).css("width",(parseInt($(this).css("width").replace("px","")) + speed) + "px");
$(this).css("left",(parseInt($(this).css("left").replace("px","")) - speed) + "px");
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.