Equal Div Height with JQuery

jQuery, Wordpress, , , Leave a comment

jQuery is a fast solution if you need support on your  HTML layout. Having an issue to keep your divs in an equal height? Check out this cool and easy script to keep your divs in an equal height: jQuery Match Height Plugin.

If you are on WordPress, you can try this simple line on ‘functions.php’ file:

function add_custom_script() {
	wp_enqueue_script( 'match-height', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js', array('jquery'));
}
add_action( 'wp_enqueue_scripts', 'add_custom_script' );

Call the function on header or footer:

function inject_script() {
	echo <<< EOT
		<script type="text/javascript">
		jQuery(document).ready(function(){
			jQuery('.map .column-4').matchHeight();
		});
		</script>
	EOT;
}
add_action('wp_footer', 'inject_script');

Or you can simply use a plugin to add the codes above.

 

Add Lightbox Script to Your WordPress Blog

How To, jQuery, UI / UX Design, WordpressLeave a comment

There are bunch of WordPress plugins to handle Lightbox / popup / modal into your blog easily. But doing it manually is always a challenge. I love working with Magnific Popup recently, not just its fast and lightweight script, also it free to use. I also use this script in one of my plugin. Continue reading “Add Lightbox Script to Your WordPress Blog”

JQuery Rename Attribute Function

jQueryLeave a comment

JQuery currently not support ability for Attribute renaming. Well, I’m not quite handy with Javascript, so I searched the net, and found a generous people sharing his code:

[javascript]
jQuery.fn.extend({
renameAttr: function( name, newName, removeData ) {
var val;
return this.each(function() {
val = jQuery.attr( this, name );
jQuery.attr( this, newName, val );
jQuery.removeAttr( this, name );
// remove original data
if (removeData !== false){
jQuery.removeData( this, name.replace(‘data-‘,”) );
}
});
}
});
[/javascript]

Here’s how to use it:
[js]
// $(selector).renameAttr(original-attr, new-attr, removeData);

// removeData flag is true by default
$(‘#test’).renameAttr(‘data-test’, ‘data-new’ );

// removeData flag set to false will not remove the
// .data("test") value
$(‘#test’).renameAttr(‘data-test’, ‘data-new’, false );
[/js]

Code From Wowmotty