Tag Archives: JQuery

Essential jQuery plugins

Posted on by
Reply

As a newbie to the Javascript World, it is important to get some very very simple jQuery plugins. I pick and find a few that are so simple and yet works well in all browsers.

NivoSlider

NivoSlider
One of the slider that can do all the other slider can do, combined. While it already started to sell commercial support, but you can pretty much get some support by just Google it. Yes, it works perfectly fine with WordPress, either by the plugin provided or you can get your hand dirty on it too.

Uniform

Uniform
Spice up your form easily with this form beautifying plugin. You can either set to style all the inputs or by adding class to any of them. Best of all, it can easily change theme just by editing some images sprite and/or CSS.

jQuery Slide Menu

jQuery Slide Menu
A very simple multi-level menu jQuery plugin. All you need is to style the menu to enable at least 2 level of dropdown and add this little plugin to it. Simple enough? It works well even with 5 level!

MediaQueries

MediaQueries
We cannot deny the existing of mobile browser. This plugin basically help older browser (Especially IE6) to enable media querie, so you can set different screen resolution to different stylesheet. Best of all, you don’t need to do anything beside adding the script line.

HTML5shim

html5shim
Let’s face it, we are all living at tomorrow today. Although HTML5 and CSS3 are still on development stage, but it has been widely used. Well, only the few tags. But it is more than enough to make one headache with older browser (IE, duh!). This little plugin helps on enabling the common tagslike header, aside, footer and etc to work well. Some suggest Modernizr, which both works pretty much the same just more support on HTML5 tags.

WordPress native Thickbox

Posted on by
Reply

I used to have a separate JQuery plugin for lightbox, until I found this one – Using WordPress native thickbox.

Thickbox

Most of the time, I use the lightbox for gallery purpose. However, that has helped me cut down another JQuery plugins!

After following the tutorial at http://blog.manchumahara.com, that remind me of how I apply the gallery lightbox.

Open functions.php,

Add in gallery file type, the normal extension:

define("IMAGE_FILETYPE", "(bmp|gif|jpeg|jpg|png)", true);

Add a function for it, so it will automatically add a class to any image that has a link attached with it.

function wp_thickbox($string) {
$pattern = '/(<a(.*?)href="([^"]*.)'.IMAGE_FILETYPE.'"(.*?)><img)/ie';
$replacement = 'stripslashes(strstr("\2\5","rel=") ? "\1" : "<a\2href=\"\3\4\"\5 class=\"thickbox\"><img")';
  return preg_replace($pattern, $replacement, $string);
}

Then add in another function that will automatically add a rel to bulk images. Works for gallery.

function wp_thickbox_rel( $attachment_link ) {
$attachment_link = str_replace( 'a href' , 'a rel="thickbox-gallery" class="thickbox" href' , $attachment_link );
  return $attachment_link;
}

Use add_filter to force the usage:

add_filter('the_content', 'wp_thickbox');
add_filter('wp_get_attachment_link' , 'wp_thickbox_rel');

Full code:

define("IMAGE_FILETYPE", "(bmp|gif|jpeg|jpg|png)", true);
function wp_thickbox($string) {
$pattern = '/(<a(.*?)href="([^"]*.)'.IMAGE_FILETYPE.'"(.*?)><img)/ie';
$replacement = 'stripslashes(strstr("\2\5","rel=") ? "\1" : "<a\2href=\"\3\4\"\5 class=\"thickbox\"><img")';
  return preg_replace($pattern, $replacement, $string);
}

function wp_thickbox_rel( $attachment_link ) {
$attachment_link = str_replace( 'a href' , 'a rel="thickbox-gallery" class="thickbox" href' , $attachment_link );
  return $attachment_link;
}

add_filter('the_content', 'wp_thickbox');
add_filter('wp_get_attachment_link' , 'wp_thickbox_rel');

Done! It works with pages (internal or external), iframe content and even AJAX content. For more information about how to use this plugin, go to: http://jquery.com/demo/thickbox

Highlight WordPress search terms with JQuery

Posted on by
3

Quite frankly, no one really cares about search page. I too, previously, until the day I search for a site and find it hard to catch the terms on the search page. Instead of finding it, I search using browser CTRL+F again, double my search job.

There are numorous of plugins available for WordPress to highlight the search terms, some even have tutorial on how to highlight without using a plugin. I tested, it doesn’t work too well for me. Perhaps, the updated version of JQuery conflicted with it.

Highlight

Yet again, WordPress template tags comes to save my time :) There is this the_search_query tags in WordPress. It will shows the term you searched. Simply, .replace() it with JQuery.

