Ago 13, 2009

Escrito por Joselite | 0 Comentarios

Crear im谩genes con reflejo usando JavaScript

ejemplo_reflection

驴C贸mo crear el reflejo de una im谩gen de manera sencilla? Pues muy sencillo, simplemente debemos incluir una librer铆a .js y a帽adir un atributo class.

Ejemplo:

?Ver c贸digo HTML
1
2
3
4

//Include de la librer铆a JS
<script src="reflection.js" type="text/javascript"><!--mce:0--></script>
//A帽adimos el atributo class a nuestra imagen con un 100% de opaciodad
<img class="reflect ropacity100" src="../images/prueba.jpg" alt="" />

>> Descarga y ejemplos

Leer M谩s
Feb 25, 2009

Escrito por Joselite | 0 Comentarios

Desahibilitar bot贸n derecho con JavaScript

Este Script deshabilita el click del bot贸n derecho, pero no informa de ello.

?Ver c贸digo JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13

<script language=JavaScript>
<!--
var message="";
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
// -->
</script>

Leer M谩s
Ene 25, 2009

Escrito por Joselite | 0 Comentarios

Javascript para manipular contenido

Navegando por la red he encontrado una curiosa recopilaci贸n de t茅cnicas javascript para tratar todo tipo de contenidos: men煤s, im谩genes, portafolios, …

En este mini tutorial se expone tanto el c贸digo fuente como las demos correspondientes de cada una de las opciones, as铆 como el link a la p谩gina oficial del creador.

Podemos encontrar varios carruseles, un portafolio con jQuery, …

Enlace: 10 Smart Javascript

Leer M谩s
Ene 8, 2009

Escrito por Joselite | 0 Comentarios

Funci贸n ClearTimeOut() Javascript

La funci贸n ClearTimeOut() sirve para desactivar una llamada a una funci贸n que se llama a trav茅s del m茅todo setTimeOut(). Es muy 煤til esta funci贸n, lo 煤nico que se debe tneer en cuenta es que debemos tener un id con el identificar de la llamada al m茅todo setTimeOut().

?Ver c贸digo JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script type="text/javascript">
<!--
var id;
 
function timeOut ()
{
  id = setTimeout("muestra_capa()", 4500);
}
 
function anulaTimeOut ()
{
  clearTimeout(id);
}
 
function muestra_capa() ()
{
  document.getElementById("capaPrueba").style.display = "block";
}
//-->
</script>

Leer M谩s
Dic 31, 2008

Escrito por Joselite | 1 Comentario

Barra de Progreso con Javascript y CSS

Primero el HTML con las capas de la barra y el %:

?Ver c贸digo HTML
1
2
3
4

<div class="progress-bar" >  
    <div id ="sample" class="bar">75%</div>  
</div>  
<div id ="percentage"></div>


Ahora ponemos el css correspondiente para los contenedores anteriores:

?Ver c贸digo CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/*Container*/  
.progress-bar {  
    border: 1px solid #56577A;  
    /*width of the progress bar container*/  
    width: 200px;  
    margin: 5px;  
    padding: 1px;  
    background: #fff;  
    float: left;  
}  
 
/*Progress Bar*/  
.bar {  
    height: 15px;  
    font-size: 11px;  
    /* indent the text off the screen as we don鈥檛 want to see the text anymore.*/  
    text-indent:-9000px;  
}


C贸digo Javascript en el c贸digo HTML:

?Ver c贸digo JAVASCRIPT
1
2
3
4

<script src="progressbar.js" type="text/javascript"></script>   
<script type="text/javascript">  
  window.onload = function() {initialize()}  
</script>


Creamos un archivo llamado progressbar.js, donde definiremos la funci贸n initialize(), que se llamar谩 al cargar la p谩gina. El c贸digo del archivo progressbar.js es el siguiente:

?Ver c贸digo JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

function initialize() {  
    divId = 'sample';  
    thedivId = document.getElementById(divId);  
    var percentage = thedivId.innerHTML;  
    //Set the Progress Bar color  
    thedivId.style.backgroundColor="#BF5852";  
    brim(divId,0,parseInt(percentage.substr(0, percentage.length-1)));  
}
 
function brim(Id,start,percentage) {  
    if (document.getElementById) {  
         o = document.getElementById(Id);  
             if (start <= percentage) {  
                setWidth(o, start);  
                start += 1;  
                //Show progression percentage near the progress bar  
                document.getElementById('percentage').innerHTML = (start -1) + "%";  
                window.setTimeout("brim('"+Id+"',"+start+","+percentage+")", 50);  
             }  
   }  
}  
 
function setWidth(o, start) {  
    o.style.width = start+"%";  
}

Visto en: JCargoo

Leer M谩s
Página 1 de 212»