Archivo de la etiqueta: css

Problema con scroll en ventana modal bootstrap

En bootstrap al abrir una ventana modal automáticamente se desactiva el scroll de la parte que se encuentra en el background.

Si al cerrar la ventana modal no consigue restablecerse el scroll se puede utilizar el siguiente cambio en el css:

Esto es el css que hace desaparecer el scroll

.modal-open {
    overflow: hidden;
}

Se puede modificar por lo siguiente

.modal-open {
    overflow: scroll;
}

De esta manera el scroll siempre estará activo.

 

Eventos de ratón para un marcador en Google Maps

A continuación se enumerarán los distintos eventos que son disparados cuando se interactua con el ratón sobre un marcador de Google Maps.


google.maps.event.addListener(marker, "click", function (e) { log("Click"); });
google.maps.event.addListener(marker, "dblclick", function (e) { log("Double Click"); });
google.maps.event.addListener(marker, "mouseover", function (e) { log("Mouse Over"); });
google.maps.event.addListener(marker, "mouseout", function (e) { log("Mouse Out"); });
google.maps.event.addListener(marker, "mouseup", function (e) { log("Mouse Up"); });
google.maps.event.addListener(marker, "mousedown", function (e) { log("Mouse Down"); });
google.maps.event.addListener(marker, "dragstart", function (mEvent) { log("Drag Start: " + mEvent.latLng.toString()); });
google.maps.event.addListener(marker, "drag", function (mEvent) { log("Drag: " + mEvent.latLng.toString()); });
google.maps.event.addListener(marker, "dragend", function (mEvent) { log("Drag End: " + mEvent.latLng.toString()); });

Google Maps: crear un marcador con etiqueta

Antes de nada hay que indicar que es necesario añadir la referencia a la api de google maps para realizar lo que hace este post. Para crear un marcador que muestre una etiqueta con Google Maps podremos seguir el siguiente ejemplo. Marcador-google-maps

Crear un marcador básico

La clase google.maps.InfoWindow será la que nos permita visualizar la etiqueta. Estará asociada a un mapa y un marcador cuando decidamos abrirla con el comando: iw.open(map, marker); Si nos fijamos el lugar donde se mostraría la información sería en el click del marcador ya que hemos registrado un manejador del evento correspondiente en la última línea, esto desencadenará la visualización de la etiqueta.

var latLng = new google.maps.LatLng(49.47805, -123.84716); var homeLatLng = new google.maps.LatLng(49.47805, -123.84716); var map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 12, center: latLng, mapTypeId: google.maps.MapTypeId.ROADMAP }); var marker = new MarkerWithLabel({ position: homeLatLng, draggable: true, map: map, labelContent: "A", labelAnchor: new google.maps.Point(22, 0), labelClass: "labels", // la clase CSS para la etiqueta labelStyle: {opacity: 0.75} }); var iw = new google.maps.InfoWindow({ content: "Home For Sale" }); google.maps.event.addListener(marker, "click", function (e) { iw.open(map, marker); }); 

Bug en imagenes Internet Explorer 8

Es posible que hayas sufrido en IE8 el siguiente problema:

Las imágenes «responsive» en IE8 se ajustan correctamente en anchura pero su altura se alarga o deforma.

Para solucionar esto el CSS debe hacer las imágenes responsive en ccs y tener la siguiente declaración añadida:

width: auto;

img {
border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
/* vertical-align: bottom; */ /* Suppress the space beneath the baseline */
/* Responsive images */
/* @todo Add responsive embedded video. */
max-width: 100%;
height: auto;
width: auto;
}

Este bug en imágenes Internet Explorer 8 aparece debido a que no se ha metido el archivo normalize.css

Bundling y Minification en ASP.NET 4.5

Bundling es una nueva característica dentro de ASP.NET 4.5 que hace fácil combinar diversos ficheros en un único fichero. Esto es muy recomendable porque acelera sustancialmente la carga de la página y con ello mejora el rendimiento de la aplicación.

No hay que confundir bundling con minification, pero… ¿qué signfica Minification? Seguro que os habéis preguntado en alguna ocasión por qué en muchos ficheros que os descargáis por la red existen dos ficheros uno con extensión min.css o min.js y otro sin él. El fichero min es básicamente el mismo pero en él se eliminan los espacios en blanco no significativos, comentarios y se acortan los nombres de las variables. El objetivo final de esto es acortar el tiempo de carga de estos ficheros.

Los ficheros donde se utilizan estas técnicas son archivos javascript y css.

Bundling y minification se habilitan o deshabilitan en base al valor de la propiedad debug dentro del elemento compilation del web.config.

Si debug=»true» entonces el agrupamiento y la minificación estarán deshabilitadas. Es lógico, si queremos depurar la aplicación y queremos que el código sea legible necesitaremos distintos archivos y líneas de código, no un «tocho» de código dentro de una misma línea.

Si debug=»false» entonces se habilitarán estas dos características.

En un proyecto web creado con plantilla con Visual Studio podremos observar que existe un fichero llamado startup.cs gestionado por OWIN que se ejecuta al iniciar la aplicación.En este fichero se llama a un fichero de configuración de bundling llamado BundleConfig.cs (dentro del directorio App_Start) que se encarga de asignar los Bundling y Minification.

 

 

 

Menús con scroll

En este post explicaré la forma de hacer menús con scroll típicos en sitios web de una sola página.

Antes de nada decir que existen unos cuantos plugins de jquery para realizar webs de una sola página en el que viene implementado ya un menú de este tipo. Por ejemplo son muy conocidos Smint y CoolKitten. En el ejemplo de este post utlizaremos jquery waypoints.

Lo primero que debemos hacer es crear las distintas secciones a los que se dirigirán los enlaces del menú.


...

<div id="seccion_1">...</div>

<div id="seccion_2">...</div>

<div id="seccion_3">...</div>

...

Posteriormente implementaremos el menú con enlaces a cada uno de las secciones establecidas anteriormente.


<div id="menu">

<ul>

<li><a id="menu_seccion1" href="#seccion_1">ir a seccion 1</a></li>

<li><a id="menu_seccion2" href="#seccion_2">ir a seccion 2</a></li>

<li><a id="menu_seccion3" href="#seccion_3">ir a seccion 3</a></li>

</ul>

</div>

Este menú necesitamos dejarlo fijo en algún punto para que sea visible durante todo el scroll de la página. Por ejemplo en nuestro caso lo situaremos debajo de la pantalla. Para ello usaremos css y la propiedad position fixed:


#menu

{

position:fixed;

bottom:0;

}

Con todo esto y utilizando únicamente html y css podemos crear un menú con scroll. El problema es si queremos que los elementos del menú se activen o desactiven dependiendo de que sección nos encontremos. Para hacerlo ya necesitaremos javascript. Con jquery y jquery waypoints podemos manejar eventos que se produzcan cuando el usuario se encuentre en una u otra sección de la página. No olvideis importarlo a vuestra página.


$('#seccion_1') .waypoint(function(direction) {

//esto se ejecutará cuando el usurio esté dentro de la sección 1

alert('esto se ejecutará cuando el usurio esté dentro de la sección 1');
}

Con esto, jquery y un poco de imaginación podemos hacer casi todo. Entre otras cosas cambiar la clase css de cualquier elemento del menú cuando se llegue a la sección indicada.


$('#seccion_1') .waypoint(function(direction) {

$('#menu_seccion1').addClass('menu_active');

}

Ajustar background image con css

Es posible ajustar background image con css 3 gracias a la propiedad background-size.

El problema que existe con la propiedad background-image de css es que la resolución de la imagen no se adapta al tamaño de la capa y por tanto tampoco de cualquier otro elemento heredando el problema de las diversas resoluciones de pantalla para todos los tipos de dispositivos.

La propiedad background-size pretende solucionar este problema. Como gran parte de las propiedades de css3 cada navegador usa su propia etiqueta para aplicarlo en su renderizado.


.capa_imagen_ajustada

{

background-image: url('img/fondo.jpg');

-moz-background-size: 100% 100%; /*Firefox 3.6*/

-o-background-size: 100% 100%; /*opera*/

-webkit-background-size: 100% 100%; /*Safari*/

background-size: 100% 100%; /*estandar css3*/

-moz-border-image: url('img/fondo.jpg') 0; /*Firefox 3.5*/

}

Opacidad con css

En este post explicaremos las dos maneras de dar transparencia u opacidad con css.

La manera a utilizar la opacidad dependerá de cómo quieres que se comporten los elementos secundarios. Los elementos secundarios que se encuentren anidados dentro un elemento padre pueden heredar o no esa opacidad.

  • Heredar transparencia a elementos secundarios:

#parent

{

opacity: .5;
-moz-opacity: .5;
filter:alpha(opacity=5);

}

  • No heredar la opacidad a elementos secundarios:

#parent

{

background:rgba(0,0,10,0.5);

}

Ajustar una capa a la altura de la pantalla con css

Para ajustar una capa a la altura de la pantalla con css es necesario especificar lo primero las alturas a las etiquetas html y body del documento. Y después ajustarle a la capa que queremos establecer el alto.


<html style="height: 100%;">
  <body style="height: 100%;">
    <div style="height: 100%;">
      <p>
        Make this division 100% height.
      </p>
    </div>
  </body>
</html> 

Centrar menu en Foundation

Este post indicará la manera de como centrar menu en Foundation.
Por defecto Foundation no permite centrar un menú en su framework.
Tenemos el siguiente marcado html:

<nav id="mi_menu" data-topbar="">
<ul>
<ul>
<ul><!-- Title Area --></ul>
</ul>
</ul>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<ul>
	<li><a><span>Menu</span></a></li>
</ul>
<section>
<ul>
	<li><a href="#">HOME</a></li>
	<li><a href="#" target="_blank">BLOG</a></li>
	<li><a href="#" target="_blank">SHOP</a></li>
</ul>
</section></nav>

Para centrar el menú podemos utilizar el siguiente código en css:


@media only screen and (min-width: 40.063em) {
#mi_menu {
width: 100%;
height: 3em;
margin: 0;
text-align: center;

}

#mi_menu .nav-bar {
height: auto;
margin: 0;
padding: 0;
display: inline-block;
}
}