ridimensionamento div

newbie01 · 22 Apr 2014

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 ?

Nefyt · 22 Apr 2014

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 · 22 Apr 2014

Un pò di attenzione anche alla sintassi HTML : non si scrive niente al di fuori del tag <body>

newbie01 · 23 Apr 2014

Grazie mille, funziona! Sarebbe anche possibile fare in modo che al click comparisse e poi nuovamente scomparisse un messaggio all'interno del quadrato?

Nefyt · 23 Apr 2014

newbie01 ha scritto:
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 · 23 Apr 2014

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

Cerca

Cerca

ridimensionamento div

newbie01

Nuovo Utente

Nefyt

Utente Attivo

criric

Super Moderatore

newbie01

Nuovo Utente

Nefyt

Utente Attivo

newbie01

Nuovo Utente

Discussioni simili