background preloader

JS/jQuery

Facebook Twitter

SimpleBar - Custom scrollbars made simple. [be]lazy.js | A lazy loading and multi-serving image script. What is bLazy? bLazy is a lightweight lazy loading image script (less than 1.2KB minified and gzipped). It lets you lazy load and multi-serve your images so you can save bandwidth and server requests. The user will have faster load times and save data loaded if he/she doesn't browse the whole page. For a full list of options, functions and examples go to the blog post: The following example is a lazy loading multi-serving responsive images example with a image callback :) If your device width is smaller than 420 px it'll serve a lighter and smaller version of the image. Verlok/lazyload: LazyLoad is a fast, lightweight and flexible script to allow you enhance performance on your website by loading images only as they enter (or are about to enter) the viewport or a scrollable area, with best support to the img src.

JavaScript 30 — Build 30 things with vanilla JS in 30 days with 30 tutorials. JavaScript Event KeyCodes. Magnific Popup Documentation. Here you can find the guide on how to use Magnific Popup. Besides this docs page, you can play with examples on CodePen. If you’ve found any mistake in this site or you know how to improve some part of this documentation - please commit on GitHub. Please ask general questions through Stack Overflow tagged with magnific-popup. If you’re looking for touch-friendly popup just for images, PhotoSwipe might be a better choice.

Including files You can get Magnific Popup JS and CSS file from the build tool, from the dist/ folder in the GitHub repository, or by compiling it yourself with Grunt. It’s not required, but we recommend placing CSS files in <head> and JavaScript files and initialization code in the footer of your site (before the closing </body> tag). Initializing popup Popup initialization code should be executed after document ready, for example: There are three ways to initialize a popup: 1. <a class="test-popup-link" href="path-to-image.jpg">Open popup</a> 2. 3. Content Types Image Type <! Parsley - The ultimate documentation. Frontend form validation Parsley is a javascript form validation library.

It helps you provide your users with feedback on their form submission before sending it to your server. It saves you bandwidth, server load and it saves time for your users. Javascript form validation is not necessary, and if used, it does not replace strong backend server validation. That's why Parsley is here: to let you define your general form validation, implement it on the backend side, and simply port it frontend-side, with maximum respect to user experience best practices.

Parsley 1.x versions Parsley's current stable and supported versions are 2.x. Data attributes Parsley uses a specific DOM API which allows you to configure pretty much everything directly from your DOM, without writing a single javascript configuration line or custom function. Configuration You'll see along this documentation and through examples various available configuration options.

Basic installation That would look pretty much like this: Reveal.js - The HTML Presentation Framework. The HTML Presentation Framework Created by Hakim El Hattab and contributors Hello There reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. Vertical Slides Slides can be nested inside of each other. Use the Space key to navigate through all slides. Basement Level 1 Nested slides are useful for adding additional detail underneath a high level horizontal slide.

Basement Level 2 That's it, time to go back up. Slides Not a coder? Point of View Press ESC to enter the slide overview. Hold down alt and click on any element to zoom in on it using zoom.js. Touch Optimized Presentations look great on touch devices, like mobile phones and tablets. Markdown support Write content using inline or external Markdown. <section data-markdown> ## Markdown support Write content using inline or external Markdown. Fragments Hit the next arrow... ... to step through ... ... a fragmented slide. Fragment Styles grow shrink fade-out current-visible. Www.elevateweb.co.uk/image-zoom. Animo.js • Labs by Big Room Studios. How to create an animated sticky header, with CSS3 and jQuery. Trends come and trends go. The ones that stick around the longest do so because they solve a particular problem. A trend that’s popular right now for that very reason, is sticky elements; elements that behave normally until we scroll, and then maintain their presence on the page somehow.

The trend started with sidebars, but where it’s really grown in popularity is headers. Why? Because headers tend to contain navigation, and persistent navigation is popular with users. In this tutorial we’ll create a header that sticks to the top of the viewport, but so that it doesn’t interfere with the content, we’re going to minimize it when the user scrolls down the page.

