BACKBONE LATAM BLOG

Archie's Trattoria

2012-02-07

Ya está al aire! Archie's Trattoria, orgullo de Backbone Latam!

Colchones Spring es la fábrica de colchones con mayor trayectoria en el mercado colombiano, con 60 años de experiencia es la empresa líder de la categoría. Es una compañía productora y comercializadora de soluciones innovadoras para el buen dormir. Esta organización la conforman cerca de 700 empleados trabajando en función del cliente.

Nuestro reto, fue diseñar y desarrollar la plataforma en 1 mes, en la que se implementara la tienda en línea, que se activará en la segunda etapa. Nuestro departamento de estrategia montó las bases para la nueva cara de la marca en la web y su interacción en las redes sociales.

CSS3 Transform : Changing the Origin

2011-08-23

CSS3 Transform Origin

From the last post "Novice to Ninija : CSS3 Transform" we have mastered the basic of the transform but I forgot to mention how you can change the origin point.

CSS3 transforms such rotate() or scale() are default to center point of the element, you can change the origin point just like how you define the background-position

This Is How You Do It

transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;

Demo

Please hover on the HTML5 logo. You can see that we have changed the origin point to 0 0 (Top Left) :

.demo{
  width:300px;
  height:300px;
  position:relative;
  margin:0 auto;
  padding:50px 0;
  cursor: pointer;
}

.demo img{
  transition:all 300ms ease;
  -moz-transition:all 300ms ease;
  -webkit-transition:all 300ms ease;
  -o-transition:all 300ms ease;

  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
}

.demo:hover img{
  transform:rotate(50deg);
  -moz-transform:rotate(50deg);
  -webkit-transform:rotate(50deg);
  -o-transform:rotate(50deg);

  transition:all 300ms ease;
  -moz-transition:all 300ms ease;
  -webkit-transition:all 300ms ease;
  -o-transition:all 300ms ease;
}

jQuery Get URL Variables

2011-08-18

Send & Read URL Variables Using jQuery getUrlVar

jQuery getUrlVar is a tiny piece of jQuery plugin that does wonderful job by reading the URL Variables. Sometimes you may need to read your own custom url variables and do changes on the other pages.

jQuery getUrlVar Plugin

jQuery.extend({
  getUrlVars: function(){
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
      hash = hashes[i].split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
    }
    return vars;
  },
  getUrlVar: function(name){
    return jQuery.getUrlVars()[name];
  }
});

You can download the script here

How to use jQuery getUrlVar

var profileId = jQuery.getUrlVar()["profileId"];
if(profileId != undefined)
{
  // do something
}

Example on Healthy Families BC Walking Challenge

Healthy Families BC Walking Challenge Popup

The goal to use query getUrlVar is to show the Lumby popup when users land on the page. What we did is to pass a URL variable 'profileId'. We use getUrlVar to read the id and do the trick. It's very useful when it comes to the REAL WORLD

Before: http://www.healthyfamiliesbcwalkingchallenge.ca/Lumby

After: http://www.healthyfamiliesbcwalkingchallenge.ca/Lumby?profileId=8642