CSSLab

Un laboratorio de ideas para la web en español

Publicado:

12345678910111213141516171819202122232425262728293031

Ene Feb Mar Abr May Jun Jul Ago Sep Oct Nov Dic

2005200620072008200920102011201220132014

Comentarios:

0 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760

☺ Si te gusta el contenido de este sitio, puedes aportar para seguir desarrollando y compartiendo. ☺

Categorías

javascript

Tip Precoz: obtener valor numérico con JavaScript

Con jQuery constantemente necesitamos crear variables para tomar valores CSS de elementos, para luego construir nuevos elementos o interacciones; constantemente lo hago en plugins cono Timelinr o Blox!, pero JavaScript nos ofrece un método más rápido que el andar haciendo slices.

Desde el siguiente ejemplo, tomaremos la el valor CSS de margin-top del buscador de este mismo sitio; normalmente lo haríamos de esta manera:

var marginT = $('#search_container').css('margin-top');

Click para ver ejemplo 1

Ejemplo1: obtener valor numérico con JavaScript

El valor entregado efectivamente es el correcto: 10px pero lo necesitamos numérico. Para ello utilizamos replace():

var marginT = $('#search_container').css('margin-top').replace('px','');

Click para ver ejemplo 2

Ejemplo2: obtener valor numérico con JavaScript

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

Relacionados

Háptica en iOS

28/07/2010

iPad, iPad, iPad… otro nuevo dispositivo para cautivar a los ávidos consumidores, pero que por lo menos trae interesantes nuevas tecnologías. Aparte de que crean que es un iPhone gigante, tiene varias innovaciones que permiten darle mucha rienda a la imaginación de los creadores de contenido específico para esta plataforma. Una de las que más [...]

➜

Muerte a IE: nuevo plugin

24/09/2008

Al parecer ando inspirado y con ganas de aportar más y más a la comunidad de desarrollo web del universo. Y con el afán de aumentar a los usuarios disidentes de Internet Explorer 6 y 7 (browser que también apesta), he creado un nuevo y simpático plugin que espero ayude a que más usuarios se [...]

➜

Construir para Retina Display

15/12/2011

Desde la salida del Retina Display, se duplicó la densidad de pixeles que utilizábamos para diseñar y construir sitios webs para iPhone. Aunque si seguías utilizando los acostumbrados 480x320px de las pantallas anteriores, se nota bastante el pixel en estos nuevos teléfonos. Pero si trabajas para la nueva resolución de 960x640px, ¿qué haces con los [...]

➜

Más rápido para el navegador y resistente a errores: $marginR = parseInt($(‘.search-form’).css(‘margin-right’))

Ayoze
11 / Abril / 2012
Igualmente se puede conseguir con :
$marginR = parseInt($(‘.search-form’).css(‘margin-right’));

Norke
12 / Abril / 2012
No tan precoz:

(function($) {
$.fn.margin = function(side) {
var _me, _margins;
_me = $(this);
_margins = {
“left”:parseInt(_me.css(‘margin-left’)),
“right”:parseInt(_me.css(‘margin-right’)),
“top”:parseInt(_me.css(‘margin-top’)),
“bottom”:parseInt(_me.css(‘margin-bottom’))
};
return _margins[side];
};
})(jQuery);

$marginR = $(‘.search-form’).margin(‘right’);

Norke
12 / Abril / 2012
(function($) {
$.fn.margin = function(side) {
return parseInt($(this).css(‘margin-’+side));
};
})(jQuery);

$marginR = $(‘.search-form’).margin(‘right’);

Sergio
17 / Abril / 2012

Artículos recientes

Tweets de @csslab