Frontendplace Blog

Sharing Frontend developing ideas

Archive for the 'Scripting' Category

Javascript, CSS and XHTML and Actionscript information

Multicolumn in firefox and safari

Posted by info on 24th October 2009

For the developers who like to use the extra CSS draft 3 possibilities and don’t want to wait until internet explorer supports this. You can use the multi column properties :column-width, :column-gap and :column-rule. Coloring the selected text is an other example in draft3 css property
Example:
multicolumn

<style type="text/css">
div {
	column-width: 18em;
	column-gap: 2em;   /* shown in yellow */
	column-rule: 4px solid green;
	padding: 5px;      /* shown in blue */
	-moz-column-count:2;
	-moz-column-width:18em;
	-moz-column-gap:2em;
	-moz-column-rule: 4px solid green;
	-webkit-column-count:2;
	-webkit-column-width:18em;
	-webkit-column-gap:2em;
	-webkit-column-rule: 4px solid green;
}

/* draw any selected text yellow on red background */

::selection {color: gold; background: red;}
::-moz-selection {color: gold; background: red;}
::-webkit-selection { color: gold; background: red;}

/* draw selected text in a paragraph white on black */
p::-moz-selection { color: white; background: black;}
p::selection { color: white; background: black;}
p::-webkit-selection { color: white; background: black; }
</style>

Example: Multi column draft3

See for documentation:

http://www.w3.org/TR/css3-multicol/

https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions

Posted in Scripting | Comments Off

Finding the default stylesheets

Posted by info on 23rd October 2009

Sometimes you want to know what the default values are for properties of the styling of elements inside your browser: I don’t know yet were to find the default stylesheet for IE but for Firefox you can look in:

C:\Program Files\Mozilla Firefox\res or type resource://gre/res/ in your address bar. There you find the following stylesheets:

1. EditorOverride.css
2. forms.css
3. html.css
4. mathml.css
5. quirk.css
6. svg.css
7. ua.css
8. viewsource.css

For the setting of the current Safari you can look at: http://trac.webkit.org/browser/trunk/WebCore/css/html.css

Look for explanation of this stylesheet on:

http://developer.apple.com/mac/library/documentation/AppleApplications/Reference/SafariCSSRef/Introduction.html

For Opera you can look in the templates folder inside the package(on mac) or in the folder(on windows)

Posted in Scripting | Comments Off

Width error calculations in IE

Posted by info on 19th October 2009

I have found an error in ie6 where the margin (left/right) gets calculated wrong when you put the table inside an other table and use a quirksmode doctype.

See doctypeerror ( add with developer toolbar a margin-left of 0.5% on one of the elements)

See doctypenoerror where you don’t get the error.

When using a quirksmode doctype ( none or half) the content gets a really absurd width when you apply a margin-width in percentage on an element inside a tablecell where the table itself is inside an other table. Here is the example and some screencaptures what I mean. 

Adding a margin-right  on a span inside a not nested table is correctly calculated
marketdata_016

Adding a margin on a span inside a nested table is correctly wrong and gets an absurd width (57276px).
marketdata_020

Posted in Scripting | Comments Off

Three ways for clearing floats

Posted by info on 18th October 2009

For now I know three ways of clearing the floats:

  1. using extra markup after floating element with div element and style=”clear:both”
  2. using the :after syntax of a container with floating objects where you create a hidden content and clear the float using the syntax:
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

  3. using the overflow:auto on the container with a property that triggers “haslayout” mostly width:100% what is basically what you want when clearing both.

The last one is supposed to be used as the best option according to quirksmode: http://www.quirksmode.org/css/clearing.html.
I think that using the  three options can all have there benefits.. In development a container for floating elements is not always possible and then you have to resort to the clearer div. The overflow:auto is not always possible when un-wrappable content is inside the container and you get the scrollbars. So my opinion: use version 3 where possible and it is logical to combine the inner divs for grouping the elements. For creating a layout the clearer div can sometimes be of better help. The second one is depending on the IE bug where content will grow the box even if the box does have a smaller height and you need the extra zoom:1 or height:1px inside a conditional commented stylesheet.
So better use the third one whenever possible. see clearingfloats