Here’s what it’s going to look like when we’re done: If you’d like to follow along with the code, you can download it here. The HTML The HTML for our example is really simple, all we need is an h1 inside a header. <header><h1>Sticky Header</h1></header><img src="large-image.jpg" width="782" height="2000" alt="Big Image" /> The jQuery. Elastislide - A Responsive jQuery Carousel Plugin. Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images. View demo Download source With the responsive awakening in web design it becomes important to not only take care of the visual part of a website but also of the functionality. Elastislide is a responsive jQuery image carousel that will adapt its size and its behavior in order to work on any screen size.

Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid. In a carousel, one could think that simply making its container “shorter” will solve the problem on smaller screens, but in some cases (e.g. when we have bigger images) it might be reasonable to resize the items as well. This and other options are part of Elastislide’s properties. Elastislide uses the jQuery++ for the swipe events on touch devices. The HTML Structure Options Demos. Javascript KeyCodes • Tastatureingaben. JavaScript - Galileo Computing - OpenBook. Copyright © Rheinwerk Verlag GmbH 2001 - 2002Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken und speichern. Ansonsten unterliegt das <openbook> denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.

Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.Die Veröffentlichung der Inhalte oder Teilen davon bedarf der ausdrücklichen schriftlichen Genehmigung der Rheinwerk Verlag GmbH. Falls Sie Interesse daran haben sollten, die Inhalte auf Ihrer Website oder einer CD anzubieten, melden Sie sich bitte bei: >> Zum Feedback-Formular [Rheinwerk Computing] JsAnim - Free JavaScript Animation Library. Getting Started with the JavaScript Version of the GreenSock Animation Platform (GSAP) « GreenSock. The GreenSock Animation Platform (GSAP) animates anything JavaScript can touch (CSS properties, SVG, React, canvas, generic objects, whatever) and solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery).

See "Why GSAP? " to learn why it's used by 6,500,000 sites and every major brand. Hang in there through the learning curve and you'll discover how addictive animating with code can be. We promise it's worth your time. Quick links We'll cover the most popular features here but keep the GSAP docs handy for all the details. First, let's talk about what GSAP actually does...

GSAP as a property manipulator Animation ultimately boils down to changing property values many times per second, making something appear to move, fade, spin, etc. For example, changing the x coordinate of an object from 0 to 1000 over the course of 1 second makes it move quickly to the right. DOM, SVG, <canvas>, and beyond What's GSAP Exactly? Loading GSAP Banner Ad CDNs Downloading GSAP. Turn.js: The page flip effect in HTML5.

10 handy jQuery mobile tips and snippets to get you started. As with any new technology, getting started is often the hardest part. With this frustration in mind, we have put together some of my handiest tips, tricks and code snippets related to the jQuery Mobile library. Because this is not a full-on primer for using the library, we will skip over some of the things that become rather obvious as you get started and instead get straight to the items that become rather frustrating or troublesome. Also be sure to let us know in the comments which snippets you found useful and of any others that you know of that can be useful. 1. A full basic page I find myself needing the full mark-up for a basic page over and over again. <! 2. When I got started using this awesome extension to jQuery, I immediately found myself wanting to modify things on the page before the mobile plug-in was triggered.

As it turns out, the recommended solution is to simply put traditional jQuery calls before the reference that loads the mobile plug-in. 3. 4. For list items: 5. 6. 7. jQuery Fundamentals. Slick - the last carousel you'll ever need. Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> // Add the new slick-theme.css if you want the default styling <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) Initialize your slider in your script file or an inline script tag When complete, your HTML should look something like: NOTE: I highly recommend putting your initialization script in an external JS file.

Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) When complete, your HTML should look something like:

Home V1 w/Revolution Slider - Quantum. Simple jQuery Accordion – Norman's Blog. Wie macht man eigentlich.. Habt ihr schon mal eine Seite mit so einem netten Accordion-Effekt gesehen und euch gefragt wie das geht? Ich erkläre es euch, schaut euch doch aber erstmal die Demo an, damit ihr wisst, was ich meine. Wie ihr seht, klappt immer der Bereich auf, auf den geklickt wird. Alle anderen Blöcke bleiben dagegen geschlossen oder schließen sich.

