¡Hola chicos! Tengo una duda, veréis, tengo que hacer el siguiente programa.
Problema: Tengo que redimensionar un div con JQuery cuando hago doble click sobre él, y luego, si se hace doble click de nuevo, el div tiene que volver a redimensionarse a su tamaño inicial. El tamaño inicial del div es de 800x70 px y el tamaño redimensionado es de 250x250px.
Sé como hacerlo pero el problema es cuando tengo que volver a la posición incial. Dejo el código (el ejercicio en cuestión es el ejercicio 16)
HTML:
<html>
<head>
<title>jQuery</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery-3.3.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<br />
<h1>Introducción a jQuery</h1>
<br />
<!-- Exercici 1 -->
<div id="ex1">
<br />
<h2>Exercici 1</h2>
<br />
<p>Pressiona el botón: </p>
<br />
<button id="boto">Botón</button>
<br />
<br />
</div>
<br />
<!-- Exercici 2 -->
<div id="ex2">
<br />
<h2>Exercici 2</h2>
<br />
<p id="parrafo1">Párrafo 1.</p>
<p>Párrafo 2.</p>
<br />
</div>
<br />
<!-- Exercici 3 -->
<div id="ex3">
<br />
<h2>Exercici 3</h2>
<br />
<table border="1px">
<tr>
<td id="ex3fila1">Fila1</td>
</tr>
<tr>
<td id="ex3fila2">Fila2</td>
</tr>
</table>
<br />
</div>
<br />
<!-- Exercici 4 -->
<div id="ex4">
<br />
<h2>Exercici 4</h2>
<br />
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
</ul>
<br />
<button id="hideElements">Ocultar</button>
<br />
<br />
</div>
<br />
<!-- Exercici 5 -->
<div id="ex5">
<br />
<h2>Exercici 5</h2>
<br />
<caption>Tabla 1</caption>
<table border="1px">
<tr>
<td id="ex5fila1">Fila1</td>
</tr>
<tr>
<td id="ex5fila2">Fila2</td>
</tr>
<tr>
<td id="ex5fila3">Fila3</td>
</tr>
</table>
<br />
<caption>Tabla 2</caption>
<table border="1px">
<tr>
<td>Fila1</td>
</tr>
<tr>
<td>Fila2</td>
</tr>
<tr>
<td>Fila3</td>
</tr>
</table>
<br />
</div>
<br />
<!-- Exercici 6 -->
<div id="ex6">
<br />
<h2>Exercici 6</h2>
<br />
<br />
<h3>Noticia 1</h3>
<br />
<p id="ex6text1">Lorem ipsum dolor sit amet consectetur adipiscing elit risus sollicitudin rhoncus, iaculis vitae senectus sapien nunc mauris vehicula sociis auctor. Etiam cubilia facilisi nisi orci montes justo ligula inceptos, class magna consequat ultrices penatibus morbi leo ridiculus, at sociis est massa volutpat pretium litora.
</p>
<br />
<button id="ex6button1">Aumentar la mida de la font</button>
<br />
<br />
<h3>Noticia 2</h3>
<br />
<p id="ex6text2">Lorem ipsum dolor sit amet consectetur adipiscing elit risus sollicitudin rhoncus, iaculis vitae senectus sapien nunc mauris vehicula sociis auctor. Etiam cubilia facilisi nisi orci montes justo ligula inceptos, class magna consequat ultrices penatibus morbi leo ridiculus, at sociis est massa volutpat pretium litora.
</p>
<br />
<button id="ex6button2">Aumentar la mida de la font</button>
<br />
<br />
<h3>Noticia 3</h3>
<br />
<p id="ex6text3">Lorem ipsum dolor sit amet consectetur adipiscing elit risus sollicitudin rhoncus, iaculis vitae senectus sapien nunc mauris vehicula sociis auctor. Etiam cubilia facilisi nisi orci montes justo ligula inceptos, class magna consequat ultrices penatibus morbi leo ridiculus, at sociis est massa volutpat pretium litora.
</p>
<br />
<button id="ex6button3">Aumentar la mida de la font</button>
<br />
<br />
</div>
<br />
<!-- Exercici 7 -->
<div id="ex7">
<br />
<h2>Exercici 7</h2>
<br />
<section id="ex7tabla1">
<caption>Tabla 1</caption>
<table border="1px" id="ex7tabla1">
<tr>
<td>Fila1</td>
<td>Fila2</td>
<td>Fila3</td>
</tr>
<tr>
<td>Fila1</td>
<td>Fila2</td>
<td>Fila3</td>
</tr>
<tr>
<td>Fila1</td>
<td>Fila2</td>
<td>Fila3</td>
</tr>
</table>
</section>
<br />
<caption>Tabla 2</caption>
<table border="1px">
<tr>
<td>Fila1</td>
<td>Fila2</td>
<td>Fila3</td>
</tr>
<tr>
<td>Fila1</td>
<td>Fila2</td>
<td>Fila3</td>
</tr>
<tr>
<td>Fila1</td>
<td>Fila2</td>
<td>Fila3</td>
</tr>
</table>
<br />
<button id="ex7button">Cambiar texto por guiones</button>
<br />
<br />
</div>
<br />
<!-- Exercici 8 -->
<div id="ex8">
<br />
<h2>Exercici 8</h2>
<br />
<p><a href="#" id="ex7link1">¡Haz click para redirigirte a una página aleatoria!</a></p>
<br />
<button id="ex8button1">Página aleatoria 1</button>
<button id="ex8button2">Página aleatoria 2</button>
<button id="ex8button3">Página aleatoria 3</button>
<br />
<br />
</div>
<br />
<!-- Exercici 9 -->
<div id="ex9">
<br />
<h2>Exercici 9</h2>
<br />
<br />
<table border="1px" id="ex9table">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
<br />
<button id="ex9button1">Asociar clase</button>
<button id="ex9button2">Desasociar clase</button>
<br />
<br />
</div>
<br />
<br />
<!-- Exercici 10 -->
<div id="ex10">
<br />
<h2>Exercici 10</h2>
<br />
<p>Pressiona algún botó per veure el "head" o el "body".</p>
<br />
<button id="ex10button1">Botó 1</button>
<button id="ex10button2">Botó 2</button>
<br />
<br />
</div>
<br />
<!-- Exercici 11 -->
<div id="ex11">
<br />
<h2>Exercici 11</h2>
<br />
<p>Pressiona algún element de les llistes.</p>
<br />
<section id="sectionID">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</<section>
<ul>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<br />
</div>
<br />
<!-- Exercici 12 -->
<div id="ex12">
<br />
<h2>Exercici 12</h2>
<br />
<p>Paràgraf de l'exercici 12.</p>
<br />
<br />
</div>
<br />
<!-- Exercici 13 -->
<div id="ex13">
<br />
<h2>Exercici 13</h2>
<br />
<p>Paràgraf de l'exercici 13.</p>
<br />
<br />
</div>
<br />
<!-- Exercici 14 -->
<div id="ex14">
<br />
<h2>Exercici 14</h2>
<br />
<p>A continuació veuràs en temps real les cordenades del ratolí.</p>
<br />
<p id="cordX">Coordenada del eix X: 0</p>
<p id="cordY">Coordenada del eix Y: 0</p>
<br />
<br />
</div>
<br />
<!-- Exercici 15 -->
<div id="ex15">
<h2>Exercici 15</h2>
<br />
<p>Pressiona un botó i cambiarà de color fins que deixir de pressionar-lo.</p>
<br />
<button>Botó 1</button>
<button>Botó 2</button>
<br />
<br />
</div>
<br />
<br />
<!-- Exercici 16 -->
<div id="ex16">
<h2>Exercici 16</h2>
<p>Fes doble click en el cuadrat vermell per redimensionar-lo.</p>
<br />
<div id="ex16Recuadro">
</div>
<br />
<br />
</div>
</body>
</html>
CSS:
* {
padding: 0px;
margin: 0px;
}
div {
border: 1px solid black;
width: 50%;
margin: auto;
}
body {
text-align: center;
display: block;
margin: auto;
}
table {
margin-left:auto;
margin-right:auto;
}
td {
padding: 10px;
}
.ex9styleclass {
background-color:#ffffcc;
font-family:verdana;
font-size:14px;
border-top-width:1px;
border-right-width:3px;
border-bottom-width:3px;
border-left-width:1px;
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:dotted;
border-top-color:#ffaa00;
border-right-color:#ff0000;
border-bottom-color:#ff0000;
border-left-color:#ffaa00;
}
#ex16Recuadro {
position: relative;
width: 500px;
height: 70px;
background-color: red;
}
JQuery:
$(document).ready(function() {
// Exercici 1.
$("#ex1 #boto").click(function (){
alert("¡Has pulsado el botón!");
});
// Exercici 2.
$("#ex2 #parrafo1").click(function(){
alert ("Se ha clickado al primer párrafo.");
});
// Exercici 3.
$("#ex3fila1").click(function(){
var f1 = $("#ex3fila1");
f1.css ("background-color", "blue");
});
$("#ex3fila2").click(function(){
var f2 = $("#ex3fila2");
f2.css ("background-color", "red");
});
// Exercici 4.
$("#ex4 #hideElements").click(function(){
var listElements = $("#ex4 li");
listElements.hide();
});
// Exercici 5.
$("#ex5 #ex5fila1").click(function(){
var f1 = $("#ex5fila1");
f1.css ("background-color", "cyan");
});
$("#ex5 #ex5fila2").click(function(){
var f2 = $("#ex5fila2");
f2.css ("background-color", "brown");
});
$("#ex5 #ex5fila3").click(function(){
var f3 = $("#ex5fila3");
f3.css ("background-color", "purple");
});
// Exercici 6.
$("#ex6 #ex6button1").click(function(){
var noticia1 = $("#ex6text1");
noticia1.css("font-size", "30px");
});
$("#ex6 #ex6button2").click(function(){
var noticia2 = $("#ex6text2");
noticia2.css("font-size", "30px");
});
$("#ex6 #ex6button3").click(function(){
var noticia3 = $("#ex6text3");
noticia3.css("font-size", "30px");
});
// Exercici 7.
$("#ex7 #ex7button").click(function(){
$("#ex7tabla1 table:first-child td").text ("-");
});
// Exercici 8.
$("#ex8 #ex8button1").click(function(){
var link = "https://www.google.es/";
$("#ex7link1").attr("href", link);
});
$("#ex8 #ex8button2").click(function(){
var link = "https://www.yahoo.es/";
$("#ex7link1").attr("href", link);
});
$("#ex8 #ex8button3").click(function(){
var link = "https://www.duckduckgo.es/";
$("#ex7link1").attr("href", link);
});
// Exercici 9.
$("#ex9button1").click(asociarClase);
$("#ex9button2").click(desasociarClase);
function asociarClase() {
$("#ex9table").addClass("ex9styleclass");
}
function desasociarClase() {
$("#ex9table").removeClass("ex9styleclass");
}
// Exercici 10.
$("#ex10button1").click(ex10button1);
$("#ex10button2").click(ex10button2);
function ex10button1() {
var ex10head = $("head");
alert (ex10head.html());
}
function ex10button2() {
var ex10body = $("body");
alert (ex10body.html());
}
// Exercici 11.
$("#ex11 ul:first-child, #ex11 ul:last li").click(ex11function1);
console.log($("#ex11 ul:nth-child(2) li"))
$("#ex11 ul:nth-child(2) li").click(ex11function2);
function ex11function1() {
alert ("Se ha presionado algún <li> del ejercicio 11.");
}
function ex11function2() {
alert ("Se ha presionado algún <li> del ejercicio 11 pero de la segunda lista.");
}
// Exercici 12.
$("#ex12 p").mouseover(function(){
$("#ex12 p").css("background-color", "yellow");
});
$("#ex12 p").mouseout(function(){
$("#ex12 p").css("background-color", "white");
});
// Exercici 13.
$("#ex13 p").hover (mouseIn, mouseOut);
function mouseIn (){
$("#ex13 p").css("background-color", "red");
}
function mouseOut (){
$("#ex13 p").css("background-color", "white");
}
// Exercici 14.
$(document).mousemove(mouseMover);
function mouseMover(event) {
$("#cordX").text("Coordenada del eix X:" + event.clientX);
$("#cordY").text("Coordenada del eix Y:" + event.clientY);
}
// Exercici 15.
$("#ex15 button").mousedown(presionaMouse);
$("#ex15 button").mouseup(sueltaMouse);
function presionaMouse() {
$(this).css("background-color", "red");
}
function sueltaMouse() {
$(this).css("background-color", "white");
}
// Exercici 16.
$("#ex16Recuadro").dblclick(function redimensionarDiv(){
$("#ex16Recuadro").animate({width: "250px", height: "250px"});
});
$("#ex16Recuadro").dblclick(function resetDiv (){
$("#ex16Recuadro").animate({width: "500px", height: "70px"});
});
});
Perdón por el tocho de programa.
¡Un saludo y gracias de antemano!