Today’s freebie on 365psd is a dropdown upload widget for a OSX app. Free PSD designed by Geldy.

The post Dropdown upload widget appeared first on Freebiesbug.

Tracks type is all caps fonts and alphabet only, inspired with railway tracks slash, static, dynamic, and clean.

The post Track free font appeared first on Freebiesbug.

Once you get the hang of it, the Table of Contents generator in Adobe InDesign is a breeze to use, and if you’re using an InDesign template, most of the work is already done for you, making your job flow that much easier and faster.

Here’s why:

InDesign’s Table of Contents generator works with Character Styles and Paragraph Styles to generate a Table of Contents. The generator searches your document for Styles of various titles, subtitles, headings, and subheadings, as specified by you, the user, and generates a Table of Contents based on these Styles, along with certain formatting options that you choose from the generator dialogue.

Your InDesign template most likely comes with a handful of Styles predefined, and you can make new ones easily by formatting your text with the Character and Paragraph palettes, highlighting your text, and choosing New Paragraph Style from the dropdown menu in the upper right hand corner of the Paragraph Styles palette. Be sure to name your new Style by double clicking it in the palette’s list and entering a name that you can remember.

Now go to Layout>Table of Contents. If for some reason you don’t see Table of Contents under the Layout menu, choose Layout>Show All Menu Items, and the menu choice will appear.

Clicking on Table of Contents brings up the Table of Contents dialogue box. Here, you will be generating a list of text titles (and subtitles, if you like) based on the text that you have already formatted into Styles within your document. You can go ahead and name your Table of Contents something like “Contents” or something else, if you like. Also, you can go ahead and choose a display format for your Contents list based on a Paragraph Style that you have already defined.

Note: For the TOC Style entry, you must already have a saved Table of Contents style previously formatted. If you don’t have one yet, you can save a new one by clicking Save Style on the right of the dialogue.

You base your TOC Style on the Other Styles listed in the dialogue and choosing Add or Remove. Add two or more Paragraph Styles if you want to include Headings, Subheadings, and Figures in your TOC. You must have previously defined Styles for each of these configurations, though, so if you don’t already have them, go back and define those now.

Each Style that you Add to the “Include Paragraph Styles” box can be modified individually to fit into the TOC configuration neatly. Click on one of the Included Styles, and you can adjust its TOC display just below, under the “Style:” section, the one with the colon.

Select one of your included Styles, and make sure you click on More Options on the right hand side of the dialogue. This will display all of your options for formatting each heading and subheading individually. The Style you chose to “Include” earlier just means that each instance of that Style from your document will receive a place in your TOC list. You can format these entries differently if you want by choosing a Style for your list from the Entry Style menu. Choose where to place the page number, and choose a Style for your Page Numbers. For entries into the Between Entry and Number input, you can use the flyout menu (the little triangle on the side of the box) to choose spacing based on definitions like “em space,” “white space, “ etc., or you if you know the codes, you can simply input these manually. You can choose whether or not to sort your entries in alphabetical order (if you don’t, they will be sorted based on page number), and you can assign a level to your new Style. Level defines which Style will be placed at highest priority and closest to the left margin. Play around with this menu choice to see what I mean.

Now, in the Include Paragraph Styles box, choose another Style from your document that you want to include in your new TOC. Selecting it resets the Style: options for the newly selected Style, and you can get to work defining the look and placement of your second style.

The Options choices allow you to add certain preferences. PDF bookmarks, for instance, will create clickable bookmarks when you export to PDF. These are great for reading on the web design Singapore or tablets.

Click Save, and your cursor automatically converts to a Text Insertion format. Click and drag or just click to insert your new Table of Contents with the formatting you chose. You can always re-size your text box and edit specific text attributes once it’s placed.

Play around with the Table of Contents dialogue based on your InDesign Template’s Paragraph Styles, and you’ll be up and running in no time creating complex and detailed Table of Contents.

About the Author:

Sam Singer is Graphic Designer and Copywriter who specializes in illustration, infographics, print design, and web design Singapore graphics. Sam writes for www.bestindesigntemplates.com, a web design Singapore site where will find plenty of templates for magazines, annual reports, catalogs, and other documents that work with and without Table of Contents.

Many people don’t like the new iOS7 interface, so some web design Singaporeer has redesigned their personal version of iOS7. PSD example by AfterMilk.

The post iOS7 icons redesigned appeared first on Freebiesbug.

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.

• Demo

Building the Framework

We 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 <header> element is the “official” container which holds both the logo and navbar. You can see this brief pull-down effect in the live demo page.

Base CSS Styles

Aside 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 <br> tag selector to increase the size of line breaks, and also CSS3 anti-aliasing on rendered text and various highlighted text effects. Another big point is how we are structuring the overall page to center within the layout.

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 & Footer

Inside 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 if{} statements to help clarify what we are checking. Let’s break it down into three major sections.

$(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. topdisplay will check the current status of our header’s top property in CSS. We set the default position value at -35px, so in this case the header would be visible. Otherwise we have it hidden, and need to readjust back to -35px via animation.

The second variable footdisplay will check the display property of our footer. This will be needed for the logic of checking whether to display or hide the bottom footer element. Also we will need scrolltoppx which holds a numerical value in pixels of the total distance from the top of the screen. It will update with every user scroll event.

 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 autoDisplayHeader() which is written a bit later in the JavaScript file.

Similarly if we scroll beyond 130px and the header is still displayed, we need to hide it. This uses a different function named autoHideHeader(). But notice this code is contained inside a JavaScript function setTimeout(). After the user stops scrolling we pause for 600ms and then hide the header, simultaneously displaying the “back to top” arrow.

 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 getDocHeight(). This is not my own function but originally written by James Padolsey for the purpose of supporting a greater number of older legacy browsers.

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 #toparrow div. Notice that we are now outside of the scrolling event handler; so these are the only 2 event listeners which trigger some type of response on the page.

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.

• Demo
• Download

Final Thoughts

I 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.