I need to calculate the width of a div within the viewport. If i use .开发者_如何学编程css(width) on my div, it just calculates the complete width.
My current code for trying to calculate:
var $Windowwidth = $(window).width();
var $lefty = $("#gallerytop");
var $GalleryTopWidth = parseInt($lefty.css('width'));
$("#footer").click(function() {
alert($Windowwidth)
alert($GalleryTopWidth)
});
What i would like to accomplish is the following:
I have one div covering the complete width of my window (100%, and beyond). I have 2 buttons for animating that div to the left and to the right per 241px. I would to be able to set a stop if my moving div has reached a certain point in my viewport (say for example, the right end of the div, by clicking on the right button, is now in the middle of my viewport/window; now i don't want it possible anymore to click on the right button).
Can anyone help?
Thank you!
var $aantal = $("#gallerytop img").size() * $("#gallerytop img:first").width();
var $viewportsize = parseInt($(window).width() / $("#gallerytop img:first").width());
var $overflow = $("#gallerytop img").size() - $viewportsize;
var $clickcount = 0;
var $extrabijtellen = 0;
var $isScrolling = false;
var $extrabijtellendynamisch = $(window).width()/10;
$("#next").click(function() {
var $lefty = $("#gallerytop, #gallerybottom");
if ($clickcount < $overflow && !$isScrolling) {
$isScrolling = true;
if ($clickcount == ($overflow - 1)) {
$extrabijtellen = $extrabijtellendynamisch;
}
else {
$extrabijtellen = 0;
}
$lefty.stop().animate({
left: (parseInt($lefty.css('left'), 10) - ($("#gallerytop img:first").width() + $extrabijtellen))
}, "normal", function() { $isScrolling = false; });
$clickcount++;
}
});
$('#prev').click(function() {
var $righty = $("#gallerytop, #gallerybottom");
if ($clickcount > 0 && !$isScrolling) {
$isScrolling = true;
if ($clickcount == ($overflow - 1)) {
$extrabijtellen = $extrabijtellendynamisch;
}
else {
$extrabijtellen = 0;
}
$righty.stop().animate({
marginLeft: (parseInt($righty.css('marginLeft'), 10) + ($("#gallerytop img:first").width() + $extrabijtellen))
}, "normal", function() { $isScrolling = false; });
$clickcount--;
}
});
if (($aantal) > $viewportsize) {
$("#prev, #next").css("display", "block");
}
I would probably use the left position ($(....).offset().left
) of my div to control if it reaches that point in my viewport.
精彩评论