Entries Tagged as 'HTML'

jquery mobile error avoiding tip

Posted by Vikas on June 18, 2011
  0 comments

Hi,

For last month I am using jquery mobile. I’ve gone through lots of issues and learned a lot.

Web is good but when it comes with browser, HTML and java-scripts it becomes more buggy!

Generally I use chrome for development, and jquery mobile works perfect as it based on web-kit.

I tested and published my code, for desktop testing I use Firefox and chrome (not testing on IE as its jquery mobile). But when I open it in Android device, I see only half of the page rendering. And this is because of I made mistake in mark up language.

I forgot to close div tag and closed with li tag. In Firefox and chrome its ignored, but in safari it rendered differently.

See this code and output in chrome and safari, you will get the idea what i’m taking about.

Conclusion: While testing you web app IE is your acid test, while targeting web-kit or jquery mobile, safari is your acid test.




innerHTML vs appendChild

Posted by Vikas on November 11, 2010
  0 comments

 

Today I was testing my code, and I found interesting stuff on innerHTML and appendChild method.

I was trying to add new elements to the div.

First, I was creating element by calling DOM method (document.createElement()) and then I append it to my div by calling appendChild() method of the HTML div element.

 




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