.CODE: 2008

Seleccionar el contenido de un area de texto

Este script nos sirve para seleccionar todo lo que tenemos en un area de texto.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Russ (NewXS3@aol.com) -->
<!-- Web Site: http://dblast.cjb.net -->
<!-- Begin
function copyit(theField) {
var tempval=eval("document."+theField)
tempval.focus()
tempval.select()
therange=tempval.createTextRange()
therange.execCommand("Copy")
}
// End -->
</script>

</head>

<body>

<form name="it">
<div align="center">
 <input onclick="copyit('it.select1')" type="button" value="Seleccionar el texto" 
name="cpy">
</div>
<p align="center"><textarea name="select1" rows="3" cols="25">
Texto del formulario, que sera Seleccionado con JavaScript</textarea></p>
</form>

</body>
</html>

Contar la cantidad de caracteres ingresados con Javascript

Este script ques esta hecho en JavaScript, nos ayuda a poner un limite en un area de texto. Este script nos puede de ser de mucha ayuda cuando queremos limitar la cantidad de caracteres ingresados por nuestros usuarios.

Codigo Completo:

<HTML>
<HEAD>
<TITLE>Informar cantidad de caracateres</TITLE>
</HEAD>
<BODY>
<div align="center"><strong>
<font face="Geneva, Arial, Helvetica, sans-serif">Cantidad de caracteres Ingresados
</font></strong>
<table>
<tr><td>
<font size="2" face="Geneva, Arial, Helvetica, sans-serif">
<textarea onKeyUp="max(this)" onKeyPress="max(this)" rows="4" cols="35" 
name="Area"></textarea>
<br>
<font id="Digitado" color="red">0</font> Caracteres digitados / Restan 
<font id="Restante" color="red">600</font></font>
</td></tr>
</table>
</div>
<div align="center"></div>
<SCRIPT LANGUAGE=javascript>
function max(txarea)
{
total = 600;
tam = txarea.value.length;
str="";
str=str+tam;
Digitado.innerHTML = str;
Restante.innerHTML = total - str;

if (tam > total){
aux = txarea.value;
txarea.value = aux.substring(0,total);
Digitado.innerHTML = total
Restante.innerHTML = 0
}
}
</SCRIPT>

</BODY>
</HTML>

Para configurar el script debemos tomar estas dos partes:

<font id="Digitado" color="red">0</font> Caracteres digitados / Restan 
<font id="Restante" color="red">600</font></font>

Donde el 600 lo cambiaremos por la cantidad de caracteres que queramos que acepte(esto es solo para mostrar al usuario)

