jQuery, staccare un div e ingrandirlo

[Bukowski]

Ciao a tutti, questi giorni vi sto rompendo un pò le scatole
ma mi sto appassionando ad ajax e più scopri cose e più ti vengono in mente idee!!!

Vorrei in realtà fare una cosa abbastanza semplice, che ricalca il modello lightbox, ma che non ho trovato in giro fatto nativamente solo in jquery.

Mi spiego.

Presupponiamo di stare su Youtube a vedere un filmato, vorrei creare un pulsante che di fatto faccia ingrandire il div (in cui è contenuto il filmato che sarà width e height 100%) e staccarlo dallo sfondo fino ad una grandezza pari al 90% del monitor (tipo proprio lightbox).

Ho ovviamente trovato diverse cose simili, ma il problema è che le soluzioni che ho trovato fanno ricaricare il filmato perchè difatto ricreano il contenuto all'interno del div, invece ho bisogno che questo div si "stacchi" dal layout, e che poi si possa "riattaccare".

Ho provato a giocare con resizable() e draggable() nella UI ma con poche soddisfazioni.

Che strada pensate debba prendere?
In giro ho trovato tutte soluzioni che richiamano un contenuto ex novo.

Grazie!

[Bukowski]

Aggiorno la situazione

Allora, alla fine ci sono riuscito a metà grazie ad animate() e il toggle().

Lo sto testando con un giochetto in flash e il risultato non è malaccio, solo che ho un problema con la trasformazione del div, che da una posizione relativa, dovrei portarla ad assoluta al centro della pagina.

Per ora sto cosi:

<style type="text/css">
#game { width: 600px; height: 500px; padding: 0.4em; position:relative; background: #fff; z-index:999; }
</style>

$(function() {
$("#button").toggle(
function() {
$("#game").animate({width: 1300, height:700}, 500);
},
function() {
$("#game").animate({width: 600, height:500}, 500);
}
);
});

<div id="layout" style="width:800px;">

<div id="game">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100%" height="100%" align="middle">
<param name="movie" value="http://www.flashgames.it/abilita/short.memory.term/game.swf" />
<param name="quality" value="high" />
<embed src="http://www.flashgames.it/abilita/short.memory.term/game.swf" quality="high" width="100%" height="100%" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>

</div> 

Considerando che il layout è centrale (come questo forum) il mio div parte dal centro e si espande a destra.
Invece dovrei riuscire a farlo espandere al centro della pagina al di fuori del div contenitore, z-indexato, con posizione assoluta basandomi sulla risoluzione dell'utente .... in pratica come fa il lightbox!

Che mi invento??

[Xinod]

in $('#game').offset().top e .left hai la posizione di game a partire da coordinate 0,0 del documento
in $(window).width() e .height() le dimensioni della viewport, .scrollTop() e .scrollLeft() il numero di pixel scrollati

fa i tuoi calcoli

[Bukowski]

ciao xinod,
scusami ma non sono ancora così ferrato in ajax.

A dir la verità, della tua risposta ho capito la parola "posizione" e "a partire da"
...

è grave?



Scherzi a parte, perdonami ma non ho capito dove e come dovrei usare scrollTop ecc ecc

Update: non mi conviene lavorare in percentuali per le dimensioni e posizioni del div?

[Bukowski]

Ho trovato questa funzione:

	jQuery.fn.center = function () { 
    this.css("position","absolute"); 
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px"); 
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px"); 
    return this; 
}

ma applicata al mio script non va

$(function() {
		$("#button").toggle(
			function() {
				$("#game").animate({width: 1300, height:700}, 500);
				// $('#game').attr('style', 'position:absolute; background-color:yellow; left:50%; margin-left:0px;');
				$("#game").center();
				
			},
			function() {
				$("#game").animate({width: <?php echo $row_gioco['larghezza']; ?>, height:<?php echo $row_gioco['altezza']; ?>}, 500);
			}
		);
	});