It’s like a industry standard now having everthing tableless, although i still thinking that EVERYTHING is too much, this been like the motto of many programmers around. But let’s skip the blablaing about this and go straight to the point:

You have 2 fixed width div/li `rows` on a site, they are nested and inside the content, due the complex nature of the layout, there’s some other complications. All of sudden the client decides that he wants to ruin your layout adding a long, waaaaaaaaay long, horizontal listing, which not also overlapps the width of your left column but mostly like will make user’s screen to horizontally scroll.

Solution:

As much i like to discuss with client, it’s useless and i will be just wasting my time. This is also a tricky thing to fix since the column sizes are fixed, i would need to make the whole content column bigger, ruining the rest of the top elements. Let’s take a look on the example:

<div style=”width:600px”>

content div header code here

<div style=”width:2000px”>

way long client designed div to ruin layouts

</div>

</div>

(styles are just to simplifly)

so the solution (1) would be something like this:

<div style=”width:600px”>

content div header code here

<div style=”width:2000px;position:absolute;“>

way long client designed div to ruin layouts

</div>

<img src=”blank_image.gif” width=1 height=same height as the long width div>

</div>

solution (2), if your abomination div is also height dynamic:

<div style=”width:600px” id=”container”>

content div header code here

<div style=”width:2000px;position:absolute;” id=”abomination”>

way long client designed div to ruin layouts

</div>

</div>

<script type=”text/javascript”>

// after loading all the content of the abomination div, also assuming that you’re using jquery

$(“#container”).height(parseFloat($(“#abomination”).height()+50)+”px”);

</script>

On this sample i will have an some_css class with 50% transparency, on the usual method you need to do lots of statements to be compatible with all major browsers, not only that but this makes things harder when you have elements inside the parent element that shouldn’t be transparent.

Problem:

.some_css {

filter:alpha(opacity=50);
opacity:0.5;
-moz-opacity:0.5;
position:relative;

}

Solution:

.some_css {

background-color:rgba(0,0,0,0.5);

}

Source:

Ove Klykken

When you need to build up a page with lots of little images , like the borders, gradients, different backgrounds , slideshows etc. All into the same page.

You probably will have lots of images on the same page, specially if you cut them to save much bytes as you can, however, you might fall into a different issue:

Too many images will make the load slow as well, since browser will open only 2 connections at same time with the server (every connection takes a while to actually start downloading something since it needs to go thuru all the hops and reach the server etc etc), meaning that all that nice optmization you did worth nothing since you got lots of images.

No good!

Solution:

I’ve seen this only one time at fleXcroll script, and many times on old games textures.

The technique used on both is the same, although might not ring a bell for you it’s pretty simple to use, a little complicated to add on css, but will do the work.

picmap png file zoomed

This is a zoomed version of a picmap (I don’t really know a formal name for this that’s how i will call it) png I did, you can see it got transparency and stuff.

The different colors and green lines are just to highlight the different images i merged here, they will be used all in background at the css, meaning that i can have the position easily set.

As you can see on the bottom there’s 2 huge blocks, this is for the horizontal repeat, since i can’t define a fixed area on the image for the browser to pick as pattern for repeat-x (for example) I need to do this. You may think that it would be a waste, since usually, you can do a 1px width image for this type of thing, however, when you merge pictures toguether you’re not only saving the connection delay time, but for some image formats you have a header on the file or a color index that, when merged, became smaller than the separated files.

In the original 2,65kb png, I managed to merge 17 different pictures, that separated were 4,79kb, and yet you can see that there still some space left to add more things if i wanted to.

The css for the top circle (which is actually 4 corners) would look like this:

.bB,.bC,.bD,.bE{height:9px;width:9px;font-size:1px;}

.bB{background:url(img/b.png) 0px 0px;}
.bC{background:url(img/b.png) -9px 0px;}
.bD{background:url(img/b.png) -9px -9px;}
.bE{background:url(img/b.png) 0px -9px;}

Note that all the positions are negative.

Depending on the usage of your picmap you might want to have repeat-y’s for example, so you need to rethink the layout in order to take maximum of it.

For me, i only have repeat-x backgrounds, so I broke it in different formats, gif, png and jpg, doing that I could take the best of each.

so,

issue:

document.onLoad causes an error (this can only be noticed online when things aren’t loaded instant)

solution:

body onLoad tag among with a little timer to display the div i want.

yourhappyhtml.html?argument=xxx

Solution:

function d(){var x=window.location.search.split(‘?’);if(isset(x[1])){setTimeout(“z(“+x[1]+”)”,200);}}

Explanation:

this will call a function z that will show a specific hidden div depending on the parameter sent, due random crappyness on onload function i added a timer as a workaround, to call this in a bare way you should do ?number , and nothing else, x[0] is always null, isset() is:

function isset(v) { return ((v == undefined) || (v == “”)) ? false : true; }

to send more than one argument you will need to split the “=” as well inside the x[1], since javascript will take the whole query as a variable.

convert accent html encoded chars, like &#231; , to their real values in javascript

Solution:


var _chr=[];var _etn=[];for(var x=0;x<95;x++){_chr[x]=(x+161);_etn[x]="&#"+(x+161)+";";} // replacing all chars could be slow you would like to restrict it to only the accent chars or the ones that you like
function chr(x){return String.fromCharCode(x);} function e2c(s){for(var x=0;x<95;x++){var m=s.indexOf(_etn[x]);while(m!=-1){s=s.replace(_etn[x],chr(_chr[x]));m=s.indexOf(_etn[x]);}}return s;}

you can test by:

alert(e2c(“&#161;&#161;&#161;&#161;&#162;&#231;&#231;&#227;&#164;&#165;&#191;”));

to do the reverse just change the order of the replace vars

note that javascript is lame and don’t have array replace and it will only replace a single char on the string (even if there’s more) so lots of loops had to be added to it, this might be a drawback if you use this too many times into a same page or into very large texts.