background preloader

Tutorials:How jQuery Works

Tutorials:How jQuery Works
This is a basic tutorial, designed to help you get started using jQuery. If you don't have a test page setup yet, start by creating the following HTML page: The src attribute in the <script> element must point to a copy of jQuery. Download a copy of jQuery from the Downloading jQuery page and store the jquery.js file in the same directory as your HTML file. Note: When you download jQuery, the file name may contain a version number, e.g., jquery-x.y.z.js. To ensure that their code runs after the browser finishes loading the document, many JavaScript programmers wrap their code in an onload function: Unfortunately, the code doesn't run until all images are finished downloading, including banner ads. Note: The jQuery library exposes its methods and properties via two properties of the window object called jQuery and $. $ is simply an alias for jQuery and it's often employed because it's shorter and faster to write. For example, inside the ready event, you can add a click handler to the link:

jQuery: The Write Less, Do More, JavaScript Library jQuery API Documentation Using jQuery with ASP .NET A brief introduction to jQuery and ways in which we can integrate it into ASP .NET Introduction In September 2008 Scott Guthrie, the head of the ASP.NET team, announced in a blog post that Visual Studio would be shipping with the jQuery library. He writes: “jQuery is a lightweight open source JavaScript library (only 15kb in size) that in a relatively short span of time has become one of the most popular libraries on the web. With that, JQuery is officially embraced by ASP.NET. A brief introduction of JQuery jQuery is the star among the growing list of JavaScript libraries. Listing 1: jQuery code for making a zebra-style table 1. 2. 3. 5. The magic dollar sign ($) and a chain of operations In jQuery, the most powerful character / symbol is the dollar sign. 1. Think of it as a long sentence with punctuations. Get a div with class name is test; Insert a paragraph with class name is quote; Add a little text to the paragraph; Operate on the DIV using a predefined method called fadeout. 1. 2. 02. 03. 06.

Free Java Tutorials & Guide | Java programming source code Jquery Wizard Plugin » Worcester Web Site Devel... After looking for a jquery plugin that will emulate a windows wizard I decided to make my own (with the help of cody lindley’s css step menu). I am using Jquery which can be found here and css step menu found here. The code: First we need a simple javascript function will hide and display a div, this method is used with jquery and you can learn how to use this here function loadnext(divout,divin){$("." + divout).hide();$("." + divin).fadeIn("slow");} Next the html code, notice how each step is wrapped in the ID wizardwrapper and each div is assigned a class for the corresponding step number. Step 1 Step 1: XXXXXXXXEt nequ a quam turpis duisi Step 2: XXXXXXXXEt nequ a quam turpis duisi Step 3: XXXXXXXXEt nequ a quam turpis duisi Step 4: XXXXXXXXEt nequ a quam turpis duisiStep 5: XXXXXXXX Et nequ a quam turpis duisi Step 2 Step 3 Step 4 Step 5 A Demo of the wizard

Events Attach a handler to an event for the elements. Bind an event handler to the “blur” JavaScript event, or trigger that event on an element. Bind an event handler to the “change” JavaScript event, or trigger that event on an element. Bind an event handler to the “click” JavaScript event, or trigger that event on an element. Bind an event handler to the “dblclick” JavaScript event, or trigger that event on an element. Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements. Remove event handlers previously attached using .live() from the elements. Bind an event handler to the “error” JavaScript event. The current DOM element within the event bubbling phase. An optional object of data passed to an event method when the current executing handler is bound. The element where the currently-called jQuery event handler was attached. Returns whether event.preventDefault() was ever called on this event object.

Auto-Hiding Navigation in CSS and jQuery A simple navigation that auto-hides when the user scrolls down, and becomes visible when the user scrolls up. Browser support ie Chrome Firefox Safari Opera 9+ Auto-hiding navigations have been around for quite some time now, in particular on mobile devices. Since we’ve been using this approach in several clients’ projects, we thought it would be handy to have a ready-to-use snippet here on CodyHouse. Images: Unsplash Creating the structure The HTML structure is composed of a header.cd-auto-hide-header element used to wrap the primary navigation (nav.cd-primary-nav) and a main.cd-main-content for the page main content. If the page has a sub-navigation, an additional nav.cd-secondary-nav is inserted inside the header element: Finally, if the secondary navigation is below a hero block, a .cd-hero element is inserted right below the <header>, followed by the .cd-secondary-nav element: Adding style We used the .cd-auto-hide-header class to define the main style of the auto-hiding header.

.find Description: Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element. Given a jQuery object that represents a set of DOM elements, the .find() method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements. The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree. The first signature for the .find()method accepts a selector expression of the same type that we can pass to the $() function. Consider a page with a basic nested list on it: If we begin at item II, we can find list items within it: The result of this call is a red background on items A, B, 1, 2, 3, and C. Unlike most of the tree traversal methods, the selector expression is required in a call to .find(). As of jQuery 1.6, we can also filter the selection with a given jQuery collection or element.

CodeBrain.com - Tools & Scripts for WebMasters - Java, JavaScrip CodeGuru: A Better Fixed GridView Header for AS... The first ten lines or so beginning with this of var define public members and fields for the PositionClass. As you might expect, you need to store the position and instance of the header as well as the caption, if present. It is these items that you will need to resize (absolutely) if the grid scrolls or the window is scrolled or resized. Any element that you want to be a public member you need to assign to a local-named element with the this keyword, for instance this.Width = width. Because you are defining controls such as a GridView in code-behind, and these controls will generate an HTML table with a specific client-id, it is convenient to store the actual client-id in the PositionClass. setClientID does this. The getAbsolutePosition function determines the X or Y position of the header by adding all of the offsets of its parent controls together. The isAligned function checks to see whether the table has a caption and its align property is top, left, right, or blank (""). Summary

JQuery Cycle Plugin Check out Cycle2, the latest in the Cycle line of slideshows. The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. It also supports, but does not require, the Easing Plugin. The plugin provides a method called cycle which is invoked on a container element. Each child element of the container becomes a "slide". Images are used in these demos because they look cool, but slideshows are not limited to images. Use the Effects Browser page to preview the available effects. For more about options, see the Options Reference page. Frequently Asked Questions Special thanks to Torsten Baldes, Matt Oakes, and Ben Sterling for the many ideas that got me started on writing Cycle in 2007.

Examples | Granim.js Basic gradient animation Basic gradients animation with 3 gradients in queue composed of 2 colors. Complex gradient animation Complex gradient animation with 2 gradients in queue with different positions composed of 3 colors. Gradient animation with an image and blending mode Gradient animation with 2 colors, a background image and a blending mode set. Gradients with an image mask Gradient animation with an image mask to create a gradient animation under a shape. <div class="bloc-logo"><canvas id="logo-canvas"></canvas><a href="index.html" class="logo-mask">Granim.js</a></div> Interactive Gradients Create a gradient animation that responds to events. <div class="canvas-interactive-wrapper"><canvas id="canvas-interactive"></canvas><div class="cta-wrapper"><a href="#default-state" id="default-state-cta" class="active">Default state</a><a href="#violet-state" id="violet-state-cta">Violet state</a><a href="#orange-state" id="orange-state-cta">Orange state</a></div></div>

50 Best jQuery Plugins of the Year 2013 jQuery is a widely used javascript library with almost all developers being well-acquainted with its features and functionality. It can solve most of your issues and fits with the requirement of your website to render it innovative and creative. This post features the 50 best jQuery plugins of the year 2013. The plugins below can save a lot of time and deliver the much needed solution to most of the development and design issues which you may face. 1. Being an open source plugin which is a unique one, Scrolld.js can give you a technique of absolutely accurate scrolling for navigation and pixel-perfect layouts with real-time revised data values. 2. jQuery Scroll Path jQuery Scroll Path is a plugin that defines custom scroll paths and uses syntax that is canvas flavored. 3. jResonsive jResonsive permits you to add an energized resized layout to an element or a page. 4. Typehead.js is a great project open-sourced by Twitter. 5. 6. freetile.js 7.Salvattore 8. 9. textillate.js 10. gridster.js 11.

Related:  code