Frontendplace Blog

Sharing Frontend developing ideas

Archive for the 'Scripting' Category

Javascript, CSS and XHTML and Actionscript information

Adding semantic snippets with microformats

Posted by info on 19th September 2010

One of the newly emerging open standards are microformats for adding more meaning to small blocks of content within your document markup.
Microformats are pieces of xml/xhtml to use in your html webpage that will format common used pieces of information. These represents things like people, events, tags etc.
They are readable for humans and machine and can be used to share between different applications.
One example is the vCard format for an address which is often used.

BEGIN:VCARD
VERSION:3.0
N:Smith;John
FN:John Smith
URL:http://smith.com/
TEL;TYPE=MOBILE,PREF:+336234567890
END:VCARD

and as markup formatted hCard.

<div class="vcard">
	<a class="url fn" href="http://johnsmith.com/" >
		JohnSmith
	</a>
	<span class="tel" >
		<span class="type">mobile</span>
		(<span class="type">pref</span>erred):
		<span class="value">+336234567890</span>
	</span>
</div>

Other example equivalent for name in vCard : N:Smith;John;Mr.;Esq.,Ph.D.

<span class="n">
<span class="honorific-prefix">Mr.</span>
<span class="given-name">John</span>
<span class="family-name">Smith</span>,
<span class="honorific-suffix">Esq.</span>,
<span class="honorific-suffix">Ph.D.</span>
</span>

You can find some tools to create these formats and find other information about these standards on http://microformats.org/

Some other formats:

People and Organizations
hCard, XFN
Calendars and Events
hCalendar
Opinions, Ratings and Reviews
VoteLinks, hReview
Licenses:
rel-license
Tags, Keywords, Categories
rel-tag
Lists and Outlines
XOXO
Moreā€¦
See the list of all microformats

Posted in Scripting | Comments Off

onUnload fires when using void(0) in anchor

Posted by info on 23rd August 2010

When you use an onclick handler on an anchor that does not return false and you use javascript:void(0) as a href be warned that the onunload will be fired. If you remove eventhandlers on the onunload to prevent memoryleaks then your eventhandlers will be removed when clicked on that anchor.

Posted in Scripting | Comments Off

Centrate your login form including extra header

Posted by info on 10th June 2010

login

Sometimes you need to make a login screen and center the login form vertically and horizontally. I made this crossbrowser example to create a
loginscreen screen. Look at the source how it is been done. You need a heightsetter span to center the content vertically.
But of course if you know the height and the width and these don’t change when changing the fontsize you can easily use the absolute positioning method:

#content{
	position:absolute; 
	top:50%;/*Moves object top edge to screen center*/ 
	left:50%;/*Moves object left edge to screen center*/ 
	margin-top:-250px; 
	margin-left:-250px;
	width:500px;
	height:500px;
	background-color:#3FC;
}

Posted in Scripting | Comments Off

Print Logo without having img tag in content

Posted by info on 29th May 2010

Ever wanted to have your logo to be printed when background printing is disabled and for accessibility reasons you don’t want to add the image tag in your markup and control the image source in your stylesheet.
I heard this week that you can still print images inside an html document without having an image tag in the content.

The magic trick: When you want the logo to be clickable you can set the anchor to be displayed as list-item and set the list-style-image. This image will be printed even when the background printing is disabled and you have a clean accessible markup.. Be aware that not all the style sheet rules can be used for the text inside the anchor, like negative text-indent, vertical-align and overflow:hidden (FF mac doesn’t show the tag);

See this example

Posted in Scripting | Comments Off

Average size font

Posted by info on 26th May 2010

Sometimes you wish to find out how many characters fits inside a specific width.. Here’s a test I tried to find out some width of familiar fonts.
Width test

This example uses 1000 characters to calculate an average width on my screen:
arial normal 10 px -> width 4650px -> Average 5px/char
arial normal 11 px bold -> width 5504px -> Average 6px /char
arial normal 10 px numbers -> width 5430px -> Average 6px per char
verdana normal 10px -> 5583px -> Average 6px char
arial normal 11 px bold -> 6495px -> Average 7px char
arial normal 10 px numbers -> 6448 -> Average 7px char

