Archive for the ‘javascript’ Category

26
lug

CKEditor: configurare le barre degli strumenti

1 CommentAjax, HTML, javascriptluglio 26th, 2010dinox

Sempre l’interno del progetto CRM ho avuto la necessità di utilizzare un editor più complesso del semplice campo form nel quale scrivere una descrizione del ticket. Dopo varie prove ho scelto CKEditor, un prodotto davvero molto potente che, proprio per questo, necessita spesso di essere configurato un minimo. Dopo averlo scaricato ed integrato nel sistema (operazione davvero molto semplice) è possibile modificarlo in base alle proprie necessità agendo sul file “config.js” disponibile nella cartella principale.

In particolare io ho dovuto limitare il numero di funzioni presenti sulle barre degli strumenti (molti non mi servivano ed occupavano spazio inutilmente). Per farlo potete mettere nel file config.js all’interno della già presente funzione “CKEDITOR.editorConfig = function( config ) {“ tutto ciò che segue:

// This is actually the default value.
config.toolbar_Full =
[
    ['Source','-','Save','NewPage','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
    '/',
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
    '/',
    ['Styles','Format','Font','FontSize'],
    ['TextColor','BGColor'],
    ['Maximize', 'ShowBlocks','-','About']
];

Lo slash (‘/’) indica un “a capo” fra le barre, il trattino (‘-’) indica una spaziatura fra le barre. I nomi credo non serva commentarli. Eliminate, spostate o aggiungete, dunque, tutto quello che volete in base alle vostre specifiche esigenze.

,

30
giu

Popup in primo piano con finestra modale. Solo se…

1 CommentHTML, javascriptgiugno 30th, 2009dinox

I se sono relativi alla tipologia di interazione che volete avere con la finestra modale. Chiunque abbia mai avuto a che fare con i popup sa benissimo che essi possono portare qualche problema, tutto sommato risolvibile. Una cosa che risulta impossibile da fare, se non con qualche particolare accorgimento, è metterli in “primo piano” in modo da impedire all’utente di cliccare sulla pagina sottostante senza aver prima chiuso il browser. Lo stesso comportamento, insomma, di una finestra modale di Windows.

Quella delle finestre modali è una possibilità è utilizzabile, usando i browser di ultima generazione quali Firefox 3, Explorer 7 o 8, Safari 4 ma ci sono alcune controindicazioni. A tutti gli effetti con i browser “non Microsoft” tutto funzionerebbe in maniera regolare, come se si avesse a che fare con un normale popup ma messo in primo piano. Con IE, invece, se il popup contiene una form, una volta schiacciato il tasto “Invia” si aprirà una nuova finestra. Oppure se avete nel popup avete una funzione che richiama la pagina che lo ha aperto (parent) ad esempio per fare un refresh questa non funzionerà. Non so se ci sono altri problemi ma per me questi sono stati sufficienti a farmi abbandonare l’idea.

Se invece non avete problemi di gestione simili potreste utilizzare un codice simile al seguente. Nella parte <head> pagina dove dovete chiamare il popup:

function openModalWindows() {
if (window.showModalDialog) {
window.showModalDialog("popup.html","nome","dialogWidth:200px;dialogHeight:300px");
} else {
window.open("popup.html","nome","width=200,height=300,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,modal=yes');
}
}

Il link presente nella sezione <body> dal quale volete chiamare la funzione per aprire il popup dovrebbe essere del tipo:

<a href="popup.html" target="nome" onclick="openModalWindows(); return false;">Apri popup modale</a>

, , ,

12
giu

Come far convivere jQuery e Prototype

No commentsAjax, HTML, javascriptgiugno 12th, 2009admin

Chiunque abbia mai provato ad utilizzare nella stessa pagina le due librerie javascript jQuery e Prototype sa bene che esse non riescono a coesistere se non con qualche piccola modifica. Il problema sta nel fatto che entrambe utilizzano la funzione di default “$”. Ecco allora come fare:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
JQ = jQuery.noConflict();
</script>
<script src="prototype.js" type="text/javascript"></script>

Come vedete sarà sufficiente includere le due librerie nell’ordine suddetto e chiamare la funzione jQuery.noConflict() assegnandola alla variabile JQ. Le altre modifiche da effettuare all’interno della pagina che utilizza le funzioni di jQuery sono nella sostituzione della chiamata “$” con la chiamata “JQ”.

, , ,

21
mag

Chiudere un popup e ricaricare la pagina che lo ha aperto

No commentsHTML, javascriptmaggio 21st, 2009dinox

Quando si lavora con i popup si può avere la necessità di chiuderlo e contemporaneamente ricaricare la pagina che lo ha aperto a seguito, ad esempio, del click su un link. In Javascript questa operazione è davvero semplice. Create una funzione come quella che segue all’interno del tag <head> della pagina HTML:

<script language="JavaScript" type="text/javascript">
<!--
function closeAndLoad (page) {
opener.location.href = page;
close();
}
// -->
</script>
More »

, ,

08
mag

Integrare facilmente Google Maps in una pagina web

7 CommentsHTML, javascriptmaggio 8th, 2009dinox

Google Maps è un’applicazione web davvero molto potente che può essere utilizzata per gli usi più disparati. Se avete bisogno di fare delle cose molto particolari, allora è bene che scarichiate le API utilizzando direttamente il vostro account Google. Non sempre, però, è necessario scendere così nel dettaglio: se avete a disposizione solo i dati relativi ad un certo indirizzo potreste utilizzarli per creare la vostra mappa interattiva.

Questo il codice per creare facilmente un iframe HTML con la mappa:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=it&amp;geocode=&amp;q=Via+Mulino+del+Gioco,+65013+Citt%C3%A0+Sant'Angelo+PE,+Italy&amp;sll=&amp;sspn=&amp;ie=UTF8&amp;ll=&amp;spn=&amp;z=14&amp;iwloc=addr&amp;output=embed"></iframe>

Di seguito il significato dei parametri che permettono di personalizzare la mappa:
More »

,

07
mag

Barra di avanzamento con layer trasparente

No commentsHTML, javascriptmaggio 7th, 2009dinox

CSS, Javascript e HTML per un effetto molto interessante

Quando volete creare un layer trasparente che vada a coprire la pagina web sottostante per evitare, ad esempio, che l’utente clicchi due volte un tasto submit o altri tasti presenti nella pagina dopo che ha già compiuto una determinata azione, potete seguire questi consigli. Lo stesso codice farà anche apparire una barra di caricamento che aiuta a dissipare le ansie di chi è davanti al monitor e attende una elaborazione lunga.

Creiamo il giusto stile

<style type="text/css">
td.loading { text-align: Center; color: #3B3C8C; font: Bold 11px Verdana; }
td.barra { background-color: #3B3C8C; border: Solid 1px #D4B600; }
#barra { background-color: #F7E86D; }
#percentuale { text-align: Center; color: #3B3C8C; font: Bold 10px Verdana; }
</style>

Definiamo un metodo javascript che si occupi di rendere visibile il layer e gestire la barra di avanzamento

More »

, ,

29
apr

Validare un numero formattato usando una ER

1 CommentJava, javascriptaprile 29th, 2009dinox

Torniamo ancora sull’argomento Validator di Struts. Purtroppo quello dei numeri e delle date è un campo nel quale la validazione trova molti ostacoli a causa delle diverse convenzioni internazionali. Per poter validare un numero come un buon italiano lo scriverebbe occorre dunque ricorrere a qualche stratagemma e di certo le Espressioni Regolari possono venirci incontro. Per essere più precisi vogliamo validare un qualunque numero nella forma nnn.nnn.nnn,nn come ad esempio 1.230,54. Possiamo dunque usare una espressione regolare come questa:

^[0-9]*[.,]?[0-9]+$

…ed integrarla nel file validation.xml di Struts in questo modo:

<field depends="mask" indexedListProperty="rows" property="speseViaggio">
<arg0 key="label.speseViaggio"/>
<var><var-name>mask</var-name><var-value>^[0-9]*[.,]?[0-9]+$</var-value></var>
</field>

, , ,

28
apr

JS: trasformare una stringa in numero decimale

No commentsjavascriptaprile 28th, 2009dinox

Oggi mi è capitato di dover recuperare il valore di un campo di una form nel quale è scritto un valore numerico decimale ma usando la virgola come separatore dei decimali (ad esempio 13,6). Dovendo fare dei conti in Javascript su tale valore è stato necessario convertirlo in un numero floating point. Ecco dunque una riga di codice per farlo:

var s = "13,6";
var sFloat = parseFloat(s.replace(/\,/,"."));

,