Frontendplace Blog

Sharing Frontend developing ideas

a Blog for frontend Webdevelopers

This frontendplace aims to offer web development and 3D modelling tutorials, tips and tricks. Written by a web-developer and multimedia consultant who is passionate about web standards, webdevelopment and 3D visualisation.

unspecified error in IE8 with prototype

Posted by info on November 1st, 2010

When the fireEvent method is called in the prototype.js library I sometimes get an “unspecified” error in internet explorer 8. The reason I get this error is because I have replaced some elements with an AJAX call and on these elements I have attached some eventHandlers. In IE8 somehow these replaced elements are still alive and react on events fired. If this element doesn’t exist anymore in the DOM tree the “unspecified” error is shown in IE8. The solution we have made:

  1. Cache the eventlisteners in Array
  2. Add destroy function to remove these eventlisteners from this object
  3. When an event is called check if this element has parents. if not call destroy function



We had the following code:

setListener : function(targetId, eventName){
		targetId = targetId.replace(/^#/,"");
		if (this.listeners[targetId]){
			return;
		}


		this.listeners[targetId] = true;
		var targetElement = $(targetId);
		if (!targetElement) return;

		targetElement.observe(eventName || "element:afterUpdate",function(event){
			var elementId = event.element().identify();
			if (event && targetId == elementId) {
				var url = event.memo.url;
				this.showActive(url, 1);
			}
		}.bindAsEventListener(this));
	},

and changed it to:

		var targetElement = $(targetId);
		if (!targetElement) return;

		// cache all listener data so it can be removed later on
		this.listeners[targetId] = {
			handler: function(event){
				var elementId = event.element().identify();
				if (event && targetId == elementId) {
					var url = event.memo.url;
					this.showActive(url, 1);
				}
			}.bindAsEventListener(this),
			eventName: eventName || "element:afterUpdate",
			element: targetElement
		};

		targetElement.observe(this.listeners[targetId].eventName, this.listeners[targetId].handler);

and added in the eventhandler:

		// stop if behaviour is destroyed or element is no longer part of DOM
		if (this.destroyed) return;
		if (!this.element.hasDocumentAncestor()){
			this._destroy();
			return;
		}


added this extra method:

/*
	Property: _destroy
		Destroy behaviour of this component if element is no longer part of the DOM
	*/
	_destroy : function(){
		// remove event observers
		for (var key in this.listeners){
			var listener = this.listeners[key];
			if (listener.element) listener.element.stopObserving(listener.eventName, listener.handler);
		}

		this.destroyed = true;
	}

Posted in 3D Tutorials | Comments Off

Adding semantic snippets with microformats

Posted by info on September 19th, 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 August 23rd, 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 June 10th, 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 May 29th, 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 May 26th, 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 May 16th, 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 »

find the right color combination

Posted by info on March 28th, 2010

Every webdeveloper knows that a good design comes with a well defined colorscheme.. You can find good color weels inside the adobe products but also online adobe gives you the tools. Look at http://kuler.adobe.com/#create/fromacolor to create your own color scheme.

What is a Color Wheel?

A color wheel is an illustrative model meant to aid people in picking colors that look good together. Though there are countless variations of the color wheel, the most common model is a wheel of twelve hues that comprises three core colors and their derivatives. Let’s take a closer look at its construction.

color

Primary, Secondary, and Tertiary Colors

Primary Colors

Three unique colors, known as primary colors, provide the basis for the color wheel. These are red, blue, and yellow. Mixing equal portions of each of these three hues produces white.

primary_color

Secondary Colors

Secondary colors are formed by mixing together equal portions of any two primary colors. These include green, orange, and purple.

secondary_colors

Tertiary Colors

Tertiary colors are the result of mixing a primary color with a neighboring secondary. For example, mixing equal portions of green and yellow creates a hue known as yellow-green. As you can see, the tertiary colors complete the color wheel.

tertiary

Warm and Cool Colors

The colors of the color wheel can be divided into two categories according to the atmosphere and emotions they provoke. Vivid hues that bring about a sense of warmth are labeled warm colors. This includes hues from red-violet to yellow.

Hues that generate the exact opposite feeling are called cool colors. They are more passive than warm colors and tend to be associated with cool temperatures and relaxation. All hues from yellow-green to indigo are considered cool colors.

cool_warm

Neutral Colors

Weaker colors that draw little attention to themselves are known as neutral colors. These include shades of white, black, and gray. Neutrals are very easy to work with since they blend easily with almost any color scheme.

Color Schemes

The color wheel is a valuable tool when it comes to choosing a color scheme. There are a few methods available for using the wheel to select a combination of colors that harmonize with each other.

Monochromatic

Using different shades and tints of one single color is called a monochromatic scheme, which is perhaps one of the safest and easiest to work with. The monochromatic scheme is light on the eyes and gives off a soothing and balanced air. One drawback to this scheme is that accenting focal points of a design becomes more difficult due to the lack of color contrast.

monohromatic

Analogous

One might think of analogous colors as neighbors since they are adjacent to each other on the color wheel. Analogous colors inherently look good together since they have similar origins. This scheme is often found in nature.

The monochromatic and analogous color schemes really have a lot in common. They are both easy to work with and provide an atmosphere of balance. However, an analogous scheme offers a bit more contrast. It is best to avoid adding too many hues and combining warm and cool colors together when working with this scheme.

analogous

Complementary

Any two colors located opposite of each other on the color wheel are termed complementary colors. As implied, complementary colors enhance each other and almost always look great together. You see this scheme in many aspects of your everyday life. For example, the reds and greens of Christmas.

The high contrast between two complementary colors produces a bold, vibrant effect that draws maximum attention to itself. However, this scheme does not always work well in large doses. You can avoid overdoing it by selecting one dominant color and using subtle hints of the other. Note that using two sets of complementaries is known as a tetradic scheme.

complementary

Split Complementary

The split complementary scheme is derived from the complementary color concept. You get such a scheme when you take a base color and the two neighbors of its complementary color (opposite). Though more difficult to balance than a monochromatic or analogous scheme, a split complementary scheme offers the contrast of complementary colors without the intensity.

split_complementary

Triadic

Using any three colors equally spaced around the wheel is known as a triadic scheme. For example, green, orange, and blue. The effect of a triadic color scheme is very similar to that of the split complementary scheme in that it produces a vibrant yet subtle effect. The best way to balance triadic colors is to select one dominant hue and use the remaining two for accent.

color

Applying Color Theory

By no means is color theory meant to be a definitive guide for decorating an interior. It is a system that provides a basic understanding of color and a set of concepts meant to be experimented with. Take some of these schemes and experiment with them to gain your own practical knowledge of color and design. You can start by using one of the many tools available in the internet for working with the above mentioned color schemes as well as others. Look at Kuler from Adobe.

Text source : http://www.belightsoft.com/products/resources/using-the-color-wheel.php

Posted in Uncategorized | Comments Off

window.onresize = body.onresize in IE6 standard mode

Posted by info on February 11th, 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 January 23rd, 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 »