Tag Archives: javascript

Check element visibility with Javascript

The following function checks if a given element is within browser’s viewport:

1
2
3
4
5
6
7
8
9
10
function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

Sample Usage

On this example I’ll be loading iframes only when they are on the browsers viewport. For this to work I initially printed all iframe’s without the SRC attribute. Instead, I used the REL attribute as a placeholder for the iframe destination:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    var my_interval = setInterval(checkIframesVisibility, 1000);

    function checkIframesVisibility()
    {
        $("iframe").each(function(i) {
            if (isScrolledIntoView($(this)))
            {
                if ($(this).attr('src') == "")
                {
                    $(this).attr('src', $(this).attr('rel'));
                    $(this).iframeAutoHeight({debug: false, diagnostics: false});
                }
            }
        });
    }

    function isScrolledIntoView(elem)
    {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom <= docViewTop) && (elemTop <= docViewBottom));
    }

PS: The iframeAutoHeight is a plugin that auto resizes the iframe to the content’s height.

Hope you find this is useful!

Submit a form with an input named “submit”

First of all…

The most common mistake made when defining the form HTML that a script will interact with follows from the existence of the shortcut accessors for form controls. It is to give the control a NAME (or possibly ID) that corresponds with an existing property of FORM elements. And the most common example of that is an INPUT element of type=”submit” with the NAME “submit”. Because the named controls are made available as named properties of the FORM element this INPUT element is made available under the property name “submit”. Unfortunately FORM elements already have a property with the name “submit”, it is the submit method that can be used to submit the form with a script. The misguided choice of name for the INPUT element effectively renders the form’s submit method unscriptable. And the same is true for all controls with names that correspond any with existing FORM element properties.

http://www.jibbering.com/faq/notes/form-access/#faComMis

 

So, unless you know what you’re doing do not name a form field “submit” – It will most likely break you’re javascript on that form.

Solution – Same domain

If you’re trying to submit to the same domain, just use Jquery’s $.ajax() and you should be Ok.

Solution – Cross domain

You can use YQL to do it, check the post here.

But… this solution kinda sucks, so if you know another way please feel free to comment!