Smart (Auto-Hiding) Website Header & Footer using jQuery [Tutorial] |
- Smart (Auto-Hiding) Website Header & Footer using jQuery [Tutorial]
- 5 Problems With ‘Universal’ Design
- Creating Responsive Websites with Adobe Edge Reflow
| Smart (Auto-Hiding) Website Header & Footer using jQuery [Tutorial] Posted: 17 Jun 2013 08:01 AM PDT There are plenty of reasons for using a sticky header navigation in your website. It provides easy access for top-priority links, plus a way back to the homepage from anywhere on the site. However problems may arise when you have a navigation bar which blocks some of the page content. In this tutorial I want to demonstrate how we can build a locking header bar which will auto-hide itself after scrolling down the page. Also when scrolling to the very bottom we will display a small footer which includes many of the same nav links. This technique can be used in almost any website interface to improve readability and general user experience. Building the FrameworkWe need to start out with a basic HTML5 template using a fixed header and a basic content area. For this demo I have included a series of external third party scripts hosted from Google’s CDN. This includes a couple web fonts along with the jQuery and jQuery UI libraries. <!doctype html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Auto-Hiding Header Demo Page</title> <meta name="author" content="Jake Rocheleau"> <link rel="shortcut icon" href="http://www.hongkiat.com/favicon.ico"> <link rel="icon" href="http://www.hongkiat.com/favicon.ico"> <link rel="stylesheet" type="text/css" media="all" href="styles.css"> <link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Courgette|Leckerli+One"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.js"></script> <script type="text/javascript" language="javascript" charset="utf-8" src="autohide.js"></script> </head> You may notice we also need a third local JavaScript file named autohide.js. This will provide all the JS codes we need to animate and hide/show the header block. Let’s take a brief look at the content structure to understand how I have laid out the individual div blocks. <div id="headwrapper"> <div id="fixedheader"> <header id="top"> <div id="logo"> <!-- Logo Source: http://www.psdgraphics.com/psd/psd-power-button/ --> <h1><a href="index.html"><img src="http://media02.hongkiat.com/smart-header-footers-jquery/power-logo.png" alt="AutoHide Header"></a></h1> <h2>intelligent auto-hide effect</h2> <ul id="rightlinks"> <li><a href="javascript:void(0)">Register</a></li> - <li><a href="javascript:void(0)">Login</a></li> - <li><a href="javascript:void(0)">FAQ/Wiki</a></li> - <li><a href="javascript:void(0)">Support</a></li> </ul> </div> <nav id="topnav"> <ul> <li><a href="javascript:void(0)">Homepage</a></li> <li><a href="javascript:void(0)">About Us</a></li> <li><a href="javascript:void(0)">Publications</a></li> <li><a href="javascript:void(0)">Authors</a></li> <li><a href="javascript:void(0)">Other Projects</a></li> <li><a href="javascript:void(0)">Get In Touch</a></li> </ul> </nav> </header> </div> <!-- /end #fixedheader --> </div> <!-- /end #headwrapper --> There are a fairly large number of nested divs in the header area so I will explain the structure first. T he outermost container #headwrapper is given the limited width 780px and a margin: 0 auto; property in CSS. This will center the entire header on the page. Inside is a div #fixedheader which is actually the main fixed item. This container needs to use a grey background and be pushed up into the top of the page using negative positioning. As the header animates upwards it will first pull down a bit, and without this container we just see the background behind it. The internal Base CSS StylesAside from the inner content we do not need to learn much else about the HTML. All of the internal content areas are pushed exactly enough pixels to meet edge-to-edge with the header. It is much easier to explain how we can style the layout, beginning with a few CSS resets. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { height: 101%; } body {background: #a4b1c2; font-family: Tahoma, Arial, sans-serif; font-size: 62.5%; line-height: 1; } ::selection { background: #f2c6dc; color: #111; } ::-moz-selection { background: #f2c6dc; color: #111; } ::-webkit-selection { background: #f2c6dc; color: #111; } br { line-height: 1.95em; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } strong { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } img { border: 0; max-width: 100%; } a { color: #7091c7; } a:hover { color: #4e72ad; } Our topmost code is a mixed template I put together for this tutorial which includes a few useful style resets. We are adding the I am using 2 different wrappers for containing the header and the body. This offers an easier solution to separate content and even merge the idea into a full-width layout. The logo sections and top navigation bar are put together to work as a fluid design, even though this particular layout is fixed-width. /* page structure */ #fixedheader { display: block; position: fixed; top: -35px; padding-top: 25px; margin: 0; height: auto; width: 780px; background: #303030; z-index: 9999; -webkit-box-shadow: 0 -3px 4px 0px #222; -moz-box-shadow: 0 -3px 4px 0px #222; box-shadow: 0 -3px 4px 0px #222; } #pagewrapper { display: block; position: relative; width: 780px; background: #fff; padding: 0; margin: 0 auto; margin-top: 117px; -webkit-box-shadow: 0 3px 7px -1px #222; -moz-box-shadow: 0 3px 7px -1px #222; box-shadow: 0 3px 7px -1px #222; } #headwrapper { display: block; width: 780px; background: #fff; padding: 0; margin: 0 auto; } /* top header */ #top { display: block; position: relative; width: 780px; padding: 0; margin: 0; top: 0; z-index: 9999; background: #303030; border-bottom: 3px solid #414d65; } #logo { display: block; width: 100%; height: 82px; top: 0; padding: 0 12px; background-color: #111; background-image: -webkit-gradient(linear, left top, left bottom, from(#303030), to(#111)); background-image: -webkit-linear-gradient(top, #303030, #111); background-image: -moz-linear-gradient(top, #303030, #111); background-image: -ms-linear-gradient(top, #303030, #111); background-image: -o-linear-gradient(top, #303030, #111); background-image: linear-gradient(top, #303030, #111); } /* navigation bar */ #topnav { display: block; border-top: 1px solid #839aca; background: #485c86; background-image: -webkit-gradient(linear, left top, left bottom, from(#5f739d), to(#485c86)); background-image: -webkit-linear-gradient(top, #5f739d, #485c86); background-image: -moz-linear-gradient(top, #5f739d, #485c86); background-image: -ms-linear-gradient(top, #5f739d, #485c86); background-image: -o-linear-gradient(top, #5f739d, #485c86); background-image: linear-gradient(top, #5f739d, #485c86); height: 32px; } #topnav ul { padding: 0 10px; } #topnav ul li { display: inline; font-size: 1.2em; } #topnav ul li a { display: block; float: left; line-height: 31px; padding: 0 7px; margin-right: 6px; color: #d1dfeb; font-weight: bold; text-decoration: none; -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; transition: all 0.4s linear; } #topnav ul li a:hover { background: rgba(255,255,255,0.2); text-shadow: 1px 1px 0 rgba(0,0,0,0.2); } Notice a lot of these codes are using CSS3 properties for gradients and transition effects. It helps to go the extra mile and spice up your design with these features. Most browsers can handle the properties, and the fallback solutions are just natively rendering properties, so it isn’t much of a downgrade. #toparrow { display: none; width: 130px; height: 130px; position: fixed; bottom: 45px; right: 45px; cursor: pointer; background: url('http://media02.hongkiat.com/smart-header-footers-jquery/scrolltop-arrow.png') 0 0 no-repeat; z-index: 9999; } This last block of code targets the top arrow icon I’ve added into the page. This div is fixed onto the right side and will only appear after the header is hidden. This solution allows users to click for an instant jump up to the top of the page. It can be easier than scrolling in most cases. Animating the Header & FooterInside the JS file we are putting together numerous logic statements. It is listening for the window scroll event and firing various functions depending on the circumstances. I have included source comments with each of the $(document).ready(function(){ var timer; $(window).scroll(function() { var topdisplay = $('#fixedheader').css('top'); var footdisplay = $('#fixedfooter ul').css('display'); var scrolltoppx = $(this).scrollTop(); This is the first piece which contains an event listener and some new variable definitions. The second variable if(scrolltoppx < 10 && topdisplay != "-35px") { // if we scroll up anywhere from 9px-0px and the header is hidden, // immediately display the header smoothly into the scroll clearTimeout(timer); autoDisplayHeader(); $('#toparrow').fadeOut(350); } if(scrolltoppx > 130 && topdisplay == "-35px") { // if we scroll beyond 130px and the header is still displaying, // hide the header after 700ms pause clearTimeout(timer); timer = setTimeout(function() { autoHideHeader(); $('#toparrow').fadeIn(450); }, 600); } Now here is the first big chunk of logic statements for calling our pre-defined functions. The first statement checks if the header is not at -35px and we scroll back towards the top area; we need to display the header. We do so by calling a function Similarly if we scroll beyond 130px and the header is still displayed, we need to hide it. This uses a different function named if(scrolltoppx + $(window).height() == getDocHeight()) { // if the current window position + the above space equals the total window height // then the user is at the bottom of the page. // in this case we quickly display the small fixed footer if(footdisplay == 'none') { $('#fixedfooter ul').fadeIn(300); } } if(scrolltoppx + $(window).height() != getDocHeight() && footdisplay == 'block') { // if the user is not at the bottom and our footer is being displayed // we need to hide it until we re-enter the bottom again $('#fixedfooter ul').fadeOut(300); } }); $('#toparrow').on('click', function() { // when clicking the arrow we are animated immediately to the top $("html, body").animate({ scrollTop: "0px" }); }); }); These last few statements refer to the footer block. We are putting together the user’s current placement on the screen added to the rest of the page height. This should equal the full window height, which is provided via a custom function The other logic statement is checking the reverse, and auto-hiding our footer once we scroll away from the bottom. And finally the last clause is listening for when the user clicks on the All of the custom functions are easy enough to understand with a bit of studying. But I have copied them below in case you are interested. /** * functions to hide and display the header */ function autoHideHeader(){ $('#fixedheader').animate({ top: '-149px', }, 450, 'easeInBack'); $('#pagewrapper').animate({ 'margin-top': '3px', }, 450, 'easeInBack'); } function autoDisplayHeader(){ $('#fixedheader').animate({ top: '-35px', }, 400, 'easeOutBack'); $('#pagewrapper').animate({ 'margin-top': '117px', }, 400, 'easeOutBack'); } /** * cross-browser function to determine full browser height * needed to check when user hits the bottom of the webpage * source: http://james.padolsey.com/javascript/get-document-height-cross-browser/ */ function getDocHeight() { var D = document; return Math.max( Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight) ); } In older browsers where JavaScript is disabled there isn’t much of a loss for users. The header navigation will always stay fixed regardless of scrolling distance. So this extra technique just provides a bit of finesse to your website interface. It is also a convenience for the user to have an uncluttered browsing experience. Be sure and check out my live demo to get a bigger picture of the whole web application. Final ThoughtsI hope this tutorial may provide some useful ideas to web developers. Many of these codes are re-usable with just a few customizations to the CSS. But you should download a copy of my demo project codes to save this working template as a resource. Additionally if you have any thoughts or questions on the tutorial feel free to share with us in the post discussion area. 
   | ||
