Come realizzare uno slider di immagini con jquery
In questo tutorial vedremo come realizzare uno slider di immagini con javascript e la libreria jquery
Sito web: http://opiefoto.com/articles/photoslider
Creare un news slider accessibile con JQuery ed il suo plugin News Slider Menu
Gli slider sono una soluzione molto utile per avere all'interno del vostro sito una sezione del layout a contenuto fisso, in cui possono apparire news (o banner, promozioni etc) scorrevoli (slider appunto), ossia che cambino da un elemento all'altro in maniera automatica (stabilendo un intervallo di tempo) o che reagiscano agli eventi della pagina (il click dell'utente per esempio).
La soluzione pero' la maggior parte delle volte, presupponendo javascript per le animazioni è difficilmente accessibile e quasi mai non intrusivo, ossia che in mancanza di javascript attivo, la visualizzazione della pagina non ne venga alterata in maniera rilevante.
Da una segnalazione di Alessandro Fulciniti ho analizzato questa:
Accessible News Slider Plugin v1.1 for JQuery.
Se avete Firefox con la developer bar potete tranquillamente disabilitare il Javascript per vedere che la visualizzazione è garantita (si allunga semplicemente l'altezza del layer).
Vediamo di analizzare in dettaglio come implementare lo script.
Inseriamo gli script utili per il funzionamento nel tag HEAD
1) INSERIMENTO SCRIPT E STYLE
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.accessible-news-slider.js"></script>
Sempre nel tag HEAD inseriamo un nuovo tag script per impostare le opzioni javascript dello script
2) PERSONALIZZAZIONE DELLO SCRIPT
<script language="javascript" type="text/javascript">
$(function() {
$(".top_stories").slideNews();
/*
var options = {
headline: "Top Stories" (String) | Each unique slider (id) or set of sliders (class) can receive a headline.
newsWidth: 285, (Integer) | The demo is 285. Modifying will require a modification to the CSS.
newsSpeed: "normal" (String/Integer) | "slow","normal","fast", or an integer, with 1 being the fastest animation.
}
$(".top_stories").slideNews(options);
NOTE:
The newsWidth is the width of each news item, including the photo, news callout,
and a 10 pixel margin. The slideNews() method will slide 2x the newsWidth -- moving
two news stories off the viewable stage with a click of the next/previous buttons.
*/
});
</script>
Come vedete lo stretto necessario è impostare quale sara' il layer che effettuera' lo slider.
$(".top_stories").slideNews()
ed eventualmente è possibile inviare allo script opzioni personalizzate attraverlo l'oggetto options
var options = {
headline: "Top Stories", // Stringa, l'intestazione dello slider (nella figura potete vederlo come "Top Stories [ $NUMEROELEMENTI$] [U]View All[/U]"
newsWidth: 285", // un numero intero. Per modificare la larghezza dello slider, e deve conseguentemente modificato anche lo style
newsSpeed: "normal" // Puo' essere un numero oppure una stringa, valori permessi "slow" = lento, "normal" = velocita' normale, "fast" = veloce
// inserendo 1 si ottiene l'animazione più veloce e dipende dalla velocita' del processore
}
//a questo punto inizializzate la chiamata passando come parametro l'oggetto options
$(".top_stories").slideNews(options);
/* NOTA:
la variabile newsWidth rappresenta la larghezza di ogni singolo elemento news, incluso foto, lo spazio di richiamo della news e 10 pixel
di margine. Il metoto SlideNews() scorrera' di una misura pari a 2 volte la dimensione specificata nella variabile newsWidth -- muovendo quindi
2 elementi fuori dalla parte visibile secondo il click del bottone next/previsous (successivo/precedente)
Per personalizzare lo stile di visualizzazione del layer che conterra' le slides, prima vediamo quale è la struttura dello slider:
3) L'HTML
<div class="news_slider top_stories">
<div class="messaging">
MESSAGIO IN CASO IL JAVASCRIPT SIA DISABILITATO
</div>
<a href="" class="skip" title="In caso di javascript disabilitato non potrai saltare direttamente al contenuto.">Vai al contenuto della news.</a>
<!-- immagine per passare alla news precedente -->
<div class="prev">
<a href="#"><img src="images/prev.gif" width="16" height="16" alt="Precedente" title="Precedente" env="images" /></a>
</div>
<!-- immagine per passare alla news successiva -->
<div class="next">
<a href="#"><img src="images/next.gif" width="16" height="16" alt="Successiva" title="Successiva" env="images" /></a>
</div>
<!-- sviluppo del contenuto dello slider -->
<div class="news_items">
<a name=""></a>
<div class="container fl">
<!-- 1a news -->
<div class="item fl">
<!-- 1a miniatura -->
<a href="/" title="Alternate del Primo link"><img src="1a IMMAGINE" width="75" height="75" alt="ALT Foto 1" class="fl" /></a>
<!-- corpo 1a news -->
<div class="fl">
<a href="/" title="Alternate del link.">Link alla 1a news</a>
<br />
Descrizione 1a news
</div>
</div>
<!-- 2a news -->
<div class="item fl">
<!-- 2a miniatura -->
<a href="/" title="Alternate del Secondo link"><img src="2a IMMAGINE" width="75" height="75" alt="ALT Foto 2" class="fl" /></a>
<!-- corpo 2a news -->
<div class="fl">
<a href="/" title="Alternate del link.">Link alla 2a news</a>
<br />
Descrizione 2a news
</div>
</div>
<!-- .... 3a news etc etc a news -->
</div>
</div>
</div>
come si vede viene usata la tecnica dell'attribuzione di + classi allo stesso elemento class="classe1 classe2"
4) PERSONALIZZAZIONE DEGLI STILI
Ora sappiamo quali elementi personalizzare nello style. Inseriamo lo style nel tag head o linkiamolo come style esterno (sempre nell'HEAD)
/* Stili della pagina generali [ inizio ] */ body {font: normal 75% "Arial","Helvetica",sans-serif;}
a {color: #336699;}
img {border: 0; display: block;}
/* Stili della pagina generali [ fine ] */
/* stili specifici per lo slider [ inizio ] */
/* elementi float left utilizzati per le immagini e per i singoli elementi delle slider */
.fl {float: left; display: inline;}
/* personalizzazione del link per effettuare lo skip (saltare al contenuto della news) */
.skip {position: absolute; left: -5000px;}
/* stili del contenitore globale dello slider */
.news_slider {position: relative; width: 600px; margin: 0 0 10px 0;}
/* stili del messaggio di errore in caso javascript disabilitato */
.news_slider .messaging {display: block; padding: 5px; margin: 0 20px 5px 20px; background: #ffffcc;}
/* stili degli elementi per scorrere avanti ed indietro la paginazione */
.news_slider .prev, .news_slider .next {position: absolute; top: 42%; display: none;}
.news_slider .next {right: 0;}
/* stile generale dei singoli elementi */
.news_slider .news_items {position: relative; width: 560px; left: 20px; overflow: hidden;}
/* stile generale del link per visualizzare tutti gli elementi bypassando lo scorrimento */
.news_slider .news_items .view_all {padding: 5px; margin: 0 0 2px 0; border-top: #eeeeed 1px solid; border-bottom: #eeeeed 1px solid; text-align: center;}
/* stile generale del contenitore di tutti gli elementi */
.news_slider .news_items .container {position: relative; top: 0; left: 0; width: 570px; background: #eeeeed;}
/* stili della singola voce [DA MODIFICARE IN BASE A QUALE VALORE SPECIFICATO nella variabile newsWidth */
.news_slider .news_items .container .item {width: 275px; margin: 0 10px 0 0;}
/* stile del layer di descrizione della news [tenete presente che il layer ha anche la classe fl, ossia float left */
.news_slider .news_items .container .item div {width: 170px; margin: 10px 0 10px 0;}
/* padding dell'immagine miniatura della news */
.news_slider .news_items .container .item img {padding: 10px;}
/* stili specifici per lo slider [ fine ] */
4) I FILE NECESSARI
Style.css
Jquery.js
Jquery.accessible-news-slider.js
L'esempio html
Le gif next.gif, prev.gif
Il post dell'autore
Sito ufficiale di jQuery: http://www.jquery.com
Fonte: http://forum.zeusnews.com/viewtopic.php?t=20961
Autocompletamento con php e ajax
In questo tutorial vedremo come realizzare uno script per l'autocompletamento in ajax che prende i valori da un database
Come prima cosa dobbiamo scaricare l'ultima versione della libreria javascript script.a.culos qui
Scarichiamo e mettiamo come codice
<script language="JavaScript" SRC="lib/prototype.js"></script>
<script language="Javascript" src="javascript/scriptaculous.js"> </script>
<script language="Javascript" src="javascript/effects.js"> </script>
<script language="Javascript" src="javascript/controls.js"> </script>
Inserite le librerie necessarie al funzionamento dello script, inseriamo la parte di codice che gestisce il campo da autocompletare
<input type="text" id="search" name="search" />
<div id="hint"></div>
<script type="text/javascript">
new Ajax.Autocompleter("search","hint","fillfield.php");
</script>
Il file fillfield.php è il file che mostrerà tutte le possibili parole che possono essere utili al completamento del campo
<?php
// cambia le impostazioni per la connessione al db:
$host = "localhost";
$database = "";
$user = "";
$password = "";
// connettiti al db e cerca le parole
mysql_connect($host,$user,$password);
mysql_select_db($database);
$sql = "SELECT title FROM tabella WHERE title LIKE '%" . $_POST['search'] . "%'";
$resource = mysql_query($sql);
?>
<ul>
<? while($taken = mysql_fetch_assoc($resource)) { ?>
<li><? echo stripslashes($taken['title']);?></li>
<? } ?>
</ul>
ajax edit in place
inwriter è una libreria javascript piccola che ti permette di gestire facilmente l'evento edit in place. Oppure un ottimo tutorial in italiano http://free-script.it/post/Script_ajax_Edit...loco-38.htm
Sito web: http://digitalhymn.com/argilla/inwriter/
Una serie di links a video tutorials
The JavaScript Programming Language (by Douglas Crockford)
Yahoo! JavaScript Architect Douglas Crockford provides a comprehensive introduction to the JavaScript Programming Language in this four-part video:
- JavaScript Video Lecture Part I (Yahoo Video)
JavaScript, aka Mocha, aka LiveScript, aka JScript, aka ECMAScript, is one of the world's most popular programming languages. Virtually every personal computer in the world has at least one JavaScript interpreter installed on it and in active use. JavaScript's popularity is due entirely to its role as the scripting language of the WWW. Despite its popularity, few know that JavaScript is a very nice dynamic object-oriented general-purpose programming language. How can this be a secret? Why is this language so misunderstood? - JavaScript Video Lecture Part II
JavaScript's C-like syntax, including curly braces and the clunky for statement, makes it appear to be an ordinary procedural language. This is misleading because JavaScript has more in common with functional languages like Lisp or Scheme than with C or Java. It has arrays instead of lists and objects instead of property lists. Functions are first class. It has closures. You get lambdas without having to balance all those parens. - JavaScript Video Lecture Part III
Nearly all of the books about JavaScript are quite awful. They contain errors, poor examples, and promote bad practices. Important features of the language are often explained poorly, or left out entirely. I have reviewed dozens of JavaScript books, and I can only recommend one: JavaScript: The Definitive Guide (5th Edition) by David Flanagan. - JavaScript Video Lecture Part IV
Most of the people writing in JavaScript are not programmers. They lack the training and discipline to write good programs. JavaScript has so much expressive power that they are able to do useful things in it, anyway. This has given JavaScript a reputation of being strictly for the amateurs, that it is not suitable for professional programming. This is simply not the case. - Lecture Slides (zipped pdf)
Advanced JavaScript (by Douglas Crockford)
Yahoo! JavaScript Architect Douglas Crockford lectures on the nuances of the JavaScript programming language in this three-part video:
- Advanced JS Part I (Yahoo Video)
Douglas Crockford teaches "Advanced JavaScript." This course is broken into three clips; this is the first of those three clips. Note that when Douglas begins the talk referring to the "third installment", he's referring to "Advanced JavaScript" being the third class in a series; this is indeed the first of the three clips comprising the "Advanced JavaScript" class. - Advanced JS Part II
No programming language is perfect. JavaScript has its share of design errors, such as the overloading of + to mean both addition and concatenation with type coercion, and the error-prone with statement should be avoided. The reserved word policies are much too strict. Semicolon insertion was a huge mistake, as was the notation for literal regular expressions. These mistakes have led to programming errors, and called the design of the language as a whole into question. - Advanced JS Part III
The official specification for the language is published by ECMA. The specification is of extremely poor quality. It is difficult to read and very difficult to understand. This has been a contributor to the Bad Book problem because authors have been unable to use the standard document to improve their own understanding of the language. ECMA and the TC39 committee should be deeply embarrassed. - Lecture Slides
Advanced JavaScript with Libraries (by John Resig)
John Resig of Mozilla Corp., author of the popular JQuery JavaScript library, describes the role of libraries in the world of frontend engineering, the problems they solve, and the things we can learn from how developers use and think about libraries in their projects.
- Part I of the Lecture (Yahoo Video)
- Part II of the Lecture
Maintainable JavaScript (by Nicholas Zakas)
Nicholas Zakas is an engineer on the team that brings you My Yahoo!, one of the most popular personalized portals on the web. In this talk, Zakas focuses on some fundamental concepts in the world of frontend engineering with an eye toward making code more maintainable.
- Maintainable JavaScript Video Lecture (Yahoo Video)
An Inconvenient API: The Theory of the DOM [Document Object Model] (by Douglas Crockford)
Yahoo! JavaScript Architect Douglas Crockford discusses the nexus between JavaScript and the browser, exploring the history of the BOM and DOM APIs and their impact on frontend engineering today. This presentation is archived in three parts:
- Lecture Part I (Yahoo Video)
- Lecture Part II
- Lecture Part III
- Video Lecture Slides
Welcome to FireBug 1.0 (by John Hewitt)
Joe Hewitt is a Mozilla developer who has written software dear to the heart of all web developers, including the original Mozilla DOM Inspector. Joe's newest Mozilla tool is Firebug, an integral logging and debugging extension for Firefox that sets a new standard for its category. Joe provided a power-user tour while announcing Firebug 1.0's release on January 25, 2007, at Yahoo!.
- Video Lecture on FireFox's Extension - FireBug (Yahoo Video)
New Features in the Next C++ Standard
- Video Lecture on the Next C++ Standard (Google Video)
The upcoming C++ standard will have many new features, several major and many minor. The major features are concurrency, template concepts, move semantics, generalized constant expressions, automatic variable typing, and garbage collection. We will present an overview of the major features and breeze through a list of other features, commenting on their likeliness to make the standard.
Advanced Python (Or Understanding Python)
- Advanced Python Video Lecture (Google Video)
The Python language, while object-oriented, is fundamentally different from both C++ and Java. The dynamic and introspective nature of Python allow for language mechanics unlike that of static languages. This talk aims to enlighten programmers new to Python about these fundamentals, the language mechanics that flow from them and how to effectively put those to use. Among the topics covered are duck-typing, interfaces, descriptors, decorators, metaclasses, reference-counting and the cyclic-garbage collector, the divide between C/C++ data and Python objects and the CPython implementation in general.
This talk is part of the Advanced Topics in Programming Languages series. The goal of this series is to encourage all of the people at Google who know and love programming languages to share their knowledge.
Python Design Patterns (by Alex Martelli)
- Design Patterns Part I
- Design Patterns Part II (Google Video)
Design Patterns must be studied in the context on the language in which they'll get implemented (the Gang of Four made that point very strongly in their book, though almost everybody else seems not to have noticed :-). This talk explores several categories of classic "elementary" DPs in a Python context -- Creational, Masquerading, Adaptation, and Template.
Learning Java Programming - Video Tutorial
- Java Video Tutorial 1: Installing the Java Development Kit (YouTube video)
This tutorial is the first of a collection of basic java video tutorials that will get you started. In this tutorial you will learn how to install the JDK on a Windows XP machine. - Java Video Tutorial 2: Hello World
This video tutorial guides you through the basics of writing, compiling and running a simple program with some extra hints and tips along the way. - Java Video Tutorial 3.1: Variables and Arithmetic
Tutorial 3.1 will describe how to declare and assign variables in java as well as discussing the various data types. - Java Video Tutorial 3.2: Variables and Arithmetic
Tutorial 3.2 shows you how to perform simple arithmatic and display variables through an example program. - Java Video Tutorial 4: If Statements
This tutorial discusses: If statements, If else statements, Conditional operators. - Java Video Tutorial 5: Object Oriented Programming
This tutorial discusses the basic concepts of object oriented programming (OOP). This includes object behaviour and attributes aswell as constructors. - Java Video Tutorial 6: Loops
This tutorial will show you how to create while loops, do...while loops and for loops! - Java Video Tutorial 7: Switch Statement
In this tutorial you learn about switch statements. - Java Video Tutorial 8: Arrays
This tutorial shows you how to use arrays.
Delphi Training Series: Programming 101 (by 3DBuzz)
Ever wanted to become a programmer? The Delphi Training Series: Programming 101 is a sequence of training videos designed to teach the complete beginner how to become a programmer using Delphi.
- Dephi Programming Episode 1 (YouTube video)
In this episode, the viewer is shown where they can download the free Integrated Development Environment (IDE) known as Turbo Delphi, as well as how to get it installed and registered. Once launched the video will walk the viewer through the creation of their first simple program. - Dephi Programming Episode 2
- Dephi Programming Episode 3
Episode 3 explores simple game design! - Dephi Programming Episode 4
In this episode, the viewer is introduced to the concept of variables.
This video is the first in a mini-series aimed at the creation of your own MP3 player. - Dephi Programming Episode 5
In this episode, the viewer is exposed to the world of Procedures and Functions.
This video continues the series with focus on writing your own mp3 player. - Dephi Programming Episode 6
In this episode, the viewer is presented with lecture covering DLLs, handles, the BASS library, and all steps required to write the foundation of a simple MP3 player. - Dephi Programming Episode 7
- Dephi Programming Episode 8
In the eighth installment of the Delphi Training Series, we take a short break away from the MP3 player we were writing to introduce you to a new aspect of programming: The IF statement. - Dephi Programming Episode 9
The ninth episode of the Delphi Training Series is another theory-driven exploration, stepping away from the MP3 player to take a look at looping and how it works inside of Object Pascal.
Vim: 7 Habits For Effective Text Editing (by Bram Moolenaar)
- Vi Imporoved Video Lecture (Google Video)
A large percentage of time behind the computer screen is spent on editing text. Investing a little time in learning more efficient ways to use a text editor pays itself back fairly quickly. This presentation will give an overview of the large number of ways of using Vim in a smart way to edit programs, structured text and documentation. Examples will be used to make clear how learning a limited number of habits will avoid wasting time and lower the number of mistakes. Bram Moolenaar is mostly known for being the benevolent dictator of the text editor Vim. His roots are in electrical engineering and for a long time he worked on inventing image processing algorithms and software for big photo copying machines. At some point his work on Open-Source software became more important, making the development of Vim his full time job. He also did the A-A-P project in between Vim version 6.0 and 7.0. Now he works for Google in Zurich, still improving Vim on the side.
Bonus Lecture this Month:
An Introduction to SQLite (by Richard Hipp)
SQLite is a small C library that implements a self-contained, embeddable, zero-configuration SQL database engine. SQLite implements a large subset of SQL-92 and stores a complete database in a single disk file. The library footprint is less than 250 KB making is suitable for use in embedded devices and applications where memory space is scarce.
This talk provides a quick overview of SQLite, its history, its strengths and weaknesses, and describes situations where it is much more useful than a traditional client/server database. The talk concludes with a discussion of the lessons learned from the development of SQLite and how those lessons can be applied to other projects.
Tutorials su ajax
Keyword Suggest
Live Search
Misc/General
Progress Bars
Rounded Corner
RSS
Shopping Cart
Lists/Sorting
Tabbed Pages
Trees
Voting
Getting Started
Bookmarklets
Chat
Drag and Drop
Dynamically Content Loading
Forms and Autocomplete
File Uploader
Image/Display/Edit/Gallery/Lightbox/Slideshow
Username Availability
Login con php e ajax
In questo articolo vedremo come creare un sistema per creare un sistema di login sicuro usando XMLHttpRequest. Questo esempio è un sistema per il login che nn richiede il refresh della pagina ma veramente sicuro.
Vantaggi
User does not need to refresh the page to login.
User is notified instantly on incorrect username/password combination.
Overall user experience is more seamless.
Password is not sent in plain text ever (more secure than traditional system).
Javascript convenience with server-side security (uses PHP/MySQL).
Uses one-time use random seed to hash the password before sending (making interceptions useless).
Svantaggi
System is more prone to brute force attacks.
Can be minimized by adding a delay after a certain number of attempts per username or per client.
User may expect a login button.
One could still be added without reloading the page.
Older versions of Safari cannot disable a password field.
This code uses the MD5 encryption algorithm, which has since been proven to be less secure than previously thought. If you use this code, I strongly recommend you switch to a more secure encryption algorithm, such as SHA-1. For sites were security is not crucial, MD5 should suffice.
Sito web: http://www.jamesdam.com/ajax_login/login.html