Ionut Staicu - Webdeveloper Blog

Every time you code a layout, you must dealing with inconsistencies of various browsers. Due to his lack of standard support, IE (and especially IE6) has a LOT of css hacks available “on the market”. And that because the IE developer team has some kind of humor for two reason:

1. They know that their browser suck so they put conditional comments. Is not a really hack, because you have a documentation, but is the best (and also the safest) way to fix CSS bugs (or even add some extra content for certain version of IE).
2. The second reason is funny and creepy: the fresh SP3 for windows is delivered with… IE6. Yes, if you don’t have IE7 installed, you will have IE6. That sucks, isn’t it?

Ok, enough with this, let’s show some real hacks, right?

Internet Explorer hacks

First of all: the best way is to use conditional hacks for IE. That’s because new version of other browsers can misunderstanding some hacks. As far as i know, this wasn’t happen yet, but you never know what gift we can get, right? Use hacks when you have only a couple to fixes!

The most used hack for IE6 is the star selector :

#wrap {border:2px solid blue}
* html #wrap {border:5px solid red}

For IE6, wrap container will have a 5 px border. For any other browser, you will get a 2px blue border. Is important to get IE6 hack AFTER the normal rules, otherwise you won’t get any result.

html>;body #wrap {background:white}
#wrap {background:red}

This one is some kind of first rule, but reverted. That’s because IE6 simply don’t know how to deal with this kind of selectors (which is valid tough!). Lucky us, right?

Another hack is the underlined and !important. However, those hacks are NOT recommended for mass production (is ok for testing, but… that’s all):

#wrap {
color:red !important;
color:blue
}

and

#wrap {
color:red;
_color:blue
}

With both hacks you will achieve same result. But i repeat, DO NOT USE it unless you know what are doing. You will avoid a LOT of headaches

Until now, i talk about IE6 hacks. Here you have a IE7 hack:

#header { font-size:1em }
*:first-child+html #header { font-size:2em }

Like i said before, is mandatory that hack to be AFTER proper rule!

IE6 min/max-width hacks

#wrap {
	width: expression(document.body.clientWidth <; 742? "740px" : document.body.clientWidth >; 1202? "1200px" : "auto");
	}

For this one, we need to use some CSS expressions. Also, is not recommended (can affect user experience, because browser execute that expression). This hack was founded here.

Image flicker problem

One of the most annoying thing on IE is this: when you have a css image on a link, when you hover that link, the image is reloaded, resulting a short time flicker. Mister-pixel.com comes with a handy solution for this (that works only in IE6 SP1 or greater):