Posted in Scripting | Comments Off

Dynamic resizing div until bottom of screen

Posted by info on 16th May 2010

Sometimes you want the last div layer or iframe to be resized and have the scrollbar in stead of getting a scrollbar on the whole page. Here is an example script that calculates the height and width of the container respecting a given bottom and right space.
You need some extra functions to calculate the computed style and offset of the page. (note the initial height must be the smallest size if you are in standards mode)
This is a sample code that does the work and here are some examples with the remaining functions. (Look in the source).

/**
* Dynamically resize the wrapper div, which is generated by the table tag.
* @param {oElement}	object 	html node
* @param {iHeightSpace}	integer extra bottom space
* @param {iWidthSpace}	integer extra right space
* @param {bSetWidth}	boolean if width must be reset
* @param {iPercentage}	integer percentage of total available height
* @param {iMinHeight}	integer minimum height of container
* @param {bSetHeight}	boolean if height must be reset
*/
function maximizeDiv(oElement,iHeightSpace,iWidthSpace, bSetWidth, iFraction,
 iMinHeight, bFixHeight) {
	var EXTRA_BOTTOM_SPACE = (iHeightSpace)? iHeightSpace : 0;
	var EXTRA_RIGHT_SPACE = (iWidthSpace)? iWidthSpace : 0;
	var MINIMUM_HEIGHT = (iMinHeight)? iMinHeight : 60;
	var bFixHeight =  (bFixHeight)? bFixHeight : false; // default also change the height
	
	iFraction = (iFraction)? iFraction : 1; // set fraction of available height
	var wrapper = (oElement)? oElement : document.getElementById('scrollContainer');
	var iWidth= xGetComputedStyle(wrapper, 'width', true);
	var iHeight = xGetComputedStyle(wrapper, 'height', true);
	
	// get height of document
	var iDocumentHeight =  (document.documentElement.clientWidth > 0) ? 
document.documentElement.clientHeight : document.body.clientHeight;
	
	// get the top offset and add iExtraSpace
	var objectPosition = getOffset(wrapper);
	var iOffsetTop = objectPosition.top; /* only set when container is positioned relative */
	
	if(!bFixHeight){
		var iHeight = Math.floor(Math.max((iDocumentHeight - iOffsetTop - 
EXTRA_BOTTOM_SPACE)* iFraction, MINIMUM_HEIGHT))  // minimum height 2 rows of 21px 
		wrapper.style.height = getCssValue(iHeight);
	}
 	
 	// get width
 	if (bSetWidth){
 		var documentWidth =  (document.documentElement.clientWidth > 0) ? document.documentElement.clientWidth : document.body.clientWidth;
 		iWidth = Math.max(documentWidth - objectPosition.left - EXTRA_RIGHT_SPACE,300); // minimum width 
   		wrapper.style.width = getCssValue(iWidth);
   	}
 	return [iHeight,iWidth];
}

Posted in Scripting | 2 Comments »

window.onresize = body.onresize in IE6 standard mode

Posted by info on 11th February 2010

I did not know this before but sometimes the window.onresize does not fire when in standards mode in your webpage. In standard mode the body size will be the total size of the content not that of the window size. If you have fixed width elements in your body and get an scrollbar or have the html set to have overflow hidden in IE window.resize will not fire when you make the window smaller because the body size does not change. This is because in previous quirks mode the body size was the same as the window size. But Microsoft did not change the event triggering when standards mode was on the market and the body size was not the same as window size. You only have the possibility to set the height and width of the body to 100% but then you cannot have a padding on the body because in standards mode box model the padding gets added to the width and height. But then you still get problems when other elements like tables have a width of 100%. ( this will be 100% of the body and you get a scrollbar again)..Then you again have to go back to a layout with tables yak yak..
Also the resize in the horizontal space will be firing different then on the vertical space. When the page is loaded a (body) onresize is firing and when you change content you can get an infinite loop. Here is a jquery example to prevent this infinite looping : see http://noteslog.com/post/how-to-fix-the-resize-event-in-ie/

