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. But you’ll also need to have all the browsers you can manage to install on your machine (and other machines) in order to check cross browser support. 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 Microsoft’s Developer Network Other Places Bonus Points
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. Have fun! 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
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 have chosen Google API and JQuery UI for this slider. 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
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. 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. The transitions are declared on the .box element (using all the necessary vendor prefixes), and they include the use of multiple transitions separated by a comma (in this case transitioning both width and height). Why Would You Do This?
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. Vediamo come. 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:
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: 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. Vediamo insieme i dettagli. 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.
75 (Really) Useful JavaScript Techniques - Smashing Magazine Advertisement Developers and designers are using more and more JavaScript in modern designs. Sometimes this can be a hindrance to the user and take away from the simplicity of the design, and other times it can add greatly to the user’s experience. Thanks to the Web’s widespread adoption of JavaScript, JavaScript libraries have sprung up to help make design and development easier. However, sometimes we need JavaScript solutions that are a little more involved or specific. You may want to take a look at the following related articles: 75 Useful JavaScript Techniques Hyphenation in Web11This project collects working solutions for automatic hyphenation in (X)HTML pages. SocialHistory.js13SocialHistory.js enables you to detect which social bookmarking sites your visitors use. Textboxlist Auto-Completion15One of the most attractive features of JavaScript is the highly useful autocompletion. addSizes.js17This small JavaScript takes care of an automatic link file-size generation.
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. Also we are going to display errors using well-known jQuery plugin to validate form fields. 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 ; color : #333;
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. At the same time, to maintain backwards compatibility with older websites, old features of the language have been retained, even when they are no longer considered good practice. 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