BootStrap

Tutorial: Simple, yet usable jQuery based dropdown menu

Tamuir khan — Sun, 22 Jul 2012 20:46:50 +0000

Based on the amount of requests i’ve received lately on this post, on creating a simple, yet extendable dropdown menu, i believe easiest way to achieve this would be through simple jquery, so here it is.

The zip file contains(psd + html + css (since i coded this in stylus, .styl file is attached as well)), ready to be used for your next project.

Here’s how it will look

Lets take a look at the HTML markup first




	Simple, yet usable jQuery based dropdown menus
	
	



	 
		Simple, yet usable jQuery based dropdown menus
		
			
				Home
				Products
				Services
				Contact Us
			
		
	

	
		
			
				So, almost every twenty-four hours, when the watches of the night were set, and the band on deck sentinelled the slumbers of the band below; and when if a rope was to be hauled upon the forecastle.
			
			
				the sailors flung it not rudely down, as by day, but with some cautiousness dropt it to its place for fear of disturbing their slumbering shipmates; when this sort of steady quietude would begin to prevail, habitually, the silent steersman would watch the cabin-scuttle; and ere long the old man would emerge, gripping at the iron banister, to help his crippled way

Its a simple UL, LI based navigation system, now lets add the dropdown code.

Products
      
	
		
			 Mobile Phones(view all)
			Samsung Galaxy SIII
			Apple Iphone 3gs
			Google Nexus
			Apple Iphone 4S
		
		
			 Tablets (view all)
			Google Nexus 7
			Apple IPAD
			Amazon Kindle

if you take a look closely, you’ll notice 2 things

LI now have a class named “dropdown”

The Parent Anchor has a class as well “ddIcon”

dropdown class is used for accessing it with jQuery mainly to show/hide the dropdown menu and is required for the menu to work, the second class “ddIcon” is an indicator for dropdown and is optional.

Let’s style this menu, this is how styling looks like in stylus.

@import 'nib'

//  Eric Meyer's reset
global-reset()
reset-html5()

// custom mixins

