Joomla cómo determinar si el usuario está viendo la página principal

Joomla 1.0

En Joomla! 1.0.x fue posible determinar si el usuario estaba viendo la primera página utilizando código como este:

<?php
if ($option == 'com_frontpage' || $option == '') {
        echo 'Esta es la página principal';
}
?> 

Joomla 1.5 

Pero en Joomla! 1.5.x el componente com_frontpage ya no está presente. Esta es la forma de lograr el mismo resultado en Joomla! 1.5.x

<?php
$menu = & JSite::getMenu();
if ($menu->getActive() == $menu->getDefault()) {
        echo 'Esta es la página principal';
}
?> 

Esto funciona mediante la comprobación para ver si el elemento de menú activa actual es el valor predeterminado.

Joomla 2.5 and 3.x series

Hay algunas diferencias en 1.6/1.7/2.5 para evitar errores de normas estrictas. Utilice el siguiente código para un sitio donde todo el contenido está en el mismo idioma:

<?php
$app = JFactory::getApplication();
$menu = $app->getMenu();
if ($menu->getActive() == $menu->getDefault()) {
        echo 'Esta es la página principal';
}
?> 

Para los sitios multilingües la primera página depende del idioma seleccionado en ese momento, por lo que tendrá que utilizar un código como este:

<?php
$app = JFactory::getApplication();
$menu = $app->getMenu();
if ($menu->getActive() == $menu->getDefault( 'en-GB' )) {
        echo 'Esta es la página principal';
}
elseif ($menu->getActive() == $menu->getDefault( 'fr-FR' )) {
        echo 'Accueil';//Bienvenido
}
?> 

Para los sitios multilingües aussi podría ser necesario para mostrar un código / html específico para todas las páginas de inicio por defecto.

<?php
$app = JFactory::getApplication();
$menu = $app->getMenu();
$lang = JFactory::getLanguage();
if ($menu->getActive() == $menu->getDefault($lang->getTag())) {
        echo 'Esta es la página principal';
}
else {
        echo 'Accueil';//Bienvenido
}
?> 

Funciones PHP, Tips

-- Calcular el primer y ultimo dia del mes

$primerMes = date('Y-m-01', time()); // Primer dia del mes
$ultimoMes = date('Y-m-t', time()); // Ultimo dia del mes

--Comparar fecha 1

$fecha = strtotime("2010-02-22");
$fecha2 = strtotime("2010-02-23");

if ($fecha2 > $fecha) {
    echo "es mas grande fecha2!!";
}

-- Configurar la hora de internet

<?php
date_default_timezone_set('UTC');//por defecto
date_default_timezone_set('America/Lima');//para lima

echo date('Y-m-d h:i:s').'<br/>';
echo date("Y-m-d H:i:s ", strtotime("2013-07-24T14:56:28Z"));
?>

Frases, pensamientos, refranes

1. Lo que se hace por AMOR esta mas allá del BIEN y del MAL - (Friedrich Nietzsche)

Funciones jQuery

Funciones jQuery

//Ambas líneas son equivalentes
jQuery('div').remove();
$('div').remove();

// jQuery: Esconder, ocultar
$('div').hide(); //Esconde el div
$('div').show(); //Muestra el div

// Encadenando métodos
$('div').addClas('error').fadeIn();

// jQuery: Selectors
$('input'); // selección de un tag
$('.error'); // selección de una clase
$('#frmAgregar'); // selección de un id
$('#frmAgregar input.error'); // podemos mezclarlos
$('div:animated'); // elementos siendo animados
$('input[type="text"]'); //atributos de un tag    
$('input[type!="text"]'); //atributos de un tag    (neg.)
$('input[name*="dob"]'); //el atributo contiene 'dob'
$('input[name^="dob"]'); //el atributo termina en'dob'
$('input[name$="dob"]'); //el atributo termina en'dob'
$('input:checkbox '); // $('input[type="checkbox"]');
$('input:checked '); // elementos marcados
$('ul.nav > li'); // selector hijo (inmediato)
$("div:contains('John')"); // contiene (innerHtml)
$("tr:even") // pares (empienza en 0)
$("tr:odd") // impares (empienza en 0)
$("tr:first"); // primera fila
$("tr:last"); // primera fila
$("ul li:nth-child(2)"); // segundo hijo

// jQuery: Attributes
$("div").addClass('selected'); // agrega la clase
$("div").removeClass('selected'); // quita la clase
$("div").hasClass('sel');//tiene clase sel? (booleano)
$("div").attr('id'); // obtiene el atributo
$("div").attr('id','nav'); // setea el atributo
$("div").removeAttr('id'); // quita el atributo
$("div").html(); // obtiene el html
$("div").html("Hi"); // setea el html
$("input#txtEdad").val(); // obtiene el valor

// jQuery: Traversing
$("div").add("a"); // agrega elementos al selector
$("li").each(callback); // Itera la seleccion
$("ul").first(); // devuelve el primero
$("li.quinto").next(); // devuelve el siguiente
$("li.sexto").prev(); // devuelve el anterior
$("a#toc").parent(); // devuelve el padre
$("a#toc").parents(); // devuelve los padres
$("a#toc").sibilings(); // devuelve los hermanos

