NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Skryvanie a zobrazovanie elementov

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Restorator
Člen
Avatar
Restorator:30.5.2019 12:58

Pekný deň prajem..

Mám osobnú webovú stránku, pozostávajúcu len z "index.html", kde sa mi podarilo vyriešiť takmer všetky funkcie formou JavaScriptu.

Stránka má pozadie, na ktorom sú rôzne grafické elementy (všetky v jednom statickom obrázku).

Zkusil jsem: Pre zobrazenie elementov statického obrázka som použil v CSS absolútne pozicovanie s vymedzením oblastí jednotlivých elementov, takže keď prechádzam myšou cez jednotlivé elementy, mení sa mi v určitej vymedzenej časti textový obsah pre daný element.

Použil som k tomu tento kód:

prvok = {
        ukaz: function (prvok) {
                document.getElementById(prvok).style.visibility = 'visible';
        },
        skry: function (prvok) {
                document.getElementById(prvok).style.visibility = 'hidden';
        }
}

Každý element je uzatvorený do tagu DIV a je mu priradená vlastnosť zobrazenia pri nájazde myšou nad jeho oblasť:

<!-- Sekcia Elementy -->
        <div class="nadpis" onmouseover="prvok.ukaz('nadpis')" onmouseout="prvok.skry('nadpis')"></div>
    <div name="prvok" id="nortiana"></div>

        <div class="sviecka" onmouseover="prvok.ukaz('sviecka')" onmouseout="prvok.skry('sviecka')"></div>
    <div name="prvok" id="sviecka"></div>

        <div class="stroj" onmouseover="prvok.ukaz('stroj')" onmouseout="prvok.skry('stroj')"></div>
    <div name="prvok" id="stroj"></div>

        <div class="knihy" onmouseover="prvok.ukaz('knihy')" onmouseout="prvok.skry('knihy')"></div>
    <div name="prvok" id="knihy"></div>

        <div class="brko" onmouseover="prvok.ukaz('brko')" onmouseout="prvok.skry('brko')"></div>
    <div name="prvok" id="brko"></div>

        <div class="listiny" onmouseover="prvok.ukaz('listiny')" onmouseout="prvok.skry('listiny')"></div>
    <div name="prvok" id="listiny"></div>

        <div class="telefon" onmouseover="prvok.ukaz('telefon')" onmouseout="prvok.skry('telefon')"></div>
    <div name="prvok" id="telefon"></div>

<!-- Sekcia Elementy -->

Chci docílit: Po načítaní obsahu stránky je správne načítaný skript pre zobrazovanie elementov, ale chcem dosiahnuť toto:

  1. Funkcia zobrazovania elementov má byť na začiatku funkčná, pretože sa stránka spúšťa s menu, kde je aktívny prvý odkaz Úvod, pričom k tomuto odkazu nie je priradené okno s obsahom nejakého článku. V tomto momente je vidieť každý element, cez ktorý sa dá prechádzať kurzorom myši.
  2. Keď budem klikať na ďalšie odkazy, tak potrebujem, aby skript s funkciami pre zobrazovanie elementov stratil funkčnosť, pretože v tej dobe mám zobrazený určitý obsah pre každý odkaz a pôsobilo by to rušivo, ak by užívateľ náhodne prechádzal po elementoch a tie by zobrazovali zároveň iný textový obsah určený len pre elelementy. Zároveň sú niektoré elementy v danom čase prekryté oknom s článkom, takže sú nedostupné.
  3. Keď prekliknem znovu na odkaz Úvod, tak funkcia zobrazovania elementov by znovu získala platnosť, pretože tento odkaz nezobrazuje okno s obsahom nejakého článku a nedochádza k prekrytiu niektorých elementov.
 
Odpovědět
30.5.2019 12:58
Avatar
Restorator
Člen
Avatar
Odpovídá na Restorator
Restorator:30.5.2019 13:01

ešte opravím kúsok kódu na začiatku, jednalo sa len o preklep:

<!-- Sekcia Elementy -->
        <div class="nadpis" onmouseover="prvok.ukaz('nadpis')" onmouseout="prvok.skry('nadpis')"></div>
    <div name="prvok" id="nadpis"></div>
 
Nahoru Odpovědět
30.5.2019 13:01
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:30.5.2019 13:32

Skryvani bych resil pres zmenu el.className='skry­ty'.
Pokud neco nema reagovat, tak bys musel pridat podminku. treba

        ukaz: function (id) {
if (prvek.otevreno!='') {return ;} // mozna return true ; return ukonci funkci
document.getElementById(prvok).style.visibility = 'visible';
prvek.otevreno = id;
return; // mozna return false
}
onmouseover="return prvok.ukaz('nadpis')"
Editováno 30.5.2019 13:32
 
Nahoru Odpovědět
30.5.2019 13:32
Avatar
Restorator
Člen
Avatar
Odpovídá na Peter Mlich
Restorator:30.5.2019 14:01

Peter Mlich

Ale aký to bude mat vplyv na udalosť onclick="???" v určitom odkaze v menu ?, pretože tam by som očakával funkciu pre požadovanú zmenu. Potreboval by som to ošetriť podľa mojich názvov, aby to bolo funkčné a aby som to lepšie pochopil. S Javascriptom síce mám nejaké súsenosti, ale to sú všetko odvodené vedomosti od príkladov.
Ak to nesprávne chápem, tak sa ospravedňujem.

Dám sem stránku, ktorá je vo výstavbe pre známu, aby bolo jasnejšie, čo očakávam od funkcie, ako som už popisoval na začiatku.

Osobná stránka

 
Nahoru Odpovědět
30.5.2019 14:01
Avatar
Restorator
Člen
Avatar
Odpovídá na Peter Mlich
Restorator:30.5.2019 14:46

Peter Milch

Menu mám spravené takto:

<!-- Sekcia MENU -->
    <ul id="menu">
            <li><a href="" onclick="return false" onmousedown="javascript:toggleSection('uvod');" class="odkaz aktivny">Úvod</a></li>
            <li><a href="" onclick="return false" onmousedown="javascript:toggleSection('biografia');" class="odkaz">Biografia</a></li>
            <li><a href="" onclick="return false" onmousedown="javascript:toggleSection('zaujmy');" class="odkaz">Záujmy</a></li>
            <li><a href="" onclick="return false" onmousedown="javascript:toggleSection('odkazy');" class="odkaz">Odkazy</a></li>
            <li><a href="" onclick="return false" onmousedown="javascript:toggleSection('kontakty');" class="odkaz">Kontakty</a></li>
    </ul>
<!-- Sekcia MENU -->

Pre menu mám použitý JS, cez udalosti onclick a onmousedown, aby sa mi pri výbere odkazu zobrazilo alebo skrylo okno s obsahom. A práve do udalosti onclick chcem za čiarkou vsadiť funkciu, ktorá by mi spracovala chovanie zobrazovania elementov na stránke, ako som už uviedol na začiatku

 
Nahoru Odpovědět
30.5.2019 14:46
Avatar

