ridimensionamento div

newbie01

Nuovo Utente
14 Gen 2014
12
0
0
Ciao a tutti, premetto di essere ignorante in questa materia, dunque nel vano tentativo di ridimensionare un div al click dello stesso ho creato questo codice:

Codice:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<script>

if ($('#box').width=='30px') {
	function grande(){
document.getElementById('box').style.width='800px';
}
}

if ($('#box').width=='800px') {
	function grande(){
document.getElementById('box').style.width='30px';
}
}
</script>
</head>

<body>
<div id='box' onClick="grande()"></div>
</body><style>
#box{background:red; width:30px; height:30px;}</style>
</html>

ovviamente non funzionante. Vorrei fare in modo che cliccando sul quadratino rosso questo aumenti la sua lunghezza fino a 800px ( se la lunghezza iniziale è di 30 px), e ricliccandoci sopra tornasse alle dimensioni originali.
Chi può illuminarmi ? :confused::confused:
 

Nefyt

Utente Attivo
17 Apr 2012
1.102
0
0
Non hai bisogno di jquery per fare ciò
Codice:
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Documento senza titolo</title>
    <script>
       document.addEventListener('DOMContentLoaded',function(){
        document.getElementById('box').addEventListener('click',function(){
            var w = this.style.width=='800px'?'30px':'800px';
            this.style.width = w;
        })});
    </script>
</head>

<body>
<div id='box'></div>
</body><style>
    #box{background:red; width:30px; height:30px;}</style>
</html>
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Un pò di attenzione anche alla sintassi HTML : non si scrive niente al di fuori del tag <body>
 

newbie01

Nuovo Utente
14 Gen 2014
12
0
0
Grazie mille, funziona! Sarebbe anche possibile fare in modo che al click comparisse e poi nuovamente scomparisse un messaggio all'interno del quadrato?
 

Nefyt

Utente Attivo
17 Apr 2012
1.102
0
0
Grazie mille, funziona! Sarebbe anche possibile fare in modo che al click comparisse e poi nuovamente scomparisse un messaggio all'interno del quadrato?
Codice:
document.addEventListener('DOMContentLoaded',function(){
 document.getElementById('box').addEventListener('click',function(){
            var w = this.style.width=='800px'?'30px':'800px';
            var m = this.innerHTML.length>0?"":"Messaggio";
            this.style.width = w;
            this.innerHTML = "Messaggio";
        })});
 

newbie01

Nuovo Utente
14 Gen 2014
12
0
0
Ti ringrazio. Inserendo un video sono riuscito a fare in modo che nel momento in cui si allarga, questo parta. Non riesco però a fare si che si fermi tornando piccolo.
Codice:
    <script>

       document.addEventListener('DOMContentLoaded',function(){
		 document.getElementById('box').addEventListener('click',function(){
			 var v = document.getElementsByTagName("video")[0].play?document.getElementsByTagName("video")[0].stop:document.getElementsByTagName("video")[0].play;
			 
			var w = this.style.width=='80%'?'25%':'80%';
			
            this.style.width = w;

        })});
    </script>
ho tentato grossolanamente in questo modo :S
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Div che sballano posizione al ridimensionamento HTML e CSS 2
I Errore nel ridimensionamento di una <table> in un <div> HTML e CSS 5
T Ridimensionamento fieldset HTML e CSS 1
A [PHP] Bloccare ridimensionamento tabella PHP 1
V [HTML] impedire il ridimensionamento delle immagini zoom browser HTML e CSS 11
otto9due Problema ridimensionamento immagini senza salvarle.. PHP 5
L ridimensionamento immagini da cartella PHP 0
M Jquery Mobile e ridimensionamento jQuery 0
R upload immagini multiplo e ridimensionamento PHP 0
felino Virtuemart 1.1.9 - Ridimensionamento automatico immagine prodotto Joomla 0
R upload e ridimensionamento immagini in php PHP 0
R upload e ridimensionamento immagini in php PHP 1
L [PHP] Upload immagini e ridimensionamento automatico PHP 9
P Ridimensionamento dei font al ridimensionamento del browser e/o della risoluz monitor jQuery 0
C Problema ridimensionamento sito. HTML e CSS 6
helpdesk file Upload con ridimensionamento PHP 32
M Ridimensionamento Immagine Alla Pressione di un tasto Javascript 2
G Problema con il ridimensionamento PHP 12
emanuelevt ridimensionamento pagina Javascript 0
neo996sps Problema con tutorial per ridimensionamento immagini PHP 10
A Javascript per il ridimensionamento immagini Javascript 20
I impedire ridimensionamento del browser HTML e CSS 1
M problema ridimensionamento, archiviazione immagini PHP 1
U ridimensionamento documento dreamweaver Webdesign e Grafica 9
U Ridimensionamento documento Webdesign e Grafica 1
M ridimensionamento immagini Flash 1
U Problema ridimensionamento immagini con PHP PHP 1
C A tutto schermo e ridimensionamento schermo Flash 3
C ridimensionamento più immagini Photoshop 5
S Ridimensionamento automatico pagina Webdesign e Grafica 1
R Ridimensionamento immagini Javascript 2
Z ridimensionamento immagini PHP 0
R upload e ridimensionamento immagine non funzionante PHP 0
S Problema di ridimensionamento HTML e CSS 0
C ridimensionamento immagini Webdesign e Grafica 0
etrusko Ridimensionamento Frame Con Script Javascript 0
H Ridimensionamento immagini tramite mouse Javascript 0
K ridimensionamento della finestra HTML e CSS 2
A Ridimensionamento pagine HTML e CSS 4
E Creare un testo trasparente dietro un div HTML e CSS 5
F Div position: fixed si deve fermare quando raggiunge un altro div, oppure deve scomparire. Soluzioni? Javascript 0
M Accordion menu e posizione div HTML e CSS 0
P jquery refresh div non funziona Javascript 0
P refresh div + scrittura/lettura dal db Javascript 1
napuleone div centrato alla pagina posto sopra ai contenuti HTML e CSS 1
M Unire 2 funzioni per l'invio di un form e con l'apertura di un div Javascript 0
Cosina Nascondere div di default jQuery 2
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
A inserire variabile php colore in div html PHP 2

Discussioni simili