Posted in Scripting | Comments Off

Resizing font unobtrusive with jQuery and save in cookie

Posted by info on 23rd January 2010

Do you need an unobtrusive font resizing component which also remember the settings in a cookie?
With jQuery i’ve created a little piece of html and javascript. This piece can simply be loaded in your html container by using the jquery function load().

This is an unobtrusive way to add this component to your website and only is available in your source when javascript is enabled. Here is the simple code I used to add the functionality:

$(function() {
//show resize buttons
$('.resizers').load('setFontSizeComponent.html');
});

Inside the inserted piece of html I placed this javascript code block:

	//load the font-size cookie if it exists and change body font
	var currentFontSize = $('html').css('font-size');
	var currentFontSizeNum = parseInt(currentFontSize, 10);
	$.originalFontSize = parseInt($.cookie('fontsize'),10) || currentFontSizeNum;
	$('html').css('font-size',$.originalFontSize + 'px');
	$('.font-label').text('Size: ' + $.originalFontSize);

	// Reset Font Size
	$('.bh_resetFont').click(function(event){
		event.preventDefault();
		fsCResizeText(0);
	});
  
	// Increase Font Size
	$('.bh_increaseFont').click(function(event){
		// prevent url
		event.preventDefault();
		fsCResizeText(1);
	});
  
	// Decrease Font Size
	$(".bh_decreaseFont").click(function(event){
		// prevent url
		event.preventDefault();
		fsCResizeText(-1);
	});
	
	/**
	* resize html base font size. when 0 value is passed the original fontsize on start of the page is reset
	* @addition{integer} number to increase the fontsize
	*/
	function fsCResizeText(addition) {
		var newFontSize;
		if (addition == 0) { // reset size
			newFontSize = $.originalFontSize;
		}
		else {
			var currentFontSize = $('html').css('font-size');
			var currentFontSizeNum = parseInt(currentFontSize, 10);
			// set fontsize between 8 and 20 px
			newFontSize = Math.max(8,Math.min(20,currentFontSizeNum+addition));
		}
		$('html').css('font-size', newFontSize);
		
		// Create (or update) the value of a cookie:
		$.cookie('fontsize', newFontSize);	
		$('.font-label').text('Size: ' + newFontSize);
	}

You need the jquery library and the cooky plugin for jquery
Here you can find the simple example page
http://www.frontendplace.nl/bb/wp-content/uploads/2010/resizer/setpagesize.html

The separate component you can load here

Posted in Scripting | 1 Comment »

Conditional compilation does not combine well with javadoc

Posted by info on 8th December 2009

It took me a while to debug errors in javascript and found out that I had two external javascript files and in one javascript file the programmer used /*@cc_on!@*/ notation ( conditional compilation that works in IE). and in the other file the programmer used javadoc notation @param inside the comments. When the file with javadoc notation is loaded before the one with conditional compilation inside comments it works fine. But when I switch the loading sequence I get javascript errors.. So removing the comments or using a different loading sequence helped with solving the error.

Posted in Scripting | Comments Off

nested floats

Posted by info on 26th October 2009

When nesting a right floated box inside a left floated element. A right floating element will expand the containing left floating element to the width of the parent of the left floated element in IE6. According to W3C the left floating element should base its width on the width of the containing children.
In FF and SF (W3C) the total width will be the width of the containing children. A right floating element does not expand the left floating element to the width of the containing box of the left floated element.


Picture 11
FF

Picture 10 SF

Picture 12 IE

For testing purposes this example uses also attribute selectors.
IE6 ignores the attribute selector while Safari up till 4.0.3 ignores the :not() pseudo attribute syntax.
FF recognize both the [ attr ] and :not([attr]) syntax.
See
testattribute

Posted in Scripting | Comments Off