Tag Archives: Javascript

Creare menù evoluti in DHTML online

Pubblicato da

izzymenu2.jpg

Dopo l’articolo sulla creazione dei CSS online è il turno di IzzyMenu. Un’applicazione online che permette in pochi step di creare gradevoli menù con effetto hover e la possibilità di sub-menu a discesa.
Si crea tutto online potendo scegliere tra moltissimi stili ed infiniti abbinamenti di colori ed effetti. Al termine della creazione si scarica tutto il pacchetto: codice HTML, Javascript, CSS ed eventuali immagini utilizzate per la creazione del menù.

izzymenu.jpg

Creando un account presso IzzyMenu è possibile salvare più menù realizzati, avendoli a disposizione per altri eventuali lavori.

Javascript e CSS: una barra dei comandi sempre nell’angolo in basso a destra

Pubblicato da

Può capitare, nella creazione di applicazioni per il web, di avere la necessità di una barra dei comandi che abbia una posizione assoluta rispetto allo schermo e non rispetto alla pagina. Questa necessità si ha soprattutto quando la quantità di dati causa uno scroll eccessivo della pagina.
Per fare questo basta un po’ di CSS e di Javascript.

Innanzitutto il CSS. Niente di particolare, dà semplicemente uno stile alla barra dei comandi

#topbar
{
PADDING-TOP: 5px;
PADDING-BOTTOM: 5px;
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
VISIBILITY: hidden;
BORDER-TOP: black 1px solid;
BORDER-BOTTOM: black 1px solid;
BORDER-RIGHT: black 1px solid;
BORDER-LEFT: black 1px solid;
WIDTH: 450px;
FONT-FAMILY: Tahoma;
POSITION: absolute;
BACKGROUND-COLOR: white
}

e poi il javascript che oltre alle istruzioni per tenere la barra sempre ad una stessa posizione, contiene una funzione closebar() per la chiusura della stessa ed un gestore di cookie (la chiusura della barra setta il cookie come preferenza per la sessione in corso).

