Tag Archive for: AJAX

08Sep 2009 1 Comment

Ventana modal con jquery

Categories: AJAX - Tags: ,

Podriamos progamar una ventana modal desde cero pero es mucho más facil si usamos algun plugin de jquery, para eso voy a usar Simple Modal

Primero incluimos jquery y el plugin simple modal en nuestra cabecera

1
2
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.simplemodal-1.3.min.js "></script>

Luego debemos elegir que elementos deben ser afectados por simplemodal usando los selectores de jquery, con lo que podría quedar asi:

1
$("#sample").modal();

O podriamos incluir algunos parámetros adicionales como por ejemplo cambiar el color de fondo y la opacidad

1
2
3
4
$("#sample").modal({
    overlay:80,
    overlayCss: {backgroundColor:"#fff"}
});

Existen opciones más avanzadas como animaciones uso de iframes entre otras su pagina web

03Sep 2009 0 Comments

Slider contenido destacado jquery

Categories: AJAX - Tags: ,

He visto varios sliders en jquery con/sin easing, con muchos efectos y otras cosas pero siempre me han gustado mas esos sliders flash que hay en ciertos blogs de noticias u otros donde se muestra un banner con contenido último o destacado incluyendo un texto y algún link, muy util para resaltar algún post.

Este script jquery justamente permite mostrar contenido destacado en un slider incluyendo una descripción con su respectivo link

featured-content-jquery

featured-content-jquery

Podemos ver como implementarlo desde su web

Ver Demo

18Aug 2009 20 Comments

Web modular PHP con AJAX

Categories: AJAX, PHP - Tags: , , ,

Hace no mucho tuve un cliente que insitia en tener un flash con musica en su pagina web y que esta no se corte cuando cambie de página para lograr esto hay que evitar que se recargue la pagina, lo que se puede lograr usando iframes sin embargo esta solución implicaba reprogramar varias cosas, intenté convencer al cliente de lo inconveniente de usar frames y de poner música pero no aceptó.

En vista de esto tuve que inventar algo que permita que mi página funcione sin demasiados cambios y darle el gusto al cliente, por lo que implementé esta solución usando AJAX, para ser más preciso jquery.

Web Modular

La web modular se basa en varios pedazos de código que se juntan (encabezado, menu, contenido, pie de pagina), eso ya lo expliqué en un post anterior.

Cargar los contenidos sin recargar

Aqui va la parte interesante, hay que hacer que los links llamen contenidos via ajax (jquery), lo que se logra primero agregando a cada link la clase ajaxmenu

1
2
3
4
<a href="pages/homepage.php" class="ajaxmenu">Homepage</a>&nbsp;&nbsp;|&nbsp;&nbsp;    
    <a href="pages/aboutus.php" class="ajaxmenu" >About Us</a>&nbsp;&nbsp;|&nbsp;&nbsp;
    <a href="pages/services.php" class="ajaxmenu" >Services</a>&nbsp;&nbsp;|&nbsp;&nbsp;
    <a href="pages/contactus.php" class="ajaxmenu" >Contact Us</a>

y agregando este código al top_page.php dentro del header y entre etiquetas script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function(){
    $.ajaxSetup ({
        cache: false
    });
       //// Imagen mientras carga el contenido
    var ajax_load = "<img src='img/load.gif' alt='loading...' />";
   
    // Interceptar el link de los menus
    $(".ajaxmenu").click(function(){    
                /// Extraemos el nombre de la pagina que esta en el link
        var loadUrl = $(this).attr('href');
                /// Llamamos el contenido
        $("#contenido").html(ajax_load).load(loadUrl);
        return false;
    });
});

En la segunda parte de este tutorial explico como hacerlo funcionar cuando los links son internos, y más importante cuando usamos anclas

17Mar 2009 7 Comments

Subir Multiples Archivos Ajax jquery

Categories: AJAX - Tags: , ,

Siempre recordemos que no se puede subir archivos usando AJAX, porque el objeto ajax no soporta el enctype requerido para subir archivos asi que se usa un iframe para emular el proceso. Voy a explicar como hacer esto con jquery y ajax

El formulario para subir archivos

1
2
3
4
5
6
7
8
9
<form action="upload.php" id="frm_uploader" name="frm_uploader" method="post" enctype="multipart/form-data">
<ol>
    <li><label>Name:</label><input type="text" id="cfname" name="fname" size="30" class="required" /></li>
        <li><label>E-mail:</label><input type="text" id="cfemail" name="femail" size="30" class="required email" /></li>
    <li><label>Select Files</label><input name="ffoto[]" type="file" class="multi" accept="gif|jpg|jpeg|png|pdf|zip|rar|ai|eps|mp3|avi|wmv|mpg|mpeg|cdr" /></li>
        <li><p align="center"><input type="submit" name="submit" value="Upload Now" class="btn" /></p></li>