Wir bedienen uns hier einfach jQuery und schreiben ein paar Zeilen Code, die den gewünschten Accordion-Effekt realisieren. HTML-Gerüst Bevor wir anfangen müssen wir unser HTML aber entsprechend vorbereiten.. Jeder dieser Blöcke besteht aus einer Überschrift, die später anklickbar sein wird und einem Container, der den eigentlichen Inhalt des Blocks enthält. jQuery-Code Nun zum eigentlichen Code. Nun zur Erklärung, was da eigentlich abläuft.. Zu 2.: Stichwort – AccessibilityDas Schließen der Container würde auch über CSS (display:none) gehen aber was ist, wenn JavaScript nicht aktiviert ist? Styling per CSS. Avgrund - A modal UI concept. BookBlock: A Content Flip Plugin - Demo 2. January 2013 Monday Tuesday Wednesday Thursday Friday Saturday Sunday 7Mon 8Tue 9Wed 10Thu 11Fri 12Sat 13Sun 14Mon 15Tue 16Wed 17Thu 18Fri 19Sat 20Sun 21Mon 22Tue 23Wed 24Thu 25Fri 26Sat 27Sun February 2013 4Mon 5Tue 6Wed 7Thu 8Fri 9Sat 10Sun 11Mon 12Tue 13Wed 14Thu 15Fri 16Sat 17Sun 18Mon 19Tue 20Wed 21Thu 22Fri 23Sat 24Sun March 2013 25Mon 26Tue 27Wed 28Thu 29Fri 30Sat 31Sun April 2013 1Mon 2Tue 3Wed 4Thu 5Fri 6Sat 7Sun 8Mon 9Tue 10Wed 11Thu 12Fri 13Sat 14Sun 15Mon 16Tue 17Wed 18Thu 19Fri 20Sat 21Sun 22Mon 23Tue 24Wed 25Thu 26Fri 27Sat 28Sun May 2013 6Mon 7Tue 8Wed 9Thu 10Fri 11Sat 12Sun 13Mon 14Tue 15Wed 16Thu 17Fri 18Sat 19Sun 20Mon 21Tue 22Wed 23Thu 24Fri 25Sat 26Sun 27Mon 28Tue 29Wed 30Thu 31Fri June 2013 3Mon 4Tue 5Wed 6Thu 7Fri 8Sat 9Sun 10Mon 11Tue 12Wed 13Thu 14Fri 15Sat 16Sun 17Mon 18Tue 19Wed 20Thu 21Fri 22Sat 23Sun 24Mon 25Tue 26Wed 27Thu 28Fri 29Sat 30Sun July 2013 August 2013 5Mon 6Tue 7Wed 8Thu 9Fri 10Sat 11Sun 12Mon 13Tue 14Wed 15Thu 16Fri 17Sat 18Sun 19Mon 20Tue 21Wed 22Thu 23Fri 24Sat 25Sun 26Mon 27Tue 28Wed 29Thu 30Fri 31Sat September 2013 2Mon 3Tue 4Wed 5Thu 6Fri 7Sat 8Sun 9Mon 10Tue 11Wed 12Thu 13Fri 14Sat 15Sun 16Mon 17Tue 18Wed 19Thu 20Fri 21Sat 22Sun.

Create a Parallax Website using Stellar.js. jQuery custom selectboxes. jQuery++ jQuery One Page Navigation Plugin. Sep 26, 2010 When appropriate, I am a fan of the one-page sites. I really like the ones that add smooth scrolling and highlight the navigation depending upon which part of the page you have scrolled to. Here are a few examples: Brizk Design and Crush + Lovely. I finally have a freelance project where a one-page site makes sense, so I needed to write the JavaScript to make the navigation work how I wanted. I wanted the page to scroll smoothly when the navigation was clicked, so I used the jQuery ScrollTo plugin. If you want to skip ahead, you can check out the demo and download the plugin from GitHub. The Markup I started with an unordered list for the navigation and a bunch of sections: The JavaScript Then, I added jQuery, the ScrollTo plugin, and my plugin to the page: Finally, I just need to call my plugin on the navigation: $(document).ready(function() { $('#nav').onePageNav();}); Options There are a few options for this plugin: And that’s it.

JQuery: Textfeld (input) auslesen und manipulieren | Martin Abraham. Dropzone.js. Some jQuery Functions And Their JavaScript Equivalents. In light of my recent forays into the JavaScript DOM world, I'd decided to do a little research and write a snippet collection based on jQuery functions and their JavaScript equivalents. I think jQuery is a great tool, and it has done great things for me and many others as developers. But I'm a firm believer that nowadays, JavaScript is an indispensable tool to keep in your arsenal. Manipulating the DOM with JavaScript DOM methods is fun and easy, and the majority of times, plain old vanilla JS is all we need. It seems scary at first, but let's take a look at some core functions/methods that we're accustomed to, how they work, and how to execute them with just plain old JavaScript.

Accessing Elements There are many ways to access elements with JavaScript and jQuery. By ID In this above scenario, we're accessing by ID, so we'd expect that only one element is returned. Var el = $("#element"); With regular JS, we can achieve this two ways: By Class & Tag var els = $("p"); var els = $(".class"); You Might Not Need jQuery.

You Don't Need jQuery! – Free yourself from the chains of jQuery by embracing and understanding the modern Web API and discovering various directed libraries to help you fill in the gaps.