There are some new CSS tricks coming out that will allow for this to be done natively, but until then, here’s a way to make sure that all elements in a page, say gallery thumbnails or excerpts from posts, all display their full texts and are all sized the same. Without using this fix after page load, some elements may display taller than others, and if these elements are floating in the page, they may definitely not display in a nice even grid as intended.
With a few lines of jQuery (make sure you load the newest version via CDN) you just simply assign the elements you want to have the same height with the same unique class, like “same-height-group-1” or something short you can remember. Then, change out the “.class-to-resize” in the script below with the actual class you assigned the elements. From now on, after a page loads, all the elements assigned that same class will all have the same height, and you will never have to worry about those “sticky” floating blocks that ruin the whole look of your page.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <script type="text/javascript"> // You might probably want to envelope the below in a $(document).ready() function max_h=0; $(".class-to-resize").each(function(){ this_h=$(this).height(); if (this_h>max_h) { max_h=this_h;} }); // Now, cycle through again to resize all elements to the maximum height if (max_h>0){ $(".class-to-resize").each(function(){ $(this).height(max_h); }); } </script> |
check checkbox with specific value ( using jQuery )
To check/uncheck checkbox with specific value using jQuery.
To check checkbox with id lead with “chk_hobby_” and has value = 7 :
?
1
$(“#data-form input[id^=’chk_hobby_’][value=7]”).prop(‘checked’,true);
To uncheck checkbox with id lead with “chk_hobby_” and has value = 2 :
?
1
$(“#data-form input[id^=’chk_hobby_’][value=2]”).prop(‘checked’,false);
HTML Sample :
?
1
2
3
4
5
Hobby
Swimming
Watching Movie
Bowling