Člen
Avatar
:30.5.2019 14:57

Je to pekná stránka, ale vzhľadom (nie len) na to, že nie je responzívna, je zároveň nepraktická a google ťa za ňu bude penalizovať.

 
Nahoru Odpovědět
30.5.2019 14:57
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:30.5.2019 15:07

Jo, no, kdyz mi neni uplne jsne, co se vlastne pokousis docilit.
Podle mne ti to ted asi funguje, jak jsi chtel, ne? Kod je sice dost krkolomny, nestejnorody, ale to se da ocekavat od novacka. Muzu zkusit to spojit, prozatim bych to aspon vypsal:

<!-- Sekcia MENU -->
        <ul id="menu">
                <li><a href="" onclick="return false" onmousedown="javascript:toggleSection('uvod');" class="odkaz aktivny">Úvod</a></li>
                <li><a href="" onclick="return false" onmousedown="javascript:toggleSection('biografia');" class="odkaz">Biografia</a></li>
                <li><a href="" onclick="return false" onmousedown="javascript:toggleSection('zaujmy');" class="odkaz">Záujmy</a></li>
                <li><a href="" onclick="return false" onmousedown="javascript:toggleSection('odkazy');" class="odkaz">Odkazy</a></li>
                <li><a href="" onclick="return false" onmousedown="javascript:toggleSection('kontakty');" class="odkaz">Kontakty</a></li>
        </ul>


    <!-- Sekcia PRVKY -->
        <div class="nortiana" onmouseover="prvok.ukaz('nortiana')" onmouseout="prvok.skry('nortiana')"></div>
    <div name="prvok" id="nortiana"></div>

        <div class="sviecka" onmouseover="prvok.ukaz('sviecka')" onmouseout="prvok.skry('sviecka')"></div>
    <div name="prvok" id="sviecka"></div>

        <div class="stroj" onmouseover="prvok.ukaz('stroj')" onmouseout="prvok.skry('stroj')"></div>
    <div name="prvok" id="stroj"></div>

        <div class="knihy" onmouseover="prvok.ukaz('knihy')" onmouseout="prvok.skry('knihy')"></div>
    <div name="prvok" id="knihy"></div>

        <div class="brko" onmouseover="prvok.ukaz('brko')" onmouseout="prvok.skry('brko')"></div>
    <div name="prvok" id="brko"></div>

        <div class="listiny" onmouseover="prvok.ukaz('listiny')" onmouseout="prvok.skry('listiny')"></div>
    <div name="prvok" id="listiny"></div>

        <div class="telefon" onmouseover="prvok.ukaz('telefon')" onmouseout="prvok.skry('telefon')"></div>
    <div name="prvok" id="telefon"></div>
    <!-- Sekcia PRVKY -->


        <script>
                // Add active class to the current button (highlight it)
                var header = document.getElementById("menu");
                var btns = header.getElementsByClassName("odkaz");
                for (var i = 0; i < btns.length; i++) {
                  btns[i].addEventListener("click", function() {
                  var current = document.getElementsByClassName("aktivny");
                  current[0].className = current[0].className.replace("aktivny", "");
                  this.className += " aktivny";
                  });
                }

// -- menu.js ---
function toggleSection(sectionID) {
    var sa = new Array('uvod','biografia','zaujmy','odkazy','kontakty');
    for (s in sa) {
        document.getElementById(sa[s]).style.display = 'none';
    }
   var myTarget = document.getElementById(sectionID);
   myTarget.style.display = 'block';
}

// -- prvky.js --
prvok = {
        ukaz: function (prvok) {
                document.getElementById(prvok).style.visibility = 'visible';
        },
        skry: function (prvok) {
                document.getElementById(prvok).style.visibility = 'hidden';
        }
}

function ukazPrvok(prvok) {
        document.getElementById(prvok).style.visibility = 'visible';
}

function skryPrvok(prvok) {
        document.getElementById(prvok).style.visibility = 'hidden';
}
        </script>
    <!-- Sekcia MENU -->
  • efekt on-mouse-over on-mouse-out se da resit press css hover
<div>aaa<div>skryte</div></div>
<style>
div div {display:none}
div:hover div {display:block}
</style>
  • onmousedown="ja­vascript:toggle­Section('kontak­ty');" - tam se nepise javascript:
  • a jak jsem uz psal, pouzivej zmeny className a ne style.display
Editováno 30.5.2019 15:09
 
Nahoru Odpovědět
30.5.2019 15:07
Avatar
Restorator
Člen
Avatar
Restorator:30.5.2019 15:07

Vladislav Ladicky

Tá stránka je len promo, okrem toho je registrovaná do Google Analytics a Search Console, na ladenie webu si spravím čas, ale musím vyriešiť najskôr jeho funkčnost.

 
Nahoru Odpovědět
30.5.2019 15:07
Avatar
Restorator
Člen
Avatar
Odpovídá na Restorator
Restorator:30.5.2019 15:16

Peter Mlich

Tento kusok kodu tam nepatri, tu som sa len snazil si prisposobit funkcie a dalej s nimi pracovat:

function ukazPrvok(prvok) {
        document.getElementById(prvok).style.visibility = 'visible';
}

function skryPrvok(prvok) {
        document.getElementById(prvok).style.visibility = 'hidden';
}

Momentalne su nahrana aktualizovana stranka, ale v podstate mas pravdu, nie som pokrocily v JavaScripte. Budem rad, ak by sa podarilo osetrit aspon to, co som chcel, aby to bolo funkcne.

 
Nahoru Odpovědět
30.5.2019 15:16
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:30.5.2019 15:23

Cim dele koukam na kod, tim vic chyb vidim :) Teda, spis problemu, ktere ti muzou zkomplikovat navrh.

  • id je unikatni, smi byt ve strance jen 1x. class muzes mit kolikrat chces. Totez name (ale name v css nevyuzijes). id="obsah" napr

Pomoci id si udelas na strance unikatni oblasti, treba navigace, obsah a pod. A do nich das potom vse, co tam ma byt. Treba UL-LI navigaci nebo seznam tech sekci a pod.
A neslo by treba ten obsah resit tak jakoze kotvy?

<ul>
<li class="active"><a href="#sekce1">Sekce1</a></li>
<li><a href="#sekce2">Sekce2</a></li>
</ul>
<div id="sekce1">nadpis + text...</div>
<div id="sekce2">nadpis + text...</div>

