15 Super-Simple jQuery Menu and Navigation Plugins | Speckyboy Design Magazine There are lots of jQuery menu and navigation plugins freely available that can do anything you could possibly imagine. We love those innovative and ground-breaking plugins we really do. But, as we are sure you will agree, the most of the time, all we basically need is a lightweight, functional and easy to style solution. Something that we can easily slot into our templates and themes and will work without any major code tinkering and requires only minor CSS tweaks. And that is what we have for you today – 15 Super Simple jQuery Menu and Navigation solutions that should make your work that little bit easier. Smooth Navigational Menu Smooth Navigation Menus contents can either be from direct markup on the page, or via an external file and fetched via Ajax. jQuery Simple Drop Down Menu This tiny (1kb) and versatile menu has been compiled with only 20 lines of code, achieved by removing various cumbersome mouse events from within the html code making it simpler and lighter. jQuery Basic Menu
The Basics of jQuery ↩ Andrée So, a while back I had an internal presentation at work about this topic. A few good friends in the community took a look at my slides, and they thought it would make a nice blog post because “there can’t be too many good posts about jQuery introduction and best-practices.” Whether this post is going to be good or not, is up to you but I’ll try to outline what jQuery is, and how you can start working with it. For most of you, this will just be a re-cap and probably not provide much new information but can perhaps serve as a reference post if you ever need one. What is jQuery? jQuery is a client-side JavaScript library that abstracts away browsers’ different implementations into an easy-to-use API. Recently, it also set a new usage record with being used on 54 per cent of Alexa’s top 17,000 most visited websites, while Flash was “only” at 47 per cent. How do I use jQuery? First off, you should learn some basics. jQuery, like many other libraries, uses the global $ variable as a shortcut.
5 easy tips on how to improve code performance with huge data sets in jQuery Monday, February 09, 2009 Sitting on jQuery's support mailing list I noticed that developers use jQuery with huge data sets and their code becomes very slow. Examples would be generating very long tables with a lot of rows using AJAX to get JSON data. Or iterating through a long (very long) list of data, etc. So I compiled a list of 5 easy tips on how to improve your code performance while working with huge data sets in jQuery. Articles: JQuery: Collapsible Menu It’s quite simple to create a collapsible and expandable menu, all you need is some basic experience with C-SS. The result of the next steps will be a User control accessible to keyboard and mouse inputs. At the beginning use your H-TML file, which also includes the JQery library. Add a Menu section which should include the headers and links of your menu. These little changes will make it possible to tab through the links later. The CSS code is not that difficult if you keep it to a minimum. Comments: Noel Hurtley↯ Written on 2007-01-20 at 21:15 Thanks for the great tutorial. Paul Written on 2007-01-23 at 00:35 Great tutorial. Ty Written on 2007-01-24 at 09:12 Sweet, it resizes great I made it as big as a bus, and it still looked fine in firefox, by clicking control + about a zillion times. Klaus Albert Written on 2007-01-26 at 01:49 great solution! My additional request: “open a predefined submenue” My solution: the complete new example: Similar posts:
51+ Best of jQuery Tutorials and Examples Apr 24 2008 There’s stuff all over the Web about jQuery, but finding the best tutorials to get you started can be tough. Here are Examples and tutorials from jQuery masters to keep you on the right track. We will start with jQuery masters and feature some of their best tutorials, then we will move on to more categorized tutorials, cheat sheets and hacks. You can also take a look at other 3 articles in this series : So let’s get started and don’t forget to subscribe to our RSS-Feed to keep track on our next post in this series. John Resig John Resig, creator of the JQuery JavaScript library and author of Pro JavaScript Techniques, is a Mozilla technologist focused on the relationship between Mozilla and the world of JavaScript libraries. Featured Tutorials of John Resig 15 Days Of jQuery 15 Days Of jQuery – Fantastic tutorials and example code that takes you from zero to hero in no time flat. Featured Tutorials of 15 Days Of jQuery Learning jQuery Featured Tutorials on LearningjQuery.com Bassistance
this, is boomerang 日本語 boomerang always comes back, except when it hits something. what? boomerang is a piece of javascript that you add to your web pages, where it measures the performance of your website from your end user's point of view. boomerang is opensource and released under the BSD license, and we have a whole bunch of documentation about it. how? Use cases — Just some of the uses of boomerang that we can think ofHow it works — A short description of how boomerang works internallyBugs, hugs and code — This is where the community comes inTODO — There's a lot that we still need to do. who? boomerang comes to you from the Exceptional Performance team at Yahoo! where? 25+ jQuery Plugins that enhance and beautify HTML form elements Introduction This article will cover the following elements: Advertisement Form Skinning Frustrated with the form elements inconsistency among different browsers? Form Validation It's always good to have client side form validation. Masking Masking can help to avoid human mistake. File Uploader These file uploader transform the orginal input file element into a more robust file uploader that able to upload multiple files and having a progress bar to indicate the upload progress. Checkbox & Radio Button Spice it up your checkbox and radio button with these jQuery plugins! Spin Button & Slider Spin button can be useful sometimes. Auto Complete You must have seen the auto complete functionality from Apple.com, google.com and all the major websites. Calendar & Time picker The old school method to let user select date and time are using drop down lists (day, month and year). Drop Down Menu (Select Element) Want to do more with drop down menu? Color Picker Textarea Conclusion
Book of Speed No one likes to wait and we all hate slow pages. These are obvious, easily observable facts that don't need any proof. And, as you'll see later in Chapter 9, which discusses the psychology of time and speed, waiting affects users in negative ways not only psychologically (they distrust the site, perceive it as lower quality) but also physiologically (they get irritable, their blood pressure increases). In the end, all the negative effects of slow web sites add up to a loss of users, loss of revenue and brand damage. This chapter gives you practical industry examples and studies which expose the effects of performance on the bottom line. If you're not convinced that speed means money, read on. The Negative Effects of Slowing Down Determining the relationship between page load time and business objectives has been a long-standing task for many performance professionals. Luckily, some big names such as Google, Yahoo! A Study at Bing Figure 1.1. Google's Case Yahoo!' AOL's Study Figure 1.2.
15 Powerful jQuery Tips and Tricks for Developers Martin Angelov In this article we will take a look at 15 jQuery techniques which will be useful for your effective use of the library. We will start with a few tips about performance and continue with short introductions to some of the library’s more obscure features. 1) Use the Latest Version of jQuery With all the innovation taking place in the jQuery project, one of the easiest ways to improve the performance of your web site is to simply use the latest version of jQuery. You can even include jQuery directly from Google’s servers, which provide free CDN hosting for a number of JavaScript libraries. The latter example will include the latest 1.6.x version automatically as it becomes available, but as pointed out on css-tricks, it is cached only for an hour, so you better not use it in production environments. 2) Keep Selectors Simple However, you should still try to optimize the way you retrieve elements. Selecting by id is the fastest. 3) jQuery Objects as Arrays 4) The Selector Property
jQuery Tip #6 – Creating a Custom jQuery Selector - Dan Wahlin's WebLog Interested in learning more about jQuery? Check out the jQuery Fundamentals course at Pluralsight.com. Previous Tips: Selectors are a key part of jQuery and one of the features that have made it so popular over the years. While most jQuery developers know about selector extensions, many aren't aware that you can write your own custom selectors quite easily. <div class="panel hidden"> Panel 1 </div><div class="panel" style="visibility:hidden"> Panel 2 </div><div class="panel" style="display:none;"> Panel 3 </div><div class="panel"> Panel 4 </div> If you wanted to show all panels that have the hidden class on them or those that have a style of display:none or visibility:hidden set then you might write code similar to the following. While there's nothing wrong with this code, if you find yourself needing it in multiple places you'll either refactor it into a function (the preferred approach) or copy it around throughout one or more scripts. Live Example
jQuery Mobile Development Guide | Pinehead.tv jQuery Mobile has rocked the web with an easy way of quickly developing mobile applications. Not just mobile web apps but using PhoneGap you can build native applications that can be downloaded in the available app stores. jQuery Mobile can be as flexible as you want it to be, but out of the box it’s built to quickly launch your applications with pre-built design templates or using the jQuery Mobile theme roller. Below is a detailed plan that will help you learn jQuery Mobile and all the possibilities. Use it as a reference guide when your looking to figure something out or trying to determine if there is something you can do in jQuery Mobile. If your looking for a tut that is not here, please request it in the comments and we’ll look into making it. jQuery Mobile 1.1 & 1.2 jQuery Mobile Toolbars Introduction to jQuery Mobile Do More With jQuery Mobile Advanced jQuery Mobile Topics jQuery Mobile Forms PhoneGap