Archiv štítku: programování

jQuery UI Tooltip – při mouseover tooltip odskočí

Řešení problému, pokud při najetí myší na objekt, který zobrazuje jQuery UI Tooltip a mírném posunutí myši tento tooltip odskočí. Mně se stalo, že tooltip skočil nahoru. Dá se řešit tím, že se nastaví tento CSS styl:

.ui-tooltip {
  position: absolute;
}

Cufón – hover efekt odkazů

Již dříve jsem zde publikoval zápis týkající se knihovny Cufón, která umožňuje použití prakticky libovolného fontu na webu. Ne že by to byla zrovna skvělá možnost, ale pro většinu neobvyklých fontů nic lepšího neexistuje, pokud vím.

Aby správně fungoval hover efekt a barva odkazu se změnila na barvu při hover efektu a následně při odjetí myší zpět, je třeba upravit kód takto:

Cufon.replace('a', { color: black});
Cufon.replace('a:hover', { hover: true, color: red});

$('a').hover(function() {
   Cufon.replace('a:hover', { hover: true, color: red});
 },
 function() {
   Cufon.replace('a', { hover: true, color: black});
 }
);

 

Příprava HTML pro newsletter

Pokud potřebujete zkombinovat HTML + CSS soubor pro použití v newsletteru, pomůže knihovna Emogrifier. Možná existuje i jiná knihovna, ale tato vypadá, že funguje snad 100% dobře.

Této třídě se předá HTML + CSS kód a výsledkem bude HTML kód, který bude mít CSS styly vložené jako inline styly k jednotlivým elementům. Docela šikovné a může se to hodit.

Jen jsem narazil na problém, že pokud je u některého HTML elementu dvakrát atribut style (ano, hloupý překlep 🙂 ), tak převod zhavaruje.

TinyMCE: Zadávání barev v dekadickém RGB kódu

Pokud potřebujete mít možnost zadávat ve výěbru barvy v editoru TinyMCE barvu v dekadickém RGB kódu, postačí následující úprava souboru tiny_mce/themes/advanced/color_picker.html. Přidané části kódu jsou zvýrazněny tučně.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>{#advanced_dlg.colorpicker_title}</title>
 <script type="text/javascript" src="../../tiny_mce_popup.js"></script>
 <script type="text/javascript" src="../../utils/mctabs.js"></script>
 <script type="text/javascript" src="js/color_picker.js"></script>
 <script>
 var rgb_init = false;
 function colorHexToRgb() {
 var rgb = convertHexToRGB(document.getElementById('color').value);
 document.getElementById('rgbval_r').value = rgb.r;
 document.getElementById('rgbval_g').value = rgb.g;
 document.getElementById('rgbval_b').value = rgb.b;
 rgb_init = true;
 }
 function colorRgbToHex() {
 if (rgb_init=true)
 document.getElementById('color').value = convertRGBToHex('rgb('+document.getElementById('rgbval_r').value+','+document.getElementById('rgbval_g').value+','+document.getElementById('rgbval_b').value+')');
 showColor(document.getElementById('color').value,'');
 }
 </script>
</head>
<body id="colorpicker" style="display: none" role="application" aria-labelledby="app_label">
 <span id="app_label" style="display:none;">{#advanced_dlg.colorpicker_title}</span>
<form onsubmit="insertAction();return false" action="#">
 <div>
 <ul>
 <li id="picker_tab" aria-controls="picker_panel"><span><a href="javascript:mcTabs.displayTab('picker_tab','picker_panel');" onmousedown="return false;">{#advanced_dlg.colorpicker_picker_tab}</a></span></li>
 <li id="rgb_tab" aria-controls="rgb_panel"><span><a href="javascript:;" onclick="mcTabs.displayTab('rgb_tab','rgb_panel');" onmousedown="return false;">{#advanced_dlg.colorpicker_palette_tab}</a></span></li>
 <li id="named_tab" aria-controls="named_panel"><span><a href="javascript:;" onclick="javascript:mcTabs.displayTab('named_tab','named_panel');" onmousedown="return false;">{#advanced_dlg.colorpicker_named_tab}</a></span></li>

 <li id="rgbval_tab" aria-controls="rgbval_panel"><span><a href="javascript:;" onclick="javascript:mcTabs.displayTab('rgbval_tab','rgbval_panel');colorHexToRgb();" onmousedown="return false;">RGB</a></span></li>
 </ul>
 </div>

 <div>
 <div id="picker_panel">
 <fieldset>
 <legend>{#advanced_dlg.colorpicker_picker_title}</legend>
 <div id="picker">
 <img id="colors" src="img/colorpicker.jpg" onclick="computeColor(event)" onmousedown="isMouseDown = true;return false;" onmouseup="isMouseDown = false;" onmousemove="if (isMouseDown && isMouseOver) computeColor(event); return false;" onmouseover="isMouseOver=true;" onmouseout="isMouseOver=false;" alt="" />

 <div id="light">
 <!-- Will be filled with divs -->
 </div>

 <br style="clear: both" />
 </div>
 </fieldset>
 </div>

 <div id="rgb_panel">
 <fieldset>
 <legend id="webcolors_title">{#advanced_dlg.colorpicker_palette_title}</legend>
 <div id="webcolors">
 <!-- Gets filled with web safe colors-->
 </div>

 <br style="clear: both" />
 </fieldset>
 </div>

 <div id="named_panel">
 <fieldset id="named_picker_label">
 <legend id="named_title">{#advanced_dlg.colorpicker_named_title}</legend>
 <div id="namedcolors" role="listbox" tabindex="0" aria-labelledby="named_picker_label">
 <!-- Gets filled with named colors-->
 </div>

 <br style="clear: both" />

 <div id="colornamecontainer">
 {#advanced_dlg.colorpicker_name} <span id="colorname"></span>
 </div>
 </fieldset>
 </div>

 <div id="rgbval_panel">
 <fieldset>
 <table>
 <tr><td>R:</td><td><input type="text" name="rgbval_r" id="rgbval_r" style="width:30px;" onchange="colorRgbToHex()"></td></tr>
 <tr><td>G:</td><td><input type="text" name="rgbval_g" id="rgbval_g" style="width:30px;" onchange="colorRgbToHex()"></td></tr>
 <tr><td>B:</td><td><input type="text" name="rgbval_b" id="rgbval_b" style="width:30px;" onchange="colorRgbToHex()"></td></tr>
 </table>
 <p>Hodnoty zadávejte v dekadické soustavě, budou přepočítány.</p>
 </fieldset>

 </div>

 </div>

 <div>
 <input type="submit" id="insert" name="insert" value="{#apply}" />

 <div id="preview"></div>

 <div id="previewblock">
 <label for="color">{#advanced_dlg.colorpicker_color}</label> <input id="color" type="text" size="8" aria-required="true" />
 </div>
 </div>
</form>
</body>
</html>