A few days ago I was working on a sticky header for thetudu, all I wanted was just a fixed position header that overlap the content on scrolling. So far sounds good and really easy, you don’t even want Javascript, some pure classic CSS code is the deal.
So let’s see how the code should look like:
<div class="header-container"/>
<header class="header">
<!-- content here -->
</header>
</div>
.header-container {
min-width: 980px;
height: 40px;
position: fixed;
left: 0;
top: 0;
right: 0;
}
.header {
width: 980px;
margin: 0 auto;
}
Everything seems we are ready and if you test it, it works really good. The header is sticked at the top and the content scrolls beneath. I was thinking the same, when I got a big WOW, BOOM, WTF moment of my life, you know that time when you realize that everything you know is nothing and you just discover that your code all these years didn’t work… Is the same moment when I discovered the use of clearfix (where all my sites were invisible broken), or the time I learnt that evertyhing is an object in JS.
You will see right away. Now open the following pages and try to resize the window horizontally, in other words make it as thin as you can. Simulate a case that your users have a small screen, smaller than your site’s width, or maybe a mobile phone.
BOOM!
The content is hiding at the end of the window and there is no way to make it come back to the surface again, lost! This moment is when you realize that all your sticky headers/footers don’t work! And this is very important problem because in all cases above something crucial is missing, signup or purchase.
Personally I think that you should care for your visitors and examine all the possible aspects, this is what facebook does and the others don’t, this is what Dan Cederholm call handcrafted
I said the same words and I jumped straight forward on facebook to check their code.
And voila! Facebook’s header works really well.
Why? Because they check when you resize the window and if your window is smaller than their min-width the sticky header becomes a regular header and goes back at the top of the page, not the browser. Check this video to understand what I’m saying.
The idea is pretty simple and smart but more complex than the first case. So let’s see the differences in the markup and the CSS.
<div class="header-placeholder">
<div class="header-container">
<header>
<!-- content here -->
</header>
</div>
</div>
First, we need one more div as placeholder. The placeholder holds an empty space for the header, so when the header is “flying over the content” and it’s time to landing back to the page as a regular one it needs some space for this.
The CSS is more complex and we’ll see it step by step.
.header-placeholder {
height: 40px;
/* It needs only height just to save the space we want */
}
.header-container {
min-width: 980px;
height: 40px;
position: fixed;
left: 0;
top: 0;
right: 0;
}
.header {
width: 980px;
margin: 0 auto;
}
@media only screen and (max-width: 979px) {
.header-fixed {
position: relative;
}
}
Now if our window is less than 980px, the header will change back to static. If you want to support older browsers you have to use some Javascript to make it work.
function checkSize(){
if ( $(window).width() < 980 ){
$('.header-container').addClass('is-static');
}else {
$('.header-container').removeClass('is-static');
}
}();
/* Then check again on resize */
$(window).resize( checkSize );
.is-static {
position: relative;
}
/* If you use more specific selector on .header-container
e.g. #top .header-container, you need to use !important
e.g. position: relative !important; */
And that’s all! From now all your sticky headers/footers will work perfectly with the right way and I’m waiting to see a lot of websites implement this way. The problem is not exists in the websites that follow the Responsive Web Design technique, but we can’t make everything responsive, so facebook’s way will be useful for all of us.
Left your comment and write your thoughts and suggestions…
It’s been a while since my last post in my blog and I have to say I missed it.
It’s 9 whole months!
The last months I’m working hard on a new app called thetudu a brand new category in the calendars and todo lists market and I’m sure you will love it! (You can see some screenshots on my dribbble)
But enough with thetudu lets go back to the main subject that is the new noise texture generator. The pas months a lot of people used it and tweeted about this and I’m happy that this small handy tool helps so many people to do their job faster. This kind of popularity made me think to add new features into the app and that the new version. I’m listing the features below:
As my close friends know I love Sitepoint’s books. I love them because they teach to everyone all the web trends and programming languages, with very well structured books and easy to read language for everyone from the very amateur to the most intermediate guy. The last very good example is the latest book that they released HTML5 & CSS3 for the Real World (that I suggest you to buy).
jQuery tipTip is a Drew Wilson’s plugin that I love and I use it in 90% of my projects. But because I use firefox, I found a small design problem in Tooltip. The background color is not the same, look at the differences:
You can see that the -webkit- browsers render the tooltip with a light gradient in contrast with firefox that hasn’t got gradient background.
How to solve this problem?
I’ve just come back home from easter holidays and i found in my mailbox a book that i had purchased 2 weeks ago from amazon. Which Book?
HTML5 & CSS3 : Develop with Tomorrow’s Standards Today
With a first look the book is totally designer non-friendly!
It’s a classic Pragmatic Programmers book, with black & white content and full of text pages. The content is a lot and i think that nobody read it all, but it’s a great book for reference as I mentioned in my Amazon review!
When you have stuck, you can navigate fast and easy through the chapters and find the solution to your problem. I especially like the fact that the book’s title is totally TRUE, in every single example they give you a fallback code how to implement the example now days with current standards and technology.
I bought this book with an amazon gift card and i don’t know if i want to pay to buy it, but it’s a good choice if you have $20 in your piggy money box.
Easter is 2 days away, so in my free time after a lot of Angry Birds Seasons (Easter) gaming, I made the following poster!
You can download it free, the bird is full vector so use it wherever you want!
Happy Easter & Holidays to everyone! Have Fun and play Angry Birds…
In this article, I will not taught you how to use image Sprites but how to use them correct!
As you already know the right way to create a lightweight and fast sprite image is to put all small images and graphic parts in one image. A lot of designers (including me) stuff the sprite image a lot and they didn’t leave whitespace between images, this is good if you see your website from a pc.
But have you ever see your (extra stuffed sprite image) website from a mobile device like iPad or iPhone? If you don’t, then in the following images you will realize that the method mentioned above is completely wrong!
Hello World from my new blog!
This is my first post and i let you know that in future I will post a lot of simple and useful tutorials & freebies, to make your life easier and your work faster!
So keep in touch…
Goodbye
