Javascript: calcular el tamaño de la ventana del navegador

Buenas a tod@s

Si necesitais saber que tamaño tiene la ventana del navegador (ancho y alto) para por ejemplo mostrar unos estilos CSS u otros con javascript porque por lo que sea con CSS no podeis … este es vuestro codigo:

 

function tamVentana() {
  var tam = [0, 0];
  if (typeof window.innerWidth != 'undefined')
  {
    tam = [window.innerWidth,window.innerHeight];
  }
  else if (typeof document.documentElement != 'undefined'
      && typeof document.documentElement.clientWidth !=
      'undefined' && document.documentElement.clientWidth != 0)
  {
    tam = [
        document.documentElement.clientWidth,
        document.documentElement.clientHeight
    ];
  }
  else   {
    tam = [
        document.getElementsByTagName('body')[0].clientWidth,
        document.getElementsByTagName('body')[0].clientHeight
    ];
  }
  return tam;
}

Un saludo

Anuncios

Javascript – On Scroll Header / invocar evento al mover el scroll vertical

Buenas a tod@s

Este articulo se refiere a la posibilidad de realizar acciones derivadas del movimiento vertical del scroll … para entendernos mejor; yo tengo una cabecera (header) que mide de alto 100px y quiero que cuando el usuario desplace verticalmente la web para ver el contenido el header pase de 100px a 50. Pues gracias a este javascript podremos controlar este tema

Os dejo link del articulo completo y el codigo, a mi me ha servido de mucha ayuda –> https://www.w3schools.com/howto/howto_js_sticky_header.asp

Un saludo

HTML & CSS: Tablas responsive con Bootstrap 3 y Stacktable by @CubicFactory

HTML & CSS: Tablas responsive con Bootstrap 3 y Stacktable by @CubicFactory

fuente: https://www.cubicfactory.com/bootstrap-tablas-responsive-con-stacktable/

Lo mejor de Stacktable es que es sencillísimo de aplicar.

Descargas el componente stacktable.js de su fuente original: http://johnpolacek.github.io/stacktable.js/
Enlazas la librería stacktable en tu plantilla HTML. Sería algo así:

<script type=”text/javascript” src=”js/stacktable.js”></script>

(Obviamente poniendo la ruta relativa a donde cada uno tenga el archivo de la librería.)

Inicializas la función stacktable:

<script type=”text/javascript”>
$(document).ready(function() {
$(‘#tabla1′).stacktable();
});
</script>

Aplicas la clase stacktable a tu tabla y le asignas el id que has inicializado arriba:

<table id=”tabla1″ class=”table stacktable” border=”0″>

Leer artículo completo en cubicfactory.com

#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>.