Edtor CSS con Jquery

orazio

Edtor CSS con Jquery

Salve,
sto imparando ad applicare Jquery e sto provando a costruire un web editor di CSS, come templatr.cc oppure lo stesso Theme Roller delle Jquery-UI (ovviamente con un'aspettativa diversa).

Potete vedere (e scaricare) il progetto su:

tt4fn.netsons.org/fonte

Ora, l'editor funziona così, con il tasto "Show" si mostrano le varie porzioni del css evidenziate da fascette bianche, le fascette sono orizzontali oppure verticali, come potete vedere non riesco a far si che le fascette verticali siano della stessa altezza del blocco (#id) che vanno ad evidenziare.

Il codice incriminato nel JS che non funziona è:


       $("div").attr("id", function () {
          return $(this).attr("id");
        })
        .each(function () {

        var sph = $(this).height();
        var spw = $(this).width();

        $("span.dividv").css({position:'absolute', display: 'block' , zIndex:'10'});
        
//Doesn't work, seems that 'sph' and 'spw' are not valid for CSS properties
        //$("span.dividv").height(sph);
        //$("span.divid").width(spw);
//end
//so I need to use a percentage, doesn't render as I want
        $("span.dividv").css({height:'25%'});


        $("span.hid", this).html('<a title="click on white bar to edit ' + this.id + '" class="group"><img src="images/star.png" alt="' + this.id +'" /></a>');
        });

```Se passo la variabile 'sph' alla stringa html il valore viene visualizzato, ma se la passo alla funzione height() per impostarla nel CSS il valore non viene preso.


Qualcuno sa come aiutarmi?

Alfredo

mirkoagrati

Ciao orazio,
prova ad aggiungere alla variabile la stringa 'px'.

Es:
var height = variabile + 'px';

Ciao

orazio

Grazie,
ho provato ma non funziona.

tra l'altro leggendo il manuale di jquery alla funct height() :

If no explicit unit was specified (like 'em' or '%') then "px" is concatenated to the value.

La cosa che non capisco è perchè se passo il valore di 'sph' nella stringa in html esso viene stampato, basta modificare questa stringa così:

$("span.hid", this).html('<a title="click on white bar to edit ' + this.id + '" class="group"><img src="images/star.png" alt="' + this.id +'" />'+sph+'</a>');
        });

NB 'sph' nel tag del link.

Mentre se la passo come parametro per height ... il nulla