Ciao a tutti nuovamente!
Come sempre, se non riesco a trovare nulla sul web o in questo forum, chiedo aiuto a voi
Ho una pagina html come questa:
Quindi nulla di arcano per il momento.Codice PHP:<body>
<div id="container">
<div id="header"></div>
<div id="status-bar"></div>
<div id="content">
<h1>Login:</h1>
<form action="">
<table cellpadding="4" cellspacing="0" border="0" align="center">
<tr>
<td >Username: </td>
<td><input name="txt-username" type="text" width="20"></td>
</tr>
<tr>
<td>Password: </td>
<td><input name="txt-password" type="text" width="20"></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" align="center" style="margin-top:20px;">
<tr>
<td>[img]pics/submit_button.jpg[/img]</td>
</tr>
</table>
</form>
</div>
</div>
</body>
Quando clicco sul pulsante "invia", che è un'immagine, voglio che il container si allarghi, tolga il form che ho inserito e inserisca due div: uno che deve stare al lato sinistro come un menu, e uno che deve stare a destra come un contenitore.
Il problema è che non riesco ad impostare altezza e larghezza dei due div che creo (se li creo nel modo corretto), inoltre non capisco come inserirli correttamente nel contenitore.
Metto il codice .js qui sotto:
Codice PHP:window.addEvent('domready', function(){
var containerAnimation = 0;
var container = $("container");
var header = $("header");
var statusBar = $("status-bar");
var content = $("content");
var submitButton = $("submit-button");
submitButton.addEvent("click", function(event){
if(containerAnimation == 0){
containerAnimation = 1;
var fxContainer = new Fx.Tween(container, {wait: false, duration: 500}); //transition: Fx.Transitions.Bounce.easeOut
var fxHeader = new Fx.Tween(header, {wait: false, duration: 500});
var fxStatusBar = new Fx.Tween(statusBar, {wait: false, duration: 500});
var fxContent = new Fx.Tween(content, {wait: false, duration: 500});
var previous = 600;
var next = 850;
fxContainer.start('width',previous, next);
fxHeader.start('width',previous, next);
fxStatusBar.start('width',previous, next);
fxContent.start('width',previous - 60, next - 60);
/*
* I problemi di creazione e inserimento dei div cominciano da qui
*/
content.erase('html');
content.setStyle('float','left');
var menu = new Element('div',{'id':'menu'});
menu.set({
'styles': {
'padding':'0',
'margin-top':'5',
'margin-left':'5',
'margin-right':'5',
'margin-bottom':'5',
'height':'305',
'width':'200',
'border':'1px solid #CCC'
},
'id':'menu'
});
var adminContent = new Element('div',{'id':'admin-content'});
adminContent.set({
'styles': {
'padding':'0',
'margin-top':'5',
'margin-left':'5',
'margin-right':'5',
'margin-bottom':'5',
'height':'305',
'width':'190',
'background-color':'#591818'
},
'id':'admin-content'
});
menu.inject(content);
adminContent.inject(content);
}//if
});//click event
});
Rispondi quotando