MaggsWeb:7 » Javascript

jQuery show/hide DIV & Image

chris — Fri, 05 Feb 2010 08:31:55 +0000

Show/Hide areas are common place now all over the web and are an easy way to display large amounts of information that may/may not be useful to all readers. The [+] and [-] images are the key, and changing these must be seamless..
Enter jQuery.

^?View Code JAVASCRIPT

 
    $(document).ready(function() {
 
      $('.searchItem').hide();    //initial hide 
 
	  $('a#showHideBtn').toggle(
		   function(){ 
				$('.searchItem').show('slow');
				$('#showHideImage').attr('src','../images/hide.gif');
		   }, function() { 
				$('.searchItem').hide('slow');
				$('#showHideImage').attr('src','../images/show.gif');
		   });
 
      });

Display filesizes

chris — Fri, 05 Feb 2010 08:26:40 +0000

Ever clicked a link only to find out that the image/download was massive and you wished you hadn’t? Wouldn’t it have been nice to have an idea of the file-size when hovering over the link?

^?View Code JAVASCRIPT

 
function byteConvert(num) {
	var result = 0;
	var unit = "";
 
	// Set unit variables for convenience
	var bytes = 1;
	var kb = 1024;
	var mb = 1048576;
	var gb = 1073741824;
 
	// Check for non-numeric or negative num argument
	if (not isNumeric(num) OR num LT 0)
		return "Invalid size argument";
 
	// Check to see if unit was passed in, and if it is valid
	if ((ArrayLen(Arguments) GT 1)
		AND ("bytes,KB,MB,GB" contains Arguments[2]))
	{
		unit = Arguments[2];
	// If not, set unit depending on the size of num
	} else {
		  if      (num lt kb) {	unit ="bytes";
		} else if (num lt mb) {	unit ="KB";
		} else if (num lt gb) {	unit ="MB";
		} else                {	unit ="GB";
		}		
	}
 
	// Find the result by dividing num by the number represented by the unit
	result = num / Evaluate(unit);
 
	// Format the result
	if (result lt 10)
	{
		result = NumberFormat(Round(result * 100) / 100,"0.00");
	} else if (result lt 100) {
		result = NumberFormat(Round(result * 10) / 10,"90.0");
	} else {
		result = Round(result);
	}
	// Concatenate result and unit together for the return value
	return (result & " " & unit);
}

Catching a keyPress..

chris — Tue, 04 Aug 2009 10:51:33 +0000

…like ‘Enter’ for instance.

^?View Code JAVASCRIPT

function handleEnter (field, event) {
  var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
  if (keyCode == 13) { 
        //do something, eg:
	submitForm();
  } else {
   return true;
  }
}

Print a Page, or Print a Section

chris — Sun, 26 Jul 2009 10:08:31 +0000

This is another functionality that I have been looking or for a while. I haven’t tried it yet, but intend to add this to my default toolbox! I am sticking it here for now – and will update this when I have used it.

^?View Code JAVASCRIPT

 
function printPageComponent() {
  html  = '';
  html += '  \n";
  html += "Print this page";
  html += "";
  return html;
}

Cross-browser bookmark link

chris — Sun, 26 Jul 2009 09:56:56 +0000

‘Bookmark Me’ is a sort of IE thing and doesn’t usually work in FireFox, Safari, Chrome, etc.. so as a FireFox user I’ve never bothered with a bookmark links before.
FireFox users know that Ctrl+D is the shortcut for these browsers, and that most ‘Bookmark Me’ links just aren’t work clicking – as they won’t work.

And then I found this…

^?View Code JAVASCRIPT

 
function bookmarkIt(){
if(document.all){
   window.external.AddFavorite(location.href,document.title);
   }
else if(window.sidebar){
   window.sidebar.addPanel(document.title,location.href,'');
   }
}

…although I haven’t actually used it yet.

CSS fixes for IE, using Javascript

chris — Fri, 13 Mar 2009 09:54:16 +0000

Some CSS effects don’t work in IE, damn them, so that leaves 2 options.

Either forget that you have coded some nice roll-over effects that the majority of people wont see…

Or, add an IE-specific javascript fix.

^?View Code CSS