Como hacer Google Maps responsivo con Javascript

Utiliza el siguiente código JavaScript antes de cerrar la etiqueta head en su archivo HTML.

function initialize() {
   var mapOptions = {
           zoom: 9,
           center: new google.maps.LatLng(28.9285745, 77.09149350000007),  
           mapTypeId: google.maps.MapTypeId.TERRAIN
       };
 
   var map = new google.maps.Map(document.getElementById('location-canvas'),
                                   mapOptions);
                              
   var marker = new google.maps.Marker({
                   map: map,
                   draggable: false,
                   position: new google.maps.LatLng(28.9285745, 77.09149350000007)
       });
}
                        
google.maps.event.addDomListener(window, 'resize', initialize);
google.maps.event.addDomListener(window, 'load', initialize);

Ahora pon este HTML

Eso es todo!

google.maps.event.addDomListener(window, 'resize', initialize);
// and 
google.maps.event.addDomListener(window, 'load', initialize);

Este evento rezise

google.maps.event.addDomListener(window, 'resize', initialize);

Es el evento principal que inicializa nuestra función de mapa en la ventana del navegador, redimensiona el mapa según el dispositivo.

Espero que les sea de utilidad!

Read More

Obtener los videos de Youtube con PHP

Nos pasa que tenemos que mostrar los videos de un canal de Youtube y tener un script a la mano es lo mejor que nos puede pasar.

Para esto usaremos la funcion curl pero ligeramente modificada para nuestro propósito.

function curl_get_contents($url) {
    // Iniciamos la sesión curl
    $ch = curl_init();
    // seteamos la url
    curl_setopt($ch, CURLOPT_URL, $url);
    // Removemos las cabeceras de la salida
    curl_setopt($ch, CURLOPT_HEADER, 0);
    // Retornamos la salida en lugar de mostrarla directamente
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
 //seteamos el timeout
 curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 1);
    // ejecutamos la sesión curl
    $output = curl_exec($ch);
    // cerramos la sesión
    curl_close($ch);
    // Retornamos la salida como una variable
    return $output;
}

Luego usamos nuestra función asi:

$feed = curl_get_contents("http://gdata.youtube.com/feeds/api/users/nombredeusuarioaqui/uploads?orderby=updated");
$xml = new SimpleXmlElement($feed);
 
$count = count($xml->entry);
for ($i=0; $i < 10; $i++) { 
 $url = $xml->entry[$i]->link->attributes();
 $videourl = explode("&",$url['href']);
 $video = str_replace("http://www.youtube.com/watch?v=","",$videourl[0]);
 
 echo '
'.$xml->entry[$i]->title.'
';
 echo '
Posteado el '.date('jS M Y h:i:s', strtotime($xml->entry[$i]->published)).'
';
 echo '
';
 echo '
'.$xml->entry[$i]->content.'
';
 echo '
Ver en Youtube
';

Espero les sea de utilidad!

Read More

scrollTop no funciona en IOS (Solución)

En el trabajo haciendo responsivo el sitio web de Trilce todo iba bien, hasta que al testearlo en un Ipad Mini me topé con un problema, y es que scrollTop no funciona en dispositivos móviles de Apple
Se apreciaba un efecto de parpadeo indeseable y te digo que no es tu culpa.

$('html,body').animate(
  {
   scrollTop: 100,
   scrollLeft: 200
  }, 
    800, 
   function(){
    $('html,body').clearQueue();
    }
);

Es un bug y la solución que le dí es está

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {    //detectamos el navegador        
            window.scrollTo(200,100) // el primer valor es izquierda, el segundo es el top
}else{
  $('html,body').animate({
   scrollTop: 100,
   scrollLeft: 200
            }, 800, function(){
   $('html,body').clearQueue();
   });
}

Espero les sea de utilidad.

Read More