Změna CSS pomocí Javascriptu
4. 1. 2012 | V kategorii Javascript, Programování, webdesign | Přidejte komentář
Včera jsem potřeboval jednoduchou věc na Bookmarky.cz: zobrazit a skrývat tlačítko (pro smazání) u každého odkazu. Stránka používá JQuery, tak by to nebyl problém.
-
$('.prepinac').toggle(
-
function(){
-
$('.t_tlacitko').show();
-
},
-
function(){
-
$('.t_tlacitko').hide();
-
}
-
)
JQuery funguje tak, že najde všechny objekty odpovídající kritériu “.t_tlacitko” a každému nastaví nový styl. Problém se vyjeví v okamžiku, kdy na stránce potřebujeme vytvořit nový element .t_tlacitko. Ten dostane do vínku pouze výchozí styl, tedy u nového prvku se tlačítko se zobrazí, i když máme ostatní pěkně schované. Bylo by třeba updatovat všechny prvky po každém vytvoření záložky, což by asi nikdo soudný nedělal.
Ideální je skrývat je přímo změnou pravidla v CSS. Přiznám se, myslel jsem, že to lze javascriptem snadněji. Internet Explorer totiž používá pro CSSrules jiné označení než standardy-uznávající okolní svět.
Nakonec jsem našel toto řešení:
-
/*****Library – directly change css rule *****/
-
//Example:changecss('.ClassName','width','280px'); changecss('#IDname','color','red');
-
function changecss(theClass,element,value) {
-
var cssRules;
-
for (var S = 0; S < document.styleSheets.length; S++){
-
try{
-
document.styleSheets[S].insertRule(theClass+' { '+element+': '+value+'; }',document.styleSheets[S][cssRules].length);
-
} catch(err){
-
try{document.styleSheets[S].addRule(theClass,element+': '+value+';');
-
}catch(err){
-
try{
-
if (document.styleSheets[S]['rules']) {
-
cssRules = 'rules';
-
} else if (document.styleSheets[S]['cssRules']) {
-
cssRules = 'cssRules';
-
} else {
-
//no rules found… browser unknown
-
}
-
for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
-
if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
-
if(document.styleSheets[S][cssRules][R].style[element]){
-
document.styleSheets[S][cssRules][R].style[element] = value;
-
break;
-
}
-
}
-
}
-
} catch (err){}
-
}
-
}
-
}
-
}
Vykonání skriptu by mělo být je mnohem rychlejší než pomocí JQuery, protože neměníme styl postupně u všech prvků, ale přímo v hlavním CSS.
-
$('.prepinac').toggle(
-
function(){
-
changecss('.t_tlacitko','display','block')
-
},
-
function(){
-
changecss('.t_tlacitko','display','none')
-
}
-
)
Odlišení prohlížeče IE pomocí CSS hacků
16. 10. 2011 | V kategorii css, webdesign | Přidejte komentář
Pár jednoduchých hacků pro odlišení IE6+a-
Samozřejmě lepší bude asi
-
<!–[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]–>
apod., ale i tohle se může občas hodit.
IE 6 a nižší
* html {}
IE 7 a vyšší
*:first-child+html {} * html {}
Pouze IE 7
*:first-child+html {}
IE 7 a moderní prohlížeče
html>body {}
Moderní prohlížeče (vyšší než IE 7)
html>/**/body {}
(z http://www.webdevout.net , neověřeno )
Zobrazení panelu rychlého spuštění ve Windows 7
14. 3. 2011 | V kategorii webdesign | 1 komentář
Jedna věc mi ve Windows 7 opravu vadila. Ano, jsou to ty obrovské ikony na liště.
Zobrazení panelu s malými roztomilými ikonami z předchozích verzí, na které jsme zvyklí, lze naštěstí nastavit i tady.
Zobrazení panelu Rychlé spuštění ve Windows 7
Klikneme pravým tlačítkem na lištu. Z kontextové nabídky vybereme
Panely nástrojů > Nový panel nástrojů..
Do horního řádku zkopírujte adresu
%appdata%\Microsoft\Internet Explorer\Quick Launch
Výber potvrďte tlačítkem Vybrat složku.
Vpravo dole se objeví panel s ikonami. Pravým tlačítkem ještě schováme popisy a s trochou zručnosti přesuneme panel vlevo.
10 pravidel o odkazech
14. 11. 2010 | V kategorii webdesign | Přidejte komentář
1. Všichni z hloubi duše nenávidí “intro” stránky.
2. Nezáleží na tom, jak je stránka nádherná, nejméně polovina návštěvníků odejde pryč hned z první stránky. Proto je třeba, aby na ní bylo vše podstatné.
3. Návštěvníci raději několikrát otočí kolečkem myši, než by jednou kliknuli na odkaz, nezáleží na tom, jak je stránka dlouhá (platí také na home page).
4. Návštěvník raději klikne na jednoduchý textový odkaz než na obrázkový.
5. Menu jsou nezbytná, ale nejsou výzvou ke kliknutí.
6. Víceúrovňová rozbalovací menu způsobí “zahlcení možnostmi”, které odrazuje od kliknutí
7. Nejlepší výzvou ke kliknutí je textový odkaz “Nahý Barrack Obama”
8. Návštěvník klikne na odkaz pouze v případě, že za ním očekává krátké upřesnění informace (hlavně bez dalšího klikání).
9. Návštěvníci mají šestý smysl na to, jak často je stránka aktualizována. Pokud není, už se nikdy nevrátí.
10. Není víc pravidel.
Volně přeloženo z článku Allena Bootha
Jak nastavit vlastnost u všech klipů v AS3
3. 11. 2010 | V kategorii As3, Flash, webdesign | Přidejte komentář
Toto zkrátka potřebuju pořád. Kód si projde všechny movieClipy uvnitř klipu “world” a nastaví jim průhlednost na 0.2.
-
for (var item:String in world){
-
var fn=this.world.getChildByName(item);
-
fn.alpha=.2;
-
}