Domanda su JS

**poeme** · 02-03-2004, 10:42

Ciao a tutti;

sono nuova dei dintorni: stò progettando un mio sito e sono "molto principiante" sul linguaggio JS; spero possiate aiutarmi.
Ho un problema: devo aprire un pop up con sfondo trasparente e ho trovato uno script in rete che mi risolverebbe il problema; mi sono fermata perchè ho bisogno che la pop up sia associata ad un CSS esterno e non capisco se JS possa supportare un CSS in maniera che la pop up mantenga una formattazione particolare; in sostanza vorrei creare un template: in questo caso tutte le eventuali pop up verrebbero formattate tutte alla stessa maniera ed i campi verrebbero popolati da un database tutti alla stessa maniera.
Vi ringrazio per l'aiuto e chiedo scusa in anticipo per gli eventuali strafalcioni: la materia per me è ancora complessa.

Buona giornata a tutti del forum
Poeme

**poeme** · 02-03-2004, 12:42

Uhmm forse la mia richiesta non era chiara; vediamo di mettere nero su bianco :bubu:

il codice l' ho gentilmente prelevato e non è minimamente farina del mio sacco! (magari)

Io ho nominato la pagina html di richiamo:

trasparente.html
mentre il js: trasp2.js

1) trasparente.html ha il seguente codice

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>script</title>

<SCRIPT language="JavaScript" SRC="trasp2.js"></SCRIPT>
</head>
<body>
<div align="center">
<table width="50%" border="0" bgcolor="white" height="200">
<tr>
<td valign="top">
<p align="center">Popup completamente trasparente</p>
<p align="center">Prova Popup</p>

</td>
</tr>
</table>
</div>
<div ID="maildiv" style="visibility:hidden;position:absolute; left: 40px; width: 104px; height: 19px; top: 12px" align="center"></div>
</body>
</html>

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

2) trasp2.js invece:

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

var closebutton = "close.gif"; //percorso del bottone di chiusura

var raampje, xtra, ytra;
function sleepen(){if (event.button!=1)return;
raampje = eval("maildiv");temp1=raampje.style.posLeft;
temp2=raampje.style.posTop;xpos=event.clientX;
ypos=event.clientY;xtra = temp1-xpos;
ytra = temp2-ypos;document.onmousemove=plaats;}
function plaats(){if (event.button==1){
raampje.style.pixelLeft=event.clientX+xtra;
raampje.style.pixelTop=event.clientY+ytra;return false;}}

function raam(inside, color){
titlecolor = "red";
opacitytitle = 45;
var thisspan = eval("maildiv.style")
thisspan.pixelLeft = document.body.scrollLeft + 100;
thisspan.pixelTop = document.body.scrollTop + 100;
thisspan.visibility="visible";
output = "<table cellpadding=0 cellspacing=0 width=450 height=100 border=1 bordercolor=000000><tr>";
output += "<td onmousedown='sleepen()' style='cursor:hand' onmouseup='JavaScript:document.onmousemove=\"\" ' bgcolor='"+titlecolor+"' style='filter:alpha(opacity="+opacitytitle+");'></td></tr>";
output += "<tr><td width=100%><table>";
output += " <font face=Verdana size=2><font size=3 color=0000FF>example</font>
Pop-up dallo sfondo completamente trasparente: è personalizzabile nei colori, nelle dimensioni ecc.Si possono inserire link, <font face=Times New Roman size=3>cambiare font</font>, formattare varie parti del testo, <font color=FF0000>modificare i colori</font>, aumentare o diminuire il grado di trasparenza, inserire immagini <img src=tongue.gif>.</font>

<div align=center><input type='image' alt=\"Chiudi questa finestra\" onclick='closeraam()' src='"+closebutton+"'></div></table></td></tr>";
maildiv.innerHTML = output;
}function closeraam(){maildiv.style.visibility="hidden";}

function popup()
{
outp = "";
outp += "<div align=center><input type='image' alt=\"Chiudi questa finestra\" onclick='closeraam()' src='"+closebutton+"'></div>";
raam(outp, "");
}

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

Ora: il problema è che io vorrei che la pop up trasparente possa essere generata e associata ad un CSS ma non so come sistemare il codice.

Qualcuno ha dritte da passami, per gentilezza:
io ringrazio in anticipo.

Salutoni
Poeme

**Mich_** · 02-03-2004, 13:11

Non ho letto tutto, ma ci sono alcune cose che non mi quadrano.