Posted in Scripting | Comments Off

IE and FF calculating width

Posted by info on 18th October 2009

In IE the calculations get really stuck if you have different paddings on the tablecells. In SF and FF if one cell of a row or column (depending of left/right or bottom/top padding) has a padding than every cell in that row or column gets the same top/bottom padding.. In IE that is not the case depending of the rounded calculation a cell can have a padding and the other cell does not. Sometime two cells in the same column can have different widths so you get a broken column line when using borders on cells.

Also because IE and SF rounds the results (45.5 will result in 45 instead of 46 ) there can be a difference in total pixels when rounding the result.

Browsers are inconsistent in the way they round sizes in percent-based layouts. Safari and Opera round down, Internet Explorer rounds up and Firefox rounds one column up and one down filling the container completely. These rounding issues can cause inconsistencies in some layouts. You can use a 1px negative margin to fix IE.

When using two complementary widths in percentages than the result can be more or less than 100%. But the rounding will be different for all calculations so if you have a width of 74.5% of an element or have a width of 74% and a 0.5% margin-left than you get twice the rounded result and the total can have a bigger total width. Like in this table width comparison example .

I have also seen in IE6 that using a percentage of 0.5% margin results in a huge sized margin.. don’t know yet why.. by removing the 0.5 margin the span got its right size back again.

IE6resizing
testtable

Posted in Scripting | Comments Off

Optimization checklist

Posted by info on 18th October 2009

Here is a checklist I use for optimizing a website:

