El objetivo es una pagina en html5 donde tengo un div llamado #tarjeta que va a contener un texto al azar, y un boton que al hacer click me tome de una base de datos una "frase" al azar y la coloque dentro del div pero sin irse a otra pagina php, sino dentro del mismo archivo php.
Ademas al hacer click en el boton, me tiene que animar con estilos y Jquery el div #tarjeta, de modo que al principio esté oculto y sin tamaño y se agrande a un tamaño mayor y sea visible.
Si la frase y el div estan visibles, el boton debe desactivarse, pero al hacer click en el div #tarjeta, el boton vuelve a activarse ocultando y vaciando el div para poder obtener una nueva frase al azar. ¡Espero que puedan ayudarme!
Archivo index.php
Código HTML :
<?
$base="mibase";
$user_bd="miuser";
$pass_bd="mipass";
//Aca es donde coloco la conexion a la BD y necesito llamar a una funcion al hacer click que me haga este codigo CADA VEZ que haga click, para que tome una nueva frase, no se me ocurre otra idea:
//funcion php {
@mysql_connect("localhost","$user_bd","$pass_bd") or DIE ("Error al conectar con la base de datos");
@mysql_select_db("$base") or DIE ("Error al seleccionar la base de datos");
$query="SELECT * FROM frases ORDER BY rand() LIMIT 0,1";
$resultado=mysql_query($query);
while ($row=mysql_fetch_array($resultado)){
$frase = "$row[frase]";
}
// } fin funcion php
?>
<!DOCTYPE html>
<html lang="es">
<head>
<style>
#tarjeta{width:0px;height:0px;opacity:0;background:#ccc;border:solid thin #333;}
</style>
</head>
<body>
<h1>Obtener frase al azar</h1>
<button type="button" id="boton">Obtener</button>
<div id="tarjeta"><?=$frase;?></div>
<script>
//codigo java para animar estilos css de #tarjeta y desactivar o activar boton:
width:300px;
height:200px;
opacity:1;
</script>
</body>