1. non credo che si possa fare un popup con sfondo trasparente. Forse vuoi un <div> con sfondo trasparente, ma questo e` un probelma diverso.

2. Il CSS e` associato ad una pagina, non ad un JS: quindi se hai una pagina, puoi linkare il CSS, indipendentemente da come generi la pagina. Se invece vuoi un CSS, questo deve essere nella pagina (o linkato dalla) pagina principale: dal <div> puoi naturalmente usarne le classi e le varie definizioni.

Ciao
Michele

**poeme** · 02-03-2004, 13:27

Grazie Mitch per la risposta:

io ho due casi:

CASO A al link http://www.miataproject.com/sitompfl...rasparente.htm

che in pratica è costruito sul codice che ho postato.
Da quello che ho capito, questa soluzione (e perdonami l'ignoranza) non è una pop up.

CASO B B al link
http://www.miataproject.com/sitompfl...mppt_open.html

che è una pop up chromeless.

Ora io dovrei combinare le due cose: mi servirebbe la finestra del caso A (cioè bella trasparente) però con il layout del caso B (cioè con i suoi bei campi generati da un CSS esterno e che io popolerò prelevando dati da db).

La domanda è: è possibile ottenere lo sfondo del CASO A applicato al CASO B? Se si come?
E' ovvio che i casi sopra descritti sono ampiamente uunder construction.

In caso positivo io otterrei una bella finestra che mi permetterebbe di combinarsi egregiamente con il Layout grafico della homepage in flash disegnata dal mio sagace e potentissimo flashato che di nick fà bittio (designer del mio sito).(che se becco qui sul forum lo fulmino anche se è già flashato).

Grazie infinite per l'aiuto.

Ciao
Poeme

**Mich_** · 02-03-2004, 13:38

Non credo che puoi combinare le due cose.

Una popup e` una finestra indipendente nel SO, mentre un <div> e` una sezione di una pagina.

La finestra non puo` avere sfondo trasparente.

PS: tieni presente che le chromless sono una cosa che funzina solo in IE.

Comunque puoi definire altri <div> all'interno di un <div>, e se hai deifnito le classi corrispondenti, questi prenderanno le caratteristiche volute.

PS2. il div trasparente io (Mozilla 1.4) non lo vedo.

**poeme** · 02-03-2004, 13:43

Grazie ancora Mitch:

quanto mi dici affonda bellamente il mio progetto

dovrò cercare strade alternative.
SOB

Se capisco bene il problema è che la compatibilità tra browser mi forza a seguire la strada della popup e non quella del JS.

Peccato: spero di non dover rovinare tutto.

Grazie Mitch .. a presto con altri domandoni.

Ciao a tutti
Poeme

**Mich_** · 02-03-2004, 15:34

la compatibilità tra browser mi forza a seguire la strada della popup e non quella del JS.

In realta` le cose non stanno cosi`.
JS e popup non sono alternative o contrapposte. Sono due tecnologie diverse.
Una popup si puo` lanciare tramite JS e dentro una popup ci puo` stare del codice JS.

Eventualmente la alternativa e` tra popup e <div> con posizionamento assoluto, oppure con iframe.

Tieni presente che le popup diverranno deprecate con le prossime versioni dei browser, come pure lo diverranno i frame (e credo anche gli iframe), per cui la soluzione con i <div> e` quella maggiormente consigliabile.

Ciao
Michele

**poeme** · 02-03-2004, 15:46

Ciao Mitch,

Ho capito!

Mi indicheresti un tutorial per imparare ad usare correttamente i div nel mio caso?
essenzialmente io vorrei costruire una finestra indipendente come quella del caso B, che abbia campi ben definiti e grafica uniforme.
Utilizzi un file CSS esterno e che abbia i campi popolabili da db.

Che ne pensi?
Quali sono i tuoi consigli? Strade corrette da seguire?

Perdona la mia ignoranza

(

e Dio disse "perdona tutti coloro che non sanno quello che fanno"

io fanno ma non sanno :gren:

)

**Mich_** · 02-03-2004, 15:58

I div sono elementi di HTML, e non c'e` da dire molto.

Un tutorial sui CSS lo trovi in HTML.it, poi trovi vari riferimenti nel forum XML, XHTML, ... (vedi tra i link utili).

Un <div> che prenda dati da un database non puo' esistere: devi ricaricare la pagina (devi farlo nel linguaggio supportato dal server)

Ciao
Michele

Discussione: Domanda su JS

Strumenti discussione

Ricerca discussione

Visualizza

Domanda su JS

Permessi di invio