Blogger, jQuery

Incorporar jQuery TipTip en Blogger

Publicado por Claudia en septiembre 15, 2011

jquery titptip wordpress

En Blogger puedes añadir tooltips con jQuery TipTip de manera similar a la incorporación en WordPress:

1. Asegúrate de tener cargado jQuery en tu blog

Si ya lo tienes, no lo cargues de nuevo. Si no, puedes incluirlo pegando el siguiente código en tu plantilla desde Diseño/Edición de HTML, antes de </head>:

1
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js' type='text/javascript'/>

De esta manera, se estará cargando la última versión (minificada) de jQuery desde Google.

2. Agrega TipTip directamente en tu plantilla

Antes de </head>, pega los siguientes códigos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script type='text/javascript'>
//<![CDATA[
 
 /*
 * TipTip
 * Copyright 2010 Drew Wilson
 * www.drewwilson.com
 * code.drewwilson.com/entry/tiptip-jquery-plugin
 *
 * Version 1.3   -   Updated: Mar. 23, 2010
 *
 * This Plug-In will create a custom tooltip to replace the default
 * browser tooltip. It is extremely lightweight and very smart in
 * that it detects the edges of the browser window and will make sure
 * the tooltip stays within the current window size. As a result the
 * tooltip will adjust itself to be displayed above, below, to the left 
 * or to the right depending on what is necessary to stay within the
 * browser window. It is completely customizable as well via CSS.
 *
 * This TipTip jQuery plug-in is dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */
(function($){$.fn.tipTip=function(options){var defaults={activation:"hover",keepAlive:false,maxWidth:"200px",edgeOffset:3,defaultPosition:"bottom",delay:400,fadeIn:200,fadeOut:200,attribute:"title",content:false,enter:function(){},exit:function(){}};var opts=$.extend(defaults,options);if($("#tiptip_holder").length<=0){var tiptip_holder=$('<div id="tiptip_holder" style="max-width:'+opts.maxWidth+';"></div>');var tiptip_content=$('<div id="tiptip_content"></div>');var tiptip_arrow=$('<div id="tiptip_arrow"></div>');$("body").append(tiptip_holder.html(tiptip_content).prepend(tiptip_arrow.html('<div id="tiptip_arrow_inner"></div>')))}else{var tiptip_holder=$("#tiptip_holder");var tiptip_content=$("#tiptip_content");var tiptip_arrow=$("#tiptip_arrow")}return this.each(function(){var org_elem=$(this);if(opts.content){var org_title=opts.content}else{var org_title=org_elem.attr(opts.attribute)}if(org_title!=""){if(!opts.content){org_elem.removeAttr(opts.attribute)}var timeout=false;if(opts.activation=="hover"){org_elem.hover(function(){active_tiptip()},function(){if(!opts.keepAlive){deactive_tiptip()}});if(opts.keepAlive){tiptip_holder.hover(function(){},function(){deactive_tiptip()})}}else if(opts.activation=="focus"){org_elem.focus(function(){active_tiptip()}).blur(function(){deactive_tiptip()})}else if(opts.activation=="click"){org_elem.click(function(){active_tiptip();return false}).hover(function(){},function(){if(!opts.keepAlive){deactive_tiptip()}});if(opts.keepAlive){tiptip_holder.hover(function(){},function(){deactive_tiptip()})}}function active_tiptip(){opts.enter.call(this);tiptip_content.html(org_title);tiptip_holder.hide().removeAttr("class").css("margin","0");tiptip_arrow.removeAttr("style");var top=parseInt(org_elem.offset()['top']);var left=parseInt(org_elem.offset()['left']);var org_width=parseInt(org_elem.outerWidth());var org_height=parseInt(org_elem.outerHeight());var tip_w=tiptip_holder.outerWidth();var tip_h=tiptip_holder.outerHeight();var w_compare=Math.round((org_width-tip_w)/2);var h_compare=Math.round((org_height-tip_h)/2);var marg_left=Math.round(left+w_compare);var marg_top=Math.round(top+org_height+opts.edgeOffset);var t_class="";var arrow_top="";var arrow_left=Math.round(tip_w-12)/2;if(opts.defaultPosition=="bottom"){t_class="_bottom"}else if(opts.defaultPosition=="top"){t_class="_top"}else if(opts.defaultPosition=="left"){t_class="_left"}else if(opts.defaultPosition=="right"){t_class="_right"}var right_compare=(w_compare+left)<parseInt($(window).scrollLeft());var left_compare=(tip_w+left)>parseInt($(window).width());if((right_compare&&w_compare<0)||(t_class=="_right"&&!left_compare)||(t_class=="_left"&&left<(tip_w+opts.edgeOffset+5))){t_class="_right";arrow_top=Math.round(tip_h-13)/2;arrow_left=-12;marg_left=Math.round(left+org_width+opts.edgeOffset);marg_top=Math.round(top+h_compare)}else if((left_compare&&w_compare<0)||(t_class=="_left"&&!right_compare)){t_class="_left";arrow_top=Math.round(tip_h-13)/2;arrow_left=Math.round(tip_w);marg_left=Math.round(left-(tip_w+opts.edgeOffset+5));marg_top=Math.round(top+h_compare)}var top_compare=(top+org_height+opts.edgeOffset+tip_h+8)>parseInt($(window).height()+$(window).scrollTop());var bottom_compare=((top+org_height)-(opts.edgeOffset+tip_h+8))<0;if(top_compare||(t_class=="_bottom"&&top_compare)||(t_class=="_top"&&!bottom_compare)){if(t_class=="_top"||t_class=="_bottom"){t_class="_top"}else{t_class=t_class+"_top"}arrow_top=tip_h;marg_top=Math.round(top-(tip_h+5+opts.edgeOffset))}else if(bottom_compare|(t_class=="_top"&&bottom_compare)||(t_class=="_bottom"&&!top_compare)){if(t_class=="_top"||t_class=="_bottom"){t_class="_bottom"}else{t_class=t_class+"_bottom"}arrow_top=-12;marg_top=Math.round(top+org_height+opts.edgeOffset)}if(t_class=="_right_top"||t_class=="_left_top"){marg_top=marg_top+5}else if(t_class=="_right_bottom"||t_class=="_left_bottom"){marg_top=marg_top-5}if(t_class=="_left_top"||t_class=="_left_bottom"){marg_left=marg_left+5}tiptip_arrow.css({"margin-left":arrow_left+"px","margin-top":arrow_top+"px"});tiptip_holder.css({"margin-left":marg_left+"px","margin-top":marg_top+"px"}).attr("class","tip"+t_class);if(timeout){clearTimeout(timeout)}timeout=setTimeout(function(){tiptip_holder.stop(true,true).fadeIn(opts.fadeIn)},opts.delay)}function deactive_tiptip(){opts.exit.call(this);if(timeout){clearTimeout(timeout)}tiptip_holder.fadeOut(opts.fadeOut)}}})}})(jQuery);
 
