Ukaž více – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Ukaž více – CSS – Fórum – Programujte.comUkaž více – CSS – Fórum – Programujte.com

 

Scorpius0
Duch
15. 11. 2007   #1
-
0
-

Hoj

jsem celkem zacatecnik v CSS a XHTML. Zajimalo by mě jak udělat takovýto ukaž více -> méně. Našel jsem si pěkný příklad na http://www.stunicholls.com/various/more.html

jenže oni tam maji jen kod bez vysvětlení. Vůbec nechápu jak to fuguje. Řikal jsem si, že z toho vytahnu kod, jen k tomu prvnímu div-u, ale ani to se mi poradne nepovedlo :( Vypada to stejne, ale chybi tomu funkcnost. Vytahnuty kod:



</head>
<style>
/* always visible */
#outer .holder {padding:1em; border:1px solid #ddd; margin:0 20px 10px 0;}
#outer .holder p {padding:5px 0 0 0; margin:0;}
#outer .holder p.bold {font-weight:bold;}
#outer .holder h2 {margin:0; padding:0;}

/* unclicked style div.more */
#outer div.more i {float:right; margin-right:-10px 10px 0 0; cursor:pointer; color:#c00; font-weight:bold;}
#outer div.more i.hide {display:none;}
#outer div.more p {display:none;}
#outer div.more img {display:none;}

/* clicked style div.click */
#outer div.click i.show {display:none;}
#outer div.click i.hide {display:block;}
#outer div.click p {display:block;}
#outer div.click img {display:block; float:left; padding-right:10px;}

</style>
<body>
<div id="outer">

<div class="holder">
<h2>Alice's Adventures in Wonderland</h2>
<p class="bold">by Lewis Carroll</p>
<p class="bold">Down the Rabbit-Hole</p>
<p>ALICE was beginning to get very tired of sitting by her sister on the bank and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice, "without pictures or conversations?'</p>
<div class="more">
<i class="show">more »</i>
<i class="hide">« less</i>


<img src="http://www.stunicholls.com/various/more/rabbit.jpg" alt="rabbit" title="" />
<p>So she was considering, in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
<p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself "Oh dear! Oh dear! I shall be too late!" (when she thought it over afterwards it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but, when the Rabbit actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and was just in time to see it pop down a large rabbit-hole under the hedge.</p>

</div> <!-- end of more -->
</div> <!-- end of holder -->
</div>


Pls co mi tam chybi? (Mozna uz bych to pak pochopil, ale zkuste mi popsat ten princip jak to funguje)

Diky

Nahlásit jako SPAM
IP: 212.71.129.–
mates0
Grafoman
15. 11. 2007   #2
-
0
-
Nahlásit jako SPAM
IP: 85.207.161.–
dinkin0
Newbie
16. 11. 2007   #3
-
0
-
Nahlásit jako SPAM
IP: 212.90.248.–
Scorpius0
Duch
16. 11. 2007   #4
-
0
-

Dik, pres Javascritp to je mnohem jednodussi.

2dinkin: No todle to jsem i nasel, to je prave stara verze tohodle [url]http://www.stunicholls.com/various/more.html
[/url] Ta stara se mi nelibi, ta nova vypada mnohem lip.

Nahlásit jako SPAM
IP: 212.71.129.–
mates0
Grafoman
16. 11. 2007   #5
-
0
-

dinkin napsal:
myslím, že to co sháníšje tu http://css.interval.cz/clanky/odkaz-vice/


Mě se ten text zobrazí jenom když stále držím tlačítko myši. Dělám vám to také nebo to dělá jenom v opeře??

Nahlásit jako SPAM
IP: 85.207.161.–
pawlik0
Grafoman
16. 11. 2007   #6
-
0
-

To mates : FF v pohodě.

Nahlásit jako SPAM
IP: 84.42.152.–
Sa Nata A Na. Howgh
mates0
Grafoman
16. 11. 2007   #7
-
0
-

To pawlik : takže to bude chyba v opeře. zkusim nahlásit jako bug ;). díky

Nahlásit jako SPAM
IP: 85.207.161.–
Petroff0
Věrný člen
19. 11. 2007   #8
-
0
-

http://css.interval.cz/priklady/priklad-95-1.htm#more (alias http://www.cssplay.co.uk/menu/more )
V Opeře pokud se ti podaří při stisknutém tlačítku pohybem myši vybrat (=modrý selected text) třeba jen jediné písmeno, pak to drží i při povolení stisknutí. Dá se to nacvičit :=] (zajímavé je že ke zrušení je třeba kliknout mimo a teprve když myší uděláš hover nad text, tak ten zmizí :=))
Vyplývá z toho, že i v Opeře psedotřída :focus nějak funguje.
Nejlepší by bylo do testovací stránky zabudovat okénko do kterého by javascript vypisoval (setInterval 100ms) vybrané css vlastnosti a stavy (hover active focus selected) odkazu a dalších zúčastněných prvků.
A pak zkoušet modifikovat pův.kód => zjistit, čím se liší zacházení Opery s těmito vlastnostmi od těch ostatních (funguje to v FF, ie6, ie7 - v Safari taky ne; další jsem netestoval).
Byl by to velmi užitečný počin, kdyby se to povedlo....

Nahlásit jako SPAM
IP: 89.102.211.–
mates0
Grafoman
19. 11. 2007   #9
-
0
-

To Petroff : no to by bylo dobrý. jen kdyby se někdo našel

Nahlásit jako SPAM
IP: 85.207.161.–
Khamos0
Newbie
19. 11. 2007   #10
-
0
-

Stačí dát skrytý obsah do <div id='skrytacast' style='display: none'> a poté klasicky odkaz <a href='#' onClick='skrytacast.style.display=block'>více...</a>.

Nahlásit jako SPAM
IP: 90.176.65.–
Petroff0
Věrný člen
19. 11. 2007   #11
-
0
-

Přece jen vidím rozdíl (asi 10%ní) jestli se obejdeš bez JS nebo ne.
Jinak proti bohatším možnostem či komfortu pomocí javascriptu nic nenamítám, naopak.

Nahlásit jako SPAM
IP: 89.102.211.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 1 host

Podobná vlákna

Více proměných — založil Hranicarrr

Více o Keyboard v c# — založil gameWriter

Více obrázků — založil Michal

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý
Načítám...