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

#prestashop 1.5 como modificar el ancho de los resultados en el #modulo de #productos destacados

Buenas, este post no intenta deslumbrar a nadie … simplemente es una nota mental de como consegui llegar hasta este punto porque vaya telita con el prestashop

Para ponernos en situacion, instale prestashop, y le quite al diseño basico las columnas derecha e izquierda. Modifique el tamaño de la columna central al 100% para que se ajustase

Problema al hacer esto: el modulo de productos destacados sigue a su bola, responsive design? pa que … es decir, el ancho de la web es mas grande … pero los tumns de productos siguen en el mismo tamaño con lo cual queda un diseño ortopedico muy rico

Para ello solo tenemos que modificar en archivo homefeatured.tpl que esta en la ruta “themes/como-sea-que-has-llamado-tu-template/modules/homefeatured/homefeatured.tpl”

no pongo numero de linea porque esto como lo cambian cada dos dias es una perdida de tiempo … donde se crea el objeto <li> añadiremos el width a pinrel … <li style=”width:18%;”

lo he puesto al 18% porque tengo 5 tumns

espero que a alguien mas que a mi este post le sirva de ayuda … voy escribiendo segun lo pienso (y aparte soy un poco monguer) asi que pido disculpas por no optar a ser nobel de literatura. Como decia al principio, no intento ser un santuario de sabiduria, solo quiero dejar reseñas de mi trabajo para mis futuros proyectos y si puedo ayudar a alguien pues mejor que mejor

un saludo a todos

 

#Guía – Ocultar la columna izquierda en la ficha del producto en #Prestashop 1.5 by victor-rodenas.com

Fuente: http://victor-rodenas.com/2013/05/23/guia-configuracion-del-modulo-de-productos-destacados-en-prestashop-1-5/

En esta guía, vamos a ocultar la columna izquierda en Prestashop 1.5 bajo la plantilla por defecto en la ficha del producto.

pdefecto

Ocultar la columna izquierda en Prestashop

Vamos a seguir 3 pasos, para ocultar el lateral “Izquierdo” en Prestashop 1.5 y adaptar la columna central y la ficha del producto al “nuevo ancho”.

El primero paso es ir al fichero:

/themes/default/css/global.css

Y añadir esto:

1.#product #left_column {
2.displaynone;
3.}

Con esto ya no veremos la “columna izquierda” en Prestashop 1.5, pero veremos que “Necesitamos aumentar la columna central” para cuadrar la página.

faltaancho

Necesitamos ampliar el ancho de la columna central en Prestashop 1.5

 

Y ahora viene el segundo paso, volvemos a editar el fichero:

/themes/default/css/global.css

añadimos esto:

1.#product #center_column {
2.width757px;
3.}

Ahora veremos que nos falta “ampliar”  el bloque donde se ve la descripción corta del producto entre otros opciones de la ficha producto en Prestashop.

aumentarancho

Aumentar ancho del bloque donde se muestra la “Descripción corta” del producto, entre otras opciones la ficha del producto en Prestashop 1.5

En este tercer paso, sera editar el fichero:

/themes/default/css/product.css

Buscar esto:

1.#pb-left-column {
2.floatleft;
3.margin-left14px;
4.width255px;
5.}

Y dejarlo así:

1.#pb-left-column {
2.floatleft;
3.margin-left14px;
4.width474px;
5.}

De esta manera, conseguimos aumentar el ancho del bloque donde se ve la “Descripción corta del producto”, que además incluye otras opciones…

ffproducto

Ficha de producto con la columna izquierda oculta y el ancho extendido en Prestashop