I'm trying to display the "right" value of a div named "slider", displaying it inside of "span.display_value"
var rightStyleValue = $('div.slider').css('right');
alert(rightStyleValue);
$('.display_value').html(rightStyleValue);
UPDATE: Html is posted below. I'm using a drag and drop script to drag a div called "slider" that is inside of a div named "container". I want to have it "do something" when the "right" property of the div "slider" reaches 45px(ideally, when the user drags "slider" all the way to the right side of it's parent "container")
Right now, when the page loads it will display the value that i specifically set in the css: "Right:-10". so it will display it once, but i'm not sure how to keep updating the displayed value for the "slider" div.
i don't know where to put: $('.display_value').html(rightStyleValue); to have it continually updated.
<head>
<style>
div.container {
height:15px;
width:200px;
overflow:hidden;
background-color:#858585;
}
div.slider {
height:15px;
width:20px;
background-color:#000;
position:relative;
right:-10px;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/dragcopy.js"></script>
<script>
$().ready(function() {
$('.slider').jqDrag();
$('.slider')
.jqDrag();
});
$(document).ready(function() {
var rightStyleValue = $('div.slider').css('right');
alert(rightStyleValue);
$('.display_value').html(rightStyleValue);
$(".slider").mousedown(function() {
if ($('.slider').css('right') == -8 + "px") {
$('.container').fadeOut('slow');
}
});
});
</script>
</head>
<body>
<div class="container">
<div class="slider">
</div>
</div>
<p>slider right:<span class="display_value"> </span></p>
</body>