ugrás a tartalomhoz

Szöveg buborék hiba

rob66 · 2012. Jún. 13. (Sze), 10.21
Sziasztok!

Van egy weboldalam, ahol, ha az egérrel rámutatunk egy képre, megjelenik egy szüveges buborék.
Több kép is van egymás mellett.

Az a problémám, hogy ha egy képhez tartozó buborék átnyúlik a következő kép fölé is, akkor ez a következő kép kitakarja a buborékot.
Ha az előző kép fölé nyúlik át, akkor nem jelenkezik ez a probléma.
  1. .colorTip{  
  2.     /* This class is assigned to the color tip span by jQuery */  
  3.       
  4.     display:none;  
  5.     position:absolute;    
  6.     left:50%;  
  7.     top:-90px;      padding:6px;  
  8.       
  9.     background-color:white;  
  10.     font-family:Arial,Helvetica,sans-serif;  
  11.     font-size:11px;  
  12.     font-style:normal;  
  13.     line-height:1;  
  14.     text-decoration:none;  
  15.     text-align:center;  
  16.     text-shadow:0 0 1px white;  
  17.     white-space:nowrap;  
  18.       
  19.     -moz-border-radius:4px;  
  20.     -webkit-border-radius:4px;  
  21.     border-radius:4px;  
  22. }  
  23.   
  24. .pointyTip,.pointyTipShadow{  
  25.     /* Setting a thick transparent border on a 0x0 div to create a triangle */  
  26.     border:6px solid transparent;  
  27.     bottom:-12px;  
  28.     height:0;  
  29.     left:50%;  
  30.     margin-left:-6px;  
  31.     position:absolute;  
  32.     width:0;  
  33. }  
  34.   
  35. .pointyTipShadow{  
  36.     /* The shadow tip is 1px larger, so it acts as a border to the tip */  
  37.     border-width:7px;  
  38.     bottom:-14px;  
  39.     margin-left:-7px;  
  40. }  
  41.   
  42. .colorTipContainer{  
  43.     position:relative;  
  44.     text-decoration:none !important;  
  45. }  
  46.   
  47.   
  48. /* 6 Available Color Themes */  
  49.   
  50. .white .pointyTip{ border-top-color:white;}  
  51. .white .pointyTipShadow{ border-top-color:#ddd;}  
  52. .white .colorTip{  
  53.     background-color:white;  
  54.     border:1px solid #DDDDDD;  
  55.     color:#555555;  
  56. }  
  1. (function($){  
  2.     $.fn.colorTip = function(settings){  
  3.   
  4.         var defaultSettings = {  
  5.             color       : 'yellow',  
  6.             timeout     : 500  
  7.         }  
  8.           
  9.         var supportedColors = ['red','green','blue','white','yellow','black'];  
  10.           
  11.         /* Combining the default settings object with the supplied one */  
  12.         settings = $.extend(defaultSettings,settings);  
  13.   
  14.         /* 
  15.         *   Looping through all the elements and returning them afterwards. 
  16.         *   This will add chainability to the plugin. 
  17.         */  
  18.           
  19.         return this.each(function(){  
  20.   
  21.             var elem = $(this);  
  22.               
  23.             // If the title attribute is empty, continue with the next element  
  24.             if(!elem.attr('title')) return true;  
  25.               
  26.             // Creating new eventScheduler and Tip objects for this element.  
  27.             // (See the class definition at the bottom).  
  28.               
  29.             var scheduleEvent = new eventScheduler();  
  30.             var tip = new Tip(elem.attr('title'));  
  31.   
  32.             // Adding the tooltip markup to the element and  
  33.             // applying a special class:  
  34.               
  35.             elem.append(tip.generate()).addClass('colorTipContainer');  
  36.   
  37.             // Checking to see whether a supported color has been  
  38.             // set as a classname on the element.  
  39.               
  40.             var hasClass = false;  
  41.             for(var i=0;i<supportedColors.length;i++)  
  42.             {  
  43.                 if(elem.hasClass(supportedColors[i])){  
  44.                     hasClass = true;  
  45.                     break;  
  46.                 }  
  47.             }  
  48.               
  49.             // If it has been set, it will override the default color  
  50.               
  51.             if(!hasClass){  
  52.                 elem.addClass(settings.color);  
  53.             }  
  54.               
  55.             // On mouseenter, show the tip, on mouseleave set the  
  56.             // tip to be hidden in half a second.  
  57.               
  58.             elem.hover(function(){  
  59.   
  60.                 tip.show();  
  61.                   
  62.                 // If the user moves away and hovers over the tip again,  
  63.                 // clear the previously set event:  
  64.                   
  65.                 scheduleEvent.clear();  
  66.   
  67.             },function(){  
  68.   
  69.                 // Schedule event actualy sets a timeout (as you can  
  70.                 // see from the class definition below).  
  71.                   
  72.                 scheduleEvent.set(function(){  
  73.                     tip.hide();  
  74.                 },settings.timeout);  
  75.   
  76.             });  
  77.               
  78.             // Removing the title attribute, so the regular OS titles are  
  79.             // not shown along with the tooltips.  
  80.               
  81.             elem.removeAttr('title');  
  82.         });  
  83.           
  84.     }  
  85.   
  86.   
  87.     /* 
  88.     /   Event Scheduler Class Definition 
  89.     */  
  90.   
  91.     function eventScheduler(){}  
  92.       
  93.     eventScheduler.prototype = {  
  94.         set : function (func,timeout){  
  95.   
  96.             // The set method takes a function and a time period (ms) as  
  97.             // parameters, and sets a timeout  
  98.   
  99.             this.timer = setTimeout(func,timeout);  
  100.         },  
  101.         clear: function(){  
  102.               
  103.             // The clear method clears the timeout  
  104.               
  105.             clearTimeout(this.timer);  
  106.         }  
  107.     }  
  108.   
  109.   
  110.     /* 
  111.     /   Tip Class Definition 
  112.     */  
  113.   
  114.     function Tip(txt){  
  115.         this.content = txt;  
  116.         this.shown = false;  
  117.     }  
  118.       
  119.     Tip.prototype = {  
  120.         generate: function(){  
  121.               
  122.             // The generate method returns either a previously generated element  
  123.             // stored in the tip variable, or generates it and saves it in tip for  
  124.             // later use, after which returns it.  
  125.               
  126.             return this.tip || (this.tip = $('<span class="colorTip">'+this.content+  
  127.                                              '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));  
  128.         },  
  129.         show: function(){  
  130.             if(this.shown) return;  
  131.               
  132.             // Center the tip and start a fadeIn animation  
  133.             this.tip.css('margin-left',-this.tip.outerWidth()/2).fadeIn('fast');  
  134.             this.shown = true;  
  135.         },  
  136.         hide: function(){  
  137.             this.tip.fadeOut();  
  138.             this.shown = false;  
  139.         }  
  140.     }  
  141.       
  142. })(jQuery);  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <link rel="stylesheet" type="text/css" href="elemek/colortip-1.0/colortip-1.0-jquery.css"/>  
  6. <title>buborék</title>    
  7. </head>   
  8. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
  9. <script type="text/javascript" src="elemek/colortip-1.0/colortip-1.0-jquery.js"></script>  
  10. <script type="text/javascript" src="elemek/script.js"></script>  
  11. <body>  
  12. <A class="red" title="121212121212121212221221212" href="albumscontent.php">  
  13. <img src="elemek/0.jpg">  
  14. </A>  
  15. <A class="red" title="1222121212121212121221212121" href="albumscontent.php">  
  16. <img src="elemek/0.jpg">  
  17. </A>  
  18. <A class="red" title="12121212121212121212121212121" href="albumscontent.php">  
  19. <img src="elemek/0.jpg">  
  20. </A>  
  21. </body>  
  22. </html>  
 
1

Első körben érdemes a

Hidvégi Gábor · 2012. Jún. 13. (Sze), 10.35
Első körben érdemes a z-indexekkel játszani, bár ez valószínűleg nem fog segíteni. Inkább az lesz a megoldás, hogy a szövegbuborék html kódja a képek után legyen mindenképp, lehetőleg a </body> előtt.
2

Ezt a második, a html -

rob66 · 2012. Jún. 13. (Sze), 10.48
Ezt a második, a html - kóddal kapcsolatos lehetőséget nem igazán értem...
3

Ha van két abszolút

Hidvégi Gábor · 2012. Jún. 13. (Sze), 11.21
Ha van két abszolút pozícionált elem, ami egymásra lóg, és azonos a z-indexük, akkor az lesz fölül, ami a HTML-ben később van. Néha még a z-index sem számít, hiába van az egyiknek nagyobb, mint a másik, ha a másik később van a HTML kódban, akkor az egyik fölé fog kerülni; biztos van emögött valami szabály, de a logikáját nem tudom, annyira nem is érdekel.

A te esetedben a buborék betöltő javascript kódját a </body> elé kéne tenni szerintem, és akkor jó lesz.
4

Sajnos így nem jó. De a

rob66 · 2012. Jún. 13. (Sze), 12.48
Sajnos így nem jó. De a z-index beállításával megoldottam:
z-index:1;

Köszönöm a segítségedet!
5

A z-index fura dolog, nekem

inf · 2012. Jún. 13. (Sze), 12.58
A z-index fura dolog, nekem is most volt egy buboréknál bajom vele. Én a bubit a tartalom mögé akartam betenni, viszont hiába állítottam a tartalomnak 2-es z-index-et a bubinak meg 1-eset, sehogy sem ment be. Érdekes módon -1-es z-index-el meg oda került, ahova akartam. Fura dolgok ezek...
6

Visszatérve a fenti kódra,

rob66 · 2012. Jún. 14. (Cs), 14.44
Visszatérve a fenti kódra, még a buborék szélességét kellene valahogy állítanom, mert jelenleg csak a beírt szöveg hosszától függ.
7

szélesség megadása

asam9 · 2012. Jún. 14. (Cs), 20.06
így próbáltad már?
  1. .colorTip { width200px; }  
8

Igen, de az csak a buborék

rob66 · 2012. Jún. 15. (P), 08.42
Igen, de az csak a buborék garfikus részét csökkenti, a benne lévő szöveg szélességét nem.
12

Itt a megoldás..

rob66 · 2012. Jún. 26. (K), 09.07
text-shadow:0 0 1px white;
/*white-space:nowrap;*/  
width:200px;
9

Lehet, nem értem

Pepita · 2012. Jún. 20. (Sze), 00.01
Kicsit késve:
Lehet én nem értem eléggé a problémád, de miért nem az <img>-nek van title attribútuma? Szerintem ez megoldaná a gondot.
10

A Netről szedtem le ezt a

rob66 · 2012. Jún. 21. (Cs), 12.45
A Netről szedtem le ezt a szöveges buborék megoldást. Ott így használták. De szerintem a buborék szélességének az állítása, - amit még most sem tudtam megoldani -, ettől független.
11

Döntsd el

Pepita · 2012. Jún. 22. (P), 00.48
Buborékszélességet akarsz, vagy azt, hogy felül maradjon?

Szerintem a szélességbe nem jó belenyúlni, mert ezt a böngészők különbözőképp oldják meg. De mindegyik több sorba tördeli a stringet, ha hosszúnak ítéli. A Júzer viszont azt szokta meg, ahogyan az ő böngészője csinálja, ergo jobb inkább arra törekedni, hogy felül legyen mindig. Legalább próbáld ki amit írtam, aztán meglátod.