//]]>
</script>
 
<script type='text/javascript'>
//<![CDATA[
$(function(){
$(".tooltip").tipTip();
});
//]]>
</script>

Ahora, antes de ]]></b:skin>, copia el siguiente código CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/* TipTip CSS - Version 1.2 */
 
#tiptip_holder {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99999;
}
 
#tiptip_holder.tip_top {
padding-bottom: 5px;
}
 
#tiptip_holder.tip_bottom {
padding-top: 5px;
}
 
#tiptip_holder.tip_right {
padding-left: 5px;
}
 
#tiptip_holder.tip_left {
padding-right: 5px;
}
 
#tiptip_content {
font-family: Arial, sans-serif;
font-size: 11px;
color: #fff;
text-shadow: 0 0 2px #000;
padding: 4px 8px;
border: 1px solid rgba(255,255,255,0.25);
background-color: rgb(25,25,25);
background-color: rgba(25,25,25,0.92);
*background-color: #000;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 0 0 3px #555;
-webkit-box-shadow: 0 0 3px #555;
-moz-box-shadow: 0 0 3px #555;
}
 
#tiptip_arrow, #tiptip_arrow_inner {
position: absolute;
border-color: transparent;
border-style: solid;
border-width: 6px;
height: 0;
width: 0;
}
 
#tiptip_holder.tip_top #tiptip_arrow {
border-top-color: #fff;
border-top-color: rgba(255,255,255,0.35);
}
 
#tiptip_holder.tip_bottom #tiptip_arrow {
border-bottom-color: #fff;
border-bottom-color: rgba(255,255,255,0.35);
}
 
#tiptip_holder.tip_right #tiptip_arrow {
border-right-color: #fff;
border-right-color: rgba(255,255,255,0.35);
}
 
#tiptip_holder.tip_left #tiptip_arrow {
border-left-color: #fff;
border-left-color: rgba(255,255,255,0.35);
}
 
#tiptip_holder.tip_top #tiptip_arrow_inner {
margin-top: -7px;
margin-left: -6px;
border-top-color: rgb(25,25,25);
border-top-color: rgba(25,25,25,0.92);
}
 
#tiptip_holder.tip_bottom #tiptip_arrow_inner {
margin-top: -5px;
margin-left: -6px;
border-bottom-color: rgb(25,25,25);
border-bottom-color: rgba(25,25,25,0.92);
}
 
#tiptip_holder.tip_right #tiptip_arrow_inner {
margin-top: -6px;
margin-left: -5px;
border-right-color: rgb(25,25,25);
border-right-color: rgba(25,25,25,0.92);
}
 
#tiptip_holder.tip_left #tiptip_arrow_inner {
margin-top: -6px;
margin-left: -7px;
border-left-color: rgb(25,25,25);
border-left-color: rgba(25,25,25,0.92);
}
 