Optimization checklist:

  • optimize markup
    • use external stylesheets
    • use external javascript
    • specify doctype strict (renders quicker)
    • minimize http requests (example: create image sprites (group images for hover effects together inside one image))
    • consolidate markup
    • structural markup
    • avoid tables for presentation
    • remove excess whitespace (space, tabs, returns)
    • minimize comments ( no “———”)
    • avoid redundant elements and attributes
      • <div class=”a”><ul class=”b”><li class=”c”><span class=”d”><span class=”e”><a class=”f”>
    • include height and width and alt text when using images
    • minimize url
      • use relative for internal use where possible
      • streamline links.. remove directory default filename
      • remove www when possible
    • ensure template markup is semantic, structural, and valid
  • optimize CSS
    • minimize css comments
    • use separate stylesheet for maintenance and different media
    • remove redundant whitespace
    • group selectors with same declaration
    • use shorthand notation
      • shorthand selectors
        • font: weight style variant size/line-height family
        • background: color image repeat attachment position
        • margin | padding | border-style/width/color: top right bottom left
        • border | border-top/right/bottom/left: width style color
        • list-style:type position image
      • shorthand color values (#FF0 instead of yellow or #FFFF00)
    • shorten id and classNames
    • use highest level parent where possible using inheritance
    • assign multiple css classes to a single element example <span>
    • validate css
  • optimize javascript
    • use JS to enhance rather than to create user experience
      • use css’s hover possibility where possible
    • separate files to javascript objects or libraries
    • use defer for IE where no markup is produced by javascript to load after the content
    • encapsulate code into functions
      • window.onload = init() or preferred use event handlers
    • load externals conditionally where possible
    • rework code to make it simpler
    • group functions in objects – prevent creating unnecessary variables
    • prevent recalculations
  • optimize server
    • include trailing slashes on the urls
    • use html compression (gzip)
    • optimize images, multimedia, alternative format files
    • for larger images provide thumbnail versions
    • use html for caption inside pictures
    • remove obsolete files like images

Posted in Scripting | Comments Off

Adding More and less links on article with jQuery example

Posted by info on 6th June 2009

Here is an example how to add a more and less link to an article list in an unobtrusive way with jQuery.



(function($)
{	
	$.fn.setMoreLess = function()
	{
		return this.each(function()
		{
			var $article = $(this);
			// get the link in the heading
			var $articleLink = $article.find('>h3 a');
			// get first paragraph
			var $firstParagraph = $article.find('p:first');
			// get element to show when more is pressed
			var $more = $article.find('.more');
			
			// hide related article based on the hash of the link
			$articleLink.find(this.hash).hide().end()
				// add click event to toggle article
				.click(function($e)
				{
					$e.preventDefault();
					$(this.hash).toggle();
				})
				// initial hide
				.click();
			
			// add more and less links on paragraphs
			$firstParagraph.append('<a class="actionLink" title="more" href="#">More</a>')
			.end()
			
			// append less link to .more element
			$more.append('<a class="actionLink" title="less" href="#">Less</a>').hide()
			.end()

			// add eventhandlers on added links
			$firstParagraph.find('a.actionLink[title=more]')
							.click(function($e)
							{
								$e.preventDefault();
								var $more_link = $(this);
								// hide more link	
								$more_link.hide();
								
								// show more
								$more.show()
									// find less link
									.find('a.actionLink[title=less]')
										// add click event on less link
										.click(function($e)
										{
											// show more link again
											$more_link.show();
											// hide parent
											$more.hide();
										}); // end click less
								
							}); // end click more
		}); // end each  
	}//end function setMoreLess
	
	// add moreless click events on ready
	$(function() 
	{
		 $('.ct_uitgebreidArtikel').setMoreLess();
	});
		
})(jQuery)

Posted in Scripting | Comments Off

Having problems printing in IE6?

Posted by info on 17th April 2009

We had a problem with printing tables with thead and tfoot on internet explorer for a while. When printing long tables an extra page would be printed before the table  and the borders and page headers and footers did not print right at the table spanned pages. This was such a big issue for the client that we called the help of microsoft support ;not for free;-( The support pages on microsoft won’t help you with this problem so I’ll tell you here.  After a long test period this solved our problems: 

The problem was in de rule:
.containerOutline,.containerLeft,.containerRight,.container,.hspace { overflow-y:auto; }

The solution:
If you have a rule for overflow-y: auto remove this for printing. In the print stylesheet remove “overflow-y:auto;” by setting the overflow rule only for screen (@media screen) in a dedicated IE6 css file.

Posted in Scripting | Comments Off

dynamic attach movieclip by classname reference in AS3

Posted by info on 24th December 2008

In actionscript3 it is possible to add a movieclip to the stage by the class reference. It’s not so obvious though

To add a movieClip on stage you have to use the addChild method. You can get the movieclip reference in actionscript3 when you have added a classname on the library item by the use of getDefinitionByName. Be sure you use the DisplayObject for referencing the returned movieclip

example:

package 
{
  	import flash.display.MovieClip;
    import flash.utils.getDefinitionByName;

    public class Background extends MovieClip
	{
		public function Background()
		{
			var _Class:Class = getDefinitionByName("backgroundmc") as Class;
			var a:MovieClip = new _Class();
			a.name = "a";
			addChild (a); 
		}
	}
}

example creating background movieclip:

package {
	
    import flash.display.DisplayObject;
    import flash.display.Sprite;

    public class myDocClass extends Sprite {

        public function myDocClass(){
        	 
			var a:DisplayObject= new Background();
			addChild (a); 
			
		}
		
    }
}

Posted in Scripting | Comments Off

Centering html content vertical and horizontal

Posted by info on 1st November 2008

How to center your page in the middle and vertical align on center?

  • you need a width and a height of your page. 

    width:768px;height: 630px;

  • position is absolute
  • position top and left to %50:

    top: 50%;
    left: 50%;

  • compensate for the offset with the 1/2 of the width and height

    margin-left: -384px;
    margin-top: -315px;
     

an example see this page

Posted in Scripting | Comments Off