Archivio: 2007 May
News Scroller
Ecco un piccolo esempio in cui si applicano le proprietà presentate in Scroll boxes. Si tratta di una possibile visualizzazione di news a scorrimento automatico in un blocco DIV. Niente di innovativo e tanto meno completo, ma può considerarsi uno buono spunto per esercitarsi con javascript, css e xhtml ( AJAX usando una sigla audace ).
Primo step, HTML formato da un contenitore generale un wrapper che servira' come contenitore delle news e quindi le singole news:
HTML:
Secondo step,CSS che nasconde l'overflow delle news:
CSS:
-
#container{
-
margin: 20px;
-
width: 200px;
-
height: 200px;
-
/*Nasconde la parte in eccesso*/
-
overflow: hidden;
-
border: 1px solid #000
-
}
-
-
div.news{
-
padding: 10px;
-
}
Ultimo step, Javascript per dare moto al tutto:
JavaScript:
-
//dichiarazione variabili globali
-
var time;
-
var scroll_limit;
-
-
//Alcune impostazioni fondamentali pre caricamento pagina
-
function init(){
-
var container = document.getElementById("container");
-
var wrapper = document.getElementById("wrapper");
-
var client_height = container.offsetHeight;
-
var news_nodelist = wrapper.getElementsByTagName("DIV");
-
-
/**
-
* Lo scroller deve resettarsi quando gli attuali
-
* elementi news sono stati tutti scorsi.
-
**/
-
scroll_limit = wrapper.offsetHeight;
-
var i = 0;
-
var current_element = news_nodelist[i];
-
-
/**
-
* Si duplicano i nodi in modo da creare l'illusione
-
* dello scorrimento continuo. Si assume che ci siano
-
* abbastanza nodi (news) da duplicare.
-
**/
-
while(client_height>= 0){
-
var current_element = news_nodelist[i];
-
client_height = client_height - current_element.scrollHeight;
-
wrapper.appendChild(current_element.cloneNode(true));
-
i = i + 1;
-
}
-
scroll("wrapper");
-
}
-
function scroll(element_id){
-
var wrapper = document.getElementById(element_id);
-
var container = wrapper.parentNode;
-
var scroll_top = container.scrollTop;
-
if( scroll_top + 1 <scroll_limit ){
-
container.scrollTop = container.scrollTop + 1;
-
}else{
-
container.scrollTop = 0;
-
}
-
// Si richiama la funzione tra 25 millisecondi
-
time = setTimeout('scroll(\'wrapper\')', 25);
-
}
-
-
function stopScroll()
-
{
-
if (time) clearTimeout(time);
-
}
Ovviamente la funzione init() deve essere richiamata al termine del caricamento della pagina HTML, ora sta a voi raffinare questo rozzo esempio di News Scroller.
Testato su:
Firefox 2.0.0.3 (Linux)
Mozilla 1.7.13 (Linux)
Epiphany 2.16.1 (Linux)
Galeon 2.0.2 (Linux)
IE 6.0 (Linux)
Velvet Box: logo design
Velvet Box is a collective that gathers international artists of all disciplines and professionals of the communication field.
Together, its members are story-tellers of their time.
Their mission is to conceive and set up global artistic pop up shows upon a given theme.
Once a show starts its tour, its form is meant to grow, going through changes, according to the various collaborations, opportunities and difficulties that appear on its journey.
One show is therefore to be considered as a real being, a living creature whom identity gets richer and richer all along its evolution path.
For we believe who we are is what we do, this very identity is in fact Velvet Box's, a unity of diversities.
It is thus Velvet Box's raison d'ètre to remain both pro-active ( by hunting talentuous people when on spot and elsewhere) and reactive ( by considering ideas brought from outsiders with a constant open-mindness).
“Truly, no thing in this world has kept my thoughts thus busy, as this my very own self, this mystery of me being alive, of me being one and being separated and isolated from all others, of me being!”
To start with its activity, we, Velvet Box, decided to pick up as a basis a chapter of Herman Hesse's initiatic novel, Siddhartha.
It seemed to us that “The Awakening” refers to that sort of key moments that constitute lifetime stages, when one deeply and consciously feels one's singular individuality.
From this self-awareness derive very often a large range of questions that relate to the essence of our existence. One intends to find temporary answers to those questions.
This is precisely what we are doing with our show: we picture out into space a collective reply that is submit to changes.
In other words, not only we sensed that this Awakening theme could enable every artist to express freely within a collective global artwork, but we assumed that this very artwork, our show, would also resonnate, reaching our public to their minds and into their souls.
We would love it to be an awakening experience for everyone that comes to us.
We consider the diversity of modes of expression a reflection of our humanity.
Hence our ultimate objective and primary desire to allow every artistic discipline to express its elements of reply in our space.
Vertical Centering in CSS with Unknown Height (ie7 compatible)
This article of jakpsatweb about vertical alignment is really the only solution I found out about this issue.
I take the Structural solution without Hack as reference, most of all becouse when an hack is not strictly neccesary it's better to avoid it.
Yuhu's code is great.
HTML:
CSS:
-
#outer {
-
height: 400px;
-
overflow: hidden;
-
position: relative;
-
}
-
-
#outer[id] {
-
display: table;
-
position: static;
-
}
-
-
#middle {
-
position: absolute;
-
top: 50%;
-
} /* for explorer only*/
-
-
#middle[id] {
-
display: table-cell;
-
vertical-align: middle;
-
position: static;
-
}
-
-
#inner {
-
position: relative;
-
top: -50%
-
} /* for explorer only */
-
-
/* optional: #inner[id] {position: static;} */
but it's not working on ie7, that catches [id] selectors but behaves as ie6.
so what?
according to css selectors we should write those css line more
CSS:
-
*:first-child+html #outer[id] {
-
position:relative
-
} /* for explorer 7 only */
-
-
*:first-child+html #middle[id] {
-
position: absolute;
-
display:block;
-
vertical-align:inherit;
-
top: 50%;
-
} /* for explorer 7 only */
-
-
/* optional: *:first-child+html #inner[id] {position: relative;} */
have fun :)
Web Accessibility Toolbar, ovvero la barra dell’accessibilità del web
Quello di rendere il più possibile accessibile un applicativo web è una delle maggiori problematiche legate alla struttura stessa e concettuale del sito.
Ho di recente provato questa toolbar (Web Accessibility Toolbar - qui alcune informazioni in italiano) ed il risultato è davvero ottimo... se vi interessa l'argomento, dovete assolutamente scaricarlo...
The Web Accessibility Toolbar has been developed to aid manual examination of web pages for a variety of aspects of accessibility. It consists of a range of functions that:
- identify components of a web page
- facilitate the use of 3rd party online applications
- simulate user experiences
- provide links to references and additional resources
We value all feedback received. Please contact us about any functionality that may not work or other suggestions for improvement.
il peso sullo stomaco
Essere uno sviluppatore a volte significa scendere a compromessi.
Sviluppare codice ha delle regole (scritte e no) per cui il codice dev'essere pulito, commentato e soprattutto valido.
Ciò tra l'altro è fondamentale nella programmazione altrimenti il programma semplicemente non va (o crea dei grossi problemi di utilizzo di memoria).
In ambito xhtml, css spesso il discorso è diverso.
Soprattutto per il valore percepito del lavoro svolto.
Sostanzialmente, spesso, lo scopo di chi vuole il sito è che si veda bene.
Ovviamente qualunque sviluppatore con un minimo di etica professionale vorrebbe proporre codice pulito, se possibile validato, non ridondante e senza hack non necessari. giusto?
Il problema è che mille volte, per richieste assurde del grafico su layout impossibili (posto che col dovuto tempo a disposizione non esistono layout impossibili) o del marketing (tempo? quali tempo? non è ancora pronto???) ci si trova a dover fare salti mortali e trovare soluzioni non esattamente ortodosse.
Un altro problema grosso per gli sviluppatori non designer è che il lavoro è spesso legato alla bellezza del layout.
Quanti hanno lavorato su layout orribili?
Quanti siti avete fatto senza metterli in curriculum perchè onestamente inguardabili, sebbene il codice fatto fosse all'altezza?
è vero che è meglio fare il piadinaro?
cazzo!!
com'è arrivare al lavoro dopo il ponte e accorgersi che per un problema al database di sourcesafe (software di gestione di progetti e versione dei file) hai perso praticamente il lavoro di un mese e la consegna è tra meno di 10 giorni??
dio benedica il backup giornaliero dei file e i sistemisti che ne fanno uso!!!
per fortuna infatti sembra che perderò solo la mezza giornata che ci vuole a capire che file recuperare ;-)
