// Add smooth-scroll class to your links
    $('.smooth-scroll').on('click', function(e) {
        e.preventDefault();

        // Get href of link
        var scrollTarget = $(this).attr('href');

        // Get target position from top of the page
        var targetPosition = $(scrollTarget).offset().top;

        $('html,body').animate({scrollTop: targetPosition}, 800);

    });

The post Simple smooth scrolling with jQuery appeared first on lawebdesign.com.au.

Javascript

// Set container min-height function
function resizeWindow(e) {
    // Get window height
    var windowHeight = $(window).height();
    // Check if window height is larger than your required minimum height
    if(windowHeight >= 760) {
        // Set selector min-height to the window height
        $('.full-height').css('minHeight', windowHeight);
    }
}

// Set height on load
resizeWindow();

// Update height on window resize
$(window).bind('resize', resizeWindow);

CSS

Combine this script with some fancy CSS3 and you can create a full screen background

.full-height { 
    width:100%;
    background-image: url('../images/my-image.jpg');
    background-size: cover;
}

The post Full screen div with jquery appeared first on lawebdesign.com.au.

One of the main problems I had was every time I needed to use Fancybox I was constantly getting rid of CSS so I could style the lightbox easier and deleting un-used images, so I decided to modify the code and have a clean slate to start from each time.

The original Fancybox supports IE6 and up with full CSS support, this adds extra CSS with the filters and IE specific fixes but also has multiple div’s added to make the box-shadow outside the lightbox. What I have done is delete all the IE specific CSS, clean the script to not append the unused div’s, add the iframe bug fix and best of all make use of CSS3 (box-shadow and border-radius).

Feel free to download the modified package and be sure to checkout http://fancybox.net/ for set-up and options.

Demo Download

The post Fancybox 1.3.4 Redux appeared first on lawebdesign.com.au.

Some of the standouts are:

Air Jordan 2012

http://www.nike.com/jumpman23/aj2012/

Bagigia

http://www.bagigia.com/

Mountain Dew

http://mountaindew.com/

How to

So you want to create your own parallax site, well save yourself some time and use Skroller.

skrollr allows you to animate any CSS property of any element depending on the horizontal scrollbar position. All you need to do is define key frames for each element at certain points in top offset.

Demo: http://prinzhorn.github.com/skrollr/
Download: https://github.com/Prinzhorn/skrollr

I want to lean it manually

Ok so you want the ins and outs, well Jonathan Nicol over at Pixel Acres has already created an excellent article covering how to create a simple parallax site from scratch. Check it out here: http://f6design.com/journal/2011/08/06/build-a-parallax-scrolling-website-interface-with-jquery-and-css/

The post Parallax Scrolling with HTML5 and jQuery appeared first on lawebdesign.com.au.

CodeKit is a Mac only application that is simple to use, you wont need to look at the command line, it automatically refreshes Safari and Chrome, includes image optimisation and file compression, and offers support for Sass, Less, Stylus, Haml and CoffeeScript.

Best of all its only $20, with the amount of time this saves you will make that back in the first 30 minutes of using it.

Combining CodeKit with Sublime Text 2 is a match made in heaven and I have already watched my production increase since switching to the tools.

Chris Coyer over at CSS Tricks has posted a really good screen cast to help you get started and its really worth a look

Get Yourself Preprocessing in Just a Few Minutes

The post Want to learn SASS, LESS or CoffeeScript appeared first on lawebdesign.com.au.

Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized background image to any page. Use this plugin with Modernizer and you will have full browser support for CSS3 background-size: cover;

Simple usage:
First create a div with the class ‘stretch’ and add a data attribute so we can get the image URL easier.

<div class="stretch" data-img-url="test.jpg">
    Lorem ipsum
</div>

 
Now add the basic CSS to stretch the background image. Only supported in IE9 and up

.stretch { 
    background-image:url(test.jpg); 
    background-size:cover;
}

 
Now use backstretch to offer a fall-back for IE8 and under. Here we use Modernizer to check if ‘borderradius’ is supported and if not we activate backstretch. Make sure you have modernizer runnuing and are performing the check for border radius. You can actually check for background-size support with modernizer but I find it easier to just use the border-radius.

$(function(){
    if(!Modernizr.borderradius) {
        $('.stretch').each(function() {
            bgImgUrl = $(this).data('img-url');
            $(this).backstretch(bgImgUrl, {fade: 'fast'});
        });
    }
});

jquery backstretch

The post Backstretch – background-size cover in IE appeared first on lawebdesign.com.au.

Awkward Showcase

Awkward Showcase is a great jquery slider, it offers the ability to slide any content, image, HTML and videos. It has thumbnail support, five layout modes, tooltips and heaps more.

Download: Awkward Showcase

Flex Slider

Flex Slider is a responsive slider with swipe control, its easy to use and modify and is best for image based slides. If you are creating a responsive site this should be your go to slider.

Download: Flex Slider

Nivo Slider

The world’s most awesome jQuery slider
The Nivo Slider is really easy to use, it has heaps of transitions, you can customise the caption styles and is best for using for image based sliders. Not recomended if you want to use HTML content in your slides.

Download: Nivo Slider

The post Ultimate jQuery Sliders appeared first on lawebdesign.com.au.

The template is not a ready to go solution it is more of a base to build your template from. As with all email templates if you want the best compatibilty they have to be built using tables (thanks Outlook), the template includes basic wrapper and container tables and a little helpful style tag to fix some hotmail bugs.

With such a wide varity of email marketing platforms I have decided to place my style tag inside the body element as its more compatible.Included in the style tag is a fix to allign HTML emails centered in hotmail and also a fix to define the line-height in hotmail by setting a global font-size.

Feel free to use this in any of your projects and any suggestion you have.

Base HTML email template

The post Base HTML email template appeared first on lawebdesign.com.au.

PIE is a htc script file that you place on your server with your website that makes IE render rounded corners, box-shadow and even CSS3 gradients.

PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties. Using PIE is easy, you simply add this after your CSS3 declorations.

background: #EEE;
padding: 2em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;


This results in a box with nicely rounded corners in any of today’s modern browsers, except of course for IE 6, 7, or 8, which all display a square box. However, add the following single rule to that CSS:

#myElement {
...
behavior: url(PIE.htc);
}


Now the exact same rounded corners appear in IE! That’s all there is to it. No, really, I mean it.

PIE currently has full or partial support for the following CSS3 features:

• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient as background image

Other features are under active development.

Want to learn more? View some live demos, read the documentation, and download PIE to try it yourself. Be sure to read the Known Issues page for common problems and their solutions.

The post Use CSS3 now in IE appeared first on lawebdesign.com.au.

Let’s first point out the pros and cons of sending HTML email before we get into how to create it.

Pros Of Using HTML Email

• Visually appealing
• Able to include graphics, icons, clickable links, different fonts, interactive forms.
• Increased interactivity with your customers.
• Mostly used by advertisers, however more consumers are using HTML email as they switch to faster connections.
• Ads can be more effective in HTML.
• Most of the popular email clients now support HTML email (i.e. Outlook Express, Outlook, Eudora, Netscape Communicator, Hotmail, Rocketmail, AOL, Yahoo, Web TV).

Cons Of Using HTML Email

• Slow loading due to downloading of graphics.
• Takes up more space in your email client.
• Not all computers support HTML email.
• Users may not have the required bandwidth or may have download quotas set by their ISPs.
• Hackers can send viruses, trojan horses embedded in HTML email.
• Users may turn off the option to receive HTML email, or use filters to quarantine it.

How To Create A Simple HTML Email

1. Create a new directory on your web site i.e. http://www.ihost-websites.com/htmlmail where /htmlmail is the new directory for all your HTML email files. Your files should include all the graphics and HTML pages you want to use.
2. Open your favorite HTML editor i.e. FrontPage, Dreamweaver to create your new HTML email (you can also use MS Word 97 or 2000 but it tends to bloat the code a little).
3. Create a new HTML email page, name it (i.e. newsletter.htm) and save the page in the new directory you created above:(i.e. http://www.ihost-websites.com/htmlmail/newsletter.htm)
4. Keep your design simple – your audience will be viewing the HTML email document in their Email application, not a Web browser. You have no control over how large or small a window the person will use to view your document.

Don’t use javascript, flash, style sheets, framesets rollovers or nested tables. Your beautifully created HTML email page, may not render well for your recipients.

Limit your use of graphics so your viewers will not have to wait long to download your document in their email.

Create and store your graphics (i.e. images, icons, fancy fonts) on a web server to correctly appear in your recipient’s email

• you could save it as an attachment, however most folks will not open the attachment (and delete it) especially if it’s from someone they don’t know.
• If you don’t want to use graphics, you could use colored tables for different sections (i.e. header, masthead, contact information and footers).
• This will enable you to create HTML email without using a web server. Keep in mind your HTML email won’t be as attractive as the one which includes eye-catching images.
• Always use absolute URLS for your graphics and links. Your readers are all going to be at different locations, so you need to use absolute paths in an HTML email to ensure that the images display and the links work.
• (i.e. http://www.ihost-websites.com/images/header.gif).It’s best to first complete the design of your images using relative URLs, then when you are finished, change the relative URLs for the images into absolute URLs.
• Upload the HTML email folder (which includes your images and HTML pages) to your web server.Now you are ready to send your HTML email document.
• Open your Email Software – in outlook express (since it’s the most popular) go to create mail – insert – text from file – scroll to your saved HTML document.
• Email a test to yourself before you send it to your subscriber list. You may want to send it to your friends who have different email programs so you can be sure most of your subscribers can read it on their computers.

Once you have created an attractive HTML page or newsletter, save it as a template. Now you can just open the template whenever you want to send HTML email and most of the work will be done for you.

HTML email is still … a great marketing tool if used properly. The key is to test, test, test to see if your subscribers prefer it over text based email. If you are unsure your subscribers can read HTML email, then offer both text-based email and HTML email, to cater to both audiences.

The post HTML Email useful tips appeared first on lawebdesign.com.au.