Staying Passionate and Motivated ON web development

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">

Navigation

March 6, 2013

February 28, 2013

February 27, 2013

February 23, 2013

February 22, 2013

February 18, 2013

February 17, 2013