<!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>
| HTML5, CSS3, Javascript, AJAX, jQuery, PHP, Adobe Photoshop, Lima, Perú
jueves, 30 de mayo de 2013
Menu Dropdown con jQuery
Menu Dropdown con jQuery, ejemplo que se puede adaptar segín necesidad.
miércoles, 29 de mayo de 2013
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
Icono
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" />
martes, 28 de mayo de 2013
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>
sábado, 18 de mayo de 2013
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" />');
}
}
});
});
lunes, 13 de mayo de 2013
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>
jueves, 9 de mayo de 2013
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>
martes, 7 de mayo de 2013
Cambiar titulo de la página en Drupal
Cambiar título de la página en Drupal en template.php
Ejemplo:
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;}
lunes, 6 de mayo de 2013
CSS3 @font-face Rule
Si se desea importar fuentes de nuestra carpeta podemos realziarlo de esta manera:
Lo mínimo que podría tener son fuentes con estas dos extensiones:
@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 */
}
Suscribirse a:
Entradas (Atom)