Creating a Mouseover Fade Effect with jQuery My last little jQuery tutorial was an alternative to using CSS to create an image change on a mouseover. Now I want to take that one step further and add a fade effect. For my example, I am going to make a black and white image fade into a color image. Add the jQuery script between your head tags. Here is the function. Here is the CSS. And here is the body code. All together you got something that looks like this. Test it out below: NOTE: If you are using jQuery with WordPress, you need to replace all the dollar signs ($) with the word jQuery due to other Javascript libraries that use the dollar sign.
30 Excellent WordPress Video Tutorials - Six Revisions WordPress is one of the most popular publishing platforms currently out on the market. It’s free, highly-customizable, and very easy to install and use. Because of its popularity, you’ll find a wide array of resources that discuss WordPress development, administration, as well as plenty of user guides to help you get started quickly. In this article, we take advantage of the merits of learning by way of watching video tutorials and screencasts. You can use these video tutorials a couple of ways: to learn about WordPress yourself or to send to your not-so-technology-inclined clients as a reference to help them get started. WordPress theme development Designing for WordPress See Chris Coyier’s (of CSS-tricks) process for designing a WordPress site in this three part series. Creating a WordPress Template Here’s a tutorial series (also see part 2 and part 3) for creating a WP template using a variety of free tools such as MAMP (for local machine development) and TextWrangler (a text editor).
Sexy Drop Down Menu w/ jQuery & CSS Jun 02 2009 Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key — and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully. View Demo of Sexy Drop Down Menu Step1. First create an unordered list for your base top navigation. <ul class="topnav"><li><a href="#">Home</a></li><li><a href="#">Tutorials</a><ul class="subnav"><li><a href="#">Sub Nav Link</a></li><li><a href="#">Sub Nav Link</a></li></ul></li><li><a href="#">Resources</a><ul class="subnav"><li><a href="#">Sub Nav Link</a></li><li><a href="#">Sub Nav Link</a></li></ul></li><li><a href="#">About Us</a></li><li><a href="#">Advertise</a></li><li><a href="#">Submit</a></li><li><a href="#">Contact Us</a></li></ul> Step2. Step3. jQuery Conclusion Homepage
jQuery: The Write Less, Do More, JavaScript Library jQuery Easing Plugin Description A jQuery plugin from GSGD to give advanced easing options. Please note, the easing function names changed in version 1.2. Please also note, you shouldn't really be hotlinking the script from this site, if you're after a CDN version you could do worse than try cdnjs.com Download Download the following: Example Click on any of the yellow headers to see the default easing method in action (I've set as easeOutBounce for the demo, just because it's obviously different). Select easing types for the demo first one for down, second one for up. The Clicker Updates 12/11/07 1.3 jQuery easing now supports a default easing mode. 04/10/07 1.2 Updated to include all methods from Robert Penners easing equations. 28/06/07 1.1.1 Updated the method to not overwrite the newly renamed 'swing', or the new 'linear' style coming in 1.1.3. 22/06/07 Rewritten the above to include callback syntax, nothing else has changed. Advertisements Need reliable hosting for your blog? Credits Donate Usage Default Custom
10 Superb Image Effects and Slider Tutorials with Jquery 10 Superb Image Effects and Sliders with Jquery and CSS. I haven’t been into jquery much but since i had to use it in one of my site i worked on one and i became a fan of jquery. that is why i have gathered a list of awesome jquery effects tutorial for images and sliders. All tutorials are gathered from various sites and are linked back. Fancy Thumbnail Hover Effect w/ jQuery This is an awesome thumbnail hover effect jquery tutorial. Sliding Boxes and Captions with jQuery This tutorial is my personal favorite, u can stylize your images with divs/boxes and make superb , very attractive effects by simple jquery. Create an Image Rotator with Description (CSS/jQuery) This is a very very handy and attractive master piece of jquery and css. AnythingSlider jQuery Plugin AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. ImageSwitch A superb easy to use plugin which switches between images in a very attractive animated style.
25 jQuery Tutorials for Improved Navigation Menus Get the FlatPix UI Kit for only $7 - Learn More or Buy Now In this post, I have collected 26 useful jQuery navigation menu tutorials. Enjoy! Mega Drop Down Menus w/ CSS & jQuery Animated Navigation with CSS & jQuery Create Simple Dropdown Menu Using jQuery Collapsing Site Navigation with jQuery Use Sprites to Create an Awesomeness-Filled Navigation Menu Thumbnails Navigation Gallery with jQuery Sexy Drop Down Menu w/ jQuery & CSS How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery Slide Down Box Menu with jQuery and CSS3 Awesome Bubble Navigation with jQuery Beautiful Background Image Navigation with jQuery Fancy Apple-Style Icon Slide Out Navigation Halftone Navigation Menu With jQuery & CSS3 Beautiful Slide Out Navigation Revised Animated Navigation Menu with CSS3 Create animated vertical Menu Using Jquery Create Bounce out Vertical menu with jQuery jQuery Dropdown Navigation in WordPress Create an apple style menu and improve it via jQuery How to Build a Lava-Lamp Style Navigation Menu
Javascript Sliding Panels using Generic Animation In this tutorial, we're going to combine the original tutorial on Sliding Panels with our new tutorial on Generic Animation. Using our generic animation code, making sliding panels becomes much easier. You can download the Javascript code for generic animation here. For this tutorial, I'm going to show how to make a few different types of sliding panels. Let's start with a standard vertical slider. Here's the HTML code required to make the above example. <div style="position:relative; width:150px; height:170px; top:0px; left:0px;"><div id="exampleHeader1" style="position:absolute; width:150px; height:20px; top:0px; left:0px; background:#3b587a; text-align:center; color:#FFFFFF;" onclick="slideExample1('examplePanel1', this);"> ^^^ </div><div id="examplePanel1" style="position:absolute; width:150px; height:130px; top:20px; left:0px; background:#a6bbcd; overflow:hidden;"> Content </div></div> There's nothing too special about this code. Here's the HTML code: Source Files:
160+ RSS Feeds For Web-Designers And Developers | Spyre Studios Many of you who know me personally, have been reading this blog or one my previous blogs or have been following me on Twitter for a while, know I’m a self-taught web-designer. I didn’t study design, arts, coding or whatever, and I never attended CSS 101 in college. Instead, I read blogs, tutorials and books. Becoming a web-designer can be quite a time-consuming process so I figured I’d make a list of all the RSS feeds I am subscribed to and read on a regular basis. Why So Many? Let’s just say I read a lot! Download the OPML file here (downloaded 9897 times already!) Here’s The Big List Gotta Include My Blogs Right? SpyreStudios – Design, Blogging, Social Media Download The OPML File You can subscribe to all of these sites very easily! *Note: if you find out that a feed in this list or in the OPML file has been moved or is no longer working, please drop me a line! Your Turn To Talk Hope you discovered a few sites you didn’t know about!
8 Sites with Excellent jQuery Navigation | Build Internet! This is a gallery of sites that use jQuery to make the navigation clean, sharp, and elegant. These sites use the framework to do more than just add gratuitous effects. Even though I’m a huge fan of Actionscript, Flex, and Flash in general, I love when navigations can keep usability while achieving fluid animation. A couple of these are so fluid you may forget it’s not Flash. 1. 2. 3. 4. 5. 6. 7. 8. This one is actually mooTools, and snuck into the wrong post. This list was the quick result of bookmarks I’ve had for sometime. Google+
jQuery for Designers - Tutorials and screencasts 50 Brilliant Typography Designs to Inspire You Typography, combined with the efficient use of color, fonts, shapes and images, is an excellent way for designers to set a theme and mood in a design. In fact sometimes, with just text alone, it is enough to create an amazing design and send the message to the audience. So today, if you're looking for some inspiration or just browsing the web for something nice and cool, I'm sure you'll enjoy this collection of some neat and creative typographic design. Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit Image credit
iPhone Application And Website Development: All Tools And Tutori iPhone is rapidly mobilizing internet users & creating its own standards. At the time this post is written, there are millions of iPhones in use & numbers are increasing really fast. So, it is becoming very hard to stay in-compatible with it. There are 2 main ways to deliver your content / product into iPhone: As an applicationAs a compatible website (can act like an application) The major differences between them are, an application can use all the iPhone features (like sounds, movements…), work offline where a webpage cannot (technically yes but it is not functional) and an application can be sold / distributed via the iPhone store. You may also like: iPhone Application Development Tools Tools that are must when creating for iPhone like the SDK or the optional ones that you’ll find very handy. iPhone Dev Center By Apple The main & official source for creating iPhone applications. Free membership is required for reaching the content. PhoneGap iPhoney – Free iPhone Web Simulator iUI
jQuery 1.4 Released: The 15 New Features you Must Know | Nettuts+ jQuery 1.4 was recently released. This wasn't simply a maintenance release as some had speculated; there are many new features, enhancements and performance improvements included in 1.4! This post covers the new features and enhancements that you may find beneficial. You can download jQuery 1.4 right now, here: 1. Pre 1.4, jQuery supported adding attributes to an element collection via the useful "attr" method, which can be passed both an attribute name and value, or an object specifying several attributes. jQuery 1.4 adds support for passing an attributes object as the second argument to the jQuery function itself, upon element creation. Let's say you need to create an anchor element with several attributes. You may have noticed the "text" attribute— you'll probably be wondering what that's doing there, after all there's no "text" attribute for anchors! A better example of this in action: Read more about jQuery(…) 2. 3. This also works with ".one()". 4.