Calculate width of div within viewport

Question

Hello,

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!

Answer 1

I would probably use the left position ($(....).offset().left) of my div to control if it reaches that point in my viewport.

Answer 2

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