| Autor | Zpráva | ||
|---|---|---|---|
| ra100 Profil * |
#1 · Zasláno: 18. 7. 2013, 16:03:22
Všetkých Vás zdravím.
V js som málo zbehlí, no niektoré jednoduhšie veci si dokážem prisposobiť, alebo nahradiť starou dobrou štruktúrou html/css, ako v nasledujúcom príklade. Nie je to najdokonalejšia náhrada, má svoje drsné úskalia, napr. približovanie - odďalovanie, alebo klikanie na ktorýkoľvek link v štruktúre sposobuje pri height stránky vačšej, ako je obrazovka, skákanie na #id z url a ďaľšie nepredvídaťeľné problémy, hlavne pri flexi-layoute. Tieto problémi asi nikdy nebudem mať pod úplnou kontrolou. ..no nie o tom chcem. Bol by som vďačný za jednoduchú ukážku JS, alebo linky, kde JS sposobí po kliknutí na ktorýkoľvek link napr. zpomalený prechod medzi prvkami - <li></li> a li#gallery_links <-> li#gallery_links1.
Tu je zdroj - <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>html/css flexibilny layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="sk" />
<style type="text/css">
body {
background-color:#F6F4F5;
}
* {
margin: 0;
padding: 0;
text-decoration:none;
background: none;
font-family: verdana;
}
#thumbs {
width: 55%;
min-width: 400px;
height: 43%;
min-height: 210px;
margin: 260px 0 0 30px;
overflow: hidden;
position: absolute;
z-index: 90;
}
#thumbs li {
list-style: none;
}
li#show_thumbs, li#show_thumbs1 {
width: 67%;
min-width: 50px;
height: 100%;
float: left;
overflow: hidden;
text-align: center;
}
li#show_thumbs ul li, li#show_thumbs1 ul li {
width: 100%;
height: 300px;
}
li#show_thumbs ul li a, li#show_thumbs1 ul li a {
display: block;
padding: 14% 0;
color: #a9a9a9;
font-weight: bold;
font-size: 24px;
}
li#show_thumbs ul li a:hover, li#show_thumbs1 ul li a:hover {
color: #708090;
}
li#gallery_links, li#gallery_links1 {
width: 32%;
height: 100%;
float: left;
}
li#gallery_links ul, li#gallery_links1 ul {
width: 70%;
height: 100%;
padding: 16% 0 0 10px;
}
li#gallery_links ul li, li#gallery_links1 ul li {
text-align: left;
margin-bottom: 10px;
}
li#gallery_links ul li a, li#gallery_links1 ul li a {
font-size: 10px;
color: #c0c0c0;
}
li#gallery_links ul li a:hover, li#gallery_links1 ul li a:hover {
color: #a9a9a9;
text-decoration: underline;
}
li#gallery_links1 {
margin: 0 0 0 70%;
}
</style>
</head>
<body>
<ul id="thumbs">
<li id="show_thumbs">
<ul>
<li id="li1"><a href="#li11">TOTO JE TEXT JEDNA - 1, NA KTORY, KED KLIKNES, ZOBRAZI SA TI VELKE A !</a></li>
<li id="li2"><a href="#li22">TOTO JE TEXT DVA - 2, NA KTORY, KED KLIKNES, ZOBRAZI SA TI VELKE B !</a></li>
<li id="li3"><a href="#li33">TOTO JE TEXT TRI - 3, NA KTORY, KED KLIKNES, ZOBRAZI SA TI VELKE C !</a></li>
<li id="li4"><a href="#li44">TOTO JE TEXT STVRTY - 4, NA KTORY, KED KLIKNES, ZOBRAZI SA TI VELKE D !</a></li>
<li id="li5"><a href="#li55">TOTO JE TEXT PAT - 5, NA KTORY, KED KLIKNES, ZOBRAZI SA TI VELKE E !</a></li>
<li id="li6"><a href="#li66">TOTO JE TEXT SEST - 6, NA KTORY, KED KLIKNES, ZOBRAZI SA TI VELKE F !</a></li>
<li id="li11"><a href="#li1">...A...<br />DALSIE UZASNE VECI Z MOZNOSTI VELKEHO A...ATD...ATD...ATD</a></li>
<li id="li22"><a href="#li2">...B...<br />DALSIE UZASNE VECI Z MOZNOSTI VELKEHO B...ATD...ATD...ATD</a></li>
<li id="li33"><a href="#li3">...C...<br />DALSIE UZASNE VECI Z MOZNOSTI VELKEHO C...ATD...ATD...ATD</a></li>
<li id="li44"><a href="#li4">...D...<br />DALSIE UZASNE VECI Z MOZNOSTI VELKEHO D...ATD...ATD...ATD</a></li>
<li id="li55"><a href="#li5">...E...<br />DALSIE UZASNE VECI Z MOZNOSTI VELKEHO E...ATD...ATD...ATD</a></li>
<li id="li66"><a href="#li6">...F...<br />DALSIE UZASNE VECI Z MOZNOSTI VELKEHO F...ATD...ATD...ATD</a></li>
</ul>
</li>
<li id="gallery_links">
<ul>
<li><a href="#li1"><b>TEXT JEDNA - 1</b></a></li>
<li><a href="#li2"><b>TEXT DVA - 2</b></a></li>
<li><a href="#li3"><b>TEXT TRI - 3</b></a></li>
<li><a href="#li4"><b>TEXT STVRTY - 4</b></a></li>
<li><a href="#li5"><b>TEXT PAT - 5</b></a></li>
<li><a href="#li6"><b>TEXT SEST - 6</b></a></li>
<li><a href="#gallery_links1"><b>a nekonecne dalsie moznosti...</b></a></li>
</ul>
</li>
<li id="gallery_links1">
<ul>
<li id="li7"><a href="#"><b>nekonecne moznosti - 1</b></a></li>
<li id="li8"><a href="#"><b>nekonecne moznosti -2</b></a></li>
<li id="li9"><a href="#"><b>nekonecne moznosti - 3</b></a></li>
<li id="li10"><a href="#"><b>nekonecne moznosti - 4</b></a></li>
<li id="li12"><a href="#"><b>nekonecne moznosti - 5</b></a></li>
<li id="li13"><a href="#"><b>nekonecne moznosti - 6</b></a></li>
<li id="li14"><a href="#li1"><b>VRAT SA NA TEXT JEDNA - 1...</b></a></li>
</ul>
</li>
</ul>
</body>
</html>...dopredu ďakujem za akúkoľvek radu a ochotu. |
||
|
Časová prodleva: 4 dny
|
|||
| peta Profil |
#2 · Zasláno: 22. 7. 2013, 09:27:20
Nerozumim, co to ma delat. Neni tam zadny js na opraveni. Nerozumim ani tomu popisu s flexi-layout.
http://peter-mlich.wz.cz/web/js/prx/efekty/mizeni/menu4.htm - casovac+onmouseover http://peter-mlich.wz.cz/web/js/prx/efekty/mizeni/menustar.htm - casovac+onmouseover http://peter-mlich.wz.cz/web/js-eff/photo/slide-pp.htm - casovac / casovac+onclick |
||
|
Časová prodleva: 14 dní
|
|||
| ra100 Profil * |
#3 · Zasláno: 4. 8. 2013, 23:58:58
peta:
Ďakujem ! ) |
||
|
Časová prodleva: 11 let
|
|||
0