Staying Passionate and Motivated ON web development

February 28, 2013

JavaScript do not execute in jquery mobile

Recently, I receive a question about why javascript do not execute in jquery mobile when using
<a href="aboutus.html">About US<a> in home.html.

It is because jquery Mobile will intercept the <a> tag and use AJAX to get the HTML to navigate the page instead of changing page directly. This result the javascript in "aboutus.html" will not execute. Let's see an example:

This is home.html


<!DOCTYPE html>
<html>
<head>
 <title>Home</title>
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta charset="utf-8">
 <link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
 <script src="jquery-1.8.2.min.js"></script>
 <script src="jquery.mobile-1.2.0.min.js"></script>
 <script src="phonegap-1.4.1.js"></script>
</head>

<body onload="onBodyLoad()">
    <div data-role="header" data-id="aboutus" data-position="fixed">
        Home
    </div>
 <div data-role="header">
  <a href="aboutus.html">About US<a>
 </div>
 
</body>
</html>

This is aboutus.html


<!DOCTYPE html>
<html>
<head>
 <title>About us</title>
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta charset="utf-8">
 <link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
 <script src="jquery-1.8.2.min.js"></script>
 <script src="jquery.mobile-1.2.0.min.js"></script>
 <script src="phonegap-1.4.1.js"></script>
 <script type="text/javascript">

  function onBodyLoad()
  {
   document.addEventListener("deviceready", onDeviceReady, false);
  }

  function onDeviceReady()
  {
   alert("testing");
  }
 </script>

</head>

<body onload="onBodyLoad()">
    <div data-role="header" data-id="aboutus" data-position="fixed">
        About us
    </div>
</body>
</html>

In order to fix this issue, you would add rel="external" data-ajax="false" to make it refresh and go to the page directly instead of AJAX.


<a href="aboutus.html" rel="external" data-ajax="false">About US</a>

February 27, 2013

jquery click event in iOS

When binding a click event to the element, iOS may not work as expected. It is because if you write something like below, it won't work. Maybe it is iOS bug/jQuery bug?


$('#button1').click(function() {
    alert('button1');
});

The work around fix is to set pointer cursor to the element, and use .on to bind click event.


$('#button1').css('cursor','pointer');
$(document).on('click', '#button1',  function(event) {
    event.preventDefault()
    alert('button1');
});

February 23, 2013

change pages in jquery mobile

In jquery Mobile, page navigation can be done by using $.mobile.changePage(). How it works? Actually, this method will programmatically change from one page to another page by using ajax load html instead of refreshing the whole page in browser.

Assume we have index.html and a page in sub directory pages/home.html.
Here is the example:


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, 
    user-scalable=no" /> 
  <title>Index page</title>
  <link rel="stylesheet" href="jquery.mobile-1.3.0.min.css" />
  <script src="jquery-1.8.2.min.js"></script>
  <script src="jquery.mobile-1.3.0.min.js"></script>
 </head>
 <body >
  <!-- Home -->
  <div data-role="page" id="indexPage">
   <div data-theme="a" data-role="header">
    <h3>
     I am index page
    </h3>
   </div>
   <div data-role="content">
    Content is here....
   </div>
  </div>
 </body>
</html>

Now, we would like to change page to page/home.html when the user start to navigate index.html. We bind a pagecreate event to "#indexPage" instead of "documenet". It is because bindind "pagecreate" event to document, the event will be fired every time changePage performed.


<script type="text/javascript >
 $("#indexPage").bind('pagecreate', function()
 {
  $.mobile.changePage("pages/home.html");
 });
</script>

After that you will see page/home.html is loaded.

Important notes:

If you are executing the html with file path in browser like this (file:///C:/test/index.html), $.mobile.changePage() cannot work normally because loading html, javascript by using ajax in local drive is not allowed. There is an alternative way to switch page instead of using $.mobile.changePage or put you files to hosting/ install apache/iis in your machine.


<script type="text/javascript >
 $("#indexPage").bind('pagecreate', function()
 {
   window.location = "pages/home.html;
 });
</script>

February 22, 2013

Adjust width height of iframe to fit with content

Sometimes, we would like to include some content without affect by css in current window. The simplest and easiest way is use iframe without scroll bar. However, there is a common problem, content inside the iframe cannot be fully displayed. It is because the inner content can longer and wider then the height or width we set in frame.


<iframe id="MyIframe" scrolling="no" frameborder="0" width="300px" 
 height="600px"></iframe>

In the example above, we set the iframe height and width to 600px and 300px respectively. When the content in iframe is over the limit, the problem will occur. This problem can be fixed by using JavaScript and here is the solution:


<script type="text/javascript">
 function ResizeIframe(id){
  var frame = document.getElementById(id);
  frame.height = frame.contentWindow.document.body.scrollHeight + "px";
  frame.width = frame.contentWindow.document.body.scrollWidth + "px";
 }
</script>
<iframe id="MyIframe" onload="ResizeIframe('MyIframe')" scrolling="no" 
 frameborder="0" height="600"></iframe>

February 18, 2013

SEO friendly page title in Blogspot

Having an SEO friendly page title will optimize your blog to search engine, such as Google, Bing, Yahoo. However, the page title for individual page in Blogspot is "home page title : post title". It is long and not optimize to search engine.

For example:

Staying Passionate and Motivated ON web development : SEO friendly page title in Blogger

5 steps to change the page title use post title instead of combined title for individual pages.

Go to your Blogger
Select "template" in left column
Click "Edit HTML"
Find the <title> section, it should look as below
```
<title><data:blog.pageTitle/></title>
```

Then replace it by the following code


<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Thanks for 9 Killer Blogspot SEO Tips For bloggers

February 17, 2013

Position fixed in Internet Explorer 7

As I know some of you are facing position fixed is not working properly in IE7. I would like to share the solution, hope it can help you.

In order to make the element position fixed work properly in IE7, DOCTYPE should be defined at the beginning of the HTML code. If you missed the DOCTYPE, position fixed cannot work properly in IE7.

Here is the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

February 16, 2013

JPEG vs PNG when developing mobile web site

According to the research from Stanford University and Deutsche Telekom R&D Laboratories, it described image in different format such as JPEG, PNG and BMP will result different consumption of the energy. As BMP file size mostly larger than JPEG and PNG, it cost more energy during rendering. However, both JPEG and PNG uses data compression, the file size definitely smaller than BMP. In the research, they found that JPEG is the best format for android phone as it is the most energy efficient. So, when building a mobile web site, let's consider use JPEG.

Choosing energy efficient format is not only reducing power consumption, but also saving our earth :)

Source:
http://www2012.wwwconference.org/proceedings/proceedings/p41.pdf

Navigation