Hlavní strana   Blog   Práce   Kontakty   Mapa stránek   Filmy  

Podkategorie

C++
Php
Java
JavaScript
Databáze
OpenGL
Hardware
Software
Algoritmy
Technologie
Webdesign
Bezpečnost
Elektronika
Konference
Jen tak mimochodem

Novinky

Nové články
Nějakou dobu jsem psal blog na živě.cz a tomuto blogu se nevěnoval. Během několika dalších dnů budu některé články z blogu na živě.cz přesouvat sem, na tento blog. Bude se jednat hlavně o články, které obsahují zdrojové kódy, protože na živě není implementováno žádné rozšíření pro psaní kódu do článku.

Linkuj a TopClanky
Přidal jsem ke článkům odkazy na Linkuj.cz a TopClanky.cz. Pokud se vám článek líbí, tak to dejte najevo jeho zalinkováním.

Registrace
Dnes, 13.září, byla přídána možnost registrace.

HTML & JavaScript: roztahovací Select [IE bug]

Internet Explorer neumí roztahovat nabídku HTML selectu, pokud má nastavenou hodnotu width menší než je nejdelší řetězec v optionu a neumožňuje tak zobrazit celou nabídku.

 

Pro pochopení si vyzkoušejte tento jednoduchý příklad selectu v Internet Exploreru:

Select má nastavenou hodnotu

width: 150px

Bohužel hodnoty v optionech jsou delší než je velikost selectu samotného a Internet Explorer neumožňuje při rolování zobrazit celé řetězce tak jak je tomu v jiných prohlížečích.

Pro řešení tohoto problému mě napadly dva způsoby:

AD 1: JavaScript a roztažení selectu

První způsob, který jsem se snažil praktikovat, a který téměř plní svou úlohu je velmi primitivní a spočívá v roztažení (zvětšení hodnoty width) celého selectu po kliknutí a zpětného navrácení hodnot pro OnBlur.

select name="select" 
style="width: 150px;" 
onclick="this.style.width = '250px'" 
onblur="this.style.width = '150px'"

Funkčnost si můžete vyzkoušet zde:

Tento způsob je použitelný, pouze se budete potýkat s problémem, který nastává opět v Internet Exploreru, který po kliknutí na select sice element roztáhne, ale bohužel nezobrazí nabídku. Je tedy nutné klikat dvakrát (nehledě na roztahování stránky při roztahování elementu).

I když to nevypadá jako velký problém, opak je pravdou. V praxi jsem si ověřil, že většina uživatelů po kliknutí na select a nezobrazení nabídky další pokus o kliknutí neučiní.

AD 2 – jQuery extensible select

Druhá možnost, kterou vám nabídnu, je opět za použití JavaScriptu, ovšem v tomto případě nebudeme element roztahovat, ale vytvoříme vlastní nabídku, která bude roztažená dle potřeb.

Do těla stránky si přidáme vlastní div, ve kterém budeme nabídku zobrazovat:

$("body").append("
");

Div má ID SelectBox, přes které k němu budeme přistupovat a které můžeme stylovat.

Nyní stačí ošetřit událost pro kliknutí na select:

$("select.extensible").click(function (){
         $(this).blur();
}

Vlastnost blur() zavře nabídku prohlížeče po kliknutí na select, tak aby nebyla zobrazena a my jsme si mohli vytvořit vlastní.

Do vytvořeného divu si načteme všechny hodnoty z jednotlivých optionů:

//load options
$(this).find("option").each(function (){
    $("#SelectBox").append("
" + $(this).html() + "
");
});

Nakonec divu #SelectBox nastavíme souřadnice zobrazení například těsně pod náš select:

var pos = $(this).offset();
$("#SelectBox").css({left: pos.left, top: pos.top + 20}).show(0);

Popřípadě můžeme nastavit souřadnice přímo pod kurzor myši:

$("select.extensible").click(function (e){
…
       $("#SelectBox).css({left: e.pageX, top: e.pageY})
…
}

Nabídku si můžeme doplnit o obarvení jednotlivých položek při přejetí myší: //.SelSub mouseover event

$(".SelSub").mouseover(function (){
    $(this).css("background-color", "blue")
           .css("color", "white") ;
});

//SelSub mouseout event
$(".SelSub").mouseout(function (){
    $(this).css("background-color", "white")
           .css("color", "black");
});

a nakonec ošetříme kliknutí na položku a její nastavení jako selected v selectu:

var select = $(this);
$(".SelSub").click(function (){
       select.find("option:contains(" + $(this).html() + ")").attr("selected", true)
}

Kompletní příklad vypadá následovně

(kliknutím na obrázek přejdete k ukázce)

Závěrem

Způsobů jak dosáhnout správného zobrazení selectu ve všech prohlížečích (hlavně tedy v Internet Exploreru) bude určitě více. Pokud vás nějaký napadne můžete jej zmínit v komentářích.