#JavaScript: #Plugin para añadir #calendario #responsive a tu sitio web by http://blog.aulaformativa.com

#JavaScript: #Plugin para añadir #calendario #responsive a tu sitio web by http://blog.aulaformativa.com

fuente: http://blog.aulaformativa.com/javascript-plugin-calendarios/

A continuación te presentamos una lista de útiles JavaScript plugin para calendarios. Estos JavaScript plugin pueden ser fácilmente implementados en tu sitio web o en cualquier aplicación web que deseas. Con estos javascript plugin puedes, además, añadir eventos a las fechas que son relevantes para tu sitio y realizar otras funciones específicas.

Ver artículo completo en http://blog.aulaformativa.com

#html: ventana modal, visor de imagen o #Lightbox en #css sin #jquery by codepen.io

fuente: http://codepen.io/gschier/pen/HCoqh

muy sencillito y muy efectivo … quizas se echen en falta los botones de alante y atras y los efectillos de aparicion pero es muy resulton y poco pesado y muy bueno para evitar engorrosos conflictos de jquery por sus liberias

en el css:

.lightbox {
display: none;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}

.lightbox img {
max-width: 90%;
max-height: 80%;
margin-top: 200%;
}

.lightbox:target {
outline: none;
display: block;
}

en el html:

link visible
<a href=”#img1″>
<img src=”https://s3.amazonaws.com/gschierBlog/images/pig-small.jpg”&gt;
</a>

link oculto debido a que sera la imagen en grande que se vera despues de pulsar
<a href=”#_” class=”lightbox” id=”img1″>
<img src=”https://s3.amazonaws.com/gschierBlog/images/pig-big.jpg”&gt;
</a>

#javascript: ocultar/mostrar un #div

Fuente: http://foros.tresuvesdobles.com/index.php?showtopic=1021

Para poner texto oculto que se muestra al pulsar un link y se vuelve a ocultar al pulsar otra vez:

1. Copia este codigo a alguna parte de la pagina (como, por ejemplo, entre las etiquetas <head> y </head>).

 language="javascript" type="text/javascript">
        function muestra(nombrediv) {
                if(document.getElementById(nombrediv).style.display == '') {
                                document.getElementById(nombrediv).style.display = 'none';
                } else {
                                document.getElementById(nombrediv).style.display = '';
                }
        }

2. Usa el siguiente codigo para el link:

div onClick="javascript:muestra('tu div')">mostrar/ocultar</div>

 

div style=display:none id=“NOMBRE DEL DIV”>  Y PON AQUI EL TEXTO OCULTO

Si quieres que el texto se muestre al principio y se oculte al pulsar el link, borra la parte ‘style=”display:none”‘ del <div>.

#javascript: Selects dependientes con #AJAX – ejemplo práctico by @edanps

Fuente: http://www.formatoweb.com.ar/ajax/select_dependientes.php

Para obtener los códigos clickeá aquí y no olvides revisar a nuestros anunciantes 🙂

Importante

El script de esta página NO utiliza XML para comunicar servidor-cliente y cargar los valores (utiliza innerHTML). Si deseas descargarte un script que genere automáticamente el código necesario para hacer funcionar select dependientes multinivel, con comunicación XML, que utilice JavaScript no intrusivo y sea muy sencillo de usar, visita este script.

Instrucciones

Hacer click en la primera lista desplegable, seleccionar cualquier opción de las dispuestas. El segundo select será habilitado en el momento que se haya seleccionado una opción válida del primer select y mostrará las opciones disponibles que se correspondan con dicha elección, por supuesto sin realizar recarga de la página.
El código fuente esta compuesto por dos archivos “.php” con sus estilos y funciones JavaScript en archivos externos más los SQL necesarios para el armado de las tablas. El listado de países y estados se incluye también con el ejemplo.

Funcionamiento

El primer select es generado mediante una función escrita en lenguaje de servidor (en este caso PHP) la cuál se encarga de consultar nuestra base de datos e imprimir todos los registros de un campo de determinada tabla. Cuando el valor de este primer select es modificado, el evento onChange de JavaScript se dispara llamando a una función. Esta función se encargará de determinar cuál select ha sido el modificado y el valor que el usuario ha seleccionado en el mismo. Si el usuario ha seleccionado la opción “Elige”, los select posteriores en la cadena de actualización cambiarán su estado a “Selecciona opción…”. Por el contrario, si la opción elegida no es “Elige”, se abrirá una conexión asincrónica con el servidor enviandole como dato el ID del select modificado y el valor seleccionado. El servidor validará lo que recibe para luego buscar en su base de datos el listado de opciones que correspondan a lo elegido por el usuario (los cuales se relacionan en las tablas mediante un campo en común) y devolverá los datos en formato HTML. Solo resta que el cliente ubique esta información en el contenedor (parentNode) del select posterior al cambiado en la cadena de actualización, tarea que se hará mediante innerHTML.

Para obtener los códigos clickeá aquí.

Actualización

Los últimos cambios realizados son:

  • Re-estructuración del código fuente para hacerlo reutilizable para “X” cantidad de combos dependientes.
  • Añadido de comentarios nuevos para ayudar a la comprensión del sistema.
  • Código más claro y limpio, ideal para su estudio.

#jQuery slide carrusel #Marquee Plugin with #CSS3 Support by @aamirafridi

