Hello fellow readers,
Today I have another snazzy tutorial for you that you can use on you’re blog or website – whatever takes your fancy! Now you probably noticed something different about my website that the welcome information box has been moved from the main content box to outside of the layout. This is to draw more attention to it so whenever you visit it’s there as a friendly hello to you and at your option to follow us or subscribe to the RSS feed, anyway’s that’s off-scope on this article as I’m here to demonstrate how you can accomplish this on your website in the most easiest way possible!
So let’s jump right in and get started…
Firstly you want to make a simple html structure for the information box:
The HTML…
<html> <head> <link rel='stylesheet' href='style.css' type='text/css' media='all' /> </head> <body> <div id="infobox">Hello and welcome to my website!!!</div> </body> </html>
That’s all we need for the html structure, now just save that as ‘infobox.html’ or whatever you want to save it as the choice is yours!
Now we need to get some styling done for this div, this is the semi-easy part so get ready…
The CSS…
div#infobox
{
padding:10px;
font-size:12px;
text-align:center;
position:fixed;
top:0;
z-index:100;
background-color:#ddd;
color:#666;
width:100%;
}
Now just save that file as ‘style.css’ inside the same folder as ‘infobox.html’, then just open ‘infobox.html’ in your preferred browser and test it out – the only thing is the actual html file has no content for the div to overlap, so it’s best you test this on an example page or a live site and see how it performs!
Now for those curious about my little cross icon that slides the div up and changes it color, that’s done using jQuery which can be obtained from www.jquery.com – I will not cover this part but I will provide the source I used to accomplish mine:
The jQuery…
function hideWelcome()
{
$('#infobox').slideUp(1000).css('background-color','#eee');
}
Just save that code into a file and save it as ‘script.js’ and make sure to save it in the same folder as ‘infobox.html’ and ‘style.css’.
Pretty simple eh? if you don’t like the color it changes to just alter the part where the hash is ‘#eee‘ to whatever color code you have or use the predefined colors e.g. red, blue, black…
Lastly, as a bit of advice if you are going to use jQuery then use a CDN version to take load of your server – most developers advise this and I do as well so here’s what you need to include:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
The final source…
<html> <head> <title>Info Box</title> <link rel='stylesheet' href='style.css' type='text/css' media='all' /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="infobox">Hello and welcome to my website!!! - <a href="javascript:return false;" title="hide this!" alt="hide this" onclick="hideWelcome();">Hide this box</a></div> </body> </html>
And that’s it – I hope you have found this useful in some way if you have be sure to spread it around the web for those who need help with this sort of thing!
Thanks for reading!!!
Hi
Where can I see a demo or screenshot of this fancy box?