/* Webkit Hacks  */
@media screen and (-webkit-min-device-pixel-ratio:0) {	
	#tiptip_content {
		padding: 4px 8px 5px 8px;
		background-color: rgba(45,45,45,0.88);
	}
	#tiptip_holder.tip_bottom #tiptip_arrow_inner { 
		border-bottom-color: rgba(45,45,45,0.88);
	}
	#tiptip_holder.tip_top #tiptip_arrow_inner { 
		border-top-color: rgba(20,20,20,0.92);
	}
}

3. Haz que funcione

Tanto en tus entradas como en tu plantilla puedes incluir TipTip de forma manual usando el atributo “title” y la clase (class=”tooltip”) en tus enlaces, de la siguiente manera:

1
<a href="http://chicablogger.com" title="Recursos para Blogger y WordPress" class="tooltip">Chica Blogger</a>
Tags: , , , ,
jQuery, Tutoriales WordPress

Incorporar jQuery TipTip en WordPress

Publicado por Claudia en septiembre 13, 2011

jquery titptip wordpress
TipTip es un popular plugin jQuery de bajo peso desarrollado por Drew Wilson que permite añadir tooltips a tu blog sólo con CSS, y mediante el atributo “title”. La gracia que tienes es que no necesita imágenes, es fácil de incorporar y, como cualquier tooltip, además de verse bonito contribuye a la usabilidad web.

Para incorporarlo en tu blog de WordPress, sigue los siguientes pasos:

1. Asegúrate de tener cargado jQuery en tu blog

Si ya lo tienes, no lo cargues de nuevo. Si no, puedes incluirlo pegando el siguiente código en tu header.php, antes de </head>:

1
2
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>

2. Descarga el plugin desde la web del autor

Ve a Drew Wilson Code y descarga el paquete de jQuery TipTip. Descomprime el paquete y sube el archivo “jquery.tipTip.js” vía FTP en la carpeta “js” de tu theme (si no existe, créala). El contenido de tipTip.css puedes pegarlo al final de tu style.css.

3.Haz el llamado desde tu header.php

Justo bajo <?php wp_head(); ?>, pega los siguientes códigos:

1
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.tipTip.js" type="text/javascript"></script>
1
2
3
4
5
<script type="text/javascript">
jQuery(function(){
jQuery(".tooltip").tipTip();
});
</script>

4. Añade TipTip de forma manual a tus enlaces

Puedes seguir el siguiente ejemplo:

<a href="http://chicablogger.com" title="Recursos para Blogger y WordPress" class="tooltip">Chica Blogger</a>

Tanto el atributo “title” como la clase (class=”tooltip”) son necesarios y obligatorios para que funcione el plugin. Debes añadirlos donde quieras que se muestre el tooltip.

5. Añade TipTip de forma automática a tus enlaces

Habrás notado que WordPress ha añadido títulos de forma automática a algunas secciones importantes. Incorporando una variable, se puede lograr que los tooltips se muestren de forma automática en cada lugar donde se use el atributo “title”:

1
2
3
4
5
6
7
<script type="text/javascript">
jQuery(function(){
jQuery(".tooltip").tipTip();
var title = jQuery(".tipTip").attr("title");
jQuery("a").tipTip(title);
});
</script>

Habrás notado lo sencillo que es añadir TipTip a tu WordPress. No hay más cambios que hacer, a menos que quieras hacer algunos cambios en el CSS.

Tags: , ,
jQuery

jQuery FontEffect: añade afectos al texto sin imágenes

Publicado por Claudia en agosto 18, 2009

FontEffect es un plugin jQuery que añade efectos a textos delimitados con HTML, sin imágenes, y sin necesidad de usar CSS. En su versión 1.0 (que pesa sólo 7kb) permite añadir 4 efectos distintos: borde (outline), sombra, gradiente y reflejo (mirror).

jqueryfonteffect

Puedes añadirlo en tres pasos:

1) Cargas la librería y el plugin (tomando en cuenta que requiere jQuery 1.3.2):

<script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery-FontEffect-1.0.0.min.js"></script>

2) El CSS:

#ejemplo{ font-family: Georgia,'Times New Roman', serif; font-size:3.0em; color:#ff0080; font-weight:bold; margin-bottom:10px;}

3) HTML y efectos:

<div id="ejemplo">ChicaBlogger</div>
 
<script type="text/javascript">
$(&quot;#ejemplo&quot;).FontEffect({shadow:true});
</script>

Puedes combinar los efectos como quieras, y ver ejemplos en la página de Alejandro Uliana.
Es un plugin curioso, ideal para encabezados generados dinámicamente (ejemplo, el título de los posts). Lo mejor, es que funciona en la mayoría de los navegadores conocidos, incluyendo el favorito de todos: IE6.

Vía | Queness

Tags: , ,