| 5 Problems With ‘Universal’ Design Posted: 17 Jun 2013 06:01 AM PDT In the past, I’ve interviewed potential clients who have asked me for a design with ‘universal appeal’. On the surface, I completely understand their concern: they don’t want to alienate any potential customers with visuals that are too ‘out there’ in terms of design. That’s a legitimate desire (and I let them know that) but it’s also stupid (I don’t let them know that). These clients are suffering from a malady that I myself and probably most fledgling designers once suffered from: the desire to appeal to everyone. It’s not my job to disabuse these potential clients of their bad marketing tactics. My job is to design highly targeted materials for clients who know the power of the niche. So I typically send these people – very likely to be horrible clients, were I to work with them – politely on their way. But if you’re a designer struggling with a similar problem, don’t worry. Today, I’m here to help you, by exposing 5 of the biggest problems with ‘universally appealing’ design, and how to avoid falling for its seductive trap. Recommended Reading: How To Become A High-Demand Designer (And Get the Good Clients) 1. It’s Actually Not Universal At AllThink about who you’re really trying to please when you make a so-called ‘universal’ design for a client. While you’re thinking about it, let me tell you a story about a friend of mine who works in catering. She serves hundreds of pre-planned meals to large groups of people at all sorts of events. Very often, she will encounter a lone person who comes up to the catering cart and demands a special type of dish that the crew hasn’t prepared. Chefs must become very good at declining weird requests, especially if they work on the go. There’s just not enough time to attend to every specific person’s needs when there are hundreds of people to feed. The goal of any chef catering an event is to make sure the most number of people attending have the best dining experience possible. Know Your AudienceWhen you’re designing a practical solution for a niche audience, you have to ignore the wishes of the outlying individuals in favor of the entire group. So that client who asks you for something ‘universal’ actually isn’t trying to appeal to the masses. He’s simply an outlier attempting to appease his own idea of what his target market wants. It’s clear he hasn’t done any kind of research to find out what the majority of his market would actually best respond to. 2. It’s Bland And TastelessJust like the world’s best fine dining, the world of design has many, multifaceted flavors. Making the ‘perfect’ design that will appeal to everyone is impossible. However, this doesn’t mean you should always be striving for the most unique and peculiar design in the world. Some people actually prefer to eat fast food versus an elaborately prepared gourmet meal, and that’s okay. You just have to know who you’re serving. Read Also: 7 Tips & Tricks to Creating a Gorgeous Restaurant Website Remember, fancier doesn’t always equal better. Just like many people think opera music is boring and may prefer pop music instead, your niche audience may not be getting much out of your super high level design work. If you’re a gourmet chef, embrace that. But if you’re a short order cook, then embrace that instead. Whatever your market’s definition of ‘bland’ might be, make sure you embody the opposite to make the biggest impact. 3. It Violates The ‘Magic Mirror’ RuleIf you’re familiar with the fairy tale Snow White, you know that the evil queen looks into a magic mirror that tells her who the fairest lady in all the land is. The answer, of course, is supposed to be herself. The queen has no desire to see anything not directly supportive of her hypothesis that she is, in fact, the fairest one of all. Am I getting way too analytical about Snow White? Perhaps, but I have a point, darn it. In our modern world, where people have infinite choices, if they see that a product or service offering is not like a ‘magic mirror,’ directly for them and them alone, they tune out completely and close the browser window. ‘Why should I waste my time finding the bits of your sales copy that are relevant to me when your competitor is targeting me and my needs specifically with all of their copy? I don’t want to see examples of people and situations not relevant to me. I’m the fairest one of all, and I only want to see targeted marketing that supports my opinion.’ 4. It Only Comes In One SizeAnd if you don’t think it is the case that people tune out and devalue things not directly targeted at them, consider your own buying habits. When was the last time you purchased a product or service from a ‘one size fits all’ company? Did you genuinely treasure that item? Where is that item now on your hierarchy of possessions? Could you easily replace it with any one of a hundred different items from a different store? That’s what clients think when they come across a designer who tries to cater to everyone. I’m not trying to suggest that cheap or bargain items don’t have their place. It makes little sense to purchase, say, an expensive designer pen when a cheaper one from the dollar store will do the same job. But for important purchases, like freelance design work, your client has to know that they’re getting real value, and not simply a generic solution that only comes in one size. 5. It’s In The Wrong LanguageLastly, consider the language you use to appeal to your target audience. I don’t mean literally hire a translator, but just that every niche group has its own idiosyncratic ways (that are quite distinct) of communicating with one another and digesting information. This applies to visuals and user experience as much as to words and copy. You will have to adjust your communication style depending on which age ranges, income brackets, or education levels your viewers are in. Recommended Reading: Design Multilingual Website: A Beginner’s Guide For example, if your target is men aged 25 to 45, that’s way too broad and ‘universal’ to make a real impact. A 25-year-old man has almost nothing in common with a 45-year-old man in terms of his life goals or desires. Even a niche market’s sense of humor can have a drastic impact on how they will view your design. Don’t make the mistake of using the same language for every niche. Learn the specific needs of your target market and become fluent in them. In ConclusionDesigners who try to cater to too many different individuals end up shooting themselves in the foot. It may seem intuitive, but really, it’s just the opposite. You wind up trying to please everyone in your target market, and ultimately because of this, you please no one. 
   | ||
