mygeekpal

Detect Internet Explorer using jQuery

In my last post you have seen how to detect Internet Explorer 6 using Javascript. If you love jQuery like I do then here is the simple snippet that you can use to Internet Explorer 6 using jQuery.

jQuery.each(jQuery.browser, function(i, val) {
if(i=="msie" && jQuery.browser.version.substr(0,1)=="6")
alert("Do stuff for IE 6")
});

Detect Internet Explorer 6 using JavaScript

As a Web Developer I have stopped giving support to clients for Internet Explorer 6. Recently I was analysing the traffic on my social networking website (for those who don’t know I recently launched a social networking website exclusive for people in Hyderabad, its Wakaao!) and to my surprise about 30% of people visiting my social networking website are are still use the old is(not) gold Internet Explorer 6. I guess this can be either because

• They are using a public PC which as the first version of Windows XP
• Or Inadequate Computer knowledge to upgrade or install other browsers
• Or Are lazy and probably not intamated about the buggy and insecure web browser.

What ever the case may be, the problem is that my website has 1-2 rendering issues with IE6. Though I use a separate stylesheet for IE6 but I want to end up dealing with this IE6. Working with IE6 is a huge burden. So I wanted a simple jQuery powered modal box to pop up and tell them if they are using IE 6.

This is a simple function that can help you get the version of your browser. It returns the browser version for Internet Explorer and for others it returns -1.

function vIE() {
// returns version for IE or -1 for other browsers
return (navigator.appName=='Microsoft Internet Explorer')?parseFloat((new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})")).exec(navigator.userAgent)[1]):-1;
}

Thanks to Marc Palau who commented this at The Future of Web

You can also detect Internet Explorer using jQuery

Creating an AJAX Powered Pagination in Wordpress

Pagination on blogs is quite in common. But an AJAX powered pagination on a cool themed blog is the apple of my eye. In this tutorial we are going to see how to change your old styled pagination into an AJAX powered dynamic pagination.

In this tutorial I assume that you have basic knowlege of editing HTML, PHP and Javascript. I have used jQuery for handling ajax and the modified code for pagination from Lester Chan’s WP-Page Navi

The tutorial will consists of creating a basic pagination using PHP, jQuery and editing some template pages. Make sure you backup your ooriginal theme before trying this.If you arent able to follow the tutorial download the zip file at the containing the required files. (including css style).

Step 1

Firstly, open up the index.php and/or home.php if it exists. Wrap the div that holds all the posts with a div of id #ajaxcontent. And add <?php pagenavi(); ?> just before the end of the content div.
Will look something like this

<div id="ajaxcontent">
<div id="content">
<?php if (have_posts()):
   while (have_posts()):
      the_post(); ?>
.......
.
.
.
.
<?php endwhile;
endif; ?>
<?php pagenavi(); ?>
</div> <!-- end #content -->
</div>
<!-- end #ajaxcontent -->

Step 2

Create a new folder called plugins in your current template’s directory. Download the zip package containing all the files. Copy the pagenavi.php and pagenavi.css file into the plugins folder in your current template’s directory.

Step 3

Now just copy everything inside the #ajaxcontent wrapper(Make sure you dont include the ajaxcontent wrapper div too.) and create a new file called wp-ajax-post.php in your root directory and paste it there.

Step 4

Add this code on top of wp-ajax-post.php

<?php
require ('wp-blog-header.php');
query_posts('paged=' . $_GET['p']);
$paged = $_GET['p'];
?>

Step 5

The last thing to do is, open functions.php in your template directory and include the pagenavi.php plugin like this

<?php include("plugins/pagenavi.php"); ?>

So that was the tutorial, check out the working example/demo on the home page of my blog MyGeekpal

Download Ajax Pagination Files (174)

Working with HTML5 – The Future of Web

With the name HTML5 revolving all round the social networks and blogosphere and yesteday I took time to check out whats exactly that HTML5 has to offer. Its simply great, so I thought to create a round up with some cool HTML5 elements which you wouldn’t have seen or used in HTML4. Well in other terms you can design a complete new layout only with exclusive HTML5 tags without using HTML4 tags which is not recommended though.

• <section>

  A section tag can be useful to provide something similar to a section of a chapter of text, or a book. Talking about blogs it can act as a wrapper to all blog entries on current page.

• <header>

  Please ite that this is not same as the <head> element.  <header></header> can be useful to wrap up all the header elements like logo, searchbox, subscripts etc.

• <footer>

  Footer of the page. This where all your copyrights related infoa nd other sitelinks goes. Similar to header.

• <nav>

  The nav element can be used to enclose the menus that you have got on the page.

• <article>

  The article tag can go inside the <section></section> tag. It depicts the tag for your article. For example each blog post can be wrapped inside an <article></article> tag

• <aside>

  The aside tag can be used to put up any other notes etc that you have to display. In other terms we can also use the <aside></aside> tags to create sidebars for your widgets.

I have writen about only a few tags here, however if you want to check about all the new tags then please visit http://www.phpguru.org/static/html5