WP Wizard » jQuery http://wpwizard.net I ❤ WordPress Sat, 05 Mar 2011 12:30:52 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 jQuery: Boxes of Equal Height http://wpwizard.net/jquery/jquery-boxes-of-equal-height/ http://wpwizard.net/jquery/jquery-boxes-of-equal-height/#comments Fri, 30 Apr 2010 07:40:15 +0000 Stian Andreassen http://stianandreassen.com/?p=423 Ever had parallel boxes on a website you’re developing, and wanted them to have the same height, but still wanting them to have dynamic height, i.e. not having to lock them to a certain height in the CSS? I certainly have, and it’s usually difficult. But jQuery provides a simple sollution!

Say this is our starting point:

Two boxes, with different content, and thus different height. These two can quite easilly be made to have the same height, with a bit of jQuery magic. We start out by identifying them, adding a unique ID for each box. In this example I’ve simply called them #box1 and #box 2:

Then I utilize the following script, which will measure both boxes, find the one that is highest, and then apply that height to the shorter one:

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){

	box1height = $('#box1').height();
	box2height = $('#box2').height();
	if(box1height>box2height){
	$('#box2').css('height', box1height);
	}
	else {
	$('#box1').css('height', box2height);
	}
});
</script>

The result will be this:

Easy as that!

]]> http://wpwizard.net/jquery/jquery-boxes-of-equal-height/feed/ 0 Add jQuery to your Theme or Plugin http://wpwizard.net/jquery/add-jquery-to-your-theme-or-plugin/ http://wpwizard.net/jquery/add-jquery-to-your-theme-or-plugin/#comments Sat, 27 Feb 2010 13:41:53 +0000 Stian Andreassen http://stianandreassen.com/?p=394 I often use jQuery in the Themes and, without exception, in all the Plugins I write. You can easilly add jQuery to any HTML-document by simply linking to Googles jQuery-script, but this is not always without problems, especially if your sites employs several libraries.

jQuery is often added with this line between and <head> and </head>:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"</script>

But this can – among other things – cause latency in page loading, and is really not necessary as WordPress comes pre-packed with a lot of script-libraries, including jQuery.

To add jQuery (or Script-A-Licious or ProtoType) to your Theme, you simply use the wp_enqueue_script() function. In your Themes functions.php (if it doesn’t exists, simply create it) you add these lines:

<?php
function yourtheme_init(){
 wp_enqueue_script('jquery');
 wp_enqueue_script('jquery-ui-core');
}
add_filter('wp_enqueue_scripts', 'yourtheme_init');
?>

This will load jQuery on your site’s frontend. If you have plugins that use jQuery, the upshot of this method is that WP will not load jQuery multiple times (as it will if you add it manually to your Theme), and thus not cause conflicts.

To avoid jQuery conflicts you should also surround your scripts with this:

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){

YOUR SCRIPT HERE

});
</script>
]]> http://wpwizard.net/jquery/add-jquery-to-your-theme-or-plugin/feed/ 0 Remove IMG height and width with jQuery http://wpwizard.net/jquery/remove-img-height-and-width-with-jquery/ http://wpwizard.net/jquery/remove-img-height-and-width-with-jquery/#comments Mon, 18 Jan 2010 08:55:05 +0000 Stian Andreassen http://stianandreassen.com/?p=304 WordPress automatically adds inline width and height when you insert images into your Pages or Posts. This can cause layout problems, especially in IE, if you use CSS to change the dimensions of your images. For instance, max-width: 100px; height: auto; will not work in some browsers, because they resepect the inline height over the CSS.

The sollutions is simple: Remove the width and height attributes with jQuery. The following code between <head> and </head> will do the job:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){

	$('img').each(function(){
		$(this).removeAttr('width')
		$(this).removeAttr('height');
	});

});
</script>

Note that this code will remove width and height on all images. You can use class or ID selectors if you just want to remove it on some, say in the sidebar: $('#sidebar img').each(function(){

]]> http://wpwizard.net/jquery/remove-img-height-and-width-with-jquery/feed/ 5