SpyreStudios

Web Design and Development Magazine

  • Design
  • Resources
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery

November 19, 2010 by Eric Hoffman 21 Comments

Today we’ll be creating a bar that pops up at the top of a page, and stays above the content (similar to ‘hellobar’). The popup bar was only tested in Chrome and Safari and may not work in other browsers. The bar can be used to display information, for example your latest blog post, to the user.

The way the bar pops out at the top makes sure it’ll be seen. And after the visitor has seen the information, he/she has the option to hide the bar.

Click here to view the live demo →

First we’ll open up photoshop to create the images we’ll need; the body background and the bar background. For the body background I’ve taken a dark green square and added 2% noise. You’re free to choose which color you use, just make sure it looks good :).

Images

For the bar I’ve chosen a light gradient, also with 2% noise, to make it more noticeable and added a 6px pattern stroke (to make the pattern, create a new document with the dimensions 8px by 8px and fill it according to the image. Edit -> Define Pattern. To use a pattern as a stroke, select fill type: pattern). Save the images as jpeg, the body background will be repeated in both directions, the bar background only horizontally.

With the images completed, we can now focus on the code. We’ll be using HTML5, CSS3 and jQuery. Let’s begin with the HTML.

[html]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=’Content-Type’ content=’text/html; charset=utf-8′ />
<title>CuteBar</title>
</head>
<body>

</body>
</html>
[/html]

You’ll notice the doctype: , is the new HTML5 doctype. Short and easy to remember. Next open an ‘article’ tag, which is the same as a div, just cleaner. Inside paste some content, maybe even an image or two to make it more interesting.

[html]
<article>
<p>ADD TEXT HERE</p>
<img src=image.jpg>
<p>ADD SOME MORE TEXT</p>
</article>
[/html]

Above the ‘article’ tag, paste the following code.

[html]
<div id=popup>
<span class=hide>
<a href=# class=hide>C</a>
</span>
<p>Hello! I’m a cute little bar. This is a popup.</p>
</div>
[/html]

Basically we’re creating a div with the id popup. Inside it we have a span with a capital letter C, which is linked to #. Below the span is the bars content in paragraph tags. Both the ‘span’ and the ‘a’ element have the class ‘hide’. When you click on the letter C (which will later be transformed into an arrow, thanks to the @font-face element) the bar will slide up.

Below the ‘popup’ div, paste in the following markup.

[html]
<span class=showpop>
<a href=# class=showpoplink>C</a>
</span>
[/html]

This is the code that appears when the bar is hidden. Press on the link inside the span element, and the bar will appear.

Our HTML is complete, now let’s make it functional with jQuery. We’ll let Google host it, meaning we can link to Google’s code and we don’t have to download it.

[html]
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js’></script>
[/html]

If you check out the demo, you’ll notice the bar sort of bounces multiple times before it stands still. For this effect you’ll have to link to the jQuery UI code, also hosted by Google.

[html]
<script src=’http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js’></script>
[/html]

Start out by pasting this code. This is jQuery 101 ;)

[html]
$(document).ready(function(){    
});
[/html]

Next, inside the before pasted code, paste this.