@font-face {
    font-family: 'HattoriHanzoLight';
    src: url('Hattori_Hanzo-webfont.eot');
    src: url('Hattori_Hanzo-webfont.eot?#iefix') format('embedded-opentype'),
         url('Hattori_Hanzo-webfont.woff') format('woff'),
         url('Hattori_Hanzo-webfont.ttf') format('truetype'),
         url('Hattori_Hanzo-webfont.svg#HattoriHanzoLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

Hattori_Hanzo()
	font-family: HattoriHanzoLight

html, body
	height: 100%

body
	background: linear-gradient(top, #DFF0FB 0%, #C3E4F7 100%)
	font-family: sans-serif
	height: 100%

.container
	width: 960px
	margin: 0 auto
	padding-top: 50px

	h1
		Hattori_Hanzo()
		font-size: 30px
		color: #666
		margin-bottom: 1em

	nav
		border-radius: 4px
		background-color: #fff
		height: 37px

		ul
			li
				position: relative
				float: left

				a
					font-size: 12px
					text-decoration: none
					font-weight: bold
					text-transform: uppercase
					color: #545454
					padding: 13px 15px
					display: block
					border-right: 1px solid #f9f9f9

					&.ddIcon
						background: transparent url("../../images/dd.png") no-repeat 86% 52%
						padding: 13px 25px 13px 15px

					&:hover
						background-color: #cc333f
						color: #fff

				&.active
					a
						background-color: #cc333f
						color: #fff

				&:first-child
					a
						border-radius: 4px 0 0 4px

				.subNav
					position: absolute
					background-color: #cc333f
					padding: 15px 15px 20px
					width: 172px
					left: 0px; top 38px
					display: none

					.navSection
						padding: 5px 0

					h4
						margin-bottom: 0.5em


						a
							font-size: 11px
							color: #edc951
							text-transform: capitalize
							border-bottom: 1px solid #D33B47
							padding: 7px 10px
							
							&:hover
								color: #edc951

							span
								float: right
								font-size: 10px
								color: #fff
								transition(color .5s ease)

								&:hover
									color: #390206

					a
						float: none
						border: none
						display: block
						text-transform: capitalize
						color: #fff
						padding: 7px 15px
						transition(color .5s ease)
						line-height: 1.3

						&:hover
							color: #390206
	.section
		clear: both
		padding: 10px

		article
			p
				Hattori_Hanzo()
				font-size: 16px
				color: #488fb8
				line-height: 1.3

			header
				p
					padding-top: 20px
					Hattori_Hanzo()
					font-size: 20px
					color: #333
					line-height: 1.3
					margin-bottom: .4em

most parts of the file is self explaintory, i’ve used mixins do some stuff, mixins are type of functions that stylus, less & sass provide for productivity, more on stylus, please take a look at Getting started with Stylus.

Now we need to add Interactivity, here’s the simple, yet useful jquery function

$(function(){   
    $("li.dropdown").hover(function() {
        if ($("this:has(div.subNav)")){
            $(".subNav").css({'display':'none'});
            $(".subNav", this).css({'display':'block'});
            $("nav ul li").css({'position':'relative', 'z-index':'1001'});    
            $(this).addClass("active");
        }
    }, function(){
        $(".subNav").css({'display':'none'});
        $(this).removeClass("active");
        $("nav ul li").css({'position':'relative', 'z-index':'1'});      
    });

});

You can easily plug-in a new dropdown menu by just creating a div with the classname “subNav”, within LI, you also need to add “dropdown” class to the LI itself.

Hope you liked it and if you have any question, feel free to comment.

Until next time~ ciao

P.S I’ve added some visual enhancements, check it out.

IPAD app of the Week #1 – Kit Digital

Tamuir khan — Sun, 18 Mar 2012 12:00:28 +0000

Kit Digital is perfect example of well thought user experience and carefully designed user interface, designed by Martin Oberhauser for IPAD.

This app is developed to provide customers information related to companies, their operations, case studies and much more. It also includes a simple form to generate prospective leads on location.

Kit Digital in Action

App Screens

Until next time.

Getting Started with Stylus – CSS Pre-Processor

Tamuir khan — Sun, 11 Mar 2012 18:36:27 +0000

Today we are going to look at another CSS Pre-processor just like Sass & Less

Stylus is an expressive, dynamic, robust CSS pre-processor from what i’ve seen, and it packs more power than Less & Sass.

Stylus comes equipped with all the features that Sass / Less provides. On top of that, it supports better Inheritance, top notch Error Reporting and provides flexibility when it come to your preference in writing code.

In this tutorial, we’ll take a look at how to install Stylus on Windows and compile the CSS using command line.

- Installation

To install Stylus , we require Nodejs. If you already have Nodejs installed on your system, you can skip the next step.

1- Installing NodeJS

Installing NodeJS on windows is very easy. Just download their installer and run it. After successful installation, a reboot might be required.

To check if it installed successfully, run the following in your Windows command line.

npm

If you see “Usage” output, you are in luck.

2- Installing Stylus

Once Nodejs is installed, we can install Stylus through NPM(node package manager). Here’s the command:

npm install stylus -g

You will see Package manager download files required to run Stylus. Copy them to appropriate places. Once installed, you can test by compiling a sample file like this:

//stylus files are save as .styl extension.

stylus -c sample.styl

You will see “compiled sample.css” or an error if there was some problem with compiling.

Amazing init? You got yourself a working Css Pre-processor.

Now, lets take a look at stylus language itself, we’ll start with

Code Writing Styles

Stylus allows you to write code in many ways, if you don’t like braces?

//stylus will still understand your code without braces.

a.button
  -webkit-border-radius: 5px
  -moz-border-radius: 5px
  border-radius: 5px

Instead, why not drop the colons and make it more simpler? See Below:


border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments

body
  font 12px Helvetica, Arial, sans-serif

a.button
  border-radius(5px)

pretty slick?

Variables

Stylus does not require you to use a ‘$’ like Sass or ‘@’ like Less does, but it does support the ‘$’ symbol like prepend. So, if you are coming from Sass, you won’t have difficulties with variables and if you are coming from Less, I’d say just don’t use any prepend. (recommended)


font-size = 14px

body
   font font-size Arial, sans-serif

output:


body {
   font: 14px Arial, sans-serif;
 }

Here’s another example using variable as Expression.


font-size = 14px
font = font-size "Lucida Grande", Arial

body
  font font sans-serif

output:


body {
  font: 14px "Lucida Grande", Arial sans-serif;
}

Interpolation

Interpolation is another great feature. It’s a way to use an expression, which becomes part of the identifier { … }

table
  for row in 1 2 3 4 5
    tr:nth-child({row})
      height: 10px * row

output:

table tr:nth-child(1) {
  height: 10px;
}
table tr:nth-child(2) {
  height: 20px;
}
table tr:nth-child(3) {
  height: 30px;
}
table tr:nth-child(4) {
  height: 40px;
}
table tr:nth-child(5) {
  height: 50px;
}

Operators

Stylus provides wide variety of math operator support like Less / Sass.


leftSpace = 10

a.Link
  margin: (24px/2)
  left: 5 * leftSpace
  padding: 4px - 2

output:


a.Link {
  margin:12px;
  left:50;
  padding:2px
}

Mixins

Mixins are much similar to functions, but used in a different way, i.e a statement rather than part of an expression.

border-radius(a)
  -webkit-border-radius a
  -moz-border-radius a
  border-radius a

input[type=input]
  border-radius(5px)

output:

input[type=input]{
 -webkit-border-radius:5px;
 -moz-border-radius:5px;
 border-radius:5px
}

Built-in Functions

Stylus provides a wide range of built-in functions. Here are some of them:


red(color) /*Return the red component of the given color, same for green and blue*/
dark(black) /*returns true if the color is dark otherwise false*/

lighten(color, 10%); /* returns a color 10% lighter than 'color' */
darken(color, 10%);  /* returns a color 10% darker than 'color' */
 
saturate(color, 10%);   /* returns a color 10% more saturated than 'color' */
desaturate(color, 10%); /* returns a color 10% less saturated than 'color' */

Conditional Statements

If you want to do something specific based on some condition or a value, you are in the right place.

Trust me, Stylus provides a very easy and generic syntax. I still remember that it took me 20 good mins to figure it out in Less.

Here’s how it works:

overload-padding = true

/*if overload-padding is true swap padding for margins*/
if overload-padding
  padding(y, x)
    margin y x

body
  padding 5px 10px

output:

body{margin:5px 10px}

Inheritance

Stylus provides better Inheritance than Less and also Sass in some conditions. Here’s how it works:

red = #E33E1E
yellow = #E2E21E

.message
 padding: 10px
 font: 14px Helvetica
 border: 1px solid #eee

.warning
 @extends .message
 border-color: yellow
 background: yellow + 70%

.error
 @extends .message
 border-color: red
 background: red + 70%

.fatal
 @extends .error
 font-weight: bold
 color: red

output:

.message, .warning, .error, .fatal{ padding:10px; font:14px Helvetica; border:1px solid #eee}
.warning{ border-color:#e2e21e; background:#f6f6bc }
.error, .fatal{ border-color:#e33e1e; background:#f7c5bc }
.fatal{ font-weight:bold; color:#e33e1e}

Error Reporting

Error Reporting is where Stylus is far superior than less, and somehow better than Sass.

another example, where error is in the included file.

We have just barely scratched the surface… For more check out Stylus Documentation

That’s all for today, ciao.

10 lifesaving jQuery snippets

Tamuir khan — Mon, 02 Jan 2012 11:20:44 +0000

Developing interactive components for websites usually require the same code like equal div Height, Browser detection, preloading images, disabling right-click.. etc.

Yeah you guessed it right, today we gonna share some life saving jQuery snippets that will help you do simple tasks.

01- Display Loading Graphic Until Page Fully Loaded

$(window).load(function() {
    // Animate loader off screen
    $("#loader").animate({
        top: -200
        }, 1500);
});
// where loader is 
//and first element to be loaded.

02- How to Bind a function to an event

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});

03- Smooth scrolling to an anchor

$(document).ready(function() {
	$("myLink").click(function() {
		$("html, body").animate({
			scrollTop: $($(this).attr("href")).offset().top + "px"
		}, {
			duration: 450,
			easing: "easeOutBounce"
		});
		return false;
	});
});

04- How to Switch StyleSheets With jQuery

	$('link[media='screen']').attr('href', 'Alternative.css');

05- Add :nth-of-type to jQuery


$.expr[':']['nth-of-type'] = function(elem, i, match) {
    var parts = match[3].split("+");
    return (i + 1 - (parts[1] || 0)) % parseInt(parts[0], 10) === 0;
};

06- How to find out the index of an element in an unordered set

$(document).ready(function(){
 $("ul > li").click(function () {
     var index = $(this).prevAll().length;
 });
});

07- Disable right mouse click


$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });
});

08- How to refresh the src of an image with jQuery


$(document).ready(function(){
   $(imageobj).attr('src', $(imageobj)
           .attr('src') + '?' + Math.random() );
});

09- Automatically Discover Document Links And Apply Class


$(document).ready(function(){
   $('a[href]').each(function() {
   if((C = $(this).attr('href').match(/[.](doc|xls|pdf)$/))) {
       $(this).addClass(C[1]);
   }
});
});

10- Better Broken Image Handling

//  images that a browser can't find fire off an "error" JavaScript event we can watch for.
$('img').error(function(){
        $(this).attr('src', 'missing.png');
});

// Or, hide them
$("img").error(function(){
        $(this).hide();
});

Hope this helps.

15 Free Freshly Baked Pixel Perfect UI Elements

Tamuir khan — Wed, 28 Dec 2011 19:19:26 +0000

And here we are again, with another great hand picked free to download list, which will quench your thirst for UI Elements and will be very handy in your next project.

White Blue Web/UI Elements

Dark UI Kit (Part 1 of 2)

Blaubarry UI Kit

Sleek UI Elements

UI Bundle

iTunes Inspired UI Kit

Butterscotch UI Kit

Black UI Kit

Dark UI kit (Part 2 of 2)

Web UI Set

Futurico – Free User Interface Elements Pack

Cloudy UI kit

Modern UI Kit

Glossy 3D UI Kit

Moonify UI

Detailed UI Kit

Vertical Navigation Menu

Vector UI Kit

Freaking Awesome Free Font of the Week #1

Tamuir khan — Tue, 23 Aug 2011 11:11:34 +0000

This week, the awesome free font award goes to Code, this amazing font is brought to us by Font Fabric. It can be used for any type of graphic design, print, motion graphics, web and for other gazillion stuff, oh and specially for T-Shirts.

Code Light

Code Bold

Some cool usage.

Until Next Week, Ciao.

Freebie: Audio Player User Interface with Multiple Skins

Tamuir khan — Thu, 04 Aug 2011 13:22:17 +0000

Really? Audio player UI, including 3 skins ? Yes! Today we are releasing, audio player ui, for your next project, zip file includes psd’s which are properly named, layered and grouped, easy to use, edit and free even for commercial projects

The Package includes 3 different skins(psd’s)

let us know if you liked it.

Featured Artist – Danil Krivoruchko

Tamuir khan — Tue, 26 Jul 2011 05:36:34 +0000

Today we are featuring an amazing artist from Moscow, Russia Danil Krivoruchko, His work is definitely worth a look. they way he puts together his artwork, its mesmerizing – and soft on the eyes. Having Interests in identity, interactive work and motion design.

Here’s your inspirational dose for today.

TNK Pulsar.

Intel Fashion show | Intro loop.

MeeGo OS Promo. How MeeGo works with social network.

Intel Fashion show | Acer.

Megafon | Winter sports.

Music video for KORNEY`s “FLARES”.

Intel Fashion show | HP.

Eurovision`09 IDs sketches.

That’s it for today folks and do tell us which creative artists you like/follow for inspiration.

20 Amazing Retro HTML5 Websites

LabibJ — Sun, 26 Jun 2011 06:14:04 +0000

Hi
Last week we posted an showcased some Amazing HTML5 Websites for your inspiration.

This week, it’s 20 Amazing Retro HTML5 Websites.
As the next-gen fundamental markup language, HTML5 has already redefined the possibilities of ideas in web design & development. Below are some websites that have done exactly that with a little twist of Vintage & Retro design.

Enjoy.

Visual Republic

Paradox-Labs

Pointless Corp

Love, Detroit

Jewell And Ginnie

Rainypixels

Ryan Scherf

BountyBev

HD Live

Florida After Seven

Quality Laundry Professionals

Love For Japan

Marc Thomas

Peter Coles

Orlando Advertising

EduSoCal’11

Bronco

Activate

Dilly Deli

FRONTEND 2011

CSS BASED THREE STATES BUTTON – BETTER UX

Tamuir khan — Fri, 24 Jun 2011 17:03:19 +0000

Hello Folks, here i am with another small but very nifty technique for making Three states button, i was rigging the User Interface for a prototype that i was building, it required me to have push buttons that would be controlled through Javascript|jQuery later on.

My Image Sprites

So what i did was create a simple Html based Anchor Tags and by using one of the Image replacement techniques, i was able to achieve this effect, which i thought i would share with you guys as a small tutorial.

Here is my Html Markup

<body>
<div id="container">
  <h1>DEMO: CSS Based Three State Buttons - Better UX</h1>
  <div id="submitBtn"> <a class="submitApp" href="#" title="Submit my Application"></a> </div>
  <div id="attachImg"> <a class="attach" href="#" title="Submit my Application"></a> </div>
</div>
</body>

CSS Styles

* {
	margin:0px;
	padding:0px;
}
body {
	font-family: 'Nunito', serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	text-shadow: none;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0em;
	word-spacing: 0em;
	line-height: 1.2;
}
#container {
	margin: 0px auto;
	overflow:hidden;
	width: 800px;
}
h1 {
	padding: 50px 0;
	width: 550px;
}
#submitBtn {
	margin: 15px 0px;
}
a.submitApp {
	background:url(imgs/submitmyapp.png) no-repeat top;
	width: 194px;
	height: 42px;
	text-indent: 9999;
	display:block
}
a.submitApp:hover {
	background-position: 0 -52px;
}
a.submitApp:active {
	background-position: 0 -105px;
}
a.attach {
	background:url(imgs/attach.png) no-repeat top;
	width: 136px;
	height: 40px;
	text-indent: 9999px;
	display:block
}
a.attach:hover {
	background-position: 0 -42px;
}
a.attach:active {
	background-position: 0 -82px;
}

