Tooltip
Ik heb het volgende scriptje gevonden:
http://devirtu.com/2008/09/22/jquery-making-tooltip/
Nou heb ik dit een beetje verbouwd, want ik heb links op de betreffende website waar de title niks is (title=""). Dus dan krijg ik gewoon een tooltip blokje met niks erin (klein vierkantje), ik gebruik het volgende script:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
jQuery("a").bind("mouseover", function( event ) {
if (this.title == "") {
this.newtitle = "";
document.getElementById("hintcontainer").style.display = "none";
} else
this.newtitle = this.title;
this.title = "";
jQuery("#hintcontainer").text(this.newtitle);
jQuery("#hintcontainer").css({display:"block",left:event.pageX+"px", top:event.pageY+25+"px"}).fadeTo(200, 0.8);
}).bind("mouseout", function( event ) {
jQuery("#hintcontainer").fadeTo(200, 0.0);
}).bind("mousemove", function( event ) {
jQuery("#hintcontainer").css({left:event.pageX+"px", top:event.pageY+25+"px"});
});
if (this.title == "") {
this.newtitle = "";
document.getElementById("hintcontainer").style.display = "none";
} else
this.newtitle = this.title;
this.title = "";
jQuery("#hintcontainer").text(this.newtitle);
jQuery("#hintcontainer").css({display:"block",left:event.pageX+"px", top:event.pageY+25+"px"}).fadeTo(200, 0.8);
}).bind("mouseout", function( event ) {
jQuery("#hintcontainer").fadeTo(200, 0.0);
}).bind("mousemove", function( event ) {
jQuery("#hintcontainer").css({left:event.pageX+"px", top:event.pageY+25+"px"});
});
Met het orginele script van de website, onthoud hij gewoon de text van de vorige link waar een mouseover overheen is geweest. Dus als de title dan niks is, krijg je gewoon de tekst van de vorige link.
Ook geen errors in firebug trouwens. Iemand enig idee?
Hartstikke bedankt,
Niels.
<a href="index.php" title="Hoi">bla</a>
En ik ga daar met mijn muis overheen krijg ik netjes "Hoi", maar als ik deze heb:
<a href="index2.php" title="">bla</a>
Krijg ik ook Hoi, omdat de title leeg is, is de andere tekst nog gecached.
Bedankt,
Niels.
Edit: document.getElementById("hintcontainer").style.display = "none"; waarom dit? Je werkt met Jquery. $("#hintcontainer").hide(); of $("#hintcontainer").css("display", "block");
Gewijzigd op 01/01/1970 01:00:00 door Mitchell
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
jQuery("a").bind("mouseover", function( event ) {
if (this.title != "") {
this.newtitle = this.title;
this.title = "";
}
if (this.newtitle == "") jQuery("#hintcontainer").hide();
jQuery("#hintcontainer").text(this.newtitle);
jQuery("#hintcontainer").css({display:"block",left:event.pageX+"px", top:event.pageY+25+"px"}).fadeTo(200, 0.8);
}).bind("mouseout", function( event ) {
jQuery("#hintcontainer").fadeTo(200, 0.0);
}).bind("mousemove", function( event ) {
jQuery("#hintcontainer").css({left:event.pageX+"px", top:event.pageY+25+"px"});
});
if (this.title != "") {
this.newtitle = this.title;
this.title = "";
}
if (this.newtitle == "") jQuery("#hintcontainer").hide();
jQuery("#hintcontainer").text(this.newtitle);
jQuery("#hintcontainer").css({display:"block",left:event.pageX+"px", top:event.pageY+25+"px"}).fadeTo(200, 0.8);
}).bind("mouseout", function( event ) {
jQuery("#hintcontainer").fadeTo(200, 0.0);
}).bind("mousemove", function( event ) {
jQuery("#hintcontainer").css({left:event.pageX+"px", top:event.pageY+25+"px"});
});
Dan zou zoiets toch genoeg moeten zijn? Ik krijg het maar niet voor elkaar..
Bedankt,
Niels.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
$("a").each(function(){
var $this = $(this);
if (this.hasAttribute("title") === true)
// voer script uit..
else
// voer iets anders uit..
});
var $this = $(this);
if (this.hasAttribute("title") === true)
// voer script uit..
else
// voer iets anders uit..
});
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
jQuery("a").each(function(){
var this = jQuery(this);
if (this.hasAttribute("title") === true)
// voer script uit..
jQuery("a").bind("mouseover", function( event ) {
jQuery("#hintcontainer").text(this.newtitle);
jQuery("#hintcontainer").css({display:"block",left:event.pageX+"px", top:event.pageY+25+"px"}).fadeTo(200, 0.8);
}).bind("mouseout", function( event ) {
jQuery("#hintcontainer").fadeTo(200, 0.0);
}).bind("mousemove", function( event ) {
jQuery("#hintcontainer").css({left:event.pageX+"px", top:event.pageY+25+"px"});
else
jQuery("#hintcontainer").hide();
});
var this = jQuery(this);
if (this.hasAttribute("title") === true)
// voer script uit..
jQuery("a").bind("mouseover", function( event ) {
jQuery("#hintcontainer").text(this.newtitle);
jQuery("#hintcontainer").css({display:"block",left:event.pageX+"px", top:event.pageY+25+"px"}).fadeTo(200, 0.8);
}).bind("mouseout", function( event ) {
jQuery("#hintcontainer").fadeTo(200, 0.0);
}).bind("mousemove", function( event ) {
jQuery("#hintcontainer").css({left:event.pageX+"px", top:event.pageY+25+"px"});
else
jQuery("#hintcontainer").hide();
});
Zoiets? Ik krijg echter 2 fouten in FireBug:
Code (php)
1
2
3
4
2
3
4
missing variable name
[Break on this error] var this = jQuery(this); \n
element.dispatchEvent is not a function
[Break on this error] element.dispatchEvent(event);
[Break on this error] var this = jQuery(this); \n
element.dispatchEvent is not a function
[Break on this error] element.dispatchEvent(event);
Ik ben helemaal niet thuis in Javascript en alles daarom heen, vandaar misschien deze amateuristische fout, hehe.
Bedankt!
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
$("a").each(function(){
var this = $(this);
if ($this.attr("title") === true)
jQuery("a").bind("mouseover", function( event ) {
jQuery("#hintcontainer").text(this.newtitle);
jQuery("#hintcontainer").css({display:"block",left:event.pageX+"px", top:event.pageY+25+"px"}).fadeTo(200, 0.8);
}).bind("mouseout", function( event ) {
jQuery("#hintcontainer").fadeTo(200, 0.0);
}).bind("mousemove", function( event ) {
jQuery("#hintcontainer").css({left:event.pageX+"px", top:event.pageY+25+"px"});
});
var this = $(this);
if ($this.attr("title") === true)
jQuery("a").bind("mouseover", function( event ) {
jQuery("#hintcontainer").text(this.newtitle);
jQuery("#hintcontainer").css({display:"block",left:event.pageX+"px", top:event.pageY+25+"px"}).fadeTo(200, 0.8);
}).bind("mouseout", function( event ) {
jQuery("#hintcontainer").fadeTo(200, 0.0);
}).bind("mousemove", function( event ) {
jQuery("#hintcontainer").css({left:event.pageX+"px", top:event.pageY+25+"px"});
});
Code (php)
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
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
jQuery.noConflict();
// initialize the jquery code
jQuery(document).ready(function(){
//close all the content divs on page load
jQuery(".mover").hide();
// toggle slide
jQuery("#slideToggle").click(function(){
// by calling sibling, we can use same div for all demos
jQuery(this).siblings('.mover').slideToggle();
});
// regular toggle with speed of 'slow'
jQuery("#toggleSlow").click(function(){
jQuery(this).siblings('.mover').toggle('slow');
});
// fade in and out
jQuery("#fadeInOut").toggle(function() {
jQuery(this).siblings('.mover').fadeIn('slow');
}, function() {
jQuery(this).siblings('.mover').fadeOut('slow');
});
//animate
jQuery("#animate").click(function() {
jQuery(this).siblings('.mover')
.slideDown(5500).fadeOut(7300);
});
jQuery("a").each(function(){
var this = jQuery(this);
if (jQuery(this).attr("title") === true)
jQuery("a").bind("mouseover", function( event ) {
jQuery("#hintcontainer").text(this.newtitle);
jQuery("#hintcontainer").css({display:"block",left:event.pageX+"px", top:event.pageY+25+"px"}).fadeTo(200, 0.8);
}).bind("mouseout", function( event ) {
jQuery("#hintcontainer").fadeTo(200, 0.0);
}).bind("mousemove", function( event ) {
jQuery("#hintcontainer").css({left:event.pageX+"px", top:event.pageY+25+"px"});
});
});
// initialize the jquery code
jQuery(document).ready(function(){
//close all the content divs on page load
jQuery(".mover").hide();
// toggle slide
jQuery("#slideToggle").click(function(){
// by calling sibling, we can use same div for all demos
jQuery(this).siblings('.mover').slideToggle();
});
// regular toggle with speed of 'slow'
jQuery("#toggleSlow").click(function(){
jQuery(this).siblings('.mover').toggle('slow');
});
// fade in and out
jQuery("#fadeInOut").toggle(function() {
jQuery(this).siblings('.mover').fadeIn('slow');
}, function() {
jQuery(this).siblings('.mover').fadeOut('slow');
});
//animate
jQuery("#animate").click(function() {
jQuery(this).siblings('.mover')
.slideDown(5500).fadeOut(7300);
});
jQuery("a").each(function(){
var this = jQuery(this);
if (jQuery(this).attr("title") === true)
jQuery("a").bind("mouseover", function( event ) {
jQuery("#hintcontainer").text(this.newtitle);
jQuery("#hintcontainer").css({display:"block",left:event.pageX+"px", top:event.pageY+25+"px"}).fadeTo(200, 0.8);
}).bind("mouseout", function( event ) {
jQuery("#hintcontainer").fadeTo(200, 0.0);
}).bind("mousemove", function( event ) {
jQuery("#hintcontainer").css({left:event.pageX+"px", top:event.pageY+25+"px"});
});
});
Dit is mijn hele jQuery script, het bovenste is een slide in en out effect.
Is er echt geen andere manier?
Bedankt,
Niels.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
jQuery("a").bind("mouseover", function( event ) {
if (jQuery(this).attr("title") != "") {
this.newtitle = this.title;
this.title = "";
jQuery("a").bind("mouseover", function( event ) {
jQuery("#hintcontainer").text(this.newtitle);
jQuery("#hintcontainer").css({display:"block",left:event.pageX+"px", top:event.pageY+25+"px"}).fadeTo(200, 0.8);
}).bind("mouseout", function( event ) {
jQuery("#hintcontainer").fadeTo(200, 0.0);
}).bind("mousemove", function( event ) {
jQuery("#hintcontainer").css({left:event.pageX+"px", top:event.pageY+25+"px"});
});
}
});
if (jQuery(this).attr("title") != "") {
this.newtitle = this.title;
this.title = "";
jQuery("a").bind("mouseover", function( event ) {
jQuery("#hintcontainer").text(this.newtitle);
jQuery("#hintcontainer").css({display:"block",left:event.pageX+"px", top:event.pageY+25+"px"}).fadeTo(200, 0.8);
}).bind("mouseout", function( event ) {
jQuery("#hintcontainer").fadeTo(200, 0.0);
}).bind("mousemove", function( event ) {
jQuery("#hintcontainer").css({left:event.pageX+"px", top:event.pageY+25+"px"});
});
}
});
Heb het nu werkend, lijkt alleen of hij de if niet pakt, wat als ik bijvoorbeeld over een link ga met title="" geeft hij nog een title, heel raar.
Code (php)
1
if (this.hasAttribute("title") === true)
Overigens deze var this = $(this); heb je weg gehaald?
Nu zit ik met het laaste probleem:
Het werkt, maar als ik bijvoorbeeld over link 'a' over ga, doet hij het, maar ga ik er nog een keer over heb ik weer een leeg veld.