Entries Tagged as 'HTML'

Correct Method to check if a Javascript function is Exists or not

Posted by Nirav Patel on April 27, 2010

0 comments

Hi everyone,

Sometime you might want to call a function in Javascript but check whether the function exists or not before calling it. You can test if a function exists in Javascript by simply testing for the name of it in an if() condition.

But Note that you can't test for the function name by itself.
This will work but if the function doesn't exist the Javascript will error out. 

if(some_function_name)
		{}

The Correct method is Like this

 if(window.some_function_name)
		{}
 

It's a method of the window object so you need to test for window.some_function_name like so, where some_function_name is the name of the function you wish to test for.

Visitor's Browser Window Display Area

Posted by Rahul on April 24, 2010

0 comments

To know the available display area in a visitors browser excluding the pixels occupied by the toolbars and other add-ons on the users browser use the following javascript code.

<script type="text/javascript">
     availArea_width = screen.availWidth;
     availArea_height = screen.availHeight;
</script>

* Screen.Width and Screen.Height will return the resolution of the users monitor.

Overwrite old click event function Not Working in IE

Posted by Nirav Patel on April 23, 2010

0 comments

Hi everyone
    I just came across this problem that is happening in IE.
    In the html I am adding an onclick event to an element that calls a function 'changeStatus' like this :

<a id="my_a" onclick="changestatus('my_a',1);" href="javascript:void(0);">Click Here</a>




function changestatus(id,status)
    {
        alert(status);
        jQuery('#'+id).html('Yes');
        jQuery('#'+id).unbind('click').removeAttr('onClick');
        jQuery('#'+id).click(function(event){changestatus(id,0);});
    }

Inside the changeStatus function I added the .unbind('click').removeAttr('onClick'); in order to remove the old onclick event and then add the new one.

This is working fine in FF, but in IE it is calling both the new click event and the old at the same time for some reason. I think that this causes jQuery to not know what events are taking place elsewhere, so both events get run.
When I put the following code and just bind the click event with jquery on document.ready and not set the onclick attribute of the anchor tag.

 

<a id="my_a" href="javascript:void(0);" >Click Here</a>

jQuery(document).ready(function(){
        $('#my_a').click(function() {
            changestatus('my_a',1);
        });
    });

This is works well on both FF and IE and I believe that this is the best way to fix this problem.
    Please correct me if this is wrong logic or any other way to fix this problem.

Submit form to a new window, with window.open() features

Posted by Nirav Patel on January 06, 2010

0 comments

To submit form to new window, we set the target attrubutes to '_blank'. But we can't set the new window's property such as height, width etc. So to submit the form to new window with 'window.open()' features, Let's look at the below code. 

 <html>
    <head>
        <script type="text/javascript">
            function submitForm()
            {
                document.form1.target = "myActionWin";
                window.open("","myActionWin","width=500,height=300,toolbar=0");
                document.form1.submit();
            }
        </script>
    </head>
    <body>
        <form name="form1" action="demo_action.cfm" method="post">
            First name: <input type="text" name="fname" /><br />
            Last name: <input type="text" name="lname" /><br />
            <input type="button" name="btnSubmit" value="Submit" onclick="submitForm()" />
        </form>
    </body>
</html>

First of all I set the target attribute of my form (form1) to 'myActionWin' which is the name of the target window (or can be the target frame). Then Open the new window having the name 'myActionWin' and set the window property whatever you want with the window.open. And Lastly submit the form.

Demo

Design by Mark Aplet | Powered by Mango Blog