A tu kotvu bych pak javascriptem prepisoval na to chovani, jake tam mas.

  • proc navigaci nemas v tagu <nav> a v css nemas s jednotnym id? Jde o o, ze treba .odkaz muze byt i class nekde mino ohranicenou oblast navigace, kdyz pred to nedas id (v mem pripade #nav) oblasti.
#nav ul {position: absolute; top: 201px; left: 323px; font-family: Courier, Arial, sans-serif; font-size: 18px; font-style: normal; color:#272015;}
#nav ul > li {list-style-type: none; width: 140px; height: 29px;}
#nav .odkaz {display: block; color: #272015; text-decoration: none;} /* Style the links */
#nav .aktivny, #nav .odkaz:hover {color: #a35627; font-weight: bold; text-decoration: none;} /* Style the active class - links on mouse-over */

<nav id="nav">
        <ul><!-- id="menu" -->
                <li><a href="" onclick="return false" onmousedown="javascript:toggleSection('uvod');" class="odkaz aktivny">Úvod</a></li>
                <li><a href="" onclick="return false" onmousedown="javascript:toggleSection('biografia');" class="odkaz">Biografia</a></li>
                <li><a href="" onclick="return false" onmousedown="javascript:toggleSection('zaujmy');" class="odkaz">Záujmy</a></li>
                <li><a href="" onclick="return false" onmousedown="javascript:toggleSection('odkazy');" class="odkaz">Odkazy</a></li>
                <li><a href="" onclick="return false" onmousedown="javascript:toggleSection('kontakty');" class="odkaz">Kontakty</a></li>
        </ul>
</nav>
Editováno 30.5.2019 15:23
 
Nahoru Odpovědět
30.5.2019 15:23
Avatar
Restorator
Člen
Avatar
Odpovídá na Peter Mlich
Restorator:30.5.2019 15:36

Peter Mlich

Nezbombarduj ma prosim ta :)

Ano, viem ze ID je unikatne. Co sa tyka tagov nav, section, article a podobne, tak su povinne ?, pretoze som cital, ze su strukturalne uplne zbytocne. Potom by som mal oddelit aj jednotlive sekcie do <section> ? Postupne si pozeram, co mi pises a skusim to prepracovat. Mne kritika nevadi, budem radsej, ak to budem mat v poriadku, takze tvoje pripomienky zrealizujem.

 
Nahoru Odpovědět
30.5.2019 15:36
Avatar
Restorator
Člen
Avatar
Restorator:30.5.2019 15:57

Peter Mlich

Pomocou kotiev som obsah este neriesil, i ked som uz o tom cital a co sa tyka id="obsah", tak toto je len nedopatrenie pri prerabke webu, pretoze predtym bol web rieseny do samostatných html suborov, cize sa v jednom dokumente neobjavilo viackrat .. aby som predisiel nejakym otazkam, tak samozrejme, ze by som niektore veci poriesil aj cez PHP v ramci funkcii, ktore su mi jasnejsie ako JavaScript ... ale v skutocnosti chcem teraz veci riesit len cez HTML a JavaScript.

 
Nahoru Odpovědět
30.5.2019 15:57
Avatar
Restorator
Člen
Avatar
Restorator:30.5.2019 16:22

Peter Mlich

Takze zatial som poriesil tie chyby, ktore si mi doposial uviedol, okrem:

  • a jak jsem uz psal, pouzivej zmeny className a ne style.display
 
Nahoru Odpovědět
30.5.2019 16:22
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:31.5.2019 7:33

Detailista. Resim vsechno :) S temi kotvami jsem jen tak uvazoval. Protoze by to resilo spoustu dalsich veci v pripade, ze se nenacte css. A ve href bude smysluplny text a tak. Zkusim udelat nejakou vlastni verzi, ale jeste nevim kdy :)

 
Nahoru Odpovědět
31.5.2019 7:33
Avatar
Restorator
Člen
Avatar
Odpovídá na Peter Mlich
Restorator:31.5.2019 7:51

Peter Mlich

Islo by zatial spravit aspon script na osetrenie skryvania tych prvkov na stranke, ako som to uviedol uplne na zaciatku ? Popripade ak potrebujes cely zdroj, poslem ti to. Niektore veci som totiz este upravil.

 
Nahoru Odpovědět
31.5.2019 7:51
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:31.5.2019 8:51

https://jsfiddle.net/u06atzq7/
Az na to, ze ted se pozice obrazku odviji od pozice elementu a bude treba nastavit spravne top a left. Ale zas jsem se snazil zbavit spousty js kodu a js kodu z html kod. (na js-fidle v komentarich, na forku jsem to smazal)
Jo, to, co asi chces od zacatku (ale tim si nejsem jisty), tam resi podminka if (id=='#uvod'), kdy cely ten blok necham schovat. Ale muzes proste jen ten after "li:after".

<!-- http://nortiana.atwebpages.com/ -->

<style>
#obalovac {position: relative; margin: 0px auto; width: 1280px; height: 600px; background: url(../img/pozadie.jpg) no-repeat;}

#nav ul {position: absolute; top: 201px; left: 323px; font-family: Courier, Arial, sans-serif; font-size: 18px; font-style: normal; color:#272015;}
#nav ul > li {list-style-type: none; width: 140px; height: 29px;}
#nav a {display: block; color: #272015; text-decoration: none;} /* Style the links */
#nav li.active a, #nav a:hover {color: #a35627; font-weight: bold; text-decoration: none;} /* Style the active class - links on mouse-over */

body {position:relative;}
/*.obsah {position: absolute; padding: 20px; top: 108px; left: 473px; width: 460px; height: 336px; background: url(../img/obsah.png) no-repeat;}*/
#obsahy {position: absolute; padding: 20px; top: 108px; left: 473px; width: 460px; height: 336px; background: url(../img/obsah.png) no-repeat;}
#obsahy .titulok {width: 424px; text-align: center; font-weight: bold; color: #a35627;}
#obsahy .clanok {width: 424px; height: 250px; margin-top: 10px; overflow-y: auto; overflow-x: hidden;}
#obsahy .pata {position: absolute; top: 570px; width: 100%; height: 30px; display: block; padding-top: 10px; font-size: 16px; text-align: center; color: #776e5e; float: left;}
#obsahy .audio {position: absolute; top: 572px; left: 850px;}
#obsahy .sekcia {display: none;}
#obsahy .opened {display: block;}

body {position:relative;}
#nav_prvky.closed {display:none;}
#nav_prvky ul, #nav_prvky li, #nav_prvky a {margin:0; padding:0; display:block; list-style-type:none;}
#nav_prvky ul {position: absolute;}
#nav_prvky li {position: absolute; border:1px solid #f00; cursor:pointer;}
#nav_prvky li:after {content:""; position: absolute; width: 240px; height: 170px; border:2px solid #080;}
#nav_prvky li:hover:after {visibility: visible;}
#nav_prvky li.nortiana {top: 10px; left: 525px; width: 352px; height: 89px;}
#nav_prvky li.nortiana:after { top: 100px; left: 200px; background: url(../img/nortiana.png) no-repeat; content:"nortiana";}
#nav_prvky li.sviecka {top: 277px; left: 168px; width: 83px; height: 183px; z-index: 2;}
#nav_prvky li.sviecka:after {background: url(../img/sviecka.png) no-repeat; content:"sviecka";}
#nav_prvky li.stroj {top: 369px; left: 265px; width: 264px; height: 186px;}
#nav_prvky li.stroj:after {background: url(../img/stroj.png) no-repeat;}
#nav_prvky li.knihy {top: 344px; left: 557px; width: 150px; height: 85px;}
#nav_prvky li.knihy:after {background: url(../img/knihy.png) no-repeat;}
#nav_prvky li.brko {top: 302px; left: 749px; width: 115px; height: 137px;}
#nav_prvky li.brko:after {background: url(../img/brko.png) no-repeat;}
#nav_prvky li.listiny {top: 448px; left: 624px; width: 246px; height: 120px;}
#nav_prvky li.listiny:after {background: url(../img/listiny.png) no-repeat;}
#nav_prvky li.telefon {top: 437px; left: 928px; width: 185px; height: 112px;}*/
#nav_prvky li.telefon:after {background: url(../img/telefon.png) no-repeat;}

