jQuery Sequential List Have you ever had to manually code something that is sequential? Didn't you find it annonying? Well, here is a simple solution for you. This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list. View Demo Sequential List 1a. First, download a copy of jQuery. <script type="text/javascript" src="jquery.js"></script><script type="text/javascript"> $(document).ready(function(){ $("#step li").each(function (i) { i = i+1; $(this).addClass("item" i); }); }); </script> The jQuery will output the source code as: 1b. Style the <li> element with a background image accordingly (step1.png, step2.png, step3.png, and so on..). 2a. You can also use this technique to add sequential content using jQuery's prepend feature. The code will add the <span class="commentnumber"> tag (with # + 1) to each <li> tag. 2b. Style the <li> element with position:relative and use position:absolute to place the .commentnumber to the top right corner.
The Best Free Texture Packs of 2009 There are a few things that a designer can not have enough of in his or her design arsenal, and one of them is textures. So to continue our “Best of 2009″ series, we’ve selected the best free textures from this past year. Since there were so many textures released in 2009 by so many generous people, it is difficult to choose the best. However, we feel the ones here stand out in quality and usefulness, and will be valuable additions to your texture library. You can also check out the rest of the “Best of 2009″ series at the bottom of this article. Grungy Textures Package – Metal – 9 11 Old and Grungy Film Textures Nebulae Grunge Grungy Textures Ultimate Grunge Pack Vintage Textures Floral Vintage III Vintage Damask Vintage V Vintage IV Wood Textures Wood Panels Textures Grungy Dirty Wood Woodwork Paint Textures Painted textures vol. 12 High-Res Watercolor Textures Textures 05 Paint Splatters Paper Textures Japanese Paper Paper Pack 6 Old sheets of paper About the Author Related Posts 10 shares Read More 42 shares
8 Fresh and Useful jQuery Plugins jQuery helps us web designers and developers do some amazing things, and plugins make it almost too easy. That’s why it’s an obsession of mine to find new ones. I’ve been on the lookout for the past couple of weeks, and I’ve collected some good ones. Isotope Isotype is a jQuery plugin for creating dynamic and intelligent layouts. jQuewy jQuewy is a simple, efficient, and lightweight loader for javascript functions, with a powerful CDN-ready backend. Sausage Sausage is a jQuery UI widget for contextual pagination. ImageLens ImageLens is a jQuery plug-in to add lens style zooming effect to an image. jquery.timepickr.js This jQuery plugin is an experimental approach to enhancing web time picking. CodeExplorer This jQuery plugin produces an online code explorer. 960 Grid on jQuery-Mobile 960 Grid on jQuery-Mobile is a port of 960 grid to jquery mobile. jMenu jMenu is a jQuery plugin that enables us to create horizontal navigations with unlimited sub-menus. About the Author Related Posts 629 shares
InstantShift | Web Designers and Developers Daily Resource. 10 Fresh jQuery Plugins and Tutorials | Tutorials The popularity of jQuery continues to grow. This means that we’re seeing it used on more websites these days, and there are more developers coming up with new ways to use it. The great thing about that is many of these developers are sharing what they learn though tutorials and plugins. We’re always on the look out for this new jQuery stuff. Beautiful Background Image Navigation This tutorial will teach you how to create a beautiful navigation that has a background image slide effect. Quovolver Quovolver is a simple extension for jQuery that takes a group of quotes and displays them on your page in an elegant way. Lettering.js Lettering.js is a lightweight, easy to use jQuery plugin for radical Web Typography. imgAreaSelect imgAreaSelect is a plugin for selecting a rectangular area of an image. An HTML5 Slideshow w/ Canvas & jQuery This tutorial will help you create a progressively enhanced slideshow with a fancy transitioning effect, which is perfectly functional in older browsers as well.
PHP for Beginners: Building Your First Simple CMS The Magic of PHP + MySQL It’s safe to say that nearly every website that’s up-to-date these days is using some form of content management system (CMS). While there are a ton of great free options that provide us with a CMS to power a website (WordPress, Drupal, etc.), it doesn’t hurt to peek under the hood and get a feel for how these systems work. To get our feet wet as back-end developers, we’ll be creating a simple PHP class that will: Create a databaseConnect to a databaseDisplay a form with two fieldsSave the form data in the databaseDisplay the saved data from the database Download Files This class is intended to give you a feel for how PHP and MySQL interact together, and to show the basics of a CMS. Building the Class Our first step is to simply lay out the class in a file named ‘simpleCMS.php’ so we have a road map to work with. As you can see, we’re creating one class with four variables and five methods. The Variables Build the Database Connect to the Database Build the Form <! <?
Basic Tips jQuery The jQuery programming library has dramatically changed the way we work online. Web developers are able to prototype animations and backend effects much quicker with fewer lines of code. This brings to the table a profound collection of functions which you can read about here. It doesn’t take long to figure out jQuery syntax, especially if you are fairly well versed using JavaScript. But if you are new to the language it shouldn’t take long to get started. Setting Up your Documents The first thing you’ll want to do is include the most recent version of jQuery. If you include an external document from Google this saves you time on each pageload. $(document).ready(function() { //do stuff }); The above block is using the jQuery $() selector syntax. Creating Functionality If you are struggling to understand how constructors are used to target elements, spend a bit of time browsing the jQuery tutorials section. Below is some crude HTML and jQuery code to display our alert box. Conclusion
10 Best Web Hosting Sites | Web Hosting Reviews 10 Useful jQuery Plugins jQuery is great for enhancing a website. Whether it be by adding effects that give the site a wow factor, or by making navigation easier, jQuery can have a big impact on the way a website is perceived and used. jQuery is extremely popular among web designers and developers for it’s flexibility, ease-of-use, and of course it’s plugins. So for this post, we’ve rounded up 10 more jQuery plugins and techniques that you should find very useful. Supersized 3.0 Plugin This plugin produces a full screen slideshow complete with transitions, preloading, and navigation controls. Apple-like Retina Effect Learn how to create an Apple Retina Display magnifying effect with jQuery and CSS. Flip! Flip is a jQuery plugin that will flip easily your elements in four directions. jSlickmenu jSlickmenu, creates, well, slick menus with jQuery. jQuery Address Overscroll Overscroll is a jQuery plug-in that mimics the iphone/ipad scrolling experience in a browser. jQuery Page Curl Contactable Panning Slideshow Sliding Labels
Web Hosting: Everything you need for a great web site What do "unlimited disk space, data transfer, and email storage" mean? It's pretty straightforward: Customers who use Web Hosting can obtain unlimited disk space, data transfer, and email storage if they use their services consistently with the Terms of Service and these paragraphs. What is appropriate usage? Web Hosting is designed to serve the web hosting needs of small, independently owned and operated businesses in the United States. Web Hosting is a shared web hosting service, which means that a number of customers' websites and other email or storage services are hosted from the same server. Disk space If you use your services consistently with the Terms of Service and these paragraphs, your site can grow as large as necessary to meet your small business needs, but to ensure a great experience for all, we will place some constraints on how fast you can grow. Data transfer Email storage
Mosaic - Sliding Boxes and Captions jQuery Plugin Features So, what exactly does Mosaic do? Automatically generates sliding boxes & captions Allows slide & fade animations with custom directions Preloads images within boxes Options There are a number of available options, shown below with their default values. For options able to be turned on/off - 1 is on, 0 is off. animation : 'fade', speed : 150, opacity : 1, preload : 1, anchor_x : 'bottom', anchor_y : 'left', hover_x : '0px', hover_y : '0px' animation Controls which effect the sliding box uses. speed Defines speed of the animation. opacity Accepts any value 0-1 (decimals included). preload Overlays and backdrops are faded in after the page has loaded. anchor_x, anchor_y Horizontal and vertical anchor points for the overlay (eg. left, right, top, bottom). hover_x, hover_y Horizontal and vertical overlay hover positions. Legacy Versions Sliding Boxes and Captions with jQuery (3/31/09) - (Original Post) Available for Hire Email the details of your project to hello@onemightyroar.com.
Going Beyond Arial – Web Fonts Choices Just Got Awesome! « Web Design Ideas Going Beyond Arial – Web Fonts Choices Just Got Awesome! Wow, it’s about time! I mean don’t get me wrong, I really like the Arial font, it is very readable and can be used in both, professional and fancy projects but sometimes having to create a graphic for a fancy header is pretty inconvenient. Now, finally, we don’t have to do that, thanks to who else? Here is me using their Tangerine font : This is my sentence in Tangerine! Nothing to it, I just added this line in the header: And then added the inline font style like this: That’s all it takes. Want More Fonts? Of course we do!! There are others that are quickly jumping on the bandwagon, like Fonts.com and WebFonts.com , but their stuff is not ready yet. Char later… ~ Valik If you liked this post, share it with your friends! About The Author Founder/Writer/Web Designer/Janitor Valik (Valiik) Rudd is an Internet entrepreneur.
Web Design Ideas Design Ideas Design ideas and tips for web design In this article we present a few web design ideas and concepts that we hope would help you to build a better website, or increase your understanding about web design. If you are a beginner-to-intermediate level designer we suggest that you read our articles on Design Concepts (for building effective websites) and Design Basics (web design guidelines and myths busted) first. You Are Here ::: Home >> Free Tutorials >> Fireworks Tutorials >> Web Design Ideas The idea behind Website Design Design a Website: Learn how to easily design and build a professional website. Clean Consistent Layout and Navigation Give importance to your website's layout and navigation. If you have too many links then you should use drop-down menus or flyouts for your main sections otherwise your visitor can get overwhelmed. Correct use of effects for an Impressive Website Simple CSS Effects Use CSS Styles to enhance your site's look, accessibility and reduce file size.