https://www.caser.es/resources/js/jquery/jquery.bettertip.js

1/*
2* BetterTip
3* Created by Edgar Verle
4* BetterTip is made for the jQuery library.
5*/
6
7$(BT_init);
8
9var BT_open_wait = 0; //time in millis to wait before showing dialog
10var BT_close_wait = 0; //time in millis to wait before closing dialog
11var BT_cache_enabled = true;
12var BT_events = new Array();
13var BT_titles = new Array();
14
15function BT_init(){
16
17	$("a.betterTip").parent("div.betterTip")
18	.hover(function(){BT_hoverIn($(this).children("a.betterTip")[0]); return false;},
19	function(){BT_hoverOut($(this).children("a.betterTip")[0])})
20	;
21
22	$("a.betterTip").filter(function(index){
23		return $(this).parent("div.betterTip").length == 0;
24	})
25	.hover(function(){
26		BT_hoverIn(this);
27
28	}
29	, function(){
30		BT_hoverOut(this)
31	})
32	.click(function(){$("#iframe_oculto").toggle("fast");return false;});
33}
34
35function BT_setOptions(hash)
36{
37	if(hash["openWait"] != null)
38	BT_open_wait = hash["openWait"];
39	if(hash["closeWait"] != null)
40	BT_close_wait = hash["closeWait"];
41	if(hash["cacheEnabled"] != null)
42	BT_cache_enabled = hash["cacheEnabled"];
43}
44
45function BT_hoverIn(a)
46{
47
48	var timeout = BT_open_wait;
49
50	if($('#BT_cache_'+a.id).length > 0)
51	timeout = 0;
52
53	var title = a.title;
54
55	if(!BT_titles[a.id])
56	{
57		if(!title || title.toLowerCase() == "$none")
58		title = "";
59		else if(title.toLowerCase() == "$content")
60		title = $(a).text();
61
62		BT_titles[a.id] = title;
63		a.title = "";
64	}
65
66	BT_events[a.id] = 1;
67	setTimeout(function(){BT_show(a.id)}, BT_open_wait);
68}
69
70function BT_hoverOut(a)
71{
72	BT_events[a.id] = 0;
73	setTimeout(function(){BT_remove();}, BT_close_wait);
74}
75
76function BT_remove()
77{
78	$('#BT').remove();
79	var obj_iframe_oculto = document.getElementById("iframe_oculto");
80	obj_iframe_oculto.style.display = "none";
81}
82
83function BT_show(id) {
84
85	if(BT_events[id] == 0)
86	return;
87
88	var obj = $("#"+id);
89	var url = obj[0].href;
90	var title = BT_titles[id];
91
92	$("#BT").remove();
93
94	var parents = $("#"+id).parent("div.betterTip");
95
96	if(parents.length > 0)
97	id = $("#"+id).parent("div.betterTip")[0].id;
98
99	obj = $("#"+id);
100
101	var showTitle = true;
102
103	if(title.length == 0)
104	showTitle = false;
105
106	var urlParts = url.split("\?", 2);
107	var query = BT_parseQuery(urlParts[1]);
108	urlParts[0] = urlParts[0].substr(urlParts[0].lastIndexOf('/')+1);
109
110	if(!query["width"] || query["width"].length == 0)
111	query["width"] = 250;
112
113	var tipWidth = parseInt(query["width"]);
114
115	var act_left = BT_getLeft(id);
116	var act_width = BT_getWidth(id);
117
118	var left = act_left + act_width + 12;
119	var top = BT_getTop(id);
120
121	var arrowDir = "left";
122
123	var docWidth = self.innerWidth || (document.documentElement&&document.documentElement.clientWidth) || document.body.clientWidth;
124	var right = act_left + act_width + 11 + tipWidth + 20;
125	var arrowLeft = -10;
126	var arrowTop = -4;
127	var shadowTop = -7;
128	var shadowLeft = -7;
129
130	if(docWidth < right)
131	{
132		arrowDir = "right";
133		left = act_left - 12 - tipWidth;
134		arrowLeft = tipWidth;
135		arrowTop = -1;
136
137		if(document.all)
138		arrowLeft -= 2;
139	}
140	else if(showTitle)
141	arrowTop = -2;
142
143	if(showTitle)
144	arrowDir = "title_" +arrowDir;
145
146	$("body").append(
147	"<div id='BT' class='BT_shadow0' style='z-index:100; display:none;top:"+(top-shadowTop-8)+"px; left:"+(left-shadowLeft - 8)+"px;'>" +
148	"<div class='BT_shadow1'>"+
149	"<div class='BT_shadow2'>" +
150	"<div id='BT_main' style='z-index:100;width:"+query["width"]+"px; top:"+shadowTop+"px; left:"+shadowLeft+"px;'>" +
151	"<div id='BT_arrow_"+arrowDir+"' style='top: "+arrowTop+"px; left:"+arrowLeft+"px;'></div>" +
152	(showTitle?"<div id='BT_title'>"+title+"</div>":"") +
153	"<div style='padding:5px'style='z-index:100;'>" +
154	"<div id='BT_content' align='center' style='z-index:100;'>" +
155	"<div class='BT_loader'></div>" +
156	"</div>" +
157	"</div>"+
158	"</div></div></div></div>");
159
160	if(urlParts[0].charAt(0) == '$')
161	{
162		$('#BT_content').html($("#"+urlParts[0].substr(1)).html());
163		$('#BT').show("fast");
164	}
165	else if(BT_cache_enabled)
166	{
167		if($('#BT_cache_'+id).length > 0)
168		BT_loadCache(id);
169		else
170		$.post(url, {}, function(data){
171			BT_createCacheElement(id, data);
172		});
173	}
174	else
175	{
176		$.post(url, {}, function(data){
177			$('#BT_content').html(data);
178			$('#BT').show("fast");
179		})
180	}
181
182	//CODIGO PROVISIONAL
183	//Con este codigo mostramos el iframe para ocultar los campos del form en el IE
184	var obj_iframe_oculto = document.getElementById("iframe_oculto");
185
186	// Quitamos al Iframe TODA la opacidad para que sea totalmente transparente y se vea el fondo
187	obj_iframe_oculto.style.filter="alpha(opacity=0)"; // Opacidad para IE
188	obj_iframe_oculto.style.opacity="0.00"; // Ocapacidad para Netscape
189	// Definimos el ancho del IFRAME igual que el ancho de la capa, para que no se le vea
190	obj_iframe_oculto.style.width = 400;
191	obj_iframe_oculto.style.height = 500;
192	// Posicionamos el IFRAME en la misma posición que la capa (para que esté siempre detras)
193	obj_iframe_oculto.style.top = $('#BT').css("top");
194	obj_iframe_oculto.style.left = $('#BT').css("left");
195	// Bajamos de Z-index el IFRAME, para que esté debajo de la capa
196	obj_iframe_oculto.style.zIndex = $('#BT').css("z-index") - 1;
197
198	// Definimos que el contenido del IFRAME está VISIBLE
199	obj_iframe_oculto.style.display = "block"; // ESTA ES LA LINEA MAS IMPORTANTE
200	
201		var h=document.getElementById("BT_main").offsetHeight;
202	var t=$('#BT').css("top");
203	var suma = h+parseInt(t);	
204	 if (navigator.appName == "Netscape"){//Si el explorer o firefox
205	 	

206	 	var docHeight=window.pageYOffset+self.innerHeight || (document.documentElement&&document.documentElement.clientHeight) || document.body.clientHeight;
207	 	var solu = docHeight-h-14;
208	 }
209		else if (navigator.appName.indexOf("Explorer") != -1) {
210			var docHeight=Math.max(document.body.scrollTop,document.documentElement.scrollTop)+document.documentElement.clientHeight;
211			var solu = docHeight-h-14;
212		} 
213	if (suma>docHeight){
214		
215		$('#BT').css({top:solu});
216		obj_iframe_oculto.style.top=$('#BT').css("top");
217	}
218}
219
220function BT_createCacheElement(id, data)
221{
222	$("body").append("<div id='BT_cache_"+id+"' style='display:none'>"+
223	data+"</div>");
224
225	BT_loadCache(id);
226}
227
228function BT_loadCache(id)
229{
230	$('#BT_content').html($('#BT_cache_'+id).html());
231	$('#BT').show();
232}
233
234function BT_getWidth(id) {
235	var x = document.getElementById(id);
236	return x.offsetWidth;
237}
238
239function BT_getLeft(id) {
240
241	var obj = $('#'+id)[0];
242	var left = obj.offsetLeft;
243	var parent = obj.offsetParent;
244
245	while(parent) {
246		left += parent.offsetLeft;
247		parent = parent.offsetParent;
248	}
249
250	return left
251}
252
253function BT_getTop(id) {
254	var obj = $('#'+id)[0];
255	var top = obj.offsetTop;
256	var parent = obj.offsetParent;
257
258	while(parent) {
259		top += parent.offsetTop;
260		parent = parent.offsetParent;
261	}
262
263	return top;
264}
265
266function BT_parseQuery ( query ) {
267
268	var params = new Object ();
269
270	if ( ! query )
271	return params;
272
273	var pairs = query.split(/[;&]/);
274
275	for ( var i = 0; i < pairs.length; i++ ) {
276
277		var kv = pairs[i].split('=');
278
279		if ( ! kv || kv.length != 2 )
280		continue;
281
282		var key = unescape( kv[0] );
283		var val = unescape( kv[1] );
284
285		val = val.replace(/\+/g, ' ');
286		params[key] = val;
287	}
288
289	return params;
290}