Fuente: http://aamirafridi.com/jquery/jquery-marquee-plugin

Recently I been working on a project where a static text message needs to be animated similar to non-standard HTML marquee tag.

Googling gives me quite few jQuery plugins but they got so many options and complex html layout/structure was needed for the plugin to work. I decided to make a simple jQuery plugin which can scroll the text either left, right, up or down.

Github:

jQuery plugin to scroll the text like the old traditional marquee — Read More

Latest commit to the master branch on 10-21-2014

Download as zip

 

IMPORTANT NOTE:

I am removing details about options & events from this blog post as github has all the details so its hard to maintain both. Here I will list few examples to show you how to use the plugin with different options:

Examples:

Here is the list of some examples. You can open each pen below in new window and play around it. Also you can click HTML, CSS or JS tab to see the relevant code.

Basic example with default options
HTML:

First include the plugin.

Content inside the main wrapper can have html.

CSS:
JS:
Demo:

Click the Edit button shown below to open the demo in new window.

Starting plugin with options
Using options as data attributes
Mixing data attributes and JS options

Check HTML tab for data attributes options and JS for options provided when applying the plugin. This is useful if you want to start all marquees with default options using JS and then if you want to have different option for certain marquee element using data attributes. Keep in mind that data attributes will take precedence over options provided using JS. Check this example where I define direction using both JS and data attributes.

Events
CSS3 vs jQuery
Direction
Duplicated
pauseOnHover
resumeOnHover (the other way around)

Question on github: “There is some way to do the opposite of “pauseOnHover”, leave the text stopped until you hover on it, and when you mouseout it comes back to normal? Just like spotify does in their app.”

Pause & Resume methods
Toggle method
Destroy method
Change marquee with ajax content

Due to no ‘Access-Control-Allow-Origin’ issue, please click here to open pen in new window to see it in action.

pasar variables #php a #Javascript by vcomputadoras.com

Fuente: http://vcomputadoras.com/pasar-variables-php-a-javascript/

Alguna veces deseamos pasar el contenido de una variable PHP y pasársela aJavascript, lo mas importante para que funcione bien es cuidar el sintax de tu código…

Por ejemplo querés pasara un array de PHP a Javascript para que este este definido en tu Javascript..
Bueno les voy a enseñar que no es tan difícil..
Considera que tu servidor tiene que parsear PHP para que estos ejemplos pueden funcionar..

Ejemplo, pasemos una cadena de palabras de PHP y un array de PHP a javascript:

1 <html>
2 <head>
3 <title></title>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5     <script type="text/javaScript">
6         // creamos nuestra PHP variable.
7         <?php $phpvar    "este es mi contenido en php un string.." ?>
8
9         // y la metemos ahora en una variable Javascript.
10         var jsvar  = '<?php echo $phpvar; ?>';
11
12         // creemos un array de php y pasemos el contenido en una variable javascript.
13         <?php $phparray  = array('un string', 1, 0.358); ?>
14
15         // creamos ahora una array en javascript.
16         var jsarray      = [];
17
18         // pasemos nuestro array de php a nuestra array de javascript.
19         <?php
20             for($i=0; $i < count($phparray); $i++ ){
21                 echo 'jsarray['.$i.'] = "'.$phparray[$i].'";';
22             }
23         ?>
24
25         window.onload = function(){
26             alert(jsvar);
27             alert(jsarray);
28         }
29     </script>
30 </head>
31 <body>
32 </body>
33 </html>

Déjenme explica un poco..

1 // creamos nuestra php variable.
2         <?php $phpvar    "este es mi contenido en php un string.." ?>
3
4         // y la metemos ahora en una variable Javascript.
5         var jsvar  = '<?php echo $phpvar; ?>';

En este pedazo , creamos nuestra variable PHP y le asignamos una cadena de palabras o (string) a esta.. ya creado pasamos a declarar una variable Javascript..

Al mismo utilizamos usamos una comillas simple y después usamos la tag de PHP i el echo para printear su contenido y asignarlo a la variable Javascript serramos la variable Javascript con la misma clase de comillas simple..

Ahora dejen explico el ejemplo de array.

1 // creemos un array de php y pasemos el contenido en una variable javascript.
2         <?php $phparray  array('un string', 1, 0.358); ?>
3
4         // creamos ahora una array en javascript.
5         var jsarray      = [];
6
7         // pasemos nuestro array de php a nuestra array de javascript.
8         <?php
9             for($i=0; $i count($phparray); $i++ ){
10                 echo 'jsarray['.$i.'] = "'.$phparray[$i].'";';
11             }
12         ?>

Empezamos asignando una array a una variable PHP, enseguida declaramos nuestra variable Javascript como array, enseguida procesamos el array de php con un loop por cada elemento que tenga el array de php, el loop lo asignara al array de Javascript, observa cuidadosamente que aquí utilice el echo de PHP y printee el nombre del array en Javascript, en el indice de el array de Javascript asigne el valor de $i de PHP, i el valor de el array PHP lo asigne también a el array deJavascript..

observa también como empece con la comillas dobles al dar el valor de el index dePHP a el array de Javascript si ellas no estuvieran Javascript me daría un error y no se asignaría propiamente el array de Javascript..

bueno espero le sirve a alguien, ya que a mi me costo algo entenderle.