</style>
<!-- Sekcia MENU -->
<nav id="nav">
  <ul><!-- id="menu" -->
    <li class="active"><a href="#uvod">Úvod</a></li>
    <li><a href="#biografia">Biografia</a></li>
    <li><a href="#zaujmy">Záujmy</a></li>
    <li><a href="#odkazy">Odkazy</a></li>
    <li><a href="#kontakty">Kontakty</a></li>
  </ul>

</nav>

    <!-- Sekcia PRVKY -->
<nav id="nav_prvky">
  <ul><!-- id="menu" -->
    <li class="nortiana"><a href="#nortiana"></a></li>
    <li class="sviecka" ><a href="#sviecka" ></a></li>
    <li class="stroj"   ><a href="#stroj"   ></a></li>
    <li class="knihy"   ><a href="#knihy"   ></a></li>
    <li class="brko"    ><a href="#brko"    ></a></li>
    <li class="listiny" ><a href="#listiny" ></a></li>
    <li class="telefon" ><a href="#telefon" ></a></li>
  </ul>
</nav>
    <!-- Sekcia PRVKY -->


<!-- Sekcia OBSAH -->
        <div id="obsahy">
    <!-- Podsekcia Úvod -->
        <div id="uvod" class="sekcia" style="display:block;"></div>
    <!-- Podsekcia Úvod -->

    <!-- Podsekcia Biografia -->
        <div id="biografia" class="sekcia">
                <div class="obsah">
                        <div class="titulok"><h1>Biografia</h1></div>
                        <div class="clanok">
                                <span class="tucne">Čo je to Lorem Ipsum?</span>
                                <p>Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
                                <p class="tucne">Odkiaľ pochádza?</p>
                                <p>Napriek všeobecnému presvedčeniu nie je Lorem Ipsum len náhodný text. Jeho korene sú v časti klasickej latinskej literatúry z roku 45 pred n.l., takže má viac ako 2000 rokov. Richard McClintock, profesor latinčiny na Hampden-Sydney College vo Virgínii, hľadal jedno z menej určitých latinských slov, consectetur, z pasáže Lorem Ipsum, a ako vyhľadával výskyt tohto slova v klasickej literatúre, objavil jeho nepochybný zdroj. Lorem Ipsum pochádza z odsekov 1.10.32 a 1.10.33 Cicerovho diela "De finibus bonorum et malorum" (O najvyššom dobre a zle), napísaného v roku 45 pred n.l. Táto kniha je pojednaním o teórii etiky, a bola veľmi populárna v renesancii. Prvý riadok Lorem Ipsum, "Lorem ipsum dolor sit amet..", je z riadku v odseku 1.10.32.</p>
                                <p>Štandardný úsek Lorem Ipsum, používaný od 16. storočia, je pre zaujímavosť uvedený nižšie. Odseky 1.10.32 a 1.10.33 z "De finibus bonorum et malorum" od Cicera tu sú tiež uvedené v ich presnom pôvodnom tvare, doplnené anglickými verziami z roku 1914, v preklade H. Rackhama.</p>
                                <p class="tucne">Prečo ho používame?</p>
                                <p>Je dávno známe, že ak je zrozumiteľný obsah stránky, na ktorej rozloženie sa čitateľ díva, jeho pozornosť je rozptýlená. Dôvodom použitia Lorem Ipsum je fakt, že má viacmenej normálne rozloženie písmen, takže oproti použitiu 'Sem príde text, sem príde text' sa obsah vypĺňanej oblasti na stránke viac podobá na skutočný text. Mnohé balíky publikačného softvéru a editorov webových stránok už používajú Lorem Ipsum ako predvolený výplňový text a keď dáte na internete vyhľadávať 'lorem ipsum', objavíte mnoho webových stránok v rannom štádiu ich vzniku. V minulých rokoch sa objavilo mnoho verzií tohto textu, niekedy náhodou, niekedy úmyselne (pridaný humor a podobne).</p>
                                <p class="tucne">Kde ho môžem získať?</p>
                                <p>Existuje mnoho podôb pasáží Lorem Ipsum, ale väčšina trpela rôznymi zmenami, vložením humoru, alebo náhodných slov, ktoré nevyzerajú ani trocha dôveryhodne. Ak sa chystáte použiť pasáž z Lorem Ipsum, mali by ste sa presvedčiť, že uprostred textu nie je skrytá žiadna časť, ktorá by vás mohla priviesť do nepríjemnej situácie. Všetky generátory Lorem Ipsum na internete opakujú vopred definované časti textu, takže náš generátor je prvým skutočným generátorom na internete. Používa slovník viac ako 200 latinských slov, a kombinuje ich niekoľkými modelovými vetnými štruktúrami, takže generuje Lorem Ipsum, ktoré vyzerá hodnoverne. Vygenerované Lorem Ipsum je týmto spôsobom vždy bez opakujúcich sa častí, bez vtipov a nenáležitých výrazov, atď.</p>
                        </div>
                </div>
        </div>
    <!-- Podsekcia Bigrafia -->

    <!-- Podsekcia Záujmy -->
        <div id="zaujmy" class="sekcia">
                <div class="obsah">
                        <div class="titulok"><h1>Záujmy</h1></div>
                        <div class="clanok">
                                <span class="tucne">Čo je to Lorem Ipsum?</span>
                                <p>Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
                                <p class="tucne">Odkiaľ pochádza?</p>
                                <p>Napriek všeobecnému presvedčeniu nie je Lorem Ipsum len náhodný text. Jeho korene sú v časti klasickej latinskej literatúry z roku 45 pred n.l., takže má viac ako 2000 rokov. Richard McClintock, profesor latinčiny na Hampden-Sydney College vo Virgínii, hľadal jedno z menej určitých latinských slov, consectetur, z pasáže Lorem Ipsum, a ako vyhľadával výskyt tohto slova v klasickej literatúre, objavil jeho nepochybný zdroj. Lorem Ipsum pochádza z odsekov 1.10.32 a 1.10.33 Cicerovho diela "De finibus bonorum et malorum" (O najvyššom dobre a zle), napísaného v roku 45 pred n.l. Táto kniha je pojednaním o teórii etiky, a bola veľmi populárna v renesancii. Prvý riadok Lorem Ipsum, "Lorem ipsum dolor sit amet..", je z riadku v odseku 1.10.32.</p>
                                <p>Štandardný úsek Lorem Ipsum, používaný od 16. storočia, je pre zaujímavosť uvedený nižšie. Odseky 1.10.32 a 1.10.33 z "De finibus bonorum et malorum" od Cicera tu sú tiež uvedené v ich presnom pôvodnom tvare, doplnené anglickými verziami z roku 1914, v preklade H. Rackhama.</p>
                                <p class="tucne">Prečo ho používame?</p>
                                <p>Je dávno známe, že ak je zrozumiteľný obsah stránky, na ktorej rozloženie sa čitateľ díva, jeho pozornosť je rozptýlená. Dôvodom použitia Lorem Ipsum je fakt, že má viacmenej normálne rozloženie písmen, takže oproti použitiu 'Sem príde text, sem príde text' sa obsah vypĺňanej oblasti na stránke viac podobá na skutočný text. Mnohé balíky publikačného softvéru a editorov webových stránok už používajú Lorem Ipsum ako predvolený výplňový text a keď dáte na internete vyhľadávať 'lorem ipsum', objavíte mnoho webových stránok v rannom štádiu ich vzniku. V minulých rokoch sa objavilo mnoho verzií tohto textu, niekedy náhodou, niekedy úmyselne (pridaný humor a podobne).</p>
                                <p class="tucne">Kde ho môžem získať?</p>
                                <p>Existuje mnoho podôb pasáží Lorem Ipsum, ale väčšina trpela rôznymi zmenami, vložením humoru, alebo náhodných slov, ktoré nevyzerajú ani trocha dôveryhodne. Ak sa chystáte použiť pasáž z Lorem Ipsum, mali by ste sa presvedčiť, že uprostred textu nie je skrytá žiadna časť, ktorá by vás mohla priviesť do nepríjemnej situácie. Všetky generátory Lorem Ipsum na internete opakujú vopred definované časti textu, takže náš generátor je prvým skutočným generátorom na internete. Používa slovník viac ako 200 latinských slov, a kombinuje ich niekoľkými modelovými vetnými štruktúrami, takže generuje Lorem Ipsum, ktoré vyzerá hodnoverne. Vygenerované Lorem Ipsum je týmto spôsobom vždy bez opakujúcich sa častí, bez vtipov a nenáležitých výrazov, atď.</p>
                        </div>
                </div>
        </div>
    <!-- Podsekcia Záujmy -->

    <!-- Podsekcia Odkazy -->
        <div id="odkazy" class="sekcia">
                <div class="obsah">
                        <div class="titulok"><h1>Odkazy</h1></div>
                        <div class="clanok">
                                <span class="tucne">Čo je to Lorem Ipsum?</span>
                                <p>Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
                                <p class="tucne">Odkiaľ pochádza?</p>
                                <p>Napriek všeobecnému presvedčeniu nie je Lorem Ipsum len náhodný text. Jeho korene sú v časti klasickej latinskej literatúry z roku 45 pred n.l., takže má viac ako 2000 rokov. Richard McClintock, profesor latinčiny na Hampden-Sydney College vo Virgínii, hľadal jedno z menej určitých latinských slov, consectetur, z pasáže Lorem Ipsum, a ako vyhľadával výskyt tohto slova v klasickej literatúre, objavil jeho nepochybný zdroj. Lorem Ipsum pochádza z odsekov 1.10.32 a 1.10.33 Cicerovho diela "De finibus bonorum et malorum" (O najvyššom dobre a zle), napísaného v roku 45 pred n.l. Táto kniha je pojednaním o teórii etiky, a bola veľmi populárna v renesancii. Prvý riadok Lorem Ipsum, "Lorem ipsum dolor sit amet..", je z riadku v odseku 1.10.32.</p>
                                <p>Štandardný úsek Lorem Ipsum, používaný od 16. storočia, je pre zaujímavosť uvedený nižšie. Odseky 1.10.32 a 1.10.33 z "De finibus bonorum et malorum" od Cicera tu sú tiež uvedené v ich presnom pôvodnom tvare, doplnené anglickými verziami z roku 1914, v preklade H. Rackhama.</p>
                                <p class="tucne">Prečo ho používame?</p>
                                <p>Je dávno známe, že ak je zrozumiteľný obsah stránky, na ktorej rozloženie sa čitateľ díva, jeho pozornosť je rozptýlená. Dôvodom použitia Lorem Ipsum je fakt, že má viacmenej normálne rozloženie písmen, takže oproti použitiu 'Sem príde text, sem príde text' sa obsah vypĺňanej oblasti na stránke viac podobá na skutočný text. Mnohé balíky publikačného softvéru a editorov webových stránok už používajú Lorem Ipsum ako predvolený výplňový text a keď dáte na internete vyhľadávať 'lorem ipsum', objavíte mnoho webových stránok v rannom štádiu ich vzniku. V minulých rokoch sa objavilo mnoho verzií tohto textu, niekedy náhodou, niekedy úmyselne (pridaný humor a podobne).</p>
                                <p class="tucne">Kde ho môžem získať?</p>
                                <p>Existuje mnoho podôb pasáží Lorem Ipsum, ale väčšina trpela rôznymi zmenami, vložením humoru, alebo náhodných slov, ktoré nevyzerajú ani trocha dôveryhodne. Ak sa chystáte použiť pasáž z Lorem Ipsum, mali by ste sa presvedčiť, že uprostred textu nie je skrytá žiadna časť, ktorá by vás mohla priviesť do nepríjemnej situácie. Všetky generátory Lorem Ipsum na internete opakujú vopred definované časti textu, takže náš generátor je prvým skutočným generátorom na internete. Používa slovník viac ako 200 latinských slov, a kombinuje ich niekoľkými modelovými vetnými štruktúrami, takže generuje Lorem Ipsum, ktoré vyzerá hodnoverne. Vygenerované Lorem Ipsum je týmto spôsobom vždy bez opakujúcich sa častí, bez vtipov a nenáležitých výrazov, atď.</p>
                        </div>
                </div>
        </div>
    <!-- Podsekcia Odkazy -->

    <!-- Podsekcia Kontakty -->
        <div id="kontakty" class="sekcia">
                <div class="obsah">
                        <div class="titulok"><h1>Kontakty</h1></div>
                        <div class="clanok">
                                <span class="tucne">Čo je to Lorem Ipsum?</span>
                                <p>Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
                                <p class="tucne">Odkiaľ pochádza?</p>
                                <p>Napriek všeobecnému presvedčeniu nie je Lorem Ipsum len náhodný text. Jeho korene sú v časti klasickej latinskej literatúry z roku 45 pred n.l., takže má viac ako 2000 rokov. Richard McClintock, profesor latinčiny na Hampden-Sydney College vo Virgínii, hľadal jedno z menej určitých latinských slov, consectetur, z pasáže Lorem Ipsum, a ako vyhľadával výskyt tohto slova v klasickej literatúre, objavil jeho nepochybný zdroj. Lorem Ipsum pochádza z odsekov 1.10.32 a 1.10.33 Cicerovho diela "De finibus bonorum et malorum" (O najvyššom dobre a zle), napísaného v roku 45 pred n.l. Táto kniha je pojednaním o teórii etiky, a bola veľmi populárna v renesancii. Prvý riadok Lorem Ipsum, "Lorem ipsum dolor sit amet..", je z riadku v odseku 1.10.32.</p>
                                <p>Štandardný úsek Lorem Ipsum, používaný od 16. storočia, je pre zaujímavosť uvedený nižšie. Odseky 1.10.32 a 1.10.33 z "De finibus bonorum et malorum" od Cicera tu sú tiež uvedené v ich presnom pôvodnom tvare, doplnené anglickými verziami z roku 1914, v preklade H. Rackhama.</p>
                                <p class="tucne">Prečo ho používame?</p>
                                <p>Je dávno známe, že ak je zrozumiteľný obsah stránky, na ktorej rozloženie sa čitateľ díva, jeho pozornosť je rozptýlená. Dôvodom použitia Lorem Ipsum je fakt, že má viacmenej normálne rozloženie písmen, takže oproti použitiu 'Sem príde text, sem príde text' sa obsah vypĺňanej oblasti na stránke viac podobá na skutočný text. Mnohé balíky publikačného softvéru a editorov webových stránok už používajú Lorem Ipsum ako predvolený výplňový text a keď dáte na internete vyhľadávať 'lorem ipsum', objavíte mnoho webových stránok v rannom štádiu ich vzniku. V minulých rokoch sa objavilo mnoho verzií tohto textu, niekedy náhodou, niekedy úmyselne (pridaný humor a podobne).</p>
                                <p class="tucne">Kde ho môžem získať?</p>
                                <p>Existuje mnoho podôb pasáží Lorem Ipsum, ale väčšina trpela rôznymi zmenami, vložením humoru, alebo náhodných slov, ktoré nevyzerajú ani trocha dôveryhodne. Ak sa chystáte použiť pasáž z Lorem Ipsum, mali by ste sa presvedčiť, že uprostred textu nie je skrytá žiadna časť, ktorá by vás mohla priviesť do nepríjemnej situácie. Všetky generátory Lorem Ipsum na internete opakujú vopred definované časti textu, takže náš generátor je prvým skutočným generátorom na internete. Používa slovník viac ako 200 latinských slov, a kombinuje ich niekoľkými modelovými vetnými štruktúrami, takže generuje Lorem Ipsum, ktoré vyzerá hodnoverne. Vygenerované Lorem Ipsum je týmto spôsobom vždy bez opakujúcich sa častí, bez vtipov a nenáležitých výrazov, atď.</p>
                        </div>
                </div>
        </div>
        </div>
    <!-- Podsekcia Kontakty -->

    <!-- Sekcia OBSAH -->


        <script>