</ol>
</fieldset>
</form>

AJAX Jquery

Incluimos las librerias javascript, el script automaticamente buscará el campo con la clase multi

1
2
<script language="javascript" src="js/jquery-1.31.js"></script>
<script language="javascript" src="js/jquery.MultiFile.pack.js"></script>

PHP para recibir los archivos

Este script permite subir multiples archivos como un array, asi que empezemos por ahi

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
    $cuales="";
     /// Vemos cuantos archivos hemos subido
    $nro=count($_FILES["ffoto"]["name"]);
    /// Empezamos el array
    for ($i=1; $i<$nro; $i++) {
    $file_name=$_FILES["ffoto"]["name"][$i];
    $file_size=$_FILES["ffoto"]["size"][$i];
    $file_type=$_FILES["ffoto"]["type"][$i];
    if($file_name!=""){
        // verifica carpeta
        $nombre_archivo=$_POST['femail'];
        if (!file_exists('userfiles'.$nombre_archivo)) {
            mkdir('userfiles/'.$nombre_archivo,0777);
        }
        $path="userfiles/".$nombre_archivo;    
        // sube archivo
        copy($_FILES["ffoto"]['tmp_name'][$i], $path.'/'.$file_name) ;
        echo '<p align="center">Your file <b>'.$file_name.'</b> was successfully uploaded</p>';
        $cuales.=$file_name." ";
    } else {
        echo '<br><br><p align="center"><b>Error with '.$file_name.'</b></p>';
    }

Puedes decargar este plugin jquery y ver mas ejemplos desde la pagina de su creador

16Mar 2009 6 Comments

Incluir tooltip en mapa de imagenes jquery

Categories: AJAX, CSS - Tags: ,

Usando un plugin para jquery voy a explicar como colocar tooltips en un mapa de imagen.

HTML del mapa de imagenes

Es practicamente igual que cualquier mapa de imagenes, title es la descripcion

1
2
3
4
5
6
7
8
9
10
11
12
<p align="center">
    <img src="mapa.gif" border="0" usemap="#mimapa" id="map" width="480" height="269" />
<map name="mimapa" id="mimapa">
  <area shape="circle" coords="199,51,9" href="http://www.koblenz.de/" alt="" title="Toboganes" />
  <area shape="circle" coords="169,53,9" href="http://www.wiesbaden.de/" alt="" title="Mamut" />
  <area shape="circle" coords="137,28,9" href="http://www.mainz.de/" alt="" title="Pistas Blandas" />
  <area shape="circle" coords="123,60,9" href="http://www.frankfurt.de/" alt="" title="Super Tobogan Gigante" />
  <area shape="circle" coords="88,24,9" href="http://www.mannheim.de/" alt="" title="Black Hole" />
  <area shape="circle" coords="89,76,9" href="http://www.heidelberg.de/" alt="Heidelberg" title="Piscina Cadetes" />
  <area shape="circle" coords="83,97,9" href="http://www.stuttgart.de/" alt="" title="Piscina Infantes" />
</map>
</p>

Agregar el plugin

Para agregar jquery y e plugin bastan un par de lineas de codigo

1
2
<script language="javascript" src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript" src="jquery.tooltip.min.js" type="text/javascript"></script>

Al plugin lo podemos configurar con una sola linea de codigo, pero yo voy a agregarle algunos detalles adicionales

1
2
3
4
5
6
7
8
9
10
11
12
<script language="javascript" type="text/javascript">
$(function() {
    $("map *").tooltip({
        positionLeft: true,
        delay: 0,
        fade: 250,
        extraClass: "pretty",
        fixPNG: true,
        opacity: 0.95,
     });
});  
</script>

Estilos para el tooltip

Estos varian segun lo que querramos hacer, lo mas importante es la position absolute y el z-index

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#tooltip {
    position: absolute;
    z-index: 3000;
    border: 1px solid #111;
    background-color: #eee;
    padding: 5px;
    opacity: 0.85;
}
#tooltip h3, #tooltip div { margin: 0; }
#tooltip.pretty {
    border: none;
    width: 210px;
    padding:20px;
    height: 135px;
    opacity: 0.8;
    background: url('shadow.png');
}






Suscribete

Ahora también puedes suscribirte via correo electrónico

Ingresa tu dirección de correo:

Delivered by FeedBurner


Facebook

Mi Galeria flickr

[ Ver más ]

© Copyright - Miguel Manchego - Design by Kriesi