Display the 'right' style of a div with JQuery
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;
开发者_JAVA百科 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>
$('span.display_value').text($('div.slider').css('right'));
use .text(x), not .html() or .val()
I think @Ivan Nevostruev is right. Just to suggest one other logical step. Your problem code is doing two things, getting the right style value and setting it to another element.
You should break these down to two separate steps to find which is causing your error ie:
var rightStyleValue = $('div.slider').css('right');
alert(rightStyleValue);
$('span.display_value').val(rightStyleValue);
Then, once you know which action is causing the problem you can break it down further, by testing is your selector working, ie:
alert($('div.slider'));
If the result is null or undefined, then you have a problem with your selector.
@Ivan is probably right, but without seeing your html, it could be a bunch of problems. Breaking it down always helps me.
Looks like you're having extra bracers after css method call. Also I think val should be replaced with text. Here is example:
$('span.display_value').text($('div.slider').css('right'));
加载中,请稍侯......
精彩评论