Here’s how it looks in the browser.

Until Next time.. Ciao!

BootStrap

Tutorial: Simple, yet usable jQuery based dropdown menu

Here’s how it will look

Lets take a look at the HTML markup first

Mobile Phones(view all)

Tablets (view all)

LI now have a class named “dropdown” The Parent Anchor has a class as well “ddIcon”

IPAD app of the Week #1 – Kit Digital

Kit Digital in Action

App Screens

Getting Started with Stylus – CSS Pre-Processor

Stylus comes equipped with all the features that Sass / Less provides. On top of that, it supports better Inheritance, top notch Error Reporting and provides flexibility when it come to your preference in writing code.

- Installation

1- Installing NodeJS

2- Installing Stylus

Code Writing Styles

Variables

Interpolation

Operators

Mixins

Built-in Functions

Conditional Statements

Inheritance

Error Reporting

10 lifesaving jQuery snippets

01- Display Loading Graphic Until Page Fully Loaded

02- How to Bind a function to an event

03- Smooth scrolling to an anchor

04- How to Switch StyleSheets With jQuery

05- Add :nth-of-type to jQuery

06- How to find out the index of an element in an unordered set

07- Disable right mouse click

08- How to refresh the src of an image with jQuery

09- Automatically Discover Document Links And Apply Class