<script type="text/javascript" >
jQuery(document).ready(function($){
jQuery(".post").each(function() {  // The DIV of the result
  jQuery(this).html(jQuery(this).html().replace(/ <?php the_search_query(); ? >/ig, " <span class='highlight' > <?php the_search_query(); ? > </span >"));
});
}); // END
</script >

Simply placed the above code in search.php and you’re good to go :)

WordPress unlimited dropdown menu

Posted on by
Reply

Unlimited dropdown menu

It used to be easy to do a dropdown menu, as developer gets to decide how many level of dropdown and style accordingly. However, with the newly featured custom menu, developers cannot expect how many level the end-users will think of using.

I personally use a lot of CSS dropdown menu. Easy to style, like this:

#menu {height: 40px; z-index: 100; clear: both; position: relative;}
#menu li.current-menu-item a {color: #fff; background: url('images/menu_hover_active.gif') no-repeat center;}
#menu ul li {float: left; position: relative;}
#menu ul ul {display: none;}
#menu ul li:hover>ul {display: block; position: absolute; z-index: 120; width: 200px; background: #991818;}
#menu ul ul ul {display: none;}
#menu ul li:hover>ul li:hover>ul {display: block; position: absolute; z-index: 120; left: 200px; top: 0; width: 200px; background: #991818;}
#menu a {display: block; padding: 12px 15px; color: #fff;}
#menu a:hover {background: url('images/menu_hover_active.gif') no-repeat center;}
#menu ul li ul li a {display: block; padding: 10px 15px; width: 180px; color: #fff;}
#menu ul li ul li a:hover {background: none;}

Then on the php file, it goes like:

<div id="menu">
<?php if (function_exists('wp_nav_menu') ) { wp_nav_menu('menu=Top Menu&container_class=top-menu1'); } else {?>
<ul><?php wp_list_pages('title_li='); ?></ul>
<?php } ?>
</div>

I was searching around for a better JQuery that helps building unlimited dropdown menu and small in size, undeniably, Suckerfish is one of the most used plugin, but it doesn’t really do good and too complicated to style. To make life easier, try jQuery Multi Level CSS Menu I found from Dynamic Drive.

Dynamic Drive demo

Basically, just download the plugin and add 2 classes into CSS. 1, Arrow pointing down then there is submenu from first level, and 2, Arrow pointing right when there is submenu on third level onward.

First, download the plugin (Don’t need the CSS). Add script link on header.php

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jqueryslidemenu.js"></script>

Find this code (Line 10):

var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}

and (Line 26,27,28):

'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />'

Change to

var arrowimages={down:['downarrowclass'], right:['rightarrowclass']}

and:

'<span class="'
+ (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />'

That is so you don’t have to look for the folder for the images location and easier to style in the future too.

Now that you changed the plugin calling. From calling it for image <img src="" /> to calling a span, you’ll need to add both CSS:

#menu a span.menu-down {background: url('images/menu_down.gif') no-repeat right center; padding: 0 8px;}
#menu a span.menu-right {background: url('images/menu_right.gif') no-repeat right center; padding: 0 8px;}

WordPress custom menu

That’s all! No more adding this and that, just change it with a few steps, I get unlimited dropdown menu, end-user gets to drop all the way down for their menu :)

8 must see elegant yet simple JQuery

Posted on by
1

I find it interesting to see how JQuery can do so much in the recent year. I myself always look for the easier way out by look for the simplest and easiest tutorial online and implement it on my next design.

Here are a few JQuery that I find them easy to learn and can easily implement on your next big project.

Slick page transitions

JQuery page transition

Onextrapixel has a comprehensive tutorial on how to add some elegant effect on your page transition. The implementation is easy, just add the Javascript into the design.

jQuery popup bubble

JQuery popup bubble

Digital Vision offer a great tutorial on how to add the elegant popup bubble. It works with CSS, so basically you are free to design how the bubble looks like.

jQuery background image slideshow

JQuery background slideshow

Macrofolio created this simple slideshow tutorial and giving it some tricks to have the background image changes on each slide. Interesting reading and apply.

Simple, quick and small HTML form validation

JQuery forms validation

Nothing beat Joren Rapini’s simple form validation tutorial. This tutorial give you the quickest way to implement into your web, no fancy code here and there anymore.

Simple tabs

JQuery tabs

Soh Tanaka offer not only a tutorial, but how to make it beautiful too. I love how he use the only CSS to make such a great looking tabs.

Flip wall

JQuery flip wall

A great tutorial by Tutorialzine. Though it may not be that simple, but the effect is awesome.

Animated background image

JQuery animated background

A great and short tutorial by Cat Who Code. Short and sweet, that’s all I can tell.

Toggle effect on hover/click

JQuery toggle

Tutorial by Acris Design. Works great for FAQ ;)

That’s all I get so far. I would love to bookmark some simple tutorial on JQuery, let me know if you have one :)