How can I write an if condition that will run if an element is 60% of the window's width worth off the screen?

I've tried using style.left > '40%' but that doesn't seem to work. Or be right.

How can I write an if condition that will run if an element is 60% of the window's width worth off the screen?

I've tried using style.left > '40%' but that doesn't seem to work. Or be right.

• javascript
• jquery

• 1 I believe you'll need to calculate a percentage from pixel values. – ayyp Commented Jun 13, 2013 at 19:57
• Can you use CSS media queries for this? I don't think it will do exactly what you want - but it will let you tweak CSS based on resolution size / size of the browser window. – Adam Plocher Commented Jun 13, 2013 at 19:58
• I'm lost in percentages. How wide is that element? You mean: "if 60% of the element's width is outside the right window edge"?? Can you please clarify? As it currently states it's hard to get a picture of what you want. – Roko C. Buljan Commented Jun 13, 2013 at 20:08

2 Answers 2

You can use javascript and jQuery to do this pretty easily. To find the right edge of your object (stored in memory as f here), use this code:

var rightEdge = f.width() + f.offset().left;

To find the screen width, you can use this code:

var screenWidth = $(window).width();

The amount of object that is "off screen" is calculated by subtracting screenWidth from rightEdge, therefore this boolean expression describes when the object is more than 60% off the screen:

rightEdge-screenWidth > f.width()*.6

Here's a working demo: http://jsfiddle/YeyFj/

This isn't directly answering your question, but I created this fiddle that might make it easier to play with the math that you need to do.

http://jsfiddle/5ucbX/

var w = $('#container').width();
var el = $('#el');
el.draggable({
    stop: function () {
        var ew = el.width();
        //this is your "formula"
        var l = el.offset().left + (ew * .6);
        if (l > w) {
            el.addClass('over')
        }
        else {
            el.removeClass('over')
        }
    }
});