| Creating Responsive Websites with Adobe Edge Reflow Posted: 17 Jun 2013 03:01 AM PDT In today’s, we are going to explore a new tool from Adobe called Edge Reflow. I believe it helps creating a responsive website “looks so easy”, definetely something a designer and developer should check out. Adobe Edge Reflow is at the time of this writing in public beta stage, and available to download for free. To download, login to the Adobe Creative Cloud site, and you can find the app listed in the Apps Center page under the Edge Tools and Service section. Check out: 50 Useful Responsive Web Design Tools For Designers Setting-up Grid and WorkspaceEdge Reflow comes with a set of UI that allows you to manage responsive layout without dealing with codes. At the left of the workspace, you will find several options to control webpage properties; you can set the number of columns, column gutter, the width of the content and specify the unit measurement for those lengths – px, percentage, or em. In Edge Reflow, You can set “break points” easily. The break points are the threshold where your website styles will shift. To set the break points, click on the Plus button that is found at the top right of the workspace. Then, slide the page handler to the right or left and click on the plus button to set a new break point. You can specify different styles for the elements on how they should look or adapt within each break points. Adding Elements and StylingAdding an element in Edge Reflow is as easy as a click. To create a new element, click on the rectangle icon and drag your mouse across the workspace. Upon selecting the element, Edge Reflow will display the properties that are applied, such as the width and the height, the margins, and the paddings. You can find more options to add styles in the Styling tab. In this tab, you can add background color (even with gradients), borders (including border radius), and adjust the opacity for selected elements. You can inspect the styles of the elements from the DOM Tree Inspector. It is found at the bottom of the workspace. You can also preview the result in the browser by pressing Command + F12 (on Mac) or Ctrl + F12(on Windows). Adobe Edge Service IntegrationReflow is integrated with other Adobe Edge services. When you are working with text, you are able to apply font families from Adobe Edge Webfont. You can also test your website across your mobile devices seamlessly using Adobe Edge Inspect. ConclusionSince this is only a Preview, there are several key features that are not included. In the current version, I can’t find how to export projects to HTML and stylesheet documents, and the Preference menu is disabled. Still, Adobe Edge Reflow looks really promising as a tool in the niche, and it could be very helpful particularly for entry-level users. With Reflow, they can create a responsive website without having to deal with the codes behind the screen. Have you tried this tool? 
   |
| You are subscribed to email updates from hongkiat.com To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
0 comments:
Post a Comment