[html]
$(‘#popup’).show(‘bounce’, { times:3 }, 300);
$(‘.showpop’).hide();
[/html]

You select the ‘popup’ div and show it using a bounce effect. Inside the curly brackets you set the repetitions and the last number is the time (in milliseconds). Next you hide the ‘showpop’ span that the user would click when the bar is hidden. Next paste this.

[html]
$(‘.hide’).click(function(){
$(‘#popup’).slideUp();
$(‘span.showpop’).fadeIn(‘slow’);
return false;
});
[/html]

You’re telling the page to perform an action when the ‘hide’ link is pressed. The bar should slide upwards (meaning it disappears) and the ‘showpop’ span fades in (slowly) from being hidden. It’s important to include ‘return false’, otherwise the link action will be performed, meaning the page reloads. If you don’t include it, you’ll see out bar functions properly, but every time you either hide or show it, you’ll find yourself at the top of the page.

Try it! The bar now properly hides itself, even though it still looks horrible at the moment. Next paste this code:

[html]
$(‘a.showpoplink’).click(function(){
$(‘#popup’).show(‘bounce’, { times:3 }, 300);
$(‘.showpop’).hide();
return false;
});
[/html]

Here you’re ordering the page to show the popup (by bouncing 3 times) and hide the ‘showpop’ span when the user clicks on ‘showpoplink’. Don’t forget ‘return false’ here either.

Now all we have left is to make it look pretty. First visit http://www.dafont.com/dtpdingbats.font to download the arrow font we’re going to be using. Next use fontsquirrel @font-face generator and add the code to your css file. It should look similar to this.

[html]
@font-face {
font-family: ‘ArrowFont’;
src: url(‘font link’);
src: local(‘☺’),
url(‘font link’) format(‘woff’),
url(‘font link’) format(‘truetype’),
url(‘font link’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
[/html]

Next we’ll use a basic (real basic) reset by adding this to the body style. Also set the background as the image you created earlier, don’t forget to add repeat (meaning it repeats both horizontally and vertically and doesn’t display only once).

[html]
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
body {
background: url(image link) repeat;
}
[/html]

Add this code.

[html]
article {
font-family: baskerville;
font-size: 16px;
margin-top: 70px;
}

p {
line-height: 25px;
color: white;
text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
padding: 0 20px;
font-family: Baskerville;
}
[/html]

We’re setting the line height to 25px so the text isn’t cramped together. Depending on your background color, you’ll want to set the text color to white. The text shadow isn’t needed, but makes it look even nicer. Notice I’m using ‘rgba(…)’ here. RGB stands for red green and blue. ‘a’ is the opacity. Covert RGB – Hex and Hex – RGB here http://www.javascripter.net/faq/hextorgb.htm.

Next style the bar itself.

[html]
#popup {
top: 0;
width: 100%;
padding: 20px;
background: url(image url)  left bottom repeat-x;
display: block;
position: fixed;
}
[/html]

The distance to the top of the page should be zero, hence ‘top:0’. The width can also be less, but I think 100% looks best. You don’t need to set a height, but you need padding. Set the background to the image you created earlier, the background position to left bottom and repeat-x. Position fixed is very important, as you want the bar to be displayed fixed (meaning it doesn’t move) while the rest of the page scrolls along merrily.

As the text inside the bar shouldn’t have the same style as the body paragraph, you need to style it differently. Here the left margin is very important, otherwise the letter ‘C’ (arrow) will overlap with the bar’s content.

[html]
#popup p {
margin-left: 15px;
text-shadow: 0 1px 1px rgba(255,255,255,0.8);
font-size: 13pt;    
color: #34332d;
}
[/html]

Now we’ll style the ‘hide’ arrow.

[html]
a.hide {
color: #34332d;
text-decoration: none;
font-family: ‘ArrowFont’;
-webkit-transform:rotate(-90deg);
font-size: 30px;
position: absolute;
text-shadow: -1px 0px 1px rgba(255,255,255,0.8);
margin-top: -10px;
}
[/html]

The color should be the same as the paragraph, which depends on your background. I don’t think an underline looks good, but it’s your choice. Now to the important part. We ‘imported’ the Dingbat font earlier (I changed the name to ‘ArrowFont’) through @font-face. Change the font-family to ‘ArrowFont’. By using ‘-webkit-transform’ we can rotate the arrow (it needs position: absolute to rotate). Change the arrow size by setting the font-size to 30px. Set the top margin to a negative value to pull the arrow up a bit.

Change the color of the arrow to #c44f21 when the user hovers over the arrow (:hover pseudo class).

[html]
a.hide:hover {
color: #c44f21;
}
[/html]

Next we’ll style the ‘show’ span.

[html]
span.showpop {
display: block;
position: fixed;
-webkit-transform:rotate(90deg);
margin-top: -70px;
}
[/html]

Just like the bar, it should have a fixed position. The span should display as a block. Rotate it, this time in the opposite direction. Change the top margin to a negative margin to pull it upwards. Now the arrow:

[html]
a.showpoplink {
background: #dde1c1;
padding: 5px 10px 5px 40px;
font-family: ‘ArrowFont’;
font-size: 30px;
margin-left: 5px;
border: 4px solid #c44f21;
text-decoration: none;
border-radius: 10px;
-webkit-background-clip: padding-box;
color: #34332d;
}
[/html]

In it’s normal state, the color is #dde1c1. Add some padding (notice the arrow is rotated, meaning the values are too). Change the font-family to arrowfont, and add a border (#c44f21). Remove the underline, add some round corners and remove the background ‘bleed’ with this little hack: ‘-webkit-background-clip:padding-box’.

Change the arrows color when the user hovers over it…

[html]
a.showpoplink:hover {
color: #c44f21;
}
[/html]

And if you’ve added an image, style it’s appearance.

[html]
img {
float: left;
padding: 10px 20px 10px 20px;
}
[/html]

Conclusion

You’ve made it! Splendid job! If you’ve messed around with the colors and overall style, I’d love to see it! Make sure you add the link to your work in the comments.

Filed Under: CSS, Development, HTML5, jQuery, Tutorial

Comments

  1. Dev says

    November 20, 2010 at 2:13 am

    Hmm… just a thought:

    “Next open an ‘article’ tag, which is the same as a div, just cleaner.”

    This iteration of the purpose of the ‘article’ tag doesn’t do a lot of good for those interested in understanding HTML5’s newly introduced structural tags. This is a good tutorial, and your usage of the ‘article’ tag is surely justifiable, but the wording in this part could have unknowing developers replacing all of their future ‘div’ tags with ‘article’ tags, because they are seemingly “cleaner”, which is not totally HTML5’s goal in trying to make it standardized markup. I know I’m sucking the fun out of it, but within the relative freedom that HTML5 is giving us, there should come a sense of development responsibility. ‘Div’ tags should still serve as fundamental (key word) structural elements. I stress “fundamental” because HTML5 is giving us much more semantic tags to use, but developers should understand that, like all tags, they should serve a specific purpose and usage that differentiates them from any other tag. Kind of like ‘div’ vs. ‘span’. While some may not understand it, and their “misuse” certainly doesn’t “break” the web, there is a fundamental difference in the purpose of the two.

    I’ll get to the point now. Tutorials about HTML5 don’t need to include the full specifications for every new tag that is used in the example, but as tutorial writers, we should, within reason, understand how to effectively sum up the reason that we chose them, in a way that justifies why the authors of the spec created them in the first place.

    http://dev.w3.org/html5/spec/Overview.html#the-article-element

  2. VJ says

    November 20, 2010 at 4:17 am

    good one — thanks

  3. Big6b says

    November 20, 2010 at 5:54 am

    Quite good tutorial on creating a pop-up bar using html5 and css3

  4. BlackMaxDesign says

    November 20, 2010 at 6:06 am

    Slick, and a very complete walkthrough. Test-drove it in Opera, and it works, though there’s no “close” element of any sort to remove it or hide it that displays in that browser, and it blocks the top of the page from view without any way to display that top section.

  5. Anonymous says

    November 20, 2010 at 9:17 am

    Doesn’t work in FireFox and ie probably too, but still very nice tutorial and result.

  6. Max2010 says

    November 22, 2010 at 2:10 am

    Um. It works in Firefox 3.5.7
    I’m tempted to use this but it’s only a matter of time before it becomes overused and someone comes out with a blocker for it.

  7. Eko Setiawan says

    November 22, 2010 at 7:50 am

    Great tutorial, thanks..

  8. shpyo says

    November 22, 2010 at 8:46 am

    Nice effect, but the whole code of JS should go to the bottom of the page.

  9. Nick Alberti says

    November 22, 2010 at 5:38 pm

    Cool tutorial!

  10. Da-fuzz says

    November 23, 2010 at 1:20 am

    Works in IE8 and even in IE6, only thing that IE doesn’t like is the font replacement.

  11. Madeline Talent says

    November 23, 2010 at 3:57 am

    Nice tutorial. I’ll have to try it!

  12. Emilicus says

    November 23, 2010 at 8:55 am

    Works on ipod touch. Cool!

  13. Eric Hoffman says

    November 24, 2010 at 2:03 pm

    Thanks for the positiv comments guys!

  14. Rostam says

    November 24, 2010 at 3:08 pm

    Nice one, thanks! is there any way to modify this so that the sliding-bar is at the bottom of the page and slides from left to right? I’ve tried it but without success yet :-(
    Appreciate your help :-)

  15. Luis Manfredotti says

    November 25, 2010 at 2:12 am

    Nice Tutorial :-)

  16. Eric Hoffman says

    November 26, 2010 at 5:13 pm

    @rostam you should check out: http://docs.jquery.com/UI/Effects/Slide
    Positioning would probably be: ‘bottom: 0’

    Good luck!

  17. Kobold Avenger says

    December 6, 2010 at 7:48 pm

    You should add:
    -moz-transform
    (and optionally -0-transform)
    transform

    after ever instance of -webkit-transform

    as well as after -webkit-background-clip:
    -moz-background-clip (FF 3.6 and lower)
    background-clip (FF 4.0, Opera & possibly some newer version of Chrome that dropped the prefix already)

  18. matt says

    December 14, 2010 at 9:56 pm

    Is there an easy edit to the js to make the panel hide by default on page load?

  19. Abba says

    January 21, 2011 at 4:11 pm

    ‘article’ tag, which is the same as a div, just cleaner.
    don’t say that. use ‘article’ for articles and use ‘div’ for things that are undefined.

  20. Muneeb says

    May 2, 2011 at 12:19 am

    I’d love to create a WordPress plugin based on your cute popup bar am I allowed or there are any license issues please let me know I’m waiting thanks.

  21. mike says

    July 29, 2011 at 4:24 am

    Fail – wildly divergent behaviors on three browsers tested.
    In fireFox 5, there is a right arrow which when clicked, turns into a little box with a fat arrow that does not go away.

    Pretty cool, I thought, until I tested with IE 7 on XP -both with and without compatibility mode.

    The right arrow and the popup goes away, with no way to summon the popup to return -other than a page refresh.

    on Safari, the down button pulls it down, this gets turned into an up button..which hides it again.

    overall..fail :(

    it looks cute tho!

Leave a Reply

Your email address will not be published. Required fields are marked *

Please prove you're human *

Recent Posts

  • How to Choose a Stunning Font Package for Your Brand
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022