Alexandru Dinulescu's Thoughts» clean solution

Google Chrome keypress bug

Dinulescu Alexandru Adrian — Sun, 22 Nov 2009 17:38:22 +0000

Hello

Did you knew that Google Chrome does not understand keypress() on special keys like arrow keys/esc/enter/etc ?

Me neither

I was trying to get the following code to work and it didnt work in Google Chrome at all

$(window).keypress(function(e){
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 32 || (65 <= code && code <= 65 + 25) || (97 <= code && code <= 97 + 25)) {
alert("haxxor");
}
$(window).keypress(function(el){
var alphaCode = (el.keyCode ? el.keyCode : el.which);
if (alphaCode == 37) {
alert("left key");
}
if (alphaCode == 39) {
alert("right key")
}

if ( alphaCode == 13) {
alert ("enter key")
}
if ( alphaCode == 27) {
alert ("escape key")
}
});

The first function works, the second works in Firefox but not in Chrome. After much headbanging around the room i tried to replace keypress() with keydown() and surprise suprise, now it works. I really dont know what to say about this bug, works with any normal key but not with special keys. Do take notice of this bug so you dont waste 30+mins trying to figure out why this happens

Cheers

How To: Put absolute positioned pop-ups at the bottom of the page in the html

Dinulescu Alexandru Adrian — Sun, 16 Aug 2009 15:11:46 +0000

Hello

Sometimes you may have a webpage and some pop-ups on it, they have position: fixed; and styled with JS to appear in the center of the page. (I am not talking about IE6 here, this doesnt work in IE6 at all). for some ex

<div class="popup">

</div>
<div>
<p> Lots of Content Goes here Lots of Content Goes here Lots of Content Goes here </p>
<p><a href="#"> Trigger </a></p>
</div>

Now this is just a template, you can do the javascript yourself since it’s not the purpose of the tutorial.

When you click on trigger the popup will show at the top of the page, while the functionality is good, this is kinda bad for SEO so our main concern is to make it at the bottom of the content. However if you put it there, it will appear after the content.

This is very annyoing so in order to fix this, put in the CSS after position: fixed, top: 0px;

Problem solved, took me 30minutes to solve this. Cheers

How to create a breadcrum navigation xhtml/css

Dinulescu Alexandru Adrian — Fri, 24 Apr 2009 18:47:27 +0000

Hello. In this tutorial i will tell you how to create a breadcrumb navigation menu

So lets start with the XHTML

XHTML

<div class="navMenu">
<a href="#" class="home"> </a>
<span class="intermediareSpan"> </span>
<a href="#" class="intermediareLink"> Intermediare Link </a>
<span class="lastSpan"> </span>
<a href="#" class="lastLink"> End LINK </a>
<div class="clear"></div>
</div>

CSS

* { margin: 0px; padding: 0px;}
.navMenu a { float: left;}
.navMenu span { float: left;}
.navMenu a.home { background-image: url("./../images/homebox.gif"); background-repeat: no-repeat;
background-position: center; width: 28px; height: 23px;}
.navMenu span.intermediareSpan { background-image: url("./../images/intermediareSpan.gif");
background-repeat: no-repeat; background-position: center; width: 11px; height: 23px;}
.navMenu a.intermediareLink { background-image: url("./../images/linkBg.gif"); background-position: center;
background-repeat: repeat-x; height: 23px; line-height: 23px; padding: 0px 8px; color: #000;}
.navMenu a.intermediareLink:focus, .navMenu a.intermediareLink:hover { color: #549321; text-decoration: underline;}
.navMenu span.lastSpan { background-image: url("./../images/lastSpan.gif"); background-position: center;
background-repeat: no-repeat; width: 10px; height: 23px;}
.navMenu a.lastLink { background-image: url("./../images/lastBg.gif"); background-position: center;
background-repeat: repeat-x; padding: 0px 5px; color: #e23421; line-height: 23px; padding: 0px 8px;}
.navMenu a.lastLink:focus, .navMenu a.lastLink:hover { color: #ad3241; text-decoration: underline;}

So lets explain a bit the code above

The first link, class home, will have a background image of the home icon as presented in the end product image. The span.intermediare class will be presented all over the middle lines, and this contains a background image contains the interlining elements, the intermediate links will have their class called link.intermediate. Before the last link in the element, the span will have it’s class changed from span.intermediare to span.lastSpan and then the last link will have it’s class set to a.lastLink.

This is pretty easy to put together and each group can be styled accordingly to create interesting combinations of background images or colors, also more elements can be added to create different underlines or borders.

No javacsript is needed, however this entire system must be powered by a CMS system, because the classes are dynamically generated based on the location of the user and how many “inside” the website structure they find themselves.

If you have questions please post a comment and i’ll get some answers here

position:fixed for Internet Explorer 6

Dinulescu Alexandru Adrian — Thu, 23 Apr 2009 16:37:43 +0000

Hello

As you well know Internet Explorer 6 and lower doesnt recognize position:fixed in CSS, in order to get around that issue we need to do this. Btw everything goes in the same css file, the * html star is a hack for IE6 so only it seems the code so other browsers arent affected.

/* ===== Normal CSS for all other browsers ====== */
.fixed { position: fixed;}

/* ==== IE Specific CSS ==== */
* html { height: 100%; width: 100%; overflow: hidden;}
* html body { height: 100%; width: 100%; overflow: auto;}
* html .fixed { position: absolute;}

Please note that this means that future absoltute positioned elements will probably break so a safer bet is either to use javascript or just plain use position fixed and suck it up, IE6 is going to die pretty soon anyways

Questions in Comments

Sticky Footer “CSS ONLY” SOLUTION

Dinulescu Alexandru Adrian — Mon, 20 Apr 2009 17:18:45 +0000

What does this do?

This makes your footer stick at the bottom of the page, even if you have little content on the page. This is useful, but of course there are some jQuery alternatives which will be posted in a similar post later on. It’s a very simple, clean, CSS based only solution that works in 90%+ of the cases. Also this works in IE6.

The other solution is 10 times simpler but does not work in Internet Explorer 6. More details below…

First Method

XHTML

<html>
<head>
<link rel="stylesheet" href="layout.css" type="text/css" />
</head>
<body>
<div class="wrapper">
<p> CONTENT HERE </p>
<div class="push"></div>
</div>
<div class="footer">
<p> copyright 2009 </p>
</div>
</body>
</html>

The wrapper div must enclose the page content. And the push div must be the last line in the content area

The CSS

* { margin: 0px;}
html, body { height: 100%;}
.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0px auto -100px;}
.footer, .push { height: 100px;}

The only limitations are that you need to know exactly the footer height and the footer must have over 80px; it doesnt work with less than that, i dont know why, but thats the way it is

The wrapper CSS for min-height, height and height again is because of a bug in IE6 important declaration, and since every other browser supports the proper important declaration, basically every browser will have it’s height set as auto, while IE6 will be bugged into making sure it has the min-height solution implemented correctly. I dont know the inner workings but after testing this seems to work

Another thing to keep in mind is that the div.push height’s must be a bit bigger so you have to tweak the values to suit your design

Also another thing, dont use margin top on your wrapper since it will break this, and if it still breaks afterwards, just add paddings on the div.content

This is the only clean solution to get the footer to stick at the bottom of the page, using CSS only, there are also some jQuery alternatives i’ll look into and post here in a few days.

Second Method

The second method takes advantage of the position: fixed; in CSS 2.1 however this method only works in IE7+, because IE6 doesnt understand position: fixed; native, however we have a small trick to do position: fixed; in IE6 found here. You can combine them if you wish.

For all the other browsers, add to the element you wish positioned fixed the CSS, and then hack for IE6 if you wish to support that crappy browser.

Questions in comments. Will answer as they come.