Archive for Javascript
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 »
Chris Heilmann from Yahoo is in the office today and he’ll have three talks throughout the day out of which I plan to attend two.
He’s just finished his first talk about the future of Javascript and the web.
It was a very high-level talk without too much technical details as there were a lot of business people attending but it was very interesting still. it wasn’t so much how to do things but more what you can do and where we are going with Web3.0, sharing and integrating web applications.
The second talk will be about web performance. From what i understand he’ll show us tips & tricks, what to do, what not to do etc.
I’ll try to get my head around the talk during the weekend and summarize the two when I have digested the contents of them.
2008/12/05 12:42 | Javascript - Programming - Web Development | 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 »
I just stumbled across some interesting news, or acctually a co-worker did and sent me the info.
Earlier today jQuery’s weblog announced that Microsoft and Nokia will ship products with jQuery as part of the bundle.
According to the weblog Microsoft is going to ship Visual Studio with jQuery as a complement to their ASP.NET AJAX Framework and Nokia will incorporate jQuery into their widget plaform enabling it for their cellphones.
This is good news as it doesn’t only mean that jQuery probably will become stronger from this but also that I made the right descision when I picked jQuery back when I compared it with a few other libraries. See jQuery in action at photo.nordenfelt.com.
Sources:
http://jquery.com/blog/2008/09/28/jquery-microsoft-nokia/
http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx
2008/09/28 22:47 | Javascript - Programming - Web Development | Trackback | No Comments »
I recently built a function which was supposed to generate a file and download it from a website.
The idea was that you had a list of items, you selected a number of them and hit post.
The selected items was posted via AJAX to a PHP script and that PHP script responded with a file that you would be able to download directly (ie. instead of actually showing a web page, the browsers download window should open. This didn’t work.
At first I couldn’t understand what was wrong and assumed that my PHP script somehow messed the file up but in the end it turned out to be AJAX. The browser received the contents of the file and the headings were correct and everything looked good but it still didn’t work.
I changed the call to standard JavaScript and it worked like a charm.
window.location = 'http://www.domain.com/path/to/download-script.php';
So the conclusion is: Don’t use AJAX when you want to initiate a file download in the browser, use window.location instead.
2008/08/27 8:45 | Javascript - Programming - Web Development | Trackback | No Comments »
Javascript debugging has been a tedious task for a very long time. Then, suddenly, FireBug came and made it simple.
With logging, variable dumps and linked errors it became quick and painless to debug your faulty javascript, as long as you use FireFox.
I use FireFox all the time but everyone who has written javascript sometime knows that even though a script may work flawless in one browser it can crash in another and when the other browser in Internet Explorer you’ve basically been fcked. The debug output IE gives for javascript errors is worthless at best and leaves you second guessing what line might have caused the problem. The only way to find out for sure is to alert-debug the script until you find the right row, if you’re lucky.
Today was a big day though. I’ve finally found the perfect tool to debug javascript, not only in FireFox but in any browser from IE to Safari and the name of it is … *drumwhirl*… FireBug Lite!
Yes it’s true! FireBug acctually has a light version in Javascript that gives you most of the tools of the FireFox plugin. What a tremendous little treat for us front end developers. Happy days!
2008/07/25 14:45 | Javascript - Programming | Trackback | No Comments »
