BootStrap

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

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

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- 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]);
   }
});
});

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!

Random Inspiration #01 – Creative Ads & Reels

LabibJ — Fri, 24 Jun 2011 02:19:50 +0000

Hello there.
Today, I would like to start a continuous weekly thread of Random Inspiration.
In this series, I would keep posting creative inspiration, be it videos, art, web work, amazing chocolate designs, you get the idea.

It is very essential that each one of us have our own muse.
The idea of a muse, it’s gradually being retained only to a specific type of people, although it doesn’t actually matter whether a person relates to anything creative by life or profession, muse is what keeps him going.

So sit back with that morning cup of joe of yours and I hope you find new inspiration from these Creative Ads & Reels.

Unleash Your Fingers

Discover the art of finger Tutting, a new kind of dance performed by JayFunk, from LA.

Why? by Oliver Latta

Why? – a personal statement by Oliver Latta for a presentation in his studies…

Shift V2 by Mirari

Experimental short film by Mirari, a unit of directors, designers, and animators.

Lamborghini “Aventador”

weareflink interprets the Lamborghini Aventador in this morphing video.

Partitura 001 by Quayola

Realtime sound visualisation made with custom software “Partitura” Sound by Telefon Tel Aviv.

Visual Identity for Voyage Group

creating a fantastic world +++ director’s cut by yasuhiro kobari.

Offf 2011 Year Zero

Some more amazing work by Onur Senturk, Enjoy!

Woodkid – Iron

Everything in slow motion looks better, and this video proves it…. the ending is epic!

Metamaterial

Metamaterials are artificial materials engineered to have properties that may not be found in nature.

Moullinex – Catalina

Music video for Catalina, a track off the Chocolat EP – Done with Kinect + Processing + Cinema 4D + After Effects.

Solar by Ben Reubold

Konkreet Performer

Konkreet Performer is a music control and performance instrument for the iPad. Its unique and intuitive multi-touch interface reconnects the musician’s  actions directly with the music.

Onesize Reel

Onesize latest reel. All work directed, designed and created by Onesize. Music and sound design by Jeff Dodson

Black Ocean Ident

Brighton, UK based media agency Future Deluxe released nice but short motion identity made for one of their client.

Linus Lundin – Showreel 2010

A collection of Linus Lundi’s latest work including commercial and self initiated projects.

GTLK by Andrey Muratov

Concept: Components of the space. Between existence and “No!”. Alive – аbsorbs.

Silent Transitions

Silent Transitions is a personal project inspired by two verses from Scripture – 2 Samuel 22vs20 and Psalm 46vs10.

Shot with Canon 7D at 60 fps and slowed down to 1% using twixtor, Sigma 30mm f1.4 for the initial scenes and Tokina 11-16mm f2.8 for the jump sequences.

Warm Signal by silja

A short abstract movie dealing with nature and maritime creatures, metamorphosis and transformation – it connects art and science. Strong emphasis on sound, related to the idea of visual music. The Style is soft but clean, focusing on black & white.

VIVA Channel Rebrand 2011

Core by selfburning

Experimental short film Design and animation Selfburning, Sound design Alexey Devyanin.

Surface Detail

A myriad of details in an evolving fractal landscape.

2011 Reel: Chris Kelly

Motion designer Chris Kelly launches a new reel!

The Limousines – Very Busy People

Music video for The Limousines – Very Busy People.

T4 Idents by Double G Studios

“Inspired by our love of robots, double g studios won a competitive pitch to direct and animate 20 energetic idents for Channel 4′s T4. The personality of each robot was enhanced through costume design, choreography and their relationship with the new 3d logos.”

Make It Better

Great mix of typography and motion graphics.

Bloc 2011

David Terranova. Music: Krupp by Kritical Audio

Existence by Pierre Grimm

music by niveau zero in_sect, shot by gkaster

The Chase Film

To build excitement around the 2nd Generation Intel® Core™ i5 processor, Intel is launching an action-adventure video titled “The Chase.” The spot demonstrates the performance capabilities of the new processors by creating an action-movie style chase sequence that takes place through a wide variety of program windows on a computer desktop.

Entering the Stronghold by Matthias Muller

A stunning audio visual animation by Matthias Müller for the title song by Denny Schneidemesser!

Modern Times – Points to Future Times

Made with no money, just a little time and a lot of passion. – Amazing!

Kurz Und Schon Opener

Opening sequence for the shortfilm competition “kurzundschön” (Short & Nice) – Website

BMX Super Slow-Mo

Second and final slow motion test shot with a canon 7D and Edited with Twixtor in After Effects.

Meet Buck

Buck is an ordinary guy. Well…if you except the “deer head” thing. And today, Buck is gonna spend this cool Sunday afternoon with his girlfriend who’s so happy to see him (she’s pretty much always happy). But when Buck find out that her father is not the sympathic and tolerant guy he excpected, the Sunday afternoon turns really bad.

Cat Footwear by Paul Clements

Director / Compositor : Paul Clements Created for Cat / Fold7

Beta Excellent

Cool short intro for Beta Excellent University program, design & direction by Soulbase.

Showreel 2010 by AixSponza

Showreel by AixSponza, a Studio from Germany.

REEL: Upper First 2010

The new reel from Upper First is out, and its dope!

Refraction by Jesse Zanzinger

What do you get when you mix Oil and water? Refraction.

Showcase: Amazing HTML5 Websites

LabibJ — Tue, 21 Jun 2011 02:45:06 +0000

The idea of latest trends and support of those trends and technologies have finally settled down.
HTML5 is growing massively around the industry nowadays and there are more and more creative ideas being delivered on the latest standard.

As it’s no more a surprise what new elements have been introduced in HTML5.
Let’s go ahead and check out these 22 Amazing HTML5 Websites. The first of the showcase series.

Moods of Norway

Mozilla Firefox Mark Up

There Studio

Ox Design

The Planetarium

Ryan Delaney

Kiran Owal

Arcade Fire – The Wilderness Downtown

Novembro

The Squad

Ben the Bodyguard

Nike Better World

S5 Style

This Shell

Johnny Broccolii

Pixelcriativo

Dropr

John Kavanagh

Marco Barbosa

Edgar Leijs

Rob Edwards

Emmanuel Pelletier

Klowdz

Showcase : E-mail Newsletters #1

LabibJ — Mon, 20 Jun 2011 09:59:47 +0000

A good campaign always requires a good set of marketing materials.
And where would we be without E-mail Newsletters.

A constant way to keep your subscribers informed of all the latest happenings, specials that you or your company is offering.
For inspiration, here are is the first post of E-mail Newsletters Showcase