I don’t work that much with flash, especially I don’t tend to show and hide objects on a website with Javascript. Today was an exception.
Apparently, when you hide an flash object with Javascript and then show it again, toggle the visibility if I may, the flash will reload every time you show it. That’s quite annoying, especially if loading the flash involves server calls and such.
It took me a while to confirm that this was actually my problem but once I knew exactly where the problem lie I already had a solution in mind.
Instead of showing/hiding the flash object I move it out of the view by setting the left margin to -10000px. Only doing this will however make sure that the flash still occupies the space it was in and I want to swap the content where the flash was for another div. By positioning all these divs absolute that problem was taken care of. Great news for my end users 
I won’t post example code as all you really need to do is set position: absolute in the css and then toggle margin-left between 0 and 10000px (or any other value that you like and is enough to hide it) in your Javascript code.
2009/08/25 15:22 | jQuery | Trackback | 4 Comments »
This may, or may not be, the final version of the check all function.
The main diffrence this time is that it’s accutally a jQuery function.
You simply enable it by wrapping a group of check boxes in som kind of box (fieldset, div, td, table, or anything else that feels good) and set a class on the wrapper.
<div class="checkbox-wrapper">
<input type="checkbox" name="box1" />
<input type="checkbox" name="box2" />
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".checkbox-wrapper").checkall();
});
</script>
Include this function:
/*
* jQuery function: checkall
* Description: Adds a check all box that will toggle the checkboxes within the parent element.
* Options: text: The text that is displayed next to/the toggle box. Default is "Select/Deselect All"
*/
(function($){
$.fn.checkall = function(options){
var defaultoptions = {
text: "Select/Deselect All"
};
var options = $.extend(defaultoptions, options);
return this.each(function(){
var obj = $(this);
obj.append('<label><input type="checkbox" class="checkallselect" /> '+options.text+'</label>');
$(obj.find('.checkallselect')).click(function()
{
obj.find('input[@type=checkbox]').attr('checked', $(this).is(':checked'));
});
});
};
})(jQuery);
2008/12/09 12:47 | Javascript - Web Development - jQuery | Trackback | 2 Comments »
Go here for the final verison of jQuery check/uncheck all
I had a chat with a colleague about my check/un-check all function yesterday.
He liked the idea but felt it was a bit too obtrusive so I’ve rewritten it a bit.
It doesn’t affect your DOM much at all and if you don’t have javascript enabled you won’t see the checkall option any more.
The HTML
The fieldset I’ve used in this example can be exchanged for any other container such as a div, p td or what ever suits you. You can also add what ever mark up you want around the check boxes.
<fieldset class="checkallgroup">
<input type="checkbox" /> Box 1
<input type="checkbox" /> Box 2
</fieldset>
$(document).ready(function()
{
$('.checkallgroup').append('<label><input type="checkbox" class="checkallselect" />&amp;amp;amp;amp;nbsp;Select/Deselect All</label>');
$('input.checkallselect').click(function()
{
if($(this).data('status') === undefined || $(this).data('status') == 'true')
{
$(this).parent('<label>').parent('.checkallgroup').find('input[@type=checkbox]').attr('checked', 'checked');
$(this).data('status', 'false');
}
else
{
$(this).parent('<label>').parent('.checkallgroup').find('input[@type=checkbox]').removeAttr('checked');
$(this).data('status', 'true');
}
});
});
2008/12/03 10:57 | Javascript - Programming - Web Development - jQuery | Trackback | No Comments »
Go here for an updated version of this script!
I googled around a bit for a simple solution to use check/uncheck all checkboxes using jQuery today but I couldn’t find a simple generic solution to the problem so I wrote my own instead.
It will keep track of multiple instances of check all groups on the same page and toggle the status of the boxes when clicked multiple times.
HTML Mark-up
First off you’ll need a bit of html: A couple of check boxes and a select all box.
A couple of things to consider in the mark up:
1. The class of the checkboxes must be the same as the value of the select all for that group.
2. The id of the select-all box must correspond to the id of the div layer containing the status.
<input class="group_1" name="boxes_1[]" value="somevalue_1" />Checkbox 1
<input class="group_1" name="boxes_1[]" value="somevalue_2" />Checkbox 2
<input class="group_1" name="boxes_1[]" value="somevalue_3" />Checkbox 3
<input type="checkbox" class="nn-checkall" value="group_1" id="checkall_1" />Select/Deselect All
<div id="checkall_1_status">true</div>
<input class="group_2" name="boxes_2[]" value="whatever_1" />Checkbox 1
<input class="group_2" name="boxes_2[]" value="whatnot_2" />Checkbox 2
<input type="checkbox" class="nn-checkall" value="group_2" id="checkall_2" />Select/Deselect All
<div id="checkall_2_status">true</div>
The jQuery Code
The value of the select-all keeps track of which boxes to toggle.
Using the id of the select-all we get the current status from the div layer.
$(document).ready(function()
{
$('.nn-checkall').click(function()
{
var $sClass = $(this).val();
var $check = $('#' + $(this).attr('id') + '_status').text();
if($check == 'true')
{
$('input[@type=checkbox].' + $sClass).attr('checked', 'checked');
$('#' + $(this).attr('id') + '_status').text('false');
}
else
{
$('input[@type=checkbox].' + $sClass).removeAttr('checked');
$('#' + $(this).attr('id') + '_status').text('true');
}
});
});
Finally I just want to add that you probably want to hide the status layer using css (display:none;) and that the mark-up validates against W3C.
I’d also like to add that this solution can be improved and made even more dynamic if you’d like. It would be very simple to add a parent div layer and not have to add classes to the boxes for example but I chose this mark up mainly because it is unobtrusive. After all, div layers has properties of its own… Cheerio
2008/11/28 14:36 | Javascript - Programming - Web Development - jQuery | Trackback | No Comments »
