jQuery: personalizzare l’easing jQuery ci permette di modificare anche il suo funzionamento interno consentendo l’accesso ai suoi oggetti core. Uno di questi oggetti è appunto easing, che controlla gli effetti di easing sulle animazioni. Questo oggetto può essere esteso definendo i nostri valori di easing personalizzati che prendono la forma di metodi di tale oggetto. La sintassi di base è la seguente: I parametri che ci interessano del metodo che definiremo sono: t: tempo correnteb: valore inizialec: valore modificatod: durata Il metodo dovrà restituire un’espressione matematica che opera sui quattro parametri dell’animazione. Quindi possiamo usare il nuovo easing moveAway con il metodo animate(): Vi consiglio di studiare il codice sorgente del plugin Easing per rendervi conto dei principali valori di easing possibili e, soprattutto, per studiare le espressioni matematiche usate. Potete visualizzare l’esempio finale in questa pagina.
jQuery ad elevata performance Possiamo aumentare significativamente la performance dei nostri script jQuery seguendo alcune pratiche raccomandate per ottenere il meglio dal nostro codice. In questo articolo vedremo quali sono queste pratiche e come possiamo utilizzarle per migliorare la performance del nostro codice jQuery. Usare selettori specifici e contestuali In jQuery selettori più specifici hanno una migliore performance di selettori meno specifici: $('.test')$('div.test')$('#test') Possiamo usare il contesto dei selettori per migliorarne la performance: $('div.test')$('div.test', '#page') Mettere in cache i selettori e gli oggetti Conservare i selettori e gli oggetti in variabili aumenta di molto la performance perchè riduce il numero di lookup all’interno delle query: $('li', '#nav').each(function { var $li = $(this); var $a = $('a', $li); }); Evitare each() e $.each() var $li = $('li', '#test'), i = 0, len = $li.length; for(i = 0; i < len; i += 1) { } Evitare html() Nota Usare gli array per creare tabelle
jQuery: effetto splash screen Vogliamo creare un effetto di entrata in stile splash screen con jQuery. Per ottenere questo effetto abbiamo bisogno di un elemento posizionato e nascosto che al caricamento della pagina entrerà dall’angolo in alto a sinistra e si posizionerà esattamente al centro della pagina, sia in orizzontale che in verticale. Quando si fa clic sull’elemento, questo uscirà dallo schermo da destra verso sinistra. Ecco gli stili CSS che ci occorrono: Con jQuery prendiamo le dimensioni della pagina per calcolare le coordinate da dare al nostro box animato, usando una nota tecnica CSS per centrarlo in orizzontale e in verticale: var docWidth = $(document).width();var docHeight = $(document).height(); var divWidth = Math.round(docWidth / 2);var divHeight = Math.round(docHeight / 2); var offsetLeft = '50%';var offsetTop = '50%'; Quindi animiamo l’elemento facendolo entrare e ne gestiamo il clic facendolo sparire: La tecnica CSS utilizzata prevede che: Potete visionare l’esempio finale in questa pagina.
Triggering CSS3 Transitions With JavaScript At the beginning of this month I wrote a post accompanied by five demo pages that showed that CSS3 transitions could be triggered with a number of different events/states in CSS. That alone should help you see how these types of simple animations work. But let’s take this a bit further. CSS pseudo-classes and media queries (which I used in that other post to trigger the transitions) represent certain states for certain elements. These states occur after specific events on the page. Here’s the HTML: So we have a box with a class of “box”, and a button. $(function() { $("#bt").click(function() { $(".box").toggleClass("box-change"); }); }); $(function() { $("#bt").click(function() { $(".box").toggleClass("box-change"); }); }); This uses jQuery’s .toggleClass method to add or remove the specified class name. So when the button is clicked, after the .box-change class is added, this will trigger the transition. Why Would You Do This? Well, there could be a number of reasons.
How to create a timeline slider with JQuery | KCLARK Web Design Many website has a long company history and they want to show their history. I will show you how to create a timeline slider with JQuery. You can follow me by reading the comments in the codes. First, start by loading in the necessary libraries and external files in the head. I set up to holde the content, to contained the content items, to hold timeline slider year 2002 and , , to set up the columns in the slide. The HTML header and slider Structure <! You will set up the navigation bar in this section. The HTML header and timeline navigation bar Structure <div style="clear: both;"></div> <! I set up the reset CSS code to remove the browsers default and style for the slider. The CSS slider Structure /*CSS reset*/ Style for the navigation bar. The CSS navigation bar Structure
10 Randomly Good jQuery Plugins jQuery has been continuously giving its share in developing sites. Check out this list of random jQuery plugins that we’ve collected from awesome jQuery developer Addy Osmani. Very nice plugins and I’m sure you haven’t seen most of these. 1. In this tutorial you will learn how to build a single-page application (SPA) supporting graceful degradation using some of jQuery’s Best friends; DocumentCloud’s Backbone.js, Underscore.js, LAB.js and jQuery templating to name but a few. Source 2. Learn how you can use CSS3 transitions to power your application’s animations with jQuery’s .animate() method as a fallback where transitions aren’t supported. Source 3. Learn how to create a useful hover-based user interface using jQuery, CSS3, HTML5 and @font-face. Source 4. RocketBar is a simple solution for this which shows you how you can easily provide your users a persistent form of site navigation without them needing to scroll back up. Source 5. Source 6. Source 7. Source Source 9. Source 10. Source
Playground - How to create an awesome contact form Check out the new website with fresh and new jQuery plugins and tutorials! Visit jscraft.net Posted by: Marcin Dziewulski on 25.01.11 In this tutorial we are going to build a awesome contact form. We need to create necessery files: index.html, init.js and default.css. Include all files into section in your index.html: As always we need to write HTML markup from scratch. index.html <label> Name: </label> <label> Company: </label> <label> Your e-mail: </label> <label> Contact number: </label> <label> Message: </label> Easy? default.css . blocks p { margin - bottom : 15px ; position : relative ; . btn { display : block ; float : left ; height : 31px ; line - height : 31px ; padding : 0 10px ; background : url (../ gfx / bgbtn . jpg ) repeat - x ; color : #565e62; font - weight : bold ; font - size : 11px ; border : 1px solid #e1e0df; outline : none ; . text , . textarea { padding : 5px 10px ; height : 27px ; border : 1px solid #ddd; color : #333; background : url (../ gfx / bginput . jpg ) repeat - x bottom #fff;
Learn JavaScript | Mozilla Developer Network Our policy on modern JavaScript JavaScript is an actively evolving language and has changed greatly over the years. In particular, the 6th edition of the language (sometimes known as ECMAScript 2015 or ES6), introduced in 2015, added many new features. We think that the features added to JavaScript in ECMAScript 2015 and subsequent versions enable developers to write more readable, reliable, and expressive code, and that it's important to learn about them. The features we teach in this course are stable and have been supported by all major browsers for several years. This topic contains the following modules, in a suggested order for working through them. JavaScript first steps In our first JavaScript module, we first answer some fundamental questions such as "what is JavaScript?" JavaScript building blocks Introducing JavaScript objects In JavaScript, most things are objects, from core JavaScript features like strings and arrays to the browser APIs built on top of JavaScript.
What is Document Object Model (DOM) ? - Definition from Whatis.com Document Object Model (DOM), a programming interface specification being developed by the World Wide Web Consortium (W3C), lets a programmer create and modify HTML pages and XML documents as full-fledged program objects. Currently, HTML (Hypertext Markup Language) and XML (Extensible Markup Language) are ways to express a document in terms of a data structure. As program objects, such documents will be able to have their contents and data "hidden" within the object, helping to ensure control over who can manipulate the document. As objects, documents can carry with them the object-oriented procedures called methods. DOM is a strategic and open effort to specify how to provide programming control over documents. It was inspired in part by the advent of the new HTML capabilities generally called dynamic HTML and as a way to encourage consistent browser behavior with Web pages and their elements. Progress of the Document Object Model specification can be followed at the W3C Web site.
JavaScript/DOM Wikibooks, manuali e libri di testo liberi. Il DOM è una tecnologia standard del W3C per muoversi nella struttura di documenti XML. In relazione a JavaScript questo è molto interessante, in quanto un documento HTML ben formato è in realtà un documento XML, e tramite il DOM di JavaScript è possibile accedere a qualsiasi elemento nella pagina per modificarne le proprietà o per attivarne i metodi. Il DOM definisce anche un modello oggetto più evoluto del BOM che tratteremo quindi in modo più approfondito. BOM vs DOM[modifica] Ci si potrebbe a questo punto chiedere dove si sovrappongano il DOM che andremo ad analizzare e BOM che abbiamo appena visto e, soprattutto, perché abbiamo esaminato anche il BOM, nonostante sia meno evoluto. Il problema sorge in realtà dall'evoluzione dei browser, che hanno creato dei propri standard prima della definizione del W3C. La struttura gerarchica di un documento[modifica] Prendiamo ad esempio questa pagina HTML: Vari tipi di nodo[modifica]
Help! I Don’t Know JavaScript! For all the interested MooToolers in the making out there, I have compiled a list of resources which should give you everything you need to know to get started in client-side development. Tools of the Trade These are the prerequisites of Web development. Firefox: You’ll want to use Firefox for development. Essential Extensions Firebug: The best plugin ever, Firebug is the difference between bashing your head against the keyboard and knowing what’s going on with the browser.Web Developer Toolbar: Gives you awesome power over websites. Learning The Basics Don’t let not knowing HTML put you off Web development! How to Create This place is pretty nice. Mozilla Developer Center Probably the most inclusive information available on the Web, especially for developing for Firefox or Mozilla. W3 Schools W3 Schools is basically just your one-stop-shop for quick reference on the Web technologies. Microsoft’s Developer Network Don’t let the name throw you off—-JScript is the same as JavaScript. Other Places
How to navigate the pages of your app with jQuery Mobile jQuery Mobile is a touch-optimized web framework for creating apps that look and behave consistently across many devices. The following excerpt from jQuery Mobile explains the page navigation options, including back buttons, that are available. jQuery Mobile automatically manages the URLs of the various pages and dialogs in the application. Each page (that is to say, each element that has a data-role="page" attribute) will have its own unique URL within the application, allowing for bookmarking and deep linking into your application. The URL for each page is stored in the data-url attribute which jQuery Mobile attaches to each page’s containing element. As the user moves through the application by tapping on links and buttons, jQuery Mobile updates the location.hash object, allowing the framework to use the browser’s native history capabilities to store the navigation information. Note: Due to their modal nature, dialogs are not included in the history hash. Example uses of changePage
Tweet! Put Twitter on your site with this simple, unobtrusive jQuery widget Five Useful Interactive CSS/jQuery Techniques Deconstructed - Smashing Magazine Advertisement With the wide variety of CSS3 and JavaScript techniques available today, it’s easier than ever to create unique interactive websites that delight visitors and provide a more engaging user experience. In this article, we’ll walk through five interactive techniques that you can start using right now. We’ll cover: Besides learning how to accomplish these specific tasks, you’ll also master a variety of useful CSS and jQuery tricks that you can leverage when creating your own interactive techniques. So, let’s dive in and start building more exciting websites! 1. The footer of David DeSandro’s website uses extruded text that animates on mouseover. View the demo First let’s set up some text (the code is copied from the original site): <span class="extruded">Extrude Me</span> And some basic styling (the code is copied from the original site): Here, we’ve applied some basic styles and added a text-shadow. text-shadow: #000 1px 1px, #000 2px 2px, #000 3px 3px; Styling the Hover State 2. 3.