Ignore:
Timestamp:
Jun 28, 2012, 6:23:28 PM (12 years ago)
Author:
gbo
Message:

Fix: Tooltip not displayed according the option

File:
1 edited

Legend:

Unmodified
Added
Removed

  • extensions/LLGBO2/js/jquery_llgbotip.js

    r15107 r16145  
    11jQuery(document).ready(function(jQuery){ 
    2         /* CONFIG */           
    3                 // these 2 variables determine popup's gap from the cursor             
    4         var     xGap = 10;
    5         var     yGap = 10;
    6         var     MyTT = "";
    7         var     MainTitle ="";
     2/* CONFIG */           
     3// these 2 variables determine popup's gap from the cursor             
     4var     xGap = 10;
     5var     yGap = 10;
     6var     MainTitle ="";
     7       
     8var     maxTop = 0;
     9var     maxLeft =0;   
     10/* END CONFIG */       
     11jQuery("#theMainImage").mouseover(function(){
     12//  tooltip IMG title remove     
     13        MainTitle = this.title;
     14        this.title ="";
     15        });     
     16jQuery("#theMainImage").mouseout(function(){
     17//   tooltip IMG  title restaure         
     18        this.title = MainTitle;
     19        });     
    820               
    9         var     maxTop = 0;
    10         var     maxLeft =0;
    11        
    12         /* END CONFIG */       
    13         jQuery("#theMainImage").mouseover(function(){
    14   //  tooltip IMG title remove   
    15                 MainTitle = this.title;
    16                 this.title ="";
    17                 });     
    18         jQuery("#theMainImage").mouseout(function(){
    19   //   tooltip IMG  title restaure       
    20                 this.title = MainTitle ;
    21                 });     
    22                
    23         jQuery("area,a").mouseover(function(e){
    24                         MainTitle = jQuery("#theMainImage").attr("title");
    25                 jQuery("#theMainImage").attr("title",""); // for IE
    26                 this.t = this.title;
    27                  // llgbo conf
    28                 var val = this.title.split("||",15);
    29                 if (val[0].length<1) { return; }
    30                         maxLeft =  jQuery(window).width();
    31                         maxTop =  jQuery(window).height();
    32                                 //
    33                         this.activate ='ok';
    34                         this.title = "";
    35                         this.tt = "<p id='title'>"+val[0]+"</p>";
    36                         var pid = "dflt";
    37                         if (this.className != "navThumb") // no picture for navthumb
    38                                 {for (var i=1; i<val.length; i++) {
    39                                 if ( val[i].toLowerCase().indexOf("<img") == 0)
    40                                         { pid = "pict";}
    41                                         this.tt += "<p id="+pid+">"+ val[i]+"</p>";}
    42                                         }               
    43                         jQuery("body").append("<div id='toolTip'>"+this.tt+"</div>");
    44                
    45                     MyTT = jQuery("#toolTip");
    46                         if (this.id == "Rules")
    47                                         { MyTT.css( {'border-color' : '#c92'});}
    48                     if (this.id == "RulesEx")
    49                                 { MyTT.css( {'border-color' : '#d3fed2'})
    50                                 jQuery("#toolTip #title").css( {'color' : '#d3fed2'}); }
    51                
    52                         updateXY(e);
    53                          MyTT.css("opacity", 0.25)
    54                                 .show;
    55                          MyTT.fadeTo(1500,.95);
    56                                 });                     
    57  
    58         jQuery("area,a").mouseout(function(e){ 
    59                 if (this.activate =='ok') // mouseout without mouseover we keep the right title
    60                         { this.title = this.t;   
    61                                 jQuery("#toolTip")
    62                                 .fadeOut("slow")
    63                                 .remove();
    64                                  jQuery("#theMainImage").attr("title",MainTitle); // for IE
    65                                  }
     21jQuery("area,a").mouseover(function(e){
     22        MainTitle = jQuery("#theMainImage").attr("title");
     23        jQuery("#theMainImage").attr("title",""); // for IE
     24        this.t = this.title;
     25 // llgbo conf
     26        var val = this.title.split("||",15);
     27        if (val[0].length<1) { return; }
     28        maxLeft =  jQuery(window).width();
     29        maxTop =  jQuery(window).height();
     30                //
     31        this.activate ='ok';
     32        this.title = "";
     33        this.tt = "<p id='title'>"+val[0]+"</p>";
     34        var pid = "dflt";
     35        if (this.className != "navThumb") // no picture for navthumb
     36                {for (var i=1; i<val.length; i++) {
     37                if ( val[i].toLowerCase().indexOf("<img") == 0)
     38                        { pid = "pict";}
     39                        this.tt += "<p id="+pid+">"+ val[i]+"</p>";}
     40                        }               
     41        jQuery("body").append("<div id='toolTip'>"+this.tt+"</div>");
     42
     43        var MyTT = jQuery("#toolTip");
     44        if (this.id == "Rules")
     45                        { MyTT.css( {'border-color':'#c92'});}
     46        if (this.id == "RulesEx")
     47                { MyTT.css( {'border-color':'#d3fed2'})
     48                jQuery("#toolTip #title").css({'color':'#d3fed2'});}
     49
     50        updateXY(e);
     51         MyTT.css("opacity", 0.25)
     52                .show;
     53         MyTT.fadeTo(1200,.95);
     54});                     
     55
     56jQuery("area,a").mouseout(function(e){ 
     57        if (this.activate =='ok') // mouseout without mouseover we keep the right title
     58        { this.title = this.t;   
     59        jQuery("#toolTip")
     60        .fadeOut("slow")
     61        .remove();
     62         jQuery("#theMainImage").attr("title",MainTitle); // for IE
     63         }
    6664 });   
    67         jQuery("area,a").mousemove(function(e){
    68                 updateXY(e);
    69         });     
    70             var updateXY = function(e) {
    71                         var xLeft,yCord,xCord;
    72             MyTT = jQuery("#toolTip");
    73                         var wT = MyTT.width() + 6 /* border */+ xGap;
    74                         var hT = MyTT.height() + 6 /* border */+ yGap;
    75                        
    76                         if ( e.pageX < (maxLeft/2) )  // piwigo left
    77                                 {xCord = wT *-1;}
    78                                 else {
    79                         xCord =( maxLeft < (e.pageX + wT )) ?  xCord = wT * -1 : xCord = xGap;}       
    80                         xLeft = (e.pageX + xCord < 3 ) ? xLeft = e.pageX + xGap : xLeft = e.pageX + xCord;
    81                         yCord =( maxTop < (e.pageY + hT )) ?   yCord = hT * -1 : yCord = yGap;
    82                                 MyTT
    83                                         .css("top",(e.pageY + yCord) + "px")
    84                                         .css("left",(xLeft) + "px");
    85                         }
     65jQuery("area,a").mousemove(function(e){
     66        updateXY(e);
     67});     
     68var updateXY = function(e) {
     69        var xLeft,yCord,xCord;
     70        var MyTT = jQuery("#toolTip");
     71        var wT = MyTT.width() + 6 /* border */+ xGap;
     72        var hT = MyTT.height() + 6 /* border */+ yGap;
     73       
     74        if ( e.pageX < (maxLeft/2) )  // piwigo left
     75                {xCord = wT *-1;}
     76                else {
     77        xCord =( maxLeft < (e.pageX + wT )) ?  xCord = wT * -1 : xCord = xGap;}       
     78        xLeft = (e.pageX + xCord < 3 ) ? xLeft = e.pageX + xGap : xLeft = e.pageX + xCord;
     79        yCord =( maxTop < (e.pageY + hT )) ?   yCord = hT * -1 : yCord = yGap;
     80        MyTT
     81                .css("top",(e.pageY + yCord) + "px")
     82                .css("left",(xLeft) + "px");
     83        }
    8684});
Note: See TracChangeset for help on using the changeset viewer.