function max(txarea)
{
  total = 600;
  tam = txarea.value.length;
  str="";
  str=str+tam;
  Digitado.innerHTML = str;
  Restante.innerHTML = total - str;

Aqui es donde nuestro script aceptara "X" cantidad de caracteres que queramos, solo cambia el 600 por la cantidad que tu quieras

Agregar datos a una tabla con PHP

El siguiente codigo que publico es para agregar datos a una tabla dentro de una base de datos Mysql, porque que seria de php sin la interaccion con una base de datos, y es que podemos crear scripts en php que no utilizen base de datos como:
-Formulario de Contacto
-Contador de Visitas
-Mostrar el ip
-etc...

Pero lo principal o mejor dicho para aprovechar el potencial de php es basico interactuar con una base de datos y aqui les muestro el siguiente codigo que sirbe para agregar datos a una tabla.

<?php
// Primero comprobamos que ningún campo esté vacío y que todos los campos existan.
if(isset($_POST['nombre']) && !empty($_POST['domicilio']) &&
isset($_POST['nombre']) && !empty($_POST['domicilio'])) {
// Si entramos es que todo se ha realizado correctamente
$link = mysql_connect("localhost","root","");
//"localhost" = al servidor "root" = al nombre de usuario de la bd y
//""= a contraseña de la base de datos
mysql_select_db("bd",$link);
//aqui seleccionamos la base de datos que en mi caso se llama "bd"
// Con esta sentencia SQL insertaremos los datos en la base de datos
mysql_query("INSERT INTO contenido (nombre,domicilio,edad,telefono,email)
//lo que se encuentra entre parentecis son los campos de mi tabla
VALUES ('$_POST[nombre]','$_POST[domicilio]','$_POST[edad]','$_POST[telefono]',
'$_POST[email]')",$link);
// Ahora comprobaremos que todo ha ido correctamente
$my_error = mysql_error($link);
if(!empty($my_error)) {
echo "Ha habido un error al insertar los valores. $my_error";
} else {
echo "Los datos han sido introducidos satisfactoriamente";
}
} else {
echo "Error, no ha introducido todos los datos";
}
?>
?>

Ver Código Fuente de una Web usando Javascrtipt

Para ver el código fuente de un sitio, por ejemplo usando Firefox solo tenemos que dar Ctrl+U, pero que pasa cuando en alguna aplicación web o cualquiera sitio queremos meter un visualizador de códigos fuentes?, es decir que cualquier usuario pueda ver el código de cualquier sitio con solo poner su URL, bueno para hacer esto utilizamos Javascript.

Código Javascript(que colocaremos entre las etiquetas head y /head:

<SCRIPT LANGUAGE="JavaScript">
<!--
function viewSource() {
document.getSource.view.value="Por favor, espere...!";
setTimeout("document.getSource.view.value='Ver origen!'",6000);
window.location.href= "view-source:" + document.getSource.url.value;
return false;
}
//-->
</script>

Código HTML:

Escribe la direccion completa <br />
de la web que deseas ver su coadigo </span><br />
<form name=getSource onSubmit="return viewSource();">
<input name=url type=text class="Estilo4" value="http://">
<br><br>
<input name=view type=submit value="Ver codigo">
</form>

Evitando el doble envio de un form con Javascript

En ocaciones cuando un form se esta enviando vemos como que el navegador no hace nada y ahi vamos nosotros a darle click de nuevo, lo que ocaciona el doble envio de un form y talvez la dupicacion de datos en una base de datoas. Para evitar esto utilizaremos el siguiente script en JavaScript para evitar el doble envio.

El siguiente script entre las etiquetas head y /head:

<script language="JavaScript"> 
<!-- var cuenta=0; function nodoble() { if (cuenta == 0) { cuenta++;
return true; }
else { alert("El formulario ya está siendo enviado, por favor aguarde un instante."); 
return false; } } // -->
</script>

HTML:

<form method="post" action="proceso.php"><strong>onSubmit="return nodoble()"</strong>>
<!--Aqui los campos de nuestro Form--> <input value="Enviar" type="submit" /> </form>

Utilizar diferentes colores en un select con CSS

En ocasiones cuando estamos diseñando una página web y queremos dar la opción de que cambie "X" elemento de nuestro diseño podemos poner un select común que solo contenga el nobre del color, pero porque no hacerlo dandole fondo a cada elemento del select?, esto es muy sencillo utilizando Css.

Codigo CSS:

body{
background-color:#666666;
color:#FFFFFF;
text-align:center;
}
/*Para definir las clases se coloca un punto delante del nombre*/
.azul {
background-color: #0000FF;
color: #ffffff;
}
.rojo {
background-color: #FF0000;
color: #ffffff;
}
.verde {
background-color: #009900;
color: #ffffff;
}
.amarillo{
background-color: #FFFF00;
color: #000000;
}

Codigo HTML:

<form method="post" action="">
<label for="color">Selecciona tu color favorito:</label>
<p>
<select name="color" id="color">
<option value="">Selecciona Uno</option>
<option value="amarillo" class="amarillo">amarillo</option>
<option value="rojo" class="rojo">rojo</option>
<option value="verde" class="verde">verde</option>
<option value="azul" class="azul">azul</option>
</select>
</p>
<p>
<input type="submit" name="submit" id="submit"
value="Enviar!" />
</p>
</form>

Centrar una pagina con CSS

En ocaciones cuando estamos diseñando una web y queremos centrarla de forma sencilla, la mejor opción es utilizar Css, por la sencilles con que se hace y la rapides, y para esto aquí les dejo el codigo Html y el CssCódigo HTML:
Codigo HTML:

<p id="content">
<p id="cabecera">
<h2>Esto es una prueba</h2>
<p id="contenido"><center>Resultado Final</center></p>

Codigo CSS:

<style type="text/css"> body { margin:0; padding:0; text-align:center; }
#content { text-align:left; margin:auto; background-color:#ff0; width:800px; height:800px; }
#cabecera { width: 800px; height:100px; background-color:blue; }
#menu { width:150px; height:650px; float:left; background-color:#888; }
#contenido { width:650px; height:650px; float:left; background-color:#ccc; }
#pie { clear:both; width:800px; height:50px; background-color:#0f0; }
</style>

Bienvenidos

Bienvenidos a mi blog puntocode donde encontraras codigos de programacion que e realizado y otros que me e encontrado por este facinante mundo de la web