10- Better Broken Image Handling

15 Free Freshly Baked Pixel Perfect UI Elements

White Blue Web/UI Elements

Dark UI Kit (Part 1 of 2)

Blaubarry UI Kit

Sleek UI Elements

UI Bundle

iTunes Inspired UI Kit

Butterscotch UI Kit

Black UI Kit

Dark UI kit (Part 2 of 2)

Web UI Set

Futurico – Free User Interface Elements Pack

Cloudy UI kit

Modern UI Kit

Glossy 3D UI Kit

Moonify UI

Detailed UI Kit

Vertical Navigation Menu

Vector UI Kit

Freaking Awesome Free Font of the Week #1

Code Light

Code Bold

Some cool usage.

Freebie: Audio Player User Interface with Multiple Skins

Featured Artist – Danil Krivoruchko

Here’s your inspirational dose for today.

TNK Pulsar.

Intel Fashion show | Intro loop.

MeeGo OS Promo. How MeeGo works with social network.

Intel Fashion show | Acer.

Megafon | Winter sports.

Music video for KORNEY`s “FLARES”.

Intel Fashion show | HP.

Eurovision`09 IDs sketches. That’s it for today folks and do tell us which creative artists you like/follow for inspiration.

20 Amazing Retro HTML5 Websites

Visual Republic

Paradox-Labs

Pointless Corp

Love, Detroit

Jewell And Ginnie

Rainypixels

Ryan Scherf

BountyBev

HD Live

Florida After Seven

LI now have a class named “dropdown”

The Parent Anchor has a class as well “ddIcon”

Eurovision`09 IDs sketches.

That’s it for today folks and do tell us which creative artists you like/follow for inspiration.