var persistclose = 1
var startX = 3
var startY = 3
var verticalpos = "frombottom"
function iecompattest()
{
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name)
{
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0)
{
offset = document.cookie.indexOf(search)
if (offset != -1)
{
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar()
{
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar()
{
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id)
{
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else
{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop")
{
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else
{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar

Nel <BODY> del html la barra è un layer così richiamato


<div id="topbar">
<table width="100%">
<tr>
<td width="99%">
<strong>Barra dei comandi</strong>. <br />
Da qui puoi stampare o <a href="javascript:location.replace(location.href)">effettuare calcoli</a> in questa pagina</td>
</tr>
</table>
</div>

Qui una demo dell’effetto e qui lo zip dell’esempio.
Funziona con Firefox e Internet Explorer 6 e 7.

Flash: il problema dell’Active Content verso una soluzione definitiva

Pubblicato da

E’ un problema stranoto tra gli sviluppatori Flash. Il nuovo Internet Explorer non permette la fruizione di alcuni contenuti attivi (Flash, Java, Shockwave, ecc) fin quando l’utente non autorizza deliberatamente, tramite un clic, il relativo controllo ActiveX.
Adobe, proprietario di Flash e quindi maggiore interessato al problema, consigliava di ovviare con l’utilizzo di un javascript .
Lo stesso Dreamweaver CS3 lo produce automaticamente nel momento in cui si “embeddano” nella pagina filmati Flash.

Non essendo uno sviluppatore Flash mi ero imbattuto in un problema per me strano. Ossia, nonostante mettessi i sopracitati javascript per aggirare l’attivazione del contenuto, Internet Explorer continuava a bloccarlo se testavo la pagina in locale.
Non sapevo che i file che risiedono sul proprio pc vanno ‘esplicitamente’ autorizzati tramite le impostazioni di Internet Explorer
Strumenti -> Opzioni Internet -> Avanzate -> “Consenti l’esecuzione di contenuto attivo in file in Risorse del computer”

E adesso una buona notizia. L’8 novembre Microsoft ha annunciato che toglierà questa noiosa precauzione dalle future versioni di Internet Explorer. Già da aprile 2008.
Le pagine con il javascript per l’attivazione continueranno a funzionare regolarmente.

CSS: CSS Grid Builder da Yahoo!

Pubblicato da

Il ruolo dei CSS (Cascading Style Sheets) sta sempre diventando più importante nella costruzione di interfacce web. Anche quelle strutture che prima venivano progettate e realizzate a furia di tabelle, righe e colonne adesso possono essere definite tramite un unico, leggero e facilmente modificabile, foglio di stile.
Non tutti però hanno dimestichezza con i CSS quindi ecco che diviene importante uno strumento come il CSS Grid Builder di Yahoo!.
Tramite la nota libreria YUI (Yahoo! User Interface) è possibile creare al volo tabelle basate su CSS, sicuri che la compatibilità con tutti i browser sia totale.
Un ottimo strumento didattico e di lavoro.

Link: CSS Grid Builder

Javascript: validazione ‘on fly’ dei form con LiveValidation

Pubblicato da

screenhunter_01-sep-17-0931.jpg

Nella compilazione dei form di registrazione/autenticazione non c’è situazione più noiosa di essere avvisati, riguardo un errore di compilazione, DOPO aver effettuato il click sul tasto di invio. In alcuni casi è ancora necessario riprendere la compilazione dall’inizio.
Anche portali molto importanti hanno, inspiegabilmente, sistemi di validazione obsoleti che passano attraverso il submit verso pagine, per così dire, terze.
Esistono online molte valide librerie javascript che permettono la validazione al volo degli input.
Una che si distingue per semplicità di utilizzo ed efficacia è livevalidation. Oltre ai classici controlli di validità come campo email, campi numerici e campi obbligatori (controllo isEmpty) è possibile applicare sofisticati filtri con le regular expression e combinazioni di controlli.
Si possono apprezzare le potenzialità di questa libreria (rilasciata sotto licenza MIT) nella pagina degli esempi.

Link:  LiveValidation  – Validation as you type

CSS: menù orizzontale compatibile con tutte le versioni Firefox e Internet Explorer

Pubblicato da

In questo blog per avere un menù che portasse direttamente alle pagine ‘statiche’ avevo sino ad adesso utilizzato il SuckerTree Horizontal Menu che avevo trovato su Dynamic Drive CSS Library.
Una soluzione molto elegante quando si vuole creare un menù per un sito con una semplice lista non ordinata <ul>.
Il problema era che le larghezze dei pulsanti non le volevo fisse

suckertree_1.jpg

ma volevo che si adattassero al contenuto.

Leggi tutto

Javascript: jQuery adesso più veloce del 800%

Pubblicato da

jquery.jpg

La versione 1.1.3 della nota libreria javascript jQuery incrementa la sua rapidità nell’elaborazione delle istruzioni del 800%.
Effettivamente era uno dei punti deboli del framework che comunque era ed è molto utilizzato in molte applicazioni web.
Qui di seguito due tabelle di comparazione tra la nuova e la vecchia versione

tabella_1.jpg
e tra jQuery e gli altri (più famosi) framework.

tabella_2.jpg

Link: jQuery 1.1.3

Javascript: evidenziare i link esterni

Pubblicato da

Ecco uno script semplice e utile per segnalare ai visitatori di un sito se un link è esterno o interno al sito stesso.
Lo script infatti aggiunge automaticamente questo simbolo (tasto destro per scaricare questa immagine).
Altra funzionalità è quella che permette di aprire sempre in ‘_blank’ i link esterni senza dover aggiungere il target nel codice.

Leggi tutto

Javascript: troncare testo senza spezzare la parola

Pubblicato da

Spesso nelle pagine che contengono testo come risultato di una query o che devono avere una formattazione particolare, dobbiamo avere un controllo sulla quantità di testo che deve essere presente in un paragrafo.
Viene in aiuto questo semplice javascript che tronca il testo senza spezzare la parola.
Qui è possibile vedere un esempio del risultato finale.
Di seguito il codice javascript

[html]/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Patrick Fitzgerald | http://www.barelyfitz.com/ */
function truncate() {
var len = 100;
var p = document.getElementById(‘truncateMe’);
if (p) {
var trunc = p.innerHTML;
if (trunc.length > len) {
/* Truncate the content of the P, then go back to the end of the
previous word to ensure that we don’t truncate in the middle of
a word */
trunc = trunc.substring(0, len);
trunc = trunc.replace(/\w+$/, ”);
/* Add an ellipses to the end and make it a link that expands
the paragraph back to its original size */
trunc += ‘
‘onclick=”this.parentNode.innerHTML=’ +
‘unescape(\”+escape(p.innerHTML)+’\’);return false;”>’ +
[ more … ]<\/a>’;
p.innerHTML = trunc;
}
}
}
// Multiple onload function created by: Simon Willison
// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != ‘function’) {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
truncate();
});[/html]

[via Javascript Source]

PGF, un framework per la grafica vettoriale

Pubblicato da

I framework (javascript, php, ruby ecc.) impazzano tra gli sviluppatori. L’inventore di  Prototype ha reso disponibile un framework che, attraverso javascript, permette il disegno di forme vettoriali.
Per adesso è possibile creare rettangoli, ellissi, cerchi e poligoni.
Le forme sono renderizzate in SVG (Firefox, WebKit, Opera), VML (IE) o canvas (Firefox, Safari, WebKit, Opera).
La libreria è ai primi stadi di sviluppo ma il risultato è già di assoluto rilievo.

Link: Prototype Graphic Framework