<script type="text/javascript" charset="utf-8">
/* <![CDATA[ */
	try {
  document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
/* ]]> */
</script>

You only need to put these lines in your header (inside of conditional tags) and your problem is done.

There is more?

Well… I’m sure i didn’t cover all CSS hacks. However, these are some of the most important hacks, ready to use anytime you need it (and for your own good, you should bookmark this page because you will need it A LOT!). Do you know any other hacks?

As i said in previous post, i have some tips and advices for

Use CSS reset

I personally don’t use any of existing CSS reset file and i use only few line for this, including the blamed * {margin:0; padding:0} technique:

* {margin:0;padding:0}
img, fieldset {border:none}
table {border-collapse:collapse}
td, th {text-align:left;vertical-align:top}
button {cursor:pointer}
input, button, select {vertical-align:middle}
textarea {overflow:auto}
 
html { font-size:100.01%; }
body { font-size:1em; }
 
a {text-decoration:none}
a:hover {text-decoration:underline}
 
input.text, input.password, textarea {border: 1px solid #7f9db9}
 
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix {display:inline-block}
/* Hide from IE Mac \*/
.clearfix {display:block}
/* End hide from IE Mac */
* html .clearfix {height:1px}

Not only i reset all styles, but i also use a smart way for clearing floats. Just add class=”clearfix” to some floatet box container and here you go. No more clear both extra tag, no more other tricks.

Don’t get me wrong. Every time i’m in a middle of a project i remember to NOT use * {} CSS reset for next project. And every time i forgot

(Don’t) Use CSS frameworks

I don’t like to use code that is not mine. And CSS frameworks is this kind of code. Beside that, when you start to use a framework (no matter what framework is), you MUST learn it. Too much waste of time to learn another people code. Again, you have plenty of CSS frameworks to pick and try.

Validate your code and search for browser bug

Some times a page is not displayed well. Either you have a bug in your code or bug in your favorite browser, you need to figure in a way or other what is guilty for headaches. The best way to eliminate code bugs is to validate your code. If all lines is ok, you should search for bugs in browsers.

Comment your code

You probably say: why should i bother to comment my own code? I wrote it, i will remember! Yeah, sure! Over the past years i convinced myself how much i can be WRONG! I try to read some past code (yes, written by myself) and i ask: what the heck i wanted to do here? So now i comment my code: CSS i split in blocks and on html i comment the closed div/class for big containers:

<div id="wrap">
<div class="header">
  content goes here
</div><!--/.header-->
</div><!--/wrap-->

Read news, blogs and forums

I have a many RSS feeds in Google Reader and half of them is about development. CSS, Javascript or only news, is all good. Of course, i don’t spend too much time reading all articles. I read only headers and if is worthing, i read it all. Is the BEST way to stay informed about web technologies.

Test in many browsers

Don’t matter if you made a website for yourself or for a client, because that site MUST be rendered in the same way in ALL browsers. Or at least to degrade graceful and remain usable.

Use your own javascript vs. libraries

Well, if you read constantly this blog, you know that i’m in love with jQuery And for most projects i need speed in development and just to be sure i achieve same results in all browsers. I can use my own JS or i can use my own JS powered by jQuery. The second way is always preferred

More to come?

Sure! If i remember any other tips, i will surely tell you! Just add this blog to your reader and stay tuned!

The most difficult part for a beginner developer is to find right tools for him. In fact, all developers aims straight to speed, right? For a front end developer, all basic tools you need is a text editor and many (as many as possible) browsers. At least in theory.

In real life, developer needs more than that. Here is a more than basic list with what programs i use:

• Adobe Photoshop. There is versions for both Mac and Win (no Linux; i will tell you later why) and it’s do his job very well. If is too big for what you need (and almost every time is too big), you can try his little brother Fireworks. You need only a soft for making slice and play with layers, so if you can find another software for doing this, let me know.
• Text editor. There is a PLENTY of editors, one better than other and you only need to pick one. Ofcourse, you don’t have to be stuck with that editor because anytime you can find a better one. I used Dreamweaver for about one year (or even more). I found UEstudio and i used for another year or so and last year i found a great TextMate port for Windows: e-Texteditor. And for now i think is the best (still having bad parts, but if i put side by side all editors, e is the ONE) and for now i don’t think to change it. The best thing is if you use e for a while and you want to switch on Mac with all your e custom bundles and themes, just DO IT! Working like a charm. Ofcourse, you can find a HUGE number of editors: Aptana, Zend (yes, some guys are using this not only for PHP), Eclipse, Intype (is some kind of e or textmate), Komodo, Maguma, GoLive!, Notepad++ and so on.
• VMWare, Parallels, VirtualPC or any other software that will allow you to run another OS in your current OS. Again, there is versions for both Mac and PC. This is to be sure that your site will be displayed like you want in ALL browser (or as many as possible). I’m sure you don’t want a site that is looking good on IE7 and is screwed up in IE6, right? I use Vista as main OS, OsX as secondary OS (yes, Hackintosh) and Windows XP with IE6 and Ubuntu 8.08 on my virtual machine.
• Apache, php and mysql. Either you installing this manually or install a all-in-one package (Xammp, EasyPHP), you probably need a server like that if you plan to develop themes for CMS/Forums or Blogs. For Movable type, for example, you also need too install Perl.
• If you are working on big projects with many developers, you should consider to use SVN and a SVN client.
• Patience. A HUGE dose of patience, because will be a LOT of stuff that will simply won’t work on some browser (usually IE6) and if you don’t know what to do, you will get some white hair before the time
• A music player I don’t know how do you code, but i can’t code in absolutely silence. I search for a radio station and just play at a low volume.

As i said before, i will tell you why you don’t have some of these tools on you Linux box (but maybe you have many other great tools): there is a tremendous number of Linux distribution with a huge number of configuration and Adobe (and many other companies) don’t want to spend time with technical support (just imagine a call center operator who MUST resolve problems of 20 distro/day!). For front end development i personally think is a MUST to have Windows or Osx (or even both).

Soon i will post a guide with best practices and some advices for front end developers.

In this article we will be playing with list elements to create amazing menus.

Most html menus are created using list because LI tag is the most appropiate tag for this, giving the developer posibility to play in many ways, achivieng nice effects. I won’t touch the vertical lists because it’s their default display. Instead, i will cover some of horizontal lists.

Basic list

The basic setup for a horizontal list is to set float to list elements:

<ul id="list1">
	<li><a href="#">Menu item 1</a></li>
	<li><a href="#">Menu item 2</a></li>
	<li><a href="#">Menu item 3</a></li>
	<li><a href="#">Menu item 4</a></li>
</ul>

#list1 li {
	float:left;
	list-style:none;
	margin-right:10px;
}

At this point we have a one level horizontal menu, created with list and you can see this on many (and i mean MANY) sites. Ofcourse, you can add some extra styles such as border, background (color or image) for links inside LI elements for getting even a nicer look. Demo here.

One level drop down menu (suckerfish)

Read the rest of this entry »

I wrote here how to make two elements to swap each other. But one little problem remain unsolved: you swap elements, but how do you inform server about your changes? Well… With a serialize function, ofcourse!

1
2
3
4
5
6
7

function serialize (drag, elements) {
	var serialResult='';
	$('.'+drag).find(elements).each(function(){
		serialResult += drag + '[]=' + this.id +'&';
	});
	return serialResult;
};

You call this function on event onDrop and function will return a hash for all elements:

alert(serialize('droppableBox', '.swappable'));

With this result you can inform server of any element position changes. Nice, isn’t ?

Some weeks ago i needed a jQuery (yes, i’m a jQuery addicted!) plugin for basic star-rating system with ajax call. Because i wanted a minimum html markup, i start to wrote my own plugin, with a handy way to implement. Just drop this where you want to display stars:

<span class="rateThis" title="current=2.5;href=vote.php;id=1"></span>

Then call ntzRateThis on document load:

1
2
3

$(document).ready(function(){
 $('.rateThis').ntzRateThis();
});

Easy, isn’t? You need to specify (in title):

current - current rate (accept float);
href - link for backend rating script (this script will return final rate after vote and also verify that is only one vote per day);
id - id of the element (for example, id of article that you want to rate).

That’s all. You still need to include css and javascript files (is in the ZIP file)

You can see a demo of this plugin here (you have a demo for rating only, backend script sends only random numbers, so the rate won’t be real!) and you can download from here.

Recently, on a project, i need to swap two draggable elements from a colum to another. Initially i wanted to use sortables, but i saw that is kinda useless because i don’t have too much control (and same thing happened with other libraries). So i try to make somehow that elements swaps.

Basic HTML markup is this (be careful, i won’t provide any demo for this):

1
2
3
4
5
6
7
8

<div id="browserCol-01" class="newBrowserCol droppableBox">
 <div id="s-5" class="browserDragItem swappable">5</div>
</div>
<!--/browserCol-01-->
<div id="browserCol-02" class="newBrowserCol middle droppableBox">
 <div id="s-6" class="browserDragItem swappable">6</div>
</div>
<!--/browserCol-02-->

Ok, so we need to swap browserDragItem between each other. Items have two classes because first is to define which elements is draggable and second is to define which element is swapable. I made this way because some elements can be empty (so will not be draggable) but other elements can be dragged over this empty boxes.

Now, if we have basic HTML markup (and i assume that you have css too), we need a function for swapping elements (founded here)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

 
jQuery.fn.swap = function(b) {
	b = jQuery(b)[0];
	var a = this[0],
	    a2 = a.cloneNode(true),
	    b2 = b.cloneNode(true),
	    stack = this;
 
	a.parentNode.replaceChild(b2, a);
	b.parentNode.replaceChild(a2, b);
 
	stack[0] = a2;
	return this.pushStack( stack );
};

Then we put all draggable and droppable on a custom function (for later recall):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function browserDragElements() {
	$('.browserDragItem').Draggable({
		ghosting: true,
		opacity: 0.5,
		revert: true
	});
	var newBrowserDrag = {
		accept : 'browserDragItem',
		hoverclass : 'browserDragItemHover',
	  onDrop : function(dragged) {
	    var oldDrag = $(this).find('div.swappable');
	    var newDrag = $(dragged)
	    try{
	    	$(oldDrag).swap(newDrag)
	    	}catch(err){};
	    $('div.droppableBox').DroppableDestroy();
	    $('div.browserDragItem').DraggableDestroy();
	    browserDragElements();
	  }
 
	};
	$('div.droppableBox').Droppable(newBrowserDrag);
};//browserDragElements

We have try/catch statement because if you drop an element on his initial place, you get some error. All you need to do now is to call browserDragElements() on document load:

1
2
3

$(document).ready(function(){
 browserDragElements();
});

I’m not sure that is the best method for doing a “swappable”, but afterall is working well, so we reach our goal, right?

Some time ago i searched for a way to limit elements on a sortable box (i used jQuery Interface). For example, i had two boxes and one of them needs no more than three items. After i searched and switch net upside down, i ask directly to the creator or Interface and he gave me a simple (but still efficient) solution:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$('.sort').Sortable({
accept : 'sortItem',
activeclass : 'sortableactive',
	hoverclass : 'sortablehover',
	helperclass : 'sorthelper',
	opacity: 	0.5,
	fit :	false,
	floats:	true,
	onStart: function(){
	console.log($('#big .sortItem').size())
	if ($('#big .sortItem').size() == 3) { //max of items
		console.log($('#big').get(0).dropCfg.a)
		$('#big').get(0).dropCfg.a = 'dummyRandom';
	} else {
		$('#big').get(0).dropCfg.a = 'sortItem';
	}
}
});

Demo here (click!).

Ok, this is my first english post, so please excuse my grammar errors

So, what is all about? I made (some people says that is VERY useful) two bookmarklets for Wordpress to help you if you are a professional blogger (or professional blog reader who uses to comment on post).

Ok, enough chit-chatting, show me the stuff!

Chill man, i show you right now! The first bookmarklet automatically fills out comment form with your info (Name, Email and URL). How to use? The easiest way is to paste next code in a text editor (Notepad should be fine) and change values with apropiate one:

javascript:try {document.getElementById('author').value='Your name'; document.getElementById('email').value='youremail@gmail.com'; document.getElementById('url').value='blog.iamntz.com'; void(null)} catch(err){};try{document.getElementById('uname').value='Your Name'; document.getElementById('uurl').value='blog.iamntz.com'; void(null)} catch(err){};

The do like me in the next video (click!). Done

The second bookmark is even better! If you use to quote different users but you are too lazy to write every time <blockquote></blockquote> and to copy/paste other people reply, then next bookmarklet is for you! Just select user text, press on bookmarklet and that selection goes to reply box inside of <blockquote> </blockquote> tags!

Just drag THIS LINK on your bookmark bar. All you have to do now is to select text you want to quote and press on bookmarklet!

I did this but it doesen’t work for my blog!

None of these bookmarklets is guaranteed that will work 100% on all blogs! First bookmaklet will work 99% on most wordpress themes and 100% on blogspot (you should CHECK the nickname box) and second will work 99.9% on every blog (not only wordpress!), because i bet on this: i saw no blogs with more than ONE textarea. So…

Even more nice thing!

On my blog, you can select text and press Q on your keyboard. The magic is here: selected text is copied on reply box If you want this nice feature on your blog, you are free to contact me on mail (ionutzb [ @ ] gmail [ . ] com ) or Yahoo! Messenger i0nutzb.