// jQuery: AJAX
$.ajax({
    url: 'ajax-load-wimarbueno.php',
    type: 'get',//GET, POST
    cache: false,
    dataType: 'html',//html, jsonp
    beforeSend: function() {
        $('#ajax-cont').html('


');
    },
    success: function(response) {
        $('#ajax-cont').html('');
        $('#ajax-cont').fadeOut("slow").html(response).fadeIn("slow");
    },
    error: function(jqXHR, exception) {
        if (jqXHR.status === 0) {
            $('#ajax-cont').html('Not connect. Verify Network.');
        } else if (jqXHR.status == 400) {
            $('#ajax-cont').html('Server understood the request but request content was invalid. [400].');
        } else if (jqXHR.status == 401) {
            $('#ajax-cont').html('Unauthorised access. [401].');
        } else if (jqXHR.status == 403) {
            $('#ajax-cont').html('Forbidden resouce can"t be accessed. [403].');
        } else if (jqXHR.status == 404) {
            $('#ajax-cont').html('Requested page not found. [404].' + jqXHR.status );
        } else if (jqXHR.status == 500) {
            $('#ajax-cont').html('Internal Server Error. [500].');
        } else if (jqXHR.status == 503) {
            $('#ajax-cont').html('Service Unavailable. [503]');
        } else if (exception === 'parsererror') {
            $('#ajax-cont').html('Requested JSON parse failed.');
        } else if (exception === 'timeout') {
            $('#ajax-cont').html('Time out error.');
        } else if (exception === 'abort') {
            $('#ajax-cont').html('Ajax request aborted.');
        } else {
            $('#ajax-cont').html('Uncaught Error. ' + jqXHR.responseText);
        }
    }
}); //fin ajax 

// jQuery: Serializar un formulario
$("form").on("submit", function(event) {
    event.preventDefault();
    console.log($(this).serialize());
});

01.- PHP - JSON -Si en PHP respondes con mensaje en JSON algo como:

$mysqli = new mysqli("localhost", "wilzonmj", "wilzon_mj", "php_basededatos");
$mysqli->set_charset('UTF8');
.
.
.
$result = $mysqli->query($sqlReport);
if ($mysqli->affected_rows > 0) {
    echo json_encode(array(
        "success" => true,
        "fileName" => $nombreDelArchivo,
        "count" => $mysqli->affected_rows,
        "messagge" => '<div style="text-align:center;">Se exportó correctamente' . $mysqli->affected_rows . ' registros en el archivo con el nombre:' . $nombreDelArchivo . '. <br /><a href="exported-csv/' . $nombreDelArchivo . '">Click aquí para descargar</a></div>'
    ));
} else {
    echo json_encode(array(
        "success" => false,
        "fileName" => $dateToday,
        "messagge" => 'Sentimos el servidor está demasiado ocupado para ejecutar esta orden.'
    ));
}

a
En JS se recuperaria de esta manera:

 $.ajax({
    url: opciones.ruta_php,
    type: 'get',
    data: {
        id: '18',
        categoria: '1' 
    },
    cache: false,
    dataType: 'html',
    beforeSend: function() {
        $('.ajax-msg').html("<div class='loading'></div>");
    },
    success: function(response) {
        $('.ajax-msg').html('');

        var arrayReporte = JSON.parse(response);//con estor esuperamos el JSON
        alert(arrayReporte.fileName)

        $('.message').fadeOut("slow").html(arrayReporte.messagge).fadeIn('slow');
    },
    error: function(jqXHR, exception, error) {
        var err = exception + ", " + error;
        console.log("Error: " + err);
        $('.ajax-msg').html('<div class="alert alert-error"><button data-dismiss="alert" class="close" type="button">×</button><strong>Error!</strong> No se pue ejecutar.</div>')
    }
}); //fin ajax  

Huaya es la fruta que cura el Cáncer

Huaya, guayum, maco, quenepa, papamundo, limoncillo, mamón y mamoncillo son los nombres que recibe este delicioso fruto que además de atribuirle propiedades curativas asombrosas, sirve para espantar parásitos y hasta murciélagos. 

Según Investigación de una Universidad Británica la Huaya es la fruta que cura el Cáncer y es mas fuerte que 10,000 quimioterapias y no quieren que se sepa porque sino las grandes cadenas de medicamentos dejarían de vender sus productos. El anticancerigeno mas poderoso del planeta.

Es un árbol de buen porte que puede alcanzar los 30 m de altura. Nativo de la República Dominicana. Su sabor tiende a ser muy dulce es de color melón.

El fruto:
Drupa redonda de 2-4 cm de diámetro de cáscara verde delgada y quebradiza principalmente en su temporada de maduración y se agrupan en grandes ramos de hasta 10 cm de longitud. Contienen en pocas ocasiones dos semillas blancuzcas que normalmente ocupan la mayor parte del fruto y son rodeadas de una pulpa salmón gelatinosa, jugosa y comestible. Este madura en temporadas secas o en verano.

Los frutos maduros son agridulces, mucilaginosos y algo laxantes. Son excepcionalmente ricos en hierro (0,93mg por 100g) y fósforo (50,4mg por 100g). En Puerto Rico y Florida ha habido cierto trabajo de selección de variedades que producen frutos de características superiores. Se debe tener cuidado al consumir el fruto fresco, especialmente por los niños, ya que la semilla rodeada por la pulpa es resbaladiza y si es tragada accidentalmente puede atorarse en la garganta y causar la muerte por sofocación.

Uso :
El uso principal son sus frutos, que se consumen frescos o se hacen conservas y frutas enlatadas, principalmente en América Central y del Sur. En Colombia y Venezuela, por ejemplo, se consume fresco e incluso se utiliza para preparar bebidas refrescantes enlatadas. El fruto, además de ser dulce y de sabor vinoso es de un color amarillo salmón y produce un tinte firme, aunque casi no es empleado para tal fin. La almendra tostada se parece a la del marañón y es muy apetecida por los niños. Con la pulpa se puede preparar cerveza o aguardiente. Los indígenas del Orinoco consumen la semilla cocinada como sustituto de la yuca. En Nicaragua las semillas se muelen con todo y pulpa luego se hacen en horchata para curar los parásitos en los niños. O bien, se usa en refresco, postres, helados y conservas. A pesar de que el uso como frutal es el principal, la madera de este árbol es de buen diámetro y apta para obras de construcción y carpintería general.

En Colombia incluso se emplea en obras finas de ebanistería. Sin embargo, se ha de usar en interiores pues no es una madera durable. Es blanco amarillenta, compacta y medianamente pesada (0.61), de grano fino y bonito aspecto. También tiene usos en medicina tradicional. La bebida de la decocción de la hoja con sal se usa para desórdenes nerviosos y fiebres. Las gárgaras con el jugo de la hoja macerado se emplean para dolor e infecciones de garganta. Con la semilla tostada y molida se hace un jarabe o té que se toma para la diarrea. En Venezuela, se utiliza para este mismo fin mezclado con miel de abeja.

En Panamá, las hojas son esparcidas en casas donde hay muchas pulgas, y se dice que estas son atraídas por las hojas, que luego son arrojadas fuera de la casa. Algunos creen que las hojas en realidad matan las pulgas y ahuyentan a los murciélagos. Las flores son ricas en néctar y apreciadas por colibríes y abejas. La miel producida es algo oscura pero de agradable sabor.

Ecología:
Crece en elevaciones bajas a medianas hasta los 1000 msnm, con climas secos o húmedos con precipitaciones de 750 a 2500 mm, y requiere una estación seca marcada para florecer y producir de manera satisfactoria. Puede tolerar heladas. Crece en una amplia variedad de suelos,pero prefiere suelos profundos, fértiles, de origen calcáreo. Prospera incluso en suelos empobrecidos, en Yucatán prospera en suelos calizos con escasa tierra, colonizando muchas zonas.

Enfermedades y plagasEnfermedades y plagas:
El árbol es hospedero de la mosca negra de los cítricos (Aleurocanthus woglumi), pero varios parasitoides (Prospaltella spp., Eretmocerus serius, Amitus hesperidium) proporcionan un control efectivo de esta plaga. En Florida, Armillariella (Clitocybe) tabescens causa pudrición de la raíz; Fusarium y Phyllosticta causan manchas foliares.

Fuente: http://es.wikipedia.org/wiki/Melicoccus_bijugatus

La terapia del limón congelado, 10.000 veces más potente que la quimioterapia

LA TERAPIA DEL LIMÓN CONGELADO, 10.000 veces más potente que la quimioterapia
(Cualquier tipo de limón sirve, el de la foto o el limón amarillo)

Muchos profesionales en restaurantes y nutricionistas están utilizando o consumiendo el limón entero, donde nada se desperdicia.

¿Cómo puede usar el limón entero sin residuo?
Simple ... Lavar el limón y colocar en el congelador de tu refrigerador. Una vez que el limón se congela, utiliza tu rallador y limón entero (no es necesario pelarlo) y espolvorea encima de tu alimento.

Espolvorea en tus bebidas, vinos, ensaladas, helados, sopas, pasta, salsa de pasta, arroz, sushi. .. Todos los alimentos tienen un sabor inesperadamente maravilloso, algo que nunca has probado antes.

Probablemente pensabas que sólo el jugo de limón contenía vitamina C.

Bueno, sabemos que las cáscaras de limón contienen vitaminas 5 a 10 veces más que el jugo de limón en sí. Y sí, esto es lo que te has estado perdiendo. Pero a partir de ahora, al seguir este sencillo procedimiento para congelar el limón entero y espolvorear encima de tus platos, puedes consumir todos los nutrientes y obtener más salud.

Cáscaras de limón rejuvenecen tu salud en la erradicación de los elementos tóxicos del cuerpo. genial! Aprovecha los beneficios sorprendentes de limón!

Limón (Citrus) es un producto milagroso para matar las células cancerosas.

Su sabor es agradable y no produce los horribles efectos de la quimioterapia. ¿Cuántas personas mueren mientras este secreto se mantiene, a fin de no poner en peligro las grandes corporaciones multimillonarias? Puedes usar cualquier tipo de limón o lima.

Puedes comer la fruta de diferentes maneras: la pulpa, jugos, bebidas, preparar helados, pasteles, etc ... Se le atribuye muchas virtudes, pero lo más interesante es el efecto que produce sobre los quistes y los tumores. Este fruto esta probado contra los cánceres de todos los tipos. Algunos dicen que es muy útil para todas las variantes del cáncer.

También es considerado como un espectro antimicrobiano contra infecciones bacterianas y hongos, eficaces contra los parásitos internos y los gusanos, regula la presión sanguínea y la tensión arterial es un antidepresivo y combate el nerviosismo.

Es un alcalinizante extraordinario que regulariza el pH de la sangre para tener una salud óptima.

La fuente de esta información es fascinante: procede de uno de los mayores fabricantes de la droga en el mundo, dice que después de más de 20 pruebas desde 1970, los extractos revelaron que:

Destruye las células malignas en 12 tipos de cáncer, incluyendo el de colon, de mama, próstata, pulmón y páncreas ... Los compuestos de este fruto demostrado ser 10 000 veces mejor que el producto Adriamycin, un fármaco comúnmente usado en el mundo como la quimioterapia, la disminución del crecimiento de células cancerosas. Y lo que es todavía más asombroso: este tipo de terapia con el extracto de limón sólo destruye las células malignas del cáncer y no afecta las células sanas. Más vale tarde que nunca! Comparte esto a tus amigos y conocidos.

Calcular el tamaño (ancho y alto) del navegador automáticamente con jQuery

Calcular el tamaño (ancho y alto) del navegador automáticamente con jQuery

/**
 * Resize
 */
jQuery(document).ready(function($) {
    redimencionar();
    $(window).resize(redimencionar);
});
function redimencionar() {
    jQuery(document).ready(function($) {
        var height = $(window).height();
        var width = $(window).width();
        $('.wmb').html('Screen: ' + width + ' x ' + height);
    });
}
/**
 * End Resize
 */

//Redimensionamiento otro modo y más corto ;)
jQuery(document).ready(function($) {
    $(window).bind("load resize", function() {
        $('body').append('<div class="wmb" style="width: 150px;height: 150px;border: 1px solid green;color: green;font-family: Arial;font-size: 14px;position: fixed;left: 1px;top: 1px;z-index: 99999;"></div>');
        var height = $(window).height();
        var width = $(window).width();
        $('.wmb').html('Screen: ' + width + ' x ' + height);
    })
})

Personalización de un bloque en Drupal

Personalización de un bloque en Drupal 7.

Ejemplo:
Si tu dominio es www.WiMarBueno.com/Nosotros.html
arg(0) es Node
arg(1) es el NID  (ID) del node

<?php if ((arg(0)=="node")&&(arg(1)>0)) $node=node_load(arg(1)); ?>
<?php if ($node->field_description[0]['value']) { ?>
<div id="<?php print 'pag-'.$node->nid; ?>" class="wmb-description-desc">
   <h2 class="node-title">
     <?php print $node->title;?>
   </h2>
   <div class="field-description">
     <?php print $node->field_description[0]['value']; ?>
   </div>
</div>
<?php } ?>
<?php if (!$node->field_description[0]['value']) { ?>
<div class="wmb-description">
   <h2 class="node-title">
     <?php print $node->title;?>
   </h2>
   <div class="field-description">
     <?php print $node->field_description[0]['value']; ?>
   </div>
</div>
<?php } ?>

Drupal 7, personalizar field collection

Personalizar en Drupal 7 el módulo field_collection.

1. Vamos al modulo field_collection copiamos el archivo field-collection-item.tpl.php a nuestra carpeta template  de nuestra plantilla.
2.  Le renombramos con el nombre de fiel collection que creamos, por ejemplo he creado en mi tipo de contenido con el nombre "field_slider_group_image". y ahora le cambiamos al nombre "field-collection-item--field_slider_group_image.tpl.php" y modificamos a nuestro gusto.

En la parte inferior un ejemplo:

//Nombre archivo: field-collection-item--field_slider_group_image.tpl.php

<?php
/**
 * @file
 * Default theme implementation for field collection items.
 *
 * Available variables:
 * - $content: An array of comment items. Use render($content) to print them all, or
 *   print a subset such as render($content['field_example']). Use
 *   hide($content['field_example']) to temporarily suppress the printing of a
 *   given element.
 * - $title: The (sanitized) field collection item label.
 * - $url: Direct url of the current entity if specified.
 * - $page: Flag for the full page state.
 * - $classes: String of classes that can be used to style contextually through
 *   CSS. It can be manipulated through the variable $classes_array from
 *   preprocess functions. By default the following classes are available, where
 *   the parts enclosed by {} are replaced by the appropriate values:
 *   - entity-field-collection-item
 *   - field-collection-item-{field_name}
 *
 * Other variables:
 * - $classes_array: Array of html class attribute values. It is flattened
 *   into a string within the variable $classes.
 *
 * @see template_preprocess()
 * @see template_preprocess_entity()
 * @see template_process()
 */

//dpm($content, "WMB");
?>

<div class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
    <div class="content"<?php print $content_attributes; ?>>
        <?php
//      print render($content);
        if (isset($content['field_slider_main_url_external'][0]['#markup']) != ''):
            $link = $content['field_slider_main_url_external'][0]['#markup'];
            print '<a href="' . url($link, array('absolute' => false)) . '">';
            print render($content['field_slider_main_image']);
            print '</a>';
        elseif (isset($content['field_slider_main_url_internal'][0]['#href']) != ''):
            $link = $content['field_slider_main_url_internal'][0]['#href'];
            print '<a href="' . url($link, array('absolute' => false)) . '">';
            print render($content['field_slider_main_image']);
            print '</a>';
        elseif (isset($content['field_slider_main_url_catalog_ta'][0]['#href']) != ''):
            $link = $content['field_slider_main_url_catalog_ta'][0]['#href'];
            print '<a href="' . url($link, array('absolute' => false)) . '">';
            print render($content['field_slider_main_image']);
            print '</a>';
        else:
            print render($content['field_slider_main_image']);
        endif;
        ?>
    </div>
</div>

Remover el meta generador de Joomla

Si has desarrollado sitio web en el gestor de admonostración (CMS) Joomla, viene por defecto el texto:  "<meta name="generator" content="Joomla! - Open Source Content Management" />".

Si deseas eliminarlo, se tiene que insertar este código en el index.php, de nuestra plantilla, antes del texto "// get params".

Puedes poner la palabra que gustes, por ejemplo:

Puesdes poner el nombre de tu  dominio: "WiMarBueno.com".
ó con esta función de PHP "$_SERVER['SERVER_NAME']" le agregas automáticamente el nombre de tu dominio.

//Remove text Joomla
$document = JFactory::getDocument();
$document->setGenerator($_SERVER['SERVER_NAME']);
//Remove text Joomla

// get params

Error 404 personalizado en Joomla

¿ Como hacer un error personalizado en Joomla ?

1.- Ir en la plantilla e ir en el archivo error.php, al inciar el código insertar este código

//Customize 404 error
if (($this->error->getCode()) == '404') {
    header('Location: /error-404'); //Puede ser cualquiera de las p+aginas qie se desee direccionar
    exit;
}
//Customize 404 error

Menu Dropdown con jQuery

Menu Dropdown con jQuery, ejemplo que se puede adaptar segín necesidad.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Dropdown menu | WiMarBueno</title>
        <link rel="shortcut icon" href="http://wimarbueno.com/favicon.ico?1904201303" type="image/vnd.microsoft.icon" />
        <meta name="description" content="Desarrollo de Dropdown menu con el Framework jQuery, CSS" />
        <meta name="keywords" content="jQuery, JavaScript, CSS" />  
        <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
        <style type="text/css">
            ul.topnav {
                list-style: none;
                padding: 0 20px;    
                margin: 0;
                float: left;
                width: 920px;
                background: #222;
                font-size: 1.2em;
                background: #333333;
            }
            ul.topnav li {
                float: left;
                margin: 0;    
                padding: 0 15px 0 0;
                position: relative; /*--Declare X and Y axis base for sub navigation--*/
            }
            ul.topnav li a{
                padding: 10px 5px;
                color: #fff;
                display: block;
                text-decoration: none;
                float: left;
            }
            ul.topnav li a:hover{
                background: #222222;
            }
            ul.topnav li span { /*--Drop down trigger styles--*/
                width: 17px;
                height: 35px;
                float: left;
                background: green;
            }
            ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
            ul.topnav li ul.subnav {
                list-style: none;
                position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
                left: 0; top: 35px;
                background: #333;
                margin: 0; padding: 0;
                display: none;
                float: left;
                width: 170px;
                border: 1px solid #111;
            }
            ul.topnav li ul.subnav li{
                margin: 0; padding: 0;
                border-top: 1px solid #252525; /*--Create bevel effect--*/
                border-bottom: 1px solid #444; /*--Create bevel effect--*/
                clear: both;
                width: 170px;
            }
            html ul.topnav li ul.subnav li a {
                float: left;
                width: 145px;
                background: #333 ;
                padding-left: 20px;
            }
            html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
                background: #222  ; 
            }
        </style>

        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

                $("ul.topnav li span").click(function() { //When trigger is clicked...

                    //Following events are applied to the subnav itself (moving subnav up and down)
                    $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

                    $(this).parent().hover(function() {
                    }, function() {
                        $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
                    });

                    //Following events are applied to the trigger (Hover events for the trigger)
                }).hover(function() {
                    $(this).addClass("subhover"); //On hover over, add class "subhover"
                }, function() {    //On Hover Out
                    $(this).removeClass("subhover"); //On hover out, remove class "subhover"
                });
            });
        </script>
    </head>
    <body>
        <div style="width: 600px;margin: 0 auto;position: relative;">
            <header>
                <nav>
                    <ul class="topnav">
                        <li><a href="#">Home</a></li>
                        <li>
                            <a href="#">Tutorials</a>
                            <ul class="subnav">
                                <li><a href="#">Sub Nav Link</a></li>
                                <li><a href="#">Sub Nav Link</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">Resources</a>
                            <ul class="subnav">
                                <li><a href="#">Sub Nav Link</a></li>
                                <li><a href="#">Sub Nav Link</a></li>
                            </ul>
                        </li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Advertise</a></li>
                        <li><a href="#">Submit</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </nav>
            </header>
            <section>
                <br/>
                <br/>
                <p>Ejemplo de menu Dropdown con jQuery...</p>
            </section>
            <footer>                
                <p>Desarrollado por <a href="http://wimarbueno.com/" target="_blank" title="WiMarBueno.com">WiMarBueno.com</a> ;) 2013</p>
            </footer>
        </div>
    </body>
</html>

Centrar DIV en navegador con jQuery

Ejemplo de como centrar de forma vertical y horizontal el DIV o cualquiera de las etiquetas HTML.

1.- Modo 1:

/**
 * version plugins
 * Centrar div en windows ;)
 */
(function($){
    $.fn.extend({
        center: function (options) {
            var options =  $.extend({ // Default values
                inside:window, // element, center into window
                transition: 0, // millisecond, transition time
                minX:0, // pixel, minimum left element value
                minY:0, // pixel, minimum top element value
                withScrolling:true, // booleen, take care of the scrollbar (scrollTop)
                vertical:true, // booleen, center vertical
                horizontal:true // booleen, center horizontal
            }, options);
            return this.each(function() {
                var props = {position:'absolute'};
                if (options.vertical) {
                    var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
                    if (options.withScrolling) top += $(options.inside).scrollTop() || 0;
                    top = (top > options.minY ? top : options.minY);
                    $.extend(props, {top: top+'px'});
                }

                if (options.horizontal) {
                    var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
                    if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;
                    left = (left > options.minX ? left : options.minX);
                    $.extend(props, {left: left+'px'});
                }
                if (options.transition > 0) $(this).animate(props, options.transition);
                else $(this).css(props);
                return $(this);
            });
        }
    });
})(jQuery);                       

//Modo de uso
jQuery(document).ready(function($){
    $('.wmb').center();                
    $(window).bind('resize', function() {
        $('.wmb').center({transition:300});
    });
})





2.- Modo 2:

/**
 * Version corta para centrar div en la pantalla
 * Sin parámetro
 */
(function($){
    $.fn.extend({
        center: function () {
            return this.each(function() {
                var top = ($(window).height() - $(this).outerHeight()) / 2;
                var left = ($(window).width() - $(this).outerWidth()) / 2;
                $(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
            });
        }
    });
})(jQuery);

//Modo de uso
jQuery(document).ready(function($){
    $('.wmb').center();                                           
})
/**
 * Fin Version corta para centrar div en la pantalla
 **/



//El div
<div class="wmb" style="width: 250px;height: 250px;background: #ccc;">texto aquí...</div>

// Modo 3 centrar titulo verticalmente 

//title center vertical    
var altura = ($("h1#page-title").height() - $("h1#page-title span").height()) / 2;//el hijo resta la altura del padre y se diveide en 2 
$("h1#page-title span").css({
   'margin-top': altura + 'px'
})

CSS medidas para diseño web adaptativo

CSS, sugerencia de medidas y notas para diseño web adaptativo (Responsive Design).

Medidas

960px
768px
480px
320px
200px

 

/************************* Base ******************************/
/************************* Ejemplo. 960px ******************************/
/*style.css*/

/************************* Responsive Design ******************************/
/************************* 960px - 1200px ******************************/
@media only screen and (min-width: 960px) and (max-width: 1200px) {
    
}

/************************* 768px - 960px ******************************/
@media only screen and (min-width: 768px) and (max-width: 959px) {
    
}

/************************* 480px - 768px ******************************/
@media only screen and (min-width: 480px) and (max-width: 767px) {
    
}

/************************* 320px - 480px ******************************/
@media only screen and (min-width: 320px) and (max-width: 479px) {
    
}

/************************* 200px - 320px ******************************/
@media only screen and (min-width: 0px) and (max-width: 319px) {
    
} 

Icono

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon" />

<!-- For non-Retina iPhone, iPod Touch, and Android 2.2+ devices: -->
<link rel="apple-touch-icon" href="/img/WMB_57x57.png" />
<!-- For first-generation iPad: -->
<link rel="apple-touch-icon" sizes="72x72" href="/img/WMB_72x72.png" />
<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon" sizes="114x114" href="/img/WMB_114x114.png" />
<!-- No such device exists yet, so if this value is used, it means the sizes attribute is ignored: -->
<link rel="apple-touch-icon" sizes="228x228" href="/img/WMB_228x228.png" />

jQuery ancla animado

Ancla animado con jQuery.

 
jQuery(document).ready(function($) {
    $('a[href*=#]').click(function() {
        $('html,body').animate({
            scrollTop: '0px'
        }, 1000);
        return false;
    });
});



//modo de uso

<a href="#" style="position: fixed;bottom: 0;left: 0;z-index: 50">Subir</a>

Listar noticias de Facebook con jQuery

Si se desea listar las noticias de Facebook con jQuery podemos usar escript.

//Facebook
function fbFetch() {
    jQuery(document).ready(function($) {
        //Set Url of JSON data from the facebook graph api. make sure callback is set with a '?' to overcome the cross domain problems with JSON
        var url = "https://graph.facebook.com/WiMarBuenoPeru/posts?limit=10&access_token=194625310600329|fLcRyALuBG6xSQ2A5mMZ6p7UUBY&callback=?";

        //Use jQuery getJSON method to fetch the data from the url and then create our unordered list with the relevant data.
        $.getJSON(url, function(json) {
            var html = "<ul>";
            //loop through and within data array's retrieve the message variable.
            $.each(json.data, function(i, fb) {
                if (fb.from.name == "Recycle Cartons") {
                    if (fb.message != undefined) {
                        var day = fb.created_time.substring(9, 10) + '/';
                        var month = fb.created_time.substring(6, 7) + '/';
                        var year = fb.created_time.substring(0, 4) + '/';
                        html += "<li><div class=\"views-field views-field-created\"><span class=\"field-content\">Update " + timeAgo(fb.created_time) + "</span></div><a href=\"http://www.facebook.com/RecycleCartons?ref=stream\">" + fb.message + "</a></li>";
                    }
                }
            });
            html += "</ul>";

            //A little animation once fetched
            $('#facebook-list').animate({
                opacity: 0
            }, 500, function() {
                $('#facebook-list').html(html);
            });
            $('#facebook-list').animate({
                opacity: 1
            }, 500)
        });

    });
}

Listar noticias de Twitter con jQuery

Si se desea listar las noticias publicadas por ciertos usuarios de Twitter, se puede usar este script.

//Twitter
function twFetch() {
    jQuery(document).ready(function($) {
        //Set Url of JSON data from the facebook graph api. make sure callback is set with a '?' to overcome the cross domain problems with JSON
        var url = "https://api.twitter.com/1/statuses/user_timeline.json?screen_name=wimarbueno&include_rts=true&include_entities=true&count=10&callback=?";

        //Use jQuery getJSON method to fetch the data from the url and then create our unordered list with the relevant data.
        $.getJSON(url, function(json) {
            var html = "<ul>";
            //loop through and within data array's retrieve the message variable.            
            $.each(json, function(i, tw) {
                html += "<li><div class=\"views-field views-field-created\"><span class=\"field-content\">Update " + timeAgo(tw.created_at) + "</span></div><a href=\"https://twitter.com/RecycleCartons\" target=\"_blank\">" + tw.text + "</a></li>";
            });
            html += "</ul>";

            //A little animation once fetched
            $('#twitter-list').animate({
                opacity: 0
            }, 500, function() {
                $('#twitter-list').html(html);
            });

            $('#twitter-list').animate({
                opacity: 1
            }, 500);
        });
    });
}



/**
 * relative time calculator FROM TWITTER
 * @param {string} twitter date string returned from Twitter API
 * @return {string} relative time like "2 minutes ago"
 */
function timeAgo(dateString) {
    var rightNow = new Date();
    var then = new Date(dateString);

    if (jQuery.browser.msie) {
        // IE can't parse these crazy Ruby dates
        then = Date.parse(dateString.replace(/( \+)/, ' UTC$1'));
    }

    var diff = rightNow - then;
    var second = 1000,
            minute = second * 60,
            hour = minute * 60,
            day = hour * 24,
            week = day * 7;

    if (isNaN(diff) || diff < 0) {
        return ""; // return blank string if unknown
    }
    if (diff < second * 2) {
        // within 2 seconds
        return "right now";
    }
    if (diff < minute) {
        return Math.floor(diff / second) + " seconds ago";
    }
    if (diff < minute * 2) {
        return "about 1 minute ago";
    }
    if (diff < hour) {
        return Math.floor(diff / minute) + " minutes ago";
    }
    if (diff < hour * 2) {
        return "about 1 hour ago";
    }
    if (diff < day) {
        return  Math.floor(diff / hour) + " hours ago";
    }
    if (diff > day && diff < day * 2) {
        return "yesterday";
    }
    if (diff < day * 365) {
        return Math.floor(diff / day) + " days ago";
    }
    else {
        return "over a year ago";
    }
} // timeAgo()

Detectar navegador con jQuery

Si se desea detectar navegador con jQuery, pdemos usar la siguiente script.

/*
* jQuery Browser Detect
*/

//Script para comprobar rutas de ficheros fisicos.
function file_exists (url) {
    var req = this.window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
    if (!req) {
        throw new Error('XMLHttpRequest not supported');
    }

    req.open('HEAD', url, false);
    req.send(null);
    if (req.status == 200){
        return true;
    }
    return false;
}

//Especificamos a jQuery los navegadores Util para diferenciar Safari de Chrome).
var userAgent = navigator.userAgent.toLowerCase();
jQuery.browser = {
    version: (userAgent.match( /.+(?:rv|it|ra|ie|me)[\/: ]([\d.]+)/ ) || [])[1],
    chrome: /chrome/.test( userAgent ),
    safari: /webkit/.test( userAgent ) && !/chrome/.test( userAgent ),
    opera: /opera/.test( userAgent ),
    msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
    mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};



//Ejecutamos las condiciones si el fichero existe o no.
jQuery(document).ready(function($){
    var WMB_URL_CSS = '/sites/all/themes/wmb/css/browser/';  
    jQuery.each(jQuery.browser, function(i, val) {            
        if(file_exists(WMB_URL_CSS + "ie9.css") ){
            if(i=="msie" && jQuery.browser.version.substr(0,3)=="9.0"){
                $('head').append('<link rel="stylesheet" href="'+WMB_URL_CSS+'ie9.css" type="text/css" />');
            }
        }

        if(file_exists(WMB_URL_CSS + "ie8.css") ){
            if(i=="msie" && jQuery.browser.version.substr(0,3)=="8.0"){
                $('head').append('<link rel="stylesheet" href="'+WMB_URL_CSS+'ie8.css" type="text/css" />');
            }
        }

        if (file_exists(WMB_URL_CSS + "ie7.css")){
            if(i=="msie" && jQuery.browser.version.substr(0,3)=="7.0"){
                $('head').append('<link rel="stylesheet" href="'+WMB_URL_CSS+'ie7.css" type="text/css" />');
            }
        }

        if (file_exists(WMB_URL_CSS + "ie6.css")){
            if(i=="msie" && jQuery.browser.version.substr(0,3)=="6.0"){
                $('head').append('<link rel="stylesheet" href="'+WMB_URL_CSS+'ie6.css" type="text/css" />');
            }
        }

        if (file_exists(WMB_URL_CSS + "mozilla.css")){
            if($.browser.mozilla){                
                $('head').append('<link rel="stylesheet" href="'+WMB_URL_CSS+'mozilla.css" type="text/css" />');
            }
        }

        if (file_exists(WMB_URL_CSS + "opera.css")){
            if($.browser.opera){
                $('head').append('<link rel="stylesheet" href="'+WMB_URL_CSS+'opera.css" type="text/css" />');
            }
        }           

        if (file_exists(WMB_URL_CSS + "safari.css")){
            if($.browser.safari){                    
                $('head').append('<link rel="stylesheet" href="'+WMB_URL_CSS+'safari.css" type="text/css" />');
            }
        }

        if (file_exists(WMB_URL_CSS + "chrome.css")){
            if($.browser.chrome){                
                $('head').append('<link rel="stylesheet" href="'+WMB_URL_CSS+'chrome.css" type="text/css" />');
            }
        }
    });
});

Degradado CSS3

Degradado CSS3, se pude usar en fondos, cuadros, etc.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
<head>
    <title>Degradado CSS 3</title>
    <style type="text/css">
    div{
        border: 1px solid #000;
        padding:10px;
        margin: 20px;
        height: 130px;
        width: 230px;
        float: left;
    }
    .degradado1{
        background: -webkit-linear-gradient(orange, pink);
        background: -moz-linear-gradient(orange, pink);
        background: -o-linear-gradient(orange, pink);
        background: linear-gradient(orange, pink);
    }
    .degradado2{
        background: -webkit-linear-gradient(top left, #fff, #f66);
        background: -moz-linear-gradient(top left, #fff, #f66);
        background: -o-linear-gradient(top left, #fff, #f66);
        background: linear-gradient(top left, #fff, #f66);
    }
    .degradado3{
        background: -webkit-linear-gradient(180deg, #f0f, #f66);
        background: -moz-linear-gradient(180deg, #f0f, #f66);
        background: -o-linear-gradient(180deg, #f0f, #f66);
        background: linear-gradient(180deg, #f0f, #f66);
    }
    .degradado4{
        background: -webkit-linear-gradient(#00f 50%, #000);
        background: -moz-linear-gradient(#00f 50%, #000);
        background: -o-linear-gradient(#00f 50%, #000);
        background: linear-gradient(#00f 50%, #000);
    }
    .degradado5{
        background: -webkit-linear-gradient(45deg, #66f, #f80, #ffc);
        background: -moz-linear-gradient(45deg, #66f, #f80, #ffc);
        background: -o-linear-gradient(45deg, #66f, #f80, #ffc);
        background: linear-gradient(45deg, #66f, #f80, #ffc);
    }
    .degradado6{
        background: -webkit-linear-gradient(45deg, #66f 10%, #f80 30%, #ffc 60%);
        background: -moz-linear-gradient(45deg, #66f 10%, #f80 30%, #ffc 60%);
        background: -o-linear-gradient(45deg, #66f 10%, #f80 30%, #ffc 60%);
        background: linear-gradient(45deg, #66f 10%, #f80 30%, #ffc 60%);
    }
    .degradado7{
        background: -webkit-linear-gradient(45deg, #66f 160px, #f80 180px, #ffc);
        background: -moz-linear-gradient(45deg, #66f 160px, #f80 180px, #ffc);
        background: -o-linear-gradient(45deg, #66f 160px, #f80 180px, #ffc);
        background: linear-gradient(45deg, #66f 160px, #f80 180px, #ffc);
    }
    .degradado8{
        background: -webkit-linear-gradient(left, #f00, #f80, #ff0, #0f0, #00f, #60f, #c0f);
        background: -moz-linear-gradient(left, #f00, #f80, #ff0, #0f0, #00f, #60f, #c0f);
        background: -o-linear-gradient(left, #f00, #f80, #ff0, #0f0, #00f, #60f, #c0f);
        background: linear-gradient(left, #f00, #f80, #ff0, #0f0, #00f, #60f, #c0f);
    }
    </style>
</head>
<body>    
    <div class="degradado1"></div>
    <div class="degradado2"></div>
    <div class="degradado3"></div>
    <div class="degradado4"></div>
    <div class="degradado5"></div>
    <div class="degradado6"></div>
    <div class="degradado7"></div>
    <div class="degradado8"></div>
</body>
</html>

CSS @viewport

CSS @viewport. El ancho de la pantalla en CSS píxeles en factor de zoom 1.0.

        
<style>
 @-o-viewport { width: device-width; }
 @-moz-viewport { width: device-width; }
 @-ms-viewport { width: device-width; }
 @-webkit-viewport { width: device-width; }
 @viewport { width: device-width; }
</style>  

Cambiar titulo de la página en Drupal

Cambiar título de la página en Drupal en template.php

Ejemplo:

/**
 * Override or insert variables into the page template.
 */
function wmb_process_page(&$variables) {
   ...

    // dpm($variables['title']," WMB");
    // error_log($variables['title']." WMB");
    // changed title page
    if ($variables['title']) == 'welcome to WiMarBueno') {
        $variables['title'] = "bienvenido a la web WiMarBueno";
    }
}

CSS imagen en pantalla entera

CSS, imagen en pantalla entera, sin distrorsionar.

        
.bg-page{height: 200%;left: -50%;position: fixed;width: 200%;}
.bg-page img{display: block;bottom: 0;left: 0;margin: auto;min-height: 50%;min-width: 50%;right: 0;top: 0;}         

CSS3 @font-face Rule

Si se desea importar fuentes de nuestra carpeta podemos realziarlo de esta manera:

 
@font-face {
    font-family: "BebasNeue";
    src: url('../font/BebasNeue/eot/BebasNeue.eot'); /* IE9 Compat Modes */
    src: url('../font/BebasNeue/eot/BebasNeue.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../font/BebasNeue/woff/BebasNeue.woff') format('woff'), /* Modern Browsers */
        url('../font/BebasNeue/ttf/BebasNeue.ttf')  format('truetype'), /* Safari, Android, iOS */
        url('../font/BebasNeue/svg/BebasNeue.svg#BebasNeue') format('svg'), /* Legacy iOS */
        url('../font/BebasNeue/otf/BebasNeue.otf'); /*Original fonts*/
}

Lo mínimo que podría tener son fuentes con estas dos extensiones:

 
@font-face{
    font-family: BebasNeue;
    src: url('../font/BebasNeue/ttf/BebasNeue.ttf'), /* Safari, Android, iOS */
        url('../font/BebasNeue/eot/BebasNeue.eot'); /* IE9 Compat Modes */
} 

Snips en JavaScript

Snips en JavaScript

1.- Para eliminar espacios en blanco de ciertas palabras o frases

   
//-Modo de uso: $("#nombre").attr('value',$('#nombre').val().noSpace(); 
String.prototype.noSpace = function() {
  return this.replace(/(^\s*)|(\s*$)|[ ]/g, "");                
};

2.- Para eliminar caracteres especiales de ciertas palabras o frases

   
//Modo de uso: $("#nombre").attr('value',$('#nombre').val().noCaracteSpecial();
String.prototype.noCaracteSpecial = function() {
   return this.replace(/[^a-zA-Z 0-9.]+/g,' ');
};  

3.- Deshabilitar copiar, pegar y menu contextual de la web

   
$("#content").bind("contextmenu copy paste", function(e) {return  false;});  

4.- Calcular automáticamente el ancho y alto del navegador, y mostrarlo las dimensiones en un div

   
/**
 * Resize
 */
jQuery(document).ready(function($) {
    redimencionar();
    $(window).resize(redimencionar);
});
function redimencionar() {
    jQuery(document).ready(function($) {
        var height = $(window).height();
        var width = $(window).width();
        $('body').append('<div class="wmb" style="display: block;position: fixed;left: 0;top: 0;color: green;font-family: Arial;font-size: 12px;"></div>');
        $('.wmb').html('Screen: ' + width + ' x ' + height);
    });
}
/**
 * End Resize
 */

5.- Agregar clase activo al menu dinamicamente

   
//Menu
var pathname = window.location.pathname;
$('#nav li a[href="' + pathname + '"]').addClass('active');
// /Menu

6.- Obtener el posición del cursor en un textarea, cajas de texto, etc.

   
//Position cursor
(function($, undefined) {
    $.fn.getCursorPosition = function() {
        var el = $(this).get(0);
        var pos = 0;
        if ('selectionStart' in el) {
            pos = el.selectionStart;
        } else if ('selection' in document) {
            el.focus();
            var Sel = document.selection.createRange();
            var SelLength = document.selection.createRange().text.length;
            Sel.moveStart('character', -el.value.length);
            pos = Sel.text.length - SelLength;
        }
        return pos;
    };
})(jQuery);
// /Position cursor

//Modo de uso
var position = $('textarea').getCursorPosition();
console.log('Posicion del cursor: '+ position);

7.- Obtenet el valor, el dódigo de la tecla pulsada

   
$("input").bind('keypress', function(e) {
    alert('Tecla especial: '+e.keyCode+' letra: '+ e.which)
    alert('Tecla especial: '+event.keyCode+' letra: '+ event.which)
});
console.info('keyCode: '+ event.keyCode);//codigo de tecla pulsada
console.info('CharCode: '+ String.fromCharCode(event.which));//obtener valor de tecla pulsada
console.info('CharCode: '+ event.which);//obtener valor de tecla pulsada

8.- Tamaño automáticamente a un textarea

   
$('textarea').css('height', this.scrollHeight) ;

9.- Reemplazar caracter de una frase

 
var text=”esta es una frase y se usara para probar reemplazar”;

//Esto reemplaza todos los q tengan espacio y la letra a en la frase
text.replace(/ /g, “mj”);  //reemplaza los espacion por las letras mj
text.replace(/a/g, “6”'); //reemplaza todo los q tengan la letra a por la 6

//Esto reemplaza al primero que encuentra la letra a en la frase
text.replace(‘a’, ''6”); //reemplaza todo los q tengan la letra a por la 6

10.- convertir cadena a mayúsculas o a minúsculas
Para convertir una cadena a mayúsculas:

 
cadena = 'Texto De Prueba';
cadena = cadena.toUpperCase();
//Devolvería "TEXTO DE PRUEBA"

Y para convertir una cadena a minúsculas:

 
cadena = 'Texto De Prueba';
cadena = cadena.toLowerCase();
//Devolvería "texto de prueba"

11.- Encontrar palabra ó caracter en una cadena

 
//La función indexOf. Devuelve el valor -1 sino lo que busca no se encuentra, y devuelve un entero positivo si la encuentra
var cadena = "Hola mundo, bienvenido al universo.";
if (cadena.indexOf('m') != -1) {
    alert("la letra m encontrada");
}

12.- Encontrar posición de una palabra ó caracter en una cadena

 
//Localiza en qué parte de la cadena se produce un valor specificado
var cadena="Hola mundo, bienvenido al universo.";
var posicion=cadena.indexOf("bienvenido");
alert(posicion);

Resetear form con jQuery

A veces queremos borrar todos los valores de los input al realizar cierta operacion cuando trabajamos con AJAX, para eso podemos usar la siguiente función para borrar todos los contenidos.

        
  $('form').each(function(){
     this.reset();
  });      

Cargar script dinámicamente

Cargar scripts dinámicamente en la cabecera de HTML

<script type='text/javascript'>
//<![CDATA[
include('function.js')
function include(archivo) {
    var nuevo = document.createElement('script');
    nuevo.setAttribute('type', 'text/javascript');
    nuevo.setAttribute('src', archivo);
    document.getElementsByTagName('head')[0].appendChild(nuevo);
}
//]]>
</script>

AJAX con jQuery y Bootstrap

Hola a todos, en esta oportunidad voy a aportar con un tutorial sobre AJAX con jQuery y Bootstrap (se usará en el menu, boton, mensajes).

Se realizará con los mensajes de error personalizados, y otras cosas más.

Pasos:

1.- Nos creamos las carpetas css, lib, img
2.- Descargamos la libreria jQuery y el Bootstrap y lo ponemos en la carpeta lib
3.- Descargamos una imagen para el loading (para mostrar el mensaje cargando...) y el otro para mostrar en el contenido (en la parte inferior estan las imagenes)
4.- Creamos un archivo index.php, ajax-load.php, style.css

- En el index.php
 En el index.php va este contenido

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Ejemplo de AJAX usando el framework jQuery</title>
        <link rel="shortcut icon" href="http://wimarbueno.com/favicon.ico?1904201303" type="image/vnd.microsoft.icon" />
        <meta name="description" content="Desarrollo de AJAX usando el Framework jQuery y Bootstrap, PHP, CSS" />
        <meta name="keywords" content="jQuery, AJAX, JavaScript, PHP, CSS, Bootstrap" />        
        <link rel="stylesheet" href="http://tutoriales.wimarbueno.com/framework/jquery/ajax/lib/bootstrap/css/bootstrap.min.css" />
        <link rel="stylesheet" href="http://tutoriales.wimarbueno.com/framework/jquery/ajax/css/style.css?1904201303" />                            
    </head>
    <body>
        <div id="page-wrapper"><!--Page wrapper-->
            <div id="page"><!--Page-->

                <div id="header"><!--Header-->
                    <header><!--Header-->
                        <div class="section clearfix"><!--Section-->
                            <h1>Ejemplo de AJAX con PHP, CSS, usando el framework jQuery y Bootstrap</h1>                        
                            <div class="navbar">
                                <div class="navbar-inner">
                                    <a class="brand" href="#">jQuery AJAX</a>
                                    <ul class="nav nav-pills">
                                        <li class="active"><a href="http://tutoriales.wimarbueno.com/framework/jquery/ajax/">Inicio</a></li>
                                        <li><a href="http://wimarbueno.com" title="WiMarBueno.com" target="_blank">Web</a></li>
                                        <li><a target="_blank" rel="nofollow" title="WiMarBueno blogspot" href="http://wimarbueno.blogspot.com">Blog</a></li>                                        
                                        <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Mis redes sociales<b class="caret"></b></a>
                                            <ul class="dropdown-menu">                                                
                                                <li><a target="_blank" rel="nofollow" title="WiMarBueno Google Plus" href="https://plus.google.com/100732630291224994703">Google</a></li>
                                                <li><a target="_blank" rel="nofollow" title="WiMarBuenoPeru Facebook " href="https://www.facebook.com/WiMarBuenoPeru">Facebook</a></li>
                                                <li><a target="_blank" rel="nofollow" title="WiMarBueno LinkedIn" href="http://pe.linkedin.com/in/wimarbueno">LinkedIn</a></li>
                                                <li><a target="_blank" rel="nofollow" title="WiMarBueno Twitter" href="http://twitter.com/wimarbueno">Twitter</a></li>
                                            </ul>
                                        </li>
                                    </ul>                                   
                                </div>
                            </div>
                        </div><!-- /Section-->
                    </header><!-- /Header-->
                </div><!--Header-->

                <div id="main-wrapper"><!--Main wrapper-->
                    <div id="main" class="clearfix"><!--Main-->

                        <div id="sidebar-first" class="column sidebar"><!--Sidebar first-->
                            <div class="section"><!--Section-->
                                <div class="block">
                                    <p>
                                        Este es un ejemplo de ajax usando las librer&iacute;as:
                                    </p>                                    
                                    <ol>
                                        <li>Framework jQuery (para AJAX)</li>
                                        <li>Framework Bootstrap (para efectos de menu, el CSS)</li>
                                    </ol>
                                </div>
                            </div><!-- /Section-->                            
                        </div><!-- /Sidebar first-->

                        <div id="content" class="column"><!--Content-->
                            <div class="section"><!--Section-->
                                <div class="block">
                                    <input type="button" name="mostrar" id="mostrar" value="Mostrar" class="btn btn-primary"/>
                                </div>                                    
                                <div class="block">                                    
                                    <div class="msg"></div>                                        
                                    <div id="ajax-cont"></div>
                                </div>
                            </div><!-- /Section-->
                        </div><!-- /Content-->                        
                    </div><!-- /Main-->
                </div><!-- /Main wrapper-->

                <div id="footer-wrapper"><!--Footer wrapper-->
                    <div class="section clearfix"><!--Section-->
                        <p>Desarrollado por <a href="http://wimarbueno.com/" target="_blank" title="WiMarBueno.com">WiMarBueno.com</a> ;) 2013</p>
                    </div><!-- /Section-->
                </div><!--Footer wrapper-->

            </div><!-- /Page-->
        </div><!-- /Page wrapper-->

        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
        <script src="http://tutoriales.wimarbueno.com/framework/jquery/ajax/lib/bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            BASE_URL = 'http://tutoriales.wimarbueno.com/framework/jquery/ajax/';
            WMB_CID = '?1904201303';
            jQuery(document).ready(function($) {
                $("#mostrar").click(function() {//inicio click                
                    $.ajax({
                        url: BASE_URL + 'ajax-load.php?' + WMB_CID,
                        type: 'get',
                        cache: false,
                        dataType: 'html',
                        beforeSend: function() {
                            $('#ajax-cont').html("<div class='loading'></div>")
                        },
                        success: function(response) {
                            $('#ajax-cont').html('')
                            $('#ajax-cont').fadeOut("slow").html(response).fadeIn("slow");
                        },
                        error: function(jqXHR, exception) {
                            if (jqXHR.status === 0) {
                                $('#ajax-cont').html('<div class="alert alert-error"><button data-dismiss="alert" class="close" type="button">×</button><strong>Error!</strong> Not connect. Verify Network.</div>')
                            } else if (jqXHR.status == 400) {
                                $('#ajax-cont').html('<div class="alert alert-error"><button data-dismiss="alert" class="close" type="button">×</button><strong>Error!</strong> Server understood the request but request content was invalid. [400].</div>')
                            } else if (jqXHR.status == 401) {
                                $('#ajax-cont').html('<div class="alert alert-error"><button data-dismiss="alert" class="close" type="button">×</button><strong>Error!</strong> Unauthorised access. [401].</div>')
                            } else if (jqXHR.status == 403) {
                                $('#ajax-cont').html('<div class="alert alert-error"><button data-dismiss="alert" class="close" type="button">×</button><strong>Error!</strong> Forbidden resouce can"t be accessed. [403].</div>')
                            } else if (jqXHR.status == 404) {
                                $('#ajax-cont').html('<div class="alert alert-error"><button data-dismiss="alert" class="close" type="button">×</button><strong>Error!</strong> Requested page not found. [404].' + jqXHR.status + '</div>')
                            } else if (jqXHR.status == 500) {
                                $('#ajax-cont').html('<div class="alert alert-error"><button data-dismiss="alert" class="close" type="button">×</button><strong>Error!</strong> Internal Server Error. [500].</div>')
                            } else if (jqXHR.status == 503) {
                                $('#ajax-cont').html('<div class="alert alert-error"><button data-dismiss="alert" class="close" type="button">×</button><strong>Error!</strong> Service Unavailable. [503].</div>')
                            } else if (exception === 'parsererror') {
                                $('#ajax-cont').html('<div class="alert alert-error"><button data-dismiss="alert" class="close" type="button">×</button><strong>Error!</strong> Requested JSON parse failed.</div>')
                            } else if (exception === 'timeout') {
                                $('#ajax-cont').html('<div class="alert alert-error"><button data-dismiss="alert" class="close" type="button">×</button><strong>Error!</strong> Time out error.</div>')
                            } else if (exception === 'abort') {
                                $('#ajax-cont').html('<div class="alert alert-error"><button data-dismiss="alert" class="close" type="button">×</button><strong>Error!</strong> Ajax request aborted.</div>')
                            } else {
                                $('#ajax-cont').html('<div class="alert alert-error"><button data-dismiss="alert" class="close" type="button">×</button><strong>Error!</strong> Uncaught Error. ' + jqXHR.responseText + '</div>')
                            }
                        }
                    }); //fin ajax 
                })//fin click
            })
        </script>                
    </body>
</html>

- En el ajax-load.php
 En el ajax-load.php va este contenido

<img src="img/wimarbueno.png" alt="WiMarBueno" /> 

- En el style.css
 En el style.css va este conteido y debe estar en la carpeta css

/*----------------------------- Tools -------------------------------------*/
.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.loading{background: url("../img/loading.gif"); display: block;width: 300px;height: 300px;position: fixed;left: 50%;top: 50%;margin-left: -150px;margin-top: -150px;z-index: 99;}

/*----------------------------- Layout -------------------------------------*/
#page-wrapper,
#page,
#header,
#main-wrapper,
#footer-wrapper{display: block;width: 100%;height: 100%;}

#header .section,
#main-wrapper #main,
#footer-wrapper .section{display: block;width: 960px;position: relative;margin: 0 auto;}

#sidebar-first,
#sidebar-second,
#content{display: inline;float: left;position: relative;}

#sidebar-first,
#sidebar-second {
    width: 24%;
}
#content{width: 76%;}

#content .section, 
.sidebar .section {
    padding: 10px;box-shadow: 0 0 3px #BBD8E9 inset;
}
#content .section{margin-left: 5px;}

#content .section .block, 
.sidebar .section .block{
    margin-bottom: 10px;
}

/*------------*/
#footer-wrapper{padding-top: 20px;}

/*Screen*/
@media only screen and (min-width: 10px) and (max-width: 960px){
    #header .section,
    #main-wrapper #main,
    #footer-wrapper .section{width: 95%;}
}
@media only screen and (min-width: 10px) and (max-width: 600px){
    #sidebar-first,
    #sidebar-second,
    #content{width: 100%;clear: both;}
    #content .section{margin-left: 0;margin-top: 5px;}
} 

-----------------------------------------------------------------------
Si deseas verlo en YouTube.

 Link del ejemplo aquí
Descarga: en proceso
 

Códigos de estado HTTP

La siguiente es una lista de códigos de respuesta del HTTP y frases estándar asociadas, destinadas a dar una descripción corta del estatus.

El primer dígito del código de respuesta especifica una de las cinco clases de respuesta.

1xx: Respuestas informativas.

 Petición recibida, continuando proceso.

100 Continúa
101 Conmutando protocolos
102 Procesando (WebDAV - RFC 2518)

2xx: Peticiones correctas.

Esta clase de código de estado indica que la petición fue recibida correctamente, entendida y aceptada.

200 OK
201 Creado
202 Aceptada
203 Información no autoritativa (desde HTTP/1.1)
204 Sin contenido
205 Recargar contenido
206 Contenido parcial
207 Estado múltiple (Multi-Status, WebDAV)

3xx: Redirecciones.

El cliente tiene que tomar una acción adicional para completar la petición.

300 Múltiples opciones
301 Movido permanentemente
302 Movido temporalmente
303 Vea otra (desde HTTP/1.1)
304 No modificado
305 Utilice un proxy (desde HTTP/1.1)
306 Cambie de proxy
307 Redirección temporal (desde HTTP/1.1)

4xx Errores del cliente.

La solicitud contiene sintaxis incorrecta o no puede procesarse.

400 Solicitud incorrecta
401 No autorizado
402 Pago requerido
403 Prohibido
404 No encontrado
405 Método no permitido
406 No aceptable
407 Autenticación Proxy requerida
408 Tiempo de espera agotado
409 Conflicto
410 Ya no disponible
411 Requiere longitud
412 Falló precondición
413 Solicitud demasiado larga
414 URI demasiado larga
415 Tipo de medio no soportado
416 Rango solicitado no disponible
417 Falló expectativa
421 Hay muchas conexiones desde esta dirección de internet
422 Entidad no procesable (WebDAV - RFC 4918)
423 Bloqueado (WebDAV - RFC 4918)
424 Falló dependencia (WebDAV) (RFC 4918)
425 Colección sin ordenar
426 Actualización requerida (RFC 2817)
449 Reintente con

5xx Errores de servidor.

 El servidor falló al completar una solicitud aparentemente válida.

500 Error interno
501 No implementado
502 Pasarela incorrecta
503 Servicio no disponible
504 Tiempo de espera de la pasarela agotado
505 Versión de HTTP no soportada
506 Variante también negocia (RFC 2295)
507 Almacenamiento insuficiente (WebDAV - RFC 4918)
509 Límite de ancho de banda excedido
510 No extendido (RFC 2774)