Internet no está escrito con lápiz, Mark está escrito con tinta.
Todas las entradas de: Javier Iglesias
Imagen en un input type submit
Si queremos poner una imagen en un input type submit es tan sencillo como no poner type=»submit» sino type=»image». El form donde esté metido el input lo tomará como un botón de enviado del formulario.
<form action="enviar_form.php"> <input type="text" name="nombre"/> <input title="boton enviar" alt="boton enviar" src="img/mi_imagen.jpg" type="image" /> </form> </form>
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*/ }
Nashville Skyline – Bob Dylan
Nunca me canso de escuchar temazos como Girl From the North Country, I throw it all away o To Be Along with You. Uno de mis discos preferidos de Bob Dylan.
He encontrado un cover de One more night que me parece muy bueno (y además divertido) aquí está:
Bancos de imagenes gratuitos
En este post iré actualizando aquellas webs que sirvan como bancos de imagenes gratuitos.
- Unsplash, es una web con fotografías de una altísima calidad. En esta web no busques iconos o algo por el estilo ya que son fotografías tomadas por profesionales de la imagen.
- Foter, web con un poco de todo. Incorpora un buscador que a veces no sirve ya que no encuentras lo que necesitas. Imagenes de buena, mediana y mala calidad.
Iré metiendo más según vaya probando por internet.. por favor si conoces alguno que sea interesante no dudes en dejar tu comentario.
Gracias.
Cambiar src de imagen con jquery
Supongamos que tenemos una imagen como está en nuestro html
<img id="mi_imagen" src="img/origen_1.jpg"/>
Si queremos cambiar el origen de donde toma la imagen nuestro elemento img podemos utilizar jquery:
$("#mi_imagen").attr("src","img/origen_2.jpg");
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>
Scroll lento a secciones de una página mediante enlaces
Quizá ya conozcamos que si estamos en una página que tiene distintas secciones se puede ir a través de un menú o enlaces.
... <div id="seccion_1">contenido 1</div> <div id="seccion_2">contenido 2</div> ... <a href="#seccion_1">ir a sección 1</a> <a href="#seccion_2">ir a sección 2</a> ...
La navegación a estos elementos o capas es instantánea. Con jQuery podemos establecer la velocidad con la que se producirá la navegación haciendo un efecto de transición que en muchas ocasiones es visualmente más atractivo.
Lo primero que haremos es importarnos, si no la tenemos ya, nuestra librería de jQuery.
Después para cada elemento que queramos el efecto de animación usaremos este código:
$('a[href=#seccion_1]').click(function (event) { event.stopPropagation(); var Position = jQuery('[id="seccion_1"]').offset().top; jQuery('html, body').animate({ scrollTop: Position }, 1100); return false; });
Donde pone 1100 se refiere al tiempo en milisegundos que estará realizando la animación.
Con este valor podemos establecer un scroll lento a secciones de una página.
Globalización en Master Pages
Esta entrada tratará sobre cómo incluir la globalización en Master Pages en asp.net de manera independiente. En el ejemplo utilizaremos código C#.
3 pasos:
Establecer la cultura en el Global.asax
Utilizaremos cookies para guardar el valor de la currentculture en el manejador BeginRequest.
protected void Application_BeginRequest(object sender, EventArgs e) { HttpCookie cookie = Request.Cookies["CultureInfo"]; if (cookie != null && cookie.Value != null) { Thread.CurrentThread.CurrentUICulture = new CultureInfo(cookie.Value); Thread.CurrentThread.CurrentCulture = new CultureInfo(cookie.Value); } else { Thread.CurrentThread.CurrentUICulture = new CultureInfo("es-ES"); Thread.CurrentThread.CurrentCulture = new CultureInfo("es-ES"); } }
Este código lee la información del actual culture y lo establece en la cookie, si la cookie no está establecida entonces pone la cultura por defecto es-ES.
Usar un desplegable para cambiar la cultura en el MasterPage
En nuestro ejemplo usaremos un dropdownlist para cambiar la cultura:
<asp:DropDownList ID="ddlLanguage" runat="server" OnSelectedIndexChanged="ddlLanguage_SelectedIndexChanged" AutoPostBack="true"> <asp:ListItem Text="<%$ Resources:Resource, users_Spanish %>" Value="es-ES" /> <asp:ListItem Text="<%$ Resources:Resource, users_French %>" Value="fr-FR" /> </asp:DropDownList>
Manejaremos el evento SelectedIndexChanged en el codebehind:
protected void ddlLanguage_SelectedIndexChanged(object sender, EventArgs e) { //Establecemos la cookie que será usada en el Global.asax HttpCookie cookie = new HttpCookie("CultureInfo"); cookie.Value = ddlLanguage.SelectedValue; Response.Cookies.Add(cookie); //Establecemos la cultura en el currentthread y refrescamos la página. //Global asax se encargará del siguiente trabajo. Thread.CurrentThread.CurrentCulture = new CultureInfo(ddlLanguage.SelectedValue); Thread.CurrentThread.CurrentUICulture = new CultureInfo(ddlLanguage.SelectedValue); Server.Transfer(Request.Path); }
En este paso establecemos el valor de la nueva cultura y volvemos a recargar la página mediante el comando Server.Transfer.
Mostrar la cultura actual seleccionada en el dropdownlist en el MasterPage
En este punto solamente queda mostrar cual es la cultura actual seleccionada. Lo haremos con el siguiente código:
protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { ddlLanguage.SelectedValue = Thread.CurrentThread.CurrentCulture.Name; } }