MaggsWeb:7 » Javascript

Creating a ‘Search Engine Friendly’ URL

admin — Mon, 28 Jun 2010 09:34:47 +0000

Creating a ‘Search Engine Friendly’ URL automatically from another field, ie: the Title

Font-size ReSize with JQuery

chris — Wed, 14 Apr 2010 11:24:00 +0000

Ever wondered how to do the Increase/Decrease font sizes without reload…?

 $(document).ready(function() {
    $("a.Styleswitcher").click(function() {
        $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
    });
});

Then put the links somewhere prominent, most likely chganged to images.

^?View Code HTML

    Default Theme
    Red Theme
    Blue Theme

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);
}

Browser detection with JQuery

chris — Tue, 15 Dec 2009 14:22:46 +0000

Want to determine the browser version for conditional Javascript/JQuery ? Use JQuery then.

^?View Code JAVASCRIPT

 
if( $.browser.safari ) {
    //Safari
} elseif ($.browser.msie && $.browser.version > 6 ) {
    //IE v7+
} else if ($.browser.msie && $.browser.version <= 6 ) {
    //IE  -v7
} elseif ($.browser.mozilla && $.browser.version >= "1.8" ) {
    //FF2+
}

CSS ‘content’ attribute

chris — Wed, 21 Oct 2009 18:49:20 +0000

This is a new one, and pretty cool. The ‘content’ attribute automatically adds code / text / attributes to the start or end of any tag, depending on the pseudo class.

For example:

^?View Code CSS

 
a:after {
  content: "" attr(href) "";
}
 
a.external:after{
  content: "(Link opens in a new window)";
}
 
a.pdf:before {
  content: "";
}

Would automatically add the content of the ‘href’ attribute of the link code to the end (because we used ‘:after’) of the link text.
Would automatically add the quoted text to the end of the link text. See how this is applied to a ‘class’ of ‘external’.
This one adds an icon to the beginning of the link text, and is controlled by the ‘class’. Imagine having classes for each type of document link…..

Web 2.0? Nah, this is CSS3!

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