background preloader

AnythingSlider jQuery Plugin

AnythingSlider jQuery Plugin
Just what the world needs, another jQuery slider. YAWN. I know, check this one out though, it's got lots of cool features. Here on CSS-Tricks, I've created a number of different sliders. Three, in fact. This new AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. View Demo Download Files The demo page has the current version, complete usage, and up-to-date changelog. Features Customization Adding/Removing Slides Just add or remove more <li> items from the list inside <div class="wrapper">, everything else happens automatically. Adjusting Size For example, if you wanted to make the slides 580px wide instead of 680px wide, you just need to change some CSS. Linking Directly To Slides from Static Links Target the link using and ID or Class (or whatever), and apply a click handler. $("#slide-jump").click(function(e){ $('.anythingSlider').anythingSlider(6); e.preventDefault();}); Credits Share On

How To Build an Animated Header in jQuery Home > CSS, Front End Development, HTML, Javascript > How To Build an Animated Header in jQuery Why not give a little flair to your header. This tutorial will show you how to animate your header’s background image using jQuery to give your website that little extra something. What We Are Building We are going to build a header that animates it’s background. We will also encase the header in shadow for the little extra dramatic effect. How it’s Going to Work The header background image is going to be super tall. Now that we have our background image, we will also need to create a shadow overlay image. After that it’s just a matter of animating the background image with jQuery so it scrolls. Getting Started The first thing we’re going to need is the HTML in place. Here is the HTML: The CSS We aren’t going to do anything too difficult here. Here is the CSS: Just a note, the png transparency won’t work in IE6. The jQuery There are a couple ways of animating the background with jQuery.

Disabled labels and the Trilemma plugin (Ask the CSS Guy) I’m working on a form that makes use of the disabled attribute, and the default browser settings for disabled inputs don’t have as much contrast as what I’d like. To better distinguish at a glance which inputs are disabled/enabled, I’ve chosen to style the labels of disabled inputs with a faint gray color. Consider the differences in the screenshot below. Regular labels vs labels with a disabled class You may also view a live HTML example of the above form to see how disabled fields appear in your browser. The difference in HTML is a small one. <input type="checkbox" id="astronomy1" disabled="true" /><label for="astronomy1">Astronomy</label> While the second example, I’ve added class="disabled" to the label: <input type="checkbox" id="astronomy2" disabled="true" /><label for="astronomy2" class="disabled">Astronomy</label> I’ve chosen to apply a light gray color to any label with a class of ‘disabled’. The Trilemma jQuery plugin How is this represented on an online request for proposal?

Kwicks for jQuery and an awesome horizontal animated menu Menu of a web page is the most important and maybe the most clicked link on your web page. Do you want your menu look sexy with an awesome animation on your website? Follow me, I will walk you to the final result of using Kwicks – jQuery Plugin to build an horizontal menu with a nice effect like Mootools but more customizable and versatile. Always begin with the Demo and Download, huh? In the example above, the block width of menu item will be changed when the mouse goes over. This tut also show you how to work with css sprites – a popular css technique (not a new anymore, huh?). HTML code: HTML code seem to be simple. CSS code: The CSS code below maybe a bit long, but I think it’s easy to read. Javascript Here is the list of javascript lib that we need to make the menu works And …. Copy & paste the hold thing below for the job done, but it’s just a little bit code I got. Read the Kwicks documentation for available options. One more thing  ............. Some words:

Design And Develop A Complete Website (Part 2) Today, in part 2 of this massive tutorial, we’re continuing this session with the second day of design. We’ve already designed the homepage – so now we’ll be designing the four support pages that form the rest of the complete site design (Portfolio, Blog List, Blog Post, and the Contact Form Page). Let’s dive in shall we? About the Mini Series You’ll find lots of web design and development tutorials out the net… but very few tuts that take you from start to finish. Check out the entire process as it happens at our Session Page! Project Objectives! Let’s briefly review our project objectives that we set up on Day One : Our aim is to design and develop a simple site design with a modern layout that’s conducive to CMS systems like WordPress. We’ll be using the 960 grid system from start to finish – and this won’t be any different for our Day Two design session. A Brief Course Outline. Let’s Continue! Let’s start by taking a peek at what we’ll be creating: Part E: Design the Portfolio Page

5 Pitfalls to Avoid for New Web Designers New web designers often find themselves in a common scenario: fresh out of college or just barely starting your career... but unlike other careers where there are defined training programs to show you the ropes, you end up wandering around the internet, hoping to pick up enough experience to land a job. Today, I am going to discuss a few areas where rookie web designers can drop the frustration and begin making high quality web sites faster. Pitfall 1. Don't Try To Re-Invent Layout A very common theme amongst beginners is trying to "re-invent the wheel" when it comes to layout. Other beginners hope to revolutionize the industry by creating wild and crazy approaches to simple design problems. Perhaps a better analogy is trying to re-invent man's invention of flight. Common design themes like navigation, fixed content columns, and a footer are all perfectly acceptable ways to start a design... they aren't boring because they work, they are effective and web surfers have come to expect them.

Facebook 'will look different in a year' As well as the news that Facebook is used by half the UK population, Facebook also laid bare its vision for the future of the social web in a keynote at the UK's largest digital marketing event, TFM&A. Stephen Haines, commercial director for Facebook in the UK, said that the site would continue to evolve. "There have been eight iterations of the [main] Facebook design over the last few years... [and] it will look different in a year" he said, clearly intimating that the site would continue to change to enhance its commercial succcess. The site has never been slow to change fundamentals of its design and approach, most recently with the redesign of the Like button. "The average Facebook user has 130 friends [and] the average time spent on Facebook is 28 minutes a day." Haines also showed impressive figures showing the effectiveness of brand pages. He hailed the success of Facebook Deals, which had even crashed the Alton Towers website. From browsing to discovery Messages boost?

Create an amazing music player using mouse gestures & hotkeys in jQuery What’s up guys? Today I am very proud to announce a BIG & INTERESTING tutorial focused on improve the user’s interaction in your web applications. We will create an amazing music player coded in xHTML & jQuery that made use of mouse gestures and hotkeys. You can Click & Drag with mouse to interact with interface’s music player or use directional keys & spacebar instead of mouse. Because I told you that it’s a big tutorial, this time I will show you a live working example in this video: But as always, you can test the real demo over here Tested in: Firefox, Internet Explorer 6 & 7, Opera, Safari & Chrome. So guys, come with me and jump into the tutorial There are a lot of online jukebox based on javascript interaction such as plusmusica, but the most of them ignore the power of mouse gestures and hotkeys. Let’s go! Step 1: Fast xHTML layout! So let’s take a look at the layout structure that we will create: [code language="html"] Step 2: Explaining what we are looking for Let's create them!