laboratorio caffeina

in few words, just developing

 

Tag: css

 
 

Remove whitespace from wordpress tagcloud

I hate whitespace in html code: if I need them I'll use css rules.

so that's a simple plugin edited from this one.
if you need both merge them

PLAIN TEXT
PHP:
  1. <?php
  2. /*
  3. Plugin Name: Tag Cloud noWhitespace
  4. Plugin URI: http://www.laboratoriocaffeina.it/design/2008/04/03/remove-whitespace-from-wordpress-tagcloud.html
  5. Description: Makes wordpress dump out a tag cloud without whitespace between each word in tags (edit from http://www.185vfx.com/2007/10/wordpress-tag-cloud-formatting/)
  6. Author: cedmax
  7. Version: 1.0
  8. Author URI:  http://www.dioblog.it
  9. */
  10.  
  11.  
  12. // This just echoes the chosen line, we'll position it later
  13. function tci_kill_breaks($taglist) {
  14.     return str_replace('&nbsp;',' ',$taglist);
  15. }
  16.  
  17. // Now we set that function up to execute when the tag list is generated
  18. add_filter('wp_generate_tag_cloud', 'tci_kill_breaks',50);?>

download, rename to .php, upload to plugin folder and activate

(tested on 2.5)

Condividi

 
 
 

Easy Clear #4, ovvero “e mò basta però”

dopo la terza puntata di easy clear mi sono accorto che non sempre funziona su ie6.

dramma e panico.
non vi preoccupate ho la soluzione:

la 3 prevedeva di mettere nel contenitore dei float il seguente codice

PLAIN TEXT
CSS:
  1. #wrapper {
  2.      overflow:hidden;
  3.      height:1%;
  4.      height:auto !important;
  5. }

se non funziona su ie6 provate questo.

PLAIN TEXT
CSS:
  1. #wrapper {
  2.      overflow:hidden;
  3.      width:100%;
  4. }

any feedback?

Condividi

 
 
 

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:

PLAIN TEXT
HTML:
  2.     <div>
  3.         <div>
  4.             <h3>Title 1</h3>
  5.             <p>Lorem ipsum doler sit amet, consectetur...</p>
  6.         </div>
  7.         <div>
  8.             <h3>Title 2</h3>
  9.             <p>Lorem ipsum doler sit amet, consectetur...</p>
  10.         </div>
  11.         <div>
  12.             <h3>Title 3</h3>
  13.             <p>Lorem ipsum doler sit amet, consectetur...</p>
  14.         </div>
  15.     </div>
  16. </div>

Secondo step,CSS che nasconde l'overflow delle news:

PLAIN TEXT
CSS:
  1. #container{
  2.     margin: 20px;
  3.     width: 200px;
  4.     height: 200px;
  5.     /*Nasconde la parte in eccesso*/
  6.     overflow: hidden;
  7.     border: 1px solid #000
  8. }
  9.  
  10. div.news{
  11.     padding: 10px;
  12. }

Ultimo step, Javascript per dare moto al tutto:

PLAIN TEXT
JavaScript:
  1. //dichiarazione variabili globali
  2. var time;
  3. var scroll_limit;
  4.  
  5. //Alcune impostazioni fondamentali pre caricamento pagina
  6. function init(){
  7.     var container = document.getElementById("container");
  8.     var wrapper = document.getElementById("wrapper");
  9.     var client_height = container.offsetHeight;
  10.     var news_nodelist = wrapper.getElementsByTagName("DIV");
  11.        
  12.     /**
  13.      * Lo scroller deve resettarsi quando gli attuali
  14.      * elementi news sono stati tutti scorsi.
  15.      **/
  16.     scroll_limit = wrapper.offsetHeight;
  17.     var i = 0;
  18.     var current_element = news_nodelist[i];
  19.  
  20.     /**
  21.      * Si duplicano i nodi in modo da creare l'illusione
  22.      * dello scorrimento continuo. Si assume che ci siano
  23.      * abbastanza nodi (news) da duplicare.
  24.      **/
  25.     while(client_height&gt;= 0){
  26.         var current_element = news_nodelist[i];
  27.         client_height = client_height - current_element.scrollHeight;
  28.         wrapper.appendChild(current_element.cloneNode(true));
  29.         i = i + 1;
  30.     }
  31.     scroll("wrapper"); 
  32. }
  33. function scroll(element_id){
  34.     var wrapper = document.getElementById(element_id);
  35.     var container = wrapper.parentNode;
  36.     var scroll_top = container.scrollTop;
  37.     if( scroll_top + 1 &lt;scroll_limit ){
  38.         container.scrollTop = container.scrollTop + 1;
  39.     }else{
  40.         container.scrollTop = 0;
  41.     }
  42.     // Si richiama la funzione tra 25 millisecondi
  43.     time = setTimeout('scroll(\'wrapper\')', 25);
  44. }
  45.  
  46. function stopScroll()
  47. {
  48.     if (time) clearTimeout(time);
  49. }

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)

Condividi

 
 
 

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.

PLAIN TEXT
HTML:
  1. <div id="outer">
  2.   <div id="middle">
  3.     <div id="inner">
  4.       any text
  5.       any height
  6.       any content, for example generated from DB
  7.       everything is vertically centered
  8.     </div>
  9.   </div>
  10. </div>

PLAIN TEXT
CSS:
  1. #outer {
  2.       height: 400px;
  3.       overflow: hidden;
  4.       position: relative;
  5. }
  6.  
  7. #outer[id] {
  8.       display: table;
  9.       position: static;
  10. }
  11.  
  12. #middle {
  13.       position: absolute;
  14.       top: 50%;
  15. } /* for explorer only*/
  16.  
  17. #middle[id] {
  18.       display: table-cell;
  19.       vertical-align: middle;
  20.       position: static;
  21. }
  22.  
  23. #inner {
  24.       position: relative;
  25.       top: -50%
  26. } /* for explorer only */
  27.  
  28. /* 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

PLAIN TEXT
CSS:
  1. *:first-child+html #outer[id] {
  2.     position:relative
  3. } /* for explorer 7 only */
  4.  
  5. *:first-child+html #middle[id] {
  6.     position: absolute;
  7.     display:block;
  8.     vertical-align:inherit;
  9.     top: 50%;
  10. } /* for explorer 7 only */
  11.  
  12. /* optional: *:first-child+html #inner[id] {position: relative;} */

have fun :)

Condividi

 
 
 

How to Create an Image Map Using CSS

Esistono vari modi per mappare un'immagine via CSS (aiutati qualche volta da JS), oggi ve ne segnalo alcuni... poi ognuno deciderà  quale sia il migliore...

CSS Image Maps, Flickr-like Technique?

Tecnica proposta da Frank Manno basata sull'uso degli elementi DL, DT e DD via CSS e XHTML.

[...]a sample image map that's built entirely using CSS and XHTML. While I've added support for Javascript (item titles are simply displayed beneath the image), I've disabled it in this example -- I've run into a bit of a problem when JS is enabled and CSS is disabled (more details below).[...]

CSS Image Maps, Redux

Versione "redux" della precedente, sempre dello stesso autore e sempre CSS con XHTML.

[...]I went back to the drawing board, and came up with another solution that requires a single image, some CSS, and a little creativity! This second example makes use of transparent images (PNG images) to indicate an annotation on an image. Much of the same CSS from the first example was used, with a few minor alterations. Below is a sample of the old vs. [...]

CSS Image Map, by Moryson

Tecnica basata sull'uso delle liste non ordinale (UL) - CSS con XHTML. (sito e spiegazioni solo in tedesco)

Create a reactive zone (image map) with CSS

Tutorial che prende spunto da un vecchio articolo di A List Apart per poi proporre la propria soluzione via CSS e XHTML.

[...]It needs to be converted in block to go around that. There are only two possibilities to do that: display: block on the link (in this case, the image will need to be positionned) or float: left on the link, that will transform it in a block (that's the solution I went with)[...]

A List Apart: Articles: A More Accessible Map

Questa invece è una soluzione che sfrutta anche il JS accompagnato sempre da CSS e XHTML.

As companies like Google and Yahoo! have simplified the process of placing information on a map by offering web services/APIs, the popularity and abundance of mapping applications on the web has increased dramatically. While these maps have had a positive effect on most users, what does it mean for people with accessibility needs?[...]

How to Create an Image Map Using CSS

Tutorial fatto molto bene, con un'interessante soluzione finale, tutto via CSS e XHTML.

Here, you will learn one styling step at a time, fully explaining the reason for each style and showing the results of each step, so that you can see what to expect and implement it for yourself.

CSS: Map Pop

L'ultima soluzione che vi segnalo è davvero valida.

Image maps are cool. So are pop-ups. Here I combine the two into a single “Map Pop” experiment. Combining the two could be very useful to some people. Especially if you want a nicely interactive solution that just happens to be accessible to a vast number of users. In addition to its accessibility, based not on conjecture but on actual testing, this solutions seems to be supported by a large number of user agents, even Internet Explorer 6.x [...]

Ora non vi resta che provare, provare e provare... finchà© non troverete la soluzione che fa al caso vostro... buon lavoro.

Condividi

 
 
 

Easy Clear #3, ovvero di come non si smette mai di imparare

Dopo la soluzione di ieri, impietrito da uno strano effetto proposto randomicamente da ie7 per cui compariva un margin bottom all'elemento esterno in float, sono andato in cerca di metodi alternativi.

Semplice quanto sconvolgente (mai ci avrei pensato): mettere un bel

PLAIN TEXT
CSS:
  1. #wrapper {
  2.      overflow:hidden;
  3.      height:1%;
  4.      height:auto !important;
  5. }

senza float, al contrario di ieri, nè dimensioni fisse
il wrapper a questo punto miracolosamente si prenderà l'altezza giusta.

Ecco l'esempio di pmob

Condividi

 
 
 

Easy Clear #2, ovvero di come non sapere le cose porta a complicarsi la vita

dopo l'articolo di ieri sull'easy clear di Position Everything ecco un metodo molto più semplice proposto da ordered list:

the FNE method

L'unico rischio è se si ha una struttura complessa e con molti elementi in float: potrebbe creare un po' di confusione e instabilità .

vedi anche easy clear #3

Condividi

 
 
 
Chiudi
E-mail It