Staying Passionate and Motivated ON web development

March 7, 2013

Pass function as css value in jQuery

In jQuery version 1.4, it allows us to pass a function as css value for the method .css(). According to the document :

.css( propertyName, function(index, value) )
propertyName
Type: String
A CSS property name.

function(index, value)
Type: Function()

Definition: A function returning the value to set. this is the current element. Receives the index position of the element in the set and the old value as arguments.

The basic idea is, when you use .css() method and pass function as value. It will call the function with passing back the current element index and current value (the css property) as argument for dynamic computation or set under some conditions. Then after computed, return value for to set the target "propertyName".

For example: You can think there is a "Increase font size" button in your web site and you would like to double size the current font size when clicked the button. You can make use of .css to achieve that.

Code example : Click the "Bigger hello world"

Hello world

Source code :


<input type="button" value="Bigger hello world" id="enlargeBtn" />
<div id="helloWorldContent">
 Hello world    
</div>

<script type="text/javascript">
 $("#enlargeBtn").on('click', function(){
   $("#helloWorldContent").css('font-size', function(index, value){
     var size = parseInt(value, 10);
     return size*2;
   });
 });
</script>

March 6, 2013

Shorten string with ellipsis by CSS

Sometimes, when we are designing or developing web site and unfortunately there is a very long sentence appear. It is possible to make the layout distorted and you may think it is not beautiful. At this moment, the idea come from our brain is to replace the sentence by using "...". But, how to do that?

For example, assume we have a sentence below :

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever

Now, we would make use of css text-overflow to illustrate how ellipsis can be appended at the end of the string. Basically you have to set width to make a boundary for the element and overflow hidden.


<style type="text/css">
.w200C 
{
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;    
 width: 200px;
}
</style>

The css above is bound the block to 200px, hidden the overflow content and append ellipsis. After applying the css, the sentence will become shorten with ellipsis as below:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever

Easy? But we may want the whole sentence can be displayed when user mouse over it. We can still use css to solve this problem by reset the overflow, width and white-space to default value.


<style type="text/css">
.w200C:hover
{
 overflow:visible;
 width:auto;
 white-space:normal;
}
</style>

Try to mouse over the sentence below and have a nice day :)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever

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

March 7, 2013

March 6, 2013

February 28, 2013

February 27, 2013

February 23, 2013

February 22, 2013

February 18, 2013

February 17, 2013

February 16, 2013