simple jquery calculation

Question

i have a site that has a "container" div that is 200% of the browser window width, and the overflow is hidden. some information is on the left half of the container (the first 100%), and some information is on the right half (the second 100%). i use a simple icon toggle to slide back and forth between both halves of the container, like so:

$('.container').animate({'marginLeft':'-=100%'}, 'slow');

-- or --

$('.container').animate({'marginLeft':'+=100%'}, 'slow');

the issue is, i need to perform certain events based on the marginLeft of the container.

when the first half is visible, i have no problems with getting the events i want. but when jquery slides the container to the left by 100%, making the second half visible, i cannot get anything to work.

after many many hours of research i have learned that i CANNOT use

if ($('.container').css('marginLeft') == '-100%') {
    //do something here

because the alert never tells me the marginLeft as a percentage, it always returns the number in exact pixels.

my conclusion is that i need a simple calculation in my "if" statement, but i have no idea how to write one.

in written english it would be:

"if the marginLeft in pixels divided by the window width in pixels is equal to -1 then please do stuff..."

can someone please walk me through how to create this very rudimentary jquery calculation and apply it to an if-statement?

any assistance would be greatly greatly appreciated.

many thanks and happy new year, David.

Keep track of it. `position = 0;`. Every time you slide it, adjust the `position` variable and act accordingly. Done. Happy New Year! — Niet the Dark Absol, Jan 01 '15 at 00:34
hey! thanks for the info. but, i am not entirely sure what you mean. can you expound on your reply? — Dd., Jan 01 '15 at 01:16
and, lets just say for the sake of learning i do need an if-statement like that requested above. how would it be constructed?? — Dd., Jan 01 '15 at 01:24

score 0 · Answer 1 · answered Jan 01 '15 at 02:20

I believe an easy way (with no calculations needed) is to have a variable tell you weather or not you are on the second part. I did a small example on JSFiddle which you can feel free to check here: http://jsfiddle.net/lrojas94/3udk9aj9/

The basic Idea goes like this:

var click = 1;
$(document).ready(function(){

    $('.percent').click(function(){
        if(click === 1)
        {
            $(this).css('marginLeft','-100%');
            click  =  2;
        }
        else{
            $(this).css('marginLeft','0');
            click = 1;
        }

    })

});

Where the Percent class is the Div which size is 200% percent. Check the fiddle to know more.

I must point out that it is said that global variables are (most of the time) a bad idea. But I believe that's a simple, working method you can feel free to use. Hope this answer your question and, if not, hope I can also learn from this.

score 0 · Accepted Answer · answered Jan 01 '15 at 17:15

the long and the short of it is, the first panel shows large portfolio images and the second panel shows a grid of thumbnails--and they toggle back and forth by a click of a gallery icon in the footer. Mr. Barmar (my first replier, above) led me down the path of ditching a margin toggle (thank you, sir!) which kept only returning a "0" no matter where the container div actually was, in favor of absolute positioning. in doing so i actually started receiving usable numbers for positioning, but i was still faced with the issue of converting those numbers into something predictable, so i can use them in an if-statement. so what i did was create a variable, in this case "panelIndex", that is the result of dividing the container's left position by the width of browser window. if that number is "0" i know the first panel is visible, and if that number is "-1" i know that the first panel has slid off the screen to the left, and now the second panel is visible. etc., like so:

// GALLERY TOGGLE
$(document).ready(function() {
    $('#gallery_icon').click(function() {

    panelIndex = $('.container').position().left / $( window ).width();

    if ($(this).hasClass('off') && panelIndex == 0)
    {
        $(this).switchClass('off', 'on', 0);
        $('.container').animate({'left':'-100%'}, 'slow');
        // DO SOMETHING
    }
    else ($(this).hasClass('on') && panelIndex == -1)
    {
        $(this).switchClass('on', 'off', 0);
        $('.container').animate({'left':'0'}, 'slow');
        // DO SOMETHING ELSE
    }
    });
});

so, yeah... if you are working in percentages like i am, you can always use something like the simple equation above to generate predictable results for your conditional statements.

thank you Barmar & Niet the Dark Absol for your help.

simple jquery calculation

2 Answers2