function isExist(item) {return typeof(item)!='undefined' && item!=null;}

function classRemove (el, name)
        {
//      current.className = current.className.replace(active, "");
        var patt, reg, str, s;
        if (!isExist(el))
                {return;}
        s    = '\\s+';
        str  = el.className;
        patt = '^'+name+'$' +'|'+ '^'+name+s +'|'+ s+name+'$' +'|'+ s+name+s;
        reg  =  new RegExp(patt, 'g');
        str  = str.replace(reg,'');
        el.className = str;
        return str;
        }

function classAdd (el, name)
        {
//      this.className += " " + active;
        var str;
        if (!isExist(el))
                {return;}
        str = classRemove(el, name);
        str = str=='' ? name : ' '+name;
        el.className += str;
        return str;
        }

function classNav()
{
var root = this;
this.vars = {};
this.vars.nav       = document.querySelector('#nav');
this.vars.li_all    = this.vars.nav.querySelectorAll('li');
this.vars.nav_prvky = document.querySelector('#nav_prvky');
this.navLinkClick = function ()
        {
        var current, el, id, nav, active, opened, closed;
        nav     = root.vars.nav;
        active  = 'active';
        opened  = 'opened';
        closed  = 'closed';
        current = nav.querySelector('li.' + active);
        el = current.querySelector('a');
        id = el.href.replace(/^.*#/, '#');
        el = document.querySelector(id);
        classRemove(current, active);
        classRemove(el, opened);
        el = this.querySelector('a');
        id = el.href.replace(/^.*#/, '#');
        el = document.querySelector(id);
        classAdd(this, active);
        classAdd(el, opened);
        if (id=='#uvod')
                {
                classRemove(root.vars.nav_prvky, closed);
                }
        else    {
                classAdd(root.vars.nav_prvky, closed);
                }
        return false;
        }

this.navInit = function()
        {
        var li_all, actived, i;
        li_all = root.vars.li_all;
        for (i = 0; i < li_all.length; i++)
                {
                li_all[i].addEventListener("click", root.navLinkClick);
                }
        }
this.navInit();
}

var nav;
nav = new classNav();

        </script>
Editováno 31.5.2019 8:54
 
Nahoru Odpovědět
31.5.2019 8:51
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:31.5.2019 8:56

Jo, ty odkazy <a> tam asi nemusi byt.
A samozrejme to nav tam take nemusi byt. Spis mi to prijde spravnejsi, kdyz se jedna o jakousi navigaci. Jinak bych pouzil <div>

Editováno 31.5.2019 8:56
 
Nahoru Odpovědět
31.5.2019 8:56
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:31.5.2019 9:01

jo, a tenhle radek je asi spatne u classAdd
// el.className += str;
el.className = str;
Protoze classRemove vraci cely class string. Ale to bych musel zkusit. Jako, ono to bude fungovat, jen ti bude stale zvetsovat class string :)

 
Nahoru Odpovědět
31.5.2019 9:01
Avatar

Člen
Avatar
:31.5.2019 9:17

Zbytočne dlhý JavaScript. Použite image map ktorá presne na toto slúži. Zjednoduší vám to kód. Pozrite na kód v tomto tutoriále a bude vám to obom hneď jasné: https://www.tutorialspoint.com/…mage_map.htm

 
Nahoru Odpovědět
31.5.2019 9:17
Avatar
Peter Mlich
Člen
Avatar
Odpovídá na
Peter Mlich:31.5.2019 13:25

Mno, ten js resi hlavne menu. Ale mozna mapou by to mel jednodussi, asi.
Jestli to spravne chapu, tak ma tyhle zaludnosti:

  • menu hover - bold
  • menu onclick - class active
  • menu onclick zobraz na presne pozici text
  • obrazky
  • obrazky hover zobraz na presne pozici text
  • obrazky hover funguje jen tehdy, pokud je v menu=uvod
  • kdyz je menu=uvod, tak
 
Nahoru Odpovědět
31.5.2019 13:25
Avatar
Restorator
Člen
Avatar
Restorator:31.5.2019 21:36

Peter Mlich

Skusil som si to u seba prerobit, v podstate to ale este nefunguje, zjednotil si vsetkok kod JS, co je fajn, rovnako si zjednotil aj CSS, tiez fajn.

Chyby su vsak v tomto:

  • pri nacitani stranky sa objavi grafika pozadia clankov, co sa da doriesit tym, ze id#obsahy nemozu mat pozadie, pozadie ziska az id #obsahy .clanok
  • grafiky s textovymi popismy pre elementy sa mi sice zobrazia, ale su vsetky viditelne a umiestnene nie su v grafickom rame na stole ale v miestach, kde sa ma prechadzat nad mysou nad elementami (to preto mali predtym prvky ID a zaroven CLASS), aby sa rozlisilo, ze ked prechadzam nad urcitym elementom, tak ten je skryty v grafickom rame na stole a vzdy sa zobrazi len ten v grafickom rame, ktory obdrzi udalost prechodu mysi nad urcitou oblastou pozadia
  • // el.className += str; (tu som nepostrehol nejake zmeny pri zamene na el.className = str;)

Pisem to teraz narychlo, lebo som bol prec, ja ti to zajtra este prejdem, ci tam nie je zrada len v nejakej malickosti, ktora by sa dala doladit cisto cez CSS a pripadne upravit.

Preto som ti navrhoval, ze ti poslem zdrojak, kde je vsetko na mieste ako ma byt (najmä grafika) a tie upravy by si ihned videl. Nemam s tym problem.

 
Nahoru Odpovědět
31.5.2019 21:36
Avatar
Restorator
Člen
Avatar
Restorator:31.5.2019 21:49

Peter Mlich

Zle som sa vyjadril, nie je to len fajn, to zjednotenie JS a CSS si spravil velmi dobre. Je to teraz omnoho prehladnejsie.

 
Nahoru Odpovědět
31.5.2019 21:49
Avatar
Restorator
Člen
Avatar
Restorator:31.5.2019 22:14

Vladislav Ladicky

Ten Image Map vyzera byt dobre riesenie najmä co sa tyka presneho vymedzenia coords.

 
Nahoru Odpovědět
31.5.2019 22:14
Avatar
Restorator
Člen
Avatar
Restorator:31.5.2019 23:55

Peter Mlich

Takze som si opravil CSS, kde bola chyba s grafikou obsahu na stranke Uvod.
Co sa tyka el.className += str; tak si to nakodoval spravne, pretoze naopak el.className = str; zvysuje pocet okien s obsahom po kazdom prekliknuti odkazu.

Zostava uz len ten problem s pozicovanim elementov pri najazde mysou na urcitu oblast pozadia stranky a zaroven s ich striedavym zobrazenim, pretoze pri kliknuti na uvod su vizualne zobrazene vsetky elementy, pricom maju byt skryte a zobrazovane striedavo.

Na to sa este pozriem.

 
Nahoru Odpovědět
31.5.2019 23:55
Avatar
Restorator
Člen
Avatar
Restorator:2.6.2019 9:00

Peter Mlich

Doriesil som aj to pozicovanie v CSS. Jednalo sa len o problem spravne nastavit hodnoty.

#nav_prvky.closed {display:none;}
#nav_prvky ul, #nav_prvky li, #nav_prvky a {margin:0; padding:0; display:block; list-style-type:none;}
#nav_prvky ul {position: absolute;}
#nav_prvky li {position: absolute; cursor:pointer;}
#nav_prvky li:after {content:""; visibility: hidden; position: absolute; width: 240px; height: 170px;}
#nav_prvky li:hover:after {visibility: visible;}
#nav_prvky li.nortiana {top: 10px; left: 525px; width: 352px; height: 89px; z-index: 2;}
#nav_prvky li.nortiana:after {top: 226px; left: 365px; background: url(../img/nortiana.png) no-repeat;}
#nav_prvky li.sviecka {top: 277px; left: 168px; width: 83px; height: 183px; z-index: 3;}
#nav_prvky li.sviecka:after {top: -41px; left: 722px; background: url(../img/sviecka.png) no-repeat;}
#nav_prvky li.stroj {top: 369px; left: 265px; width: 264px; height: 186px; z-index: 4;}
#nav_prvky li.stroj:after {top: -133px; left: 625px; background: url(../img/stroj.png) no-repeat;}
#nav_prvky li.knihy {top: 344px; left: 557px; width: 150px; height: 85px; z-index: 5;}
#nav_prvky li.knihy:after {top: -108px; left: 333px; background: url(../img/knihy.png) no-repeat;}
#nav_prvky li.brko {top: 302px; left: 749px; width: 117px; height: 139px; z-index: 6;}
#nav_prvky li.brko:after {top: -66px; left: 141px; background: url(../img/brko.png) no-repeat;}
#nav_prvky li.listiny {top: 448px; left: 624px; width: 246px; height: 120px; z-index: 7;}
#nav_prvky li.listiny:after {top: -212px; left: 266px; background: url(../img/listiny.png) no-repeat;}
#nav_prvky li.telefon {top: 437px; left: 928px; width: 185px; height: 112px; z-index: 8;}
#nav_prvky li.telefon:after {top: -201px; left: -38px; background: url(../img/telefon.png) no-repeat;}
  1. Kedze cielova pozicia vsetkych grafickych elementov s textami ma byt zobrazovana na statickom grafickom pozadi stranky v oblasti ramu pre fotografiu, tak jej suradnice pre top a left su rovnake.
  2. Pri prechadzani mysou po vymedzenych oblastiach statickeho grafickeho pozadia su suradnice "top" a "left" nastavene absolutnym pozicovanim v polozke zoznamu li a ich hodnoty su rozne.
  3. Suradnice grafickych elementov s textami v li.:after su teda zavisle od hodnot v li a preto ich vysledne hodnoty pre "li.:after" musia byt vypocitane rozdielom (priratanim alebo odratanim) od hodnot pre "top" a "left" v polozkach zoznamu "li".

Zarazila ma tu jedna skutocnost:

Vymedzene oblasti na statickom grafickom pozadi sa neprekryvaju a i napriek tomu oblasti (knihy a brko) neboli aktivne pri najazde mysou. Toto som musel doriesit pridanim tagu z-index pre polozky zoznamu "li".

Funkcny vysledok

No a na zaver sa ti chcem podakovat za uplne zjednotenie skriptov, za opravy v zdroji stranky a za cas a ustretovost. Vazim si to.

Akceptované řešení
+5 Zkušeností
Řešení problému
 
Nahoru Odpovědět
2.6.2019 9:00
Avatar
Restorator
Člen
Avatar
Restorator:2.6.2019 9:28

Nejako sa mi pri odstranovani starsich ulozenych veci podarilo odstranit aj predosly odkaz, takze tu je oprava:

Funkcny vysledok

 
Nahoru Odpovědět
2.6.2019 9:28
Avatar

Člen
Avatar
Odpovídá na Restorator
:2.6.2019 22:50

Pozri sa na stránku vladol.nakurze.sk či funguje tak, ako si to chcel.

Editováno 2.6.2019 22:50
 
Nahoru Odpovědět
2.6.2019 22:50
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:2.6.2019 22:51

Mozna bych tam dal tranzition efekt + opacity, na obrazky. Vis, aby se to pomalu objevovalo a mizelo a ne tak narazove. Slo vyuzit jquery od zacatku nez se drbat s normal js.
A mimochodem, u tech obrazku lu-li-a neni asi nutne to a, protoze ten obrazek se resi v css, aspon v mem kodu.

 
Nahoru Odpovědět
2.6.2019 22:51
Avatar
Peter Mlich
Člen
Avatar
Odpovídá na
Peter Mlich:2.6.2019 22:55

Pekny. Ale vynechal jsi tu druhou cast, co chtel uz od zacatku. On tam ma obrazky, svicku, pero a pod. A kdyz na ni najedes, tak se zobrazi text v jinem okenku. A toto cele chce, aby fungovalo jen, kdyz ma vybrany prvni ozkach, kdy neukazuje text v tom velkem okenku.
Ale chapu, ze to davas jen na ukazku, ze to za nej resit vse nebudes. Coz mne ted trochu mrzi, ze sem vymekl :)

 
Nahoru Odpovědět
2.6.2019 22:55
Avatar

Člen
Avatar
Odpovídá na Peter Mlich
:2.6.2019 23:13

No veď ja som to tak urobil. Len kým je na stránke Úvod, tak funguje mouseover nad sviečkou a pod. A keď má zobrazenú ktorúkoľvek inú stránku, tak je to vypnuté, v tom monitore sa vtedy tie texty nezobrazujú. Či? Zle som to pochopil?

 
Nahoru Odpovědět
2.6.2019 23:13
Avatar
Peter Mlich
Člen
Avatar
Odpovídá na
Peter Mlich:3.6.2019 7:47

Aha. No, chci rici, ze nic z toho ve Firefox nefunguje po nacteni stranky.
http://vladol.nakurze.sk
Ani cursor:pointer se neobjevi nad svickou.
Ani po prekliknuti menu Biografia a zpet na Uvod se nic nedeje.
Konzola FF ale nehlasi chybu, tak nevim, v cem je problem.
V Explorer 11 to take nefunguje a cele se cele rozsype, ale to je asi jiny problem.
V Edge 42 to funguje, jak rikas. Ma to chybku, ze zustane posledni otevreny. Ale proti memu hoveru posledni otevreny nemizi hned, jak opustis kurzor objektu. Coz povazuji za plusko.
Ale jinak super.
Stejne mam radeji stary zapis js nez tyhle divoke konstrukce ala python.

 
Nahoru Odpovědět
3.6.2019 7:47
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:3.6.2019 7:49

Co bych mozna jeste v mem kodu povazoval za chybu, ze jsem text presunul do css a nezustal v html. Coz klidne mohl. Az bude chtit prepisovat text, bude muset vlezt do css, kde by nemel vubec potrebovat chodit.

 
Nahoru Odpovědět
3.6.2019 7:49
Avatar
Restorator
Člen
Avatar
Restorator:3.6.2019 10:11

Vladislav Ladicky

Diky za namahu, ale je tam par nezrovnalosti.

  • pri prepnuti na iny odkaz z odkazu Uvod zostavaju vyznacene oblasti pozadia nadalej aktivne
  • a ako pisal Peter, nefunguje to v niektorych prehliadacoch
 
Nahoru Odpovědět
3.6.2019 10:11
Avatar
Restorator
Člen
Avatar
Restorator:3.6.2019 10:20

Peter Mlich

  • ked by tam bol transition efekt, tak osobne si myslim, ze ako uzivatel, ked budem prechadzat po elementoch, tak musim podrzat kurzor mysi nad oblastou elementu do doby, kym sa efekt vykresli .. pri prvom elemente by ma to este bavilo, ale pri dalsich uz asi nie .. mozno mas ale pravdu ak by efekt trval kratko a bol by na ten casovy interval aj spolahlivo vizualne zachytitelny
 
Nahoru Odpovědět
3.6.2019 10:20
Avatar
Peter Mlich
Člen
Avatar
Odpovídá na Restorator
Peter Mlich:3.6.2019 10:38

Blik objev, a hned blik zhasni, to je dost na nic. To se mi prave libi na scriptu Vladislav Ladicky, ze ten text tam zustava, ikdyz opustis svicku, dokud to jiny obrazek neprepise. Tam by mozna slo prave spustit casovac pro rychle objevovani. Po opusteni oblasti casovac, ktery to chvili podrzi objevene a pak se postupne rozplyne.

 
Nahoru Odpovědět
3.6.2019 10:38
Avatar
Restorator
Člen
Avatar
Restorator:3.6.2019 10:44

Peter Mlich

<a href="#element" ></a>

a nie je potrebne, to je pravda, riesi to class pre li

 
Nahoru Odpovědět
3.6.2019 10:44
Avatar
Restorator
Člen
Avatar
Restorator:3.6.2019 10:51

Peter Mlich

tak by to islo s tym efektom ako pises, ak by bolo objavovanie primerane rychle a to pomale zhasinanie by bolo okamzite prerusene pri prechode na iny element

 
Nahoru Odpovědět
3.6.2019 10:51
Avatar
Restorator
Člen
Avatar
Restorator:3.6.2019 11:47

Peter Mlich

No skusil som to spravit cisto cez CSS takto: - nepremyslal som teraz nad tym, ci je to nutne zaclenovat v CSS do #nav_prvky

CSS:

.fade {
   opacity: 0.5;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

HTML:

<!-- Sekcia PRVKY -->
<nav id="nav_prvky">
  <ul><!-- id="menu" -->
        <li class="nortiana fade"></li>
        ...
  </ul>
</nav>
<!-- Sekcia PRVKY -->

Vysledok:

WEB

 
Nahoru Odpovědět
3.6.2019 11:47
Avatar
Restorator
Člen
Avatar
Restorator:3.6.2019 11:49

Peter Mlich:

Len si vyprazdni v prehliadaci cache, nieco mi blbne v .htaccess pri cachovani.

 
Nahoru Odpovědět
3.6.2019 11:49
Avatar
Restorator
Člen
Avatar
Restorator:3.6.2019 12:20

Oprava: - pre fade

.fade {
   opacity: 0.5;
}
.fade:hover {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
 
Nahoru Odpovědět
3.6.2019 12:20
Avatar
Restorator
Člen
Avatar
Restorator:3.6.2019 12:47

s tym fade (pre stracanie sa) asi moc nenaexperimentujem, dovod je prosty, elementy v grafike pozadia su prilis blizko seba .. ak by sa jednalo o elementy viac vzdialene od seba (napr. len pisaci stroj, brko a telefon), tak by to davalo zmysel

 
Nahoru Odpovědět
3.6.2019 12:47
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 41 zpráv z 41.