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: Related:  JS/Jquery

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.

Collapsing Site Navigation with jQuery Today we will create a collapsing menu that contains vertical navigation bars and a slide out content area. When hovering over a menu item, an image slides down from the top and a submenu slides up from the bottom. Clicking on one of the submenu items will make the whole menu collapse […] View demoDownload source Today we will create a collapsing menu that contains vertical navigation bars and a slide out content area. When hovering over a menu item, an image slides down from the top and a submenu slides up from the bottom. The beautiful fashion photos are taken from Beyrouth’s photostream on flickr. So, let’s get started! The Markup Our HTML will consist of a main container with the class and id “cc_menu”. The first item will get a z-index of 5 and then we will decrease the z-index for the next items. Each submenu item will share its class with the respective content div. Let’s take a look at the styling. The CSS Our main div that surrounds everything will have the following style:

Free Java Tutorials & Guide | Java programming source code 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.

37 Fresh jQuery Image And Gallery Display Solutions jQuery is already very popular because it is very fast and concise Javacript library simplifing and different event handling, smooth animation with very little code. With jQuery you can enjoy new way of web development and image galleries are the best way to use it effectively! Here you’ll have more than 35 different unique jQuery Javascript solutions for beautiful image galleries and great ways to display your images with light code. To make it even easier for you to choose, I also added live demo link under every jQuery plugin! This article has been updated on May 17,2012 and we just have put together fresh 2012 list of image sliders and galleries. Before you start out, I thought it would be good idea to get a little bit of inspiration of high quality and creative solutions how you can implement galleries and jquery image effects in your own website! Build Flat Responsive Website from Scratch – Complete Course Zstudio Zstudio has an unusual, yet awesome, solution. Preview Slider Revolution

CodeBrain.com - Tools & Scripts for WebMasters - Java, JavaScrip 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:  javascriptlearningjavascript