Avatar
Tomáš Dvořák:13. září 22:24

Ahoj,

mám odkaz, který generuje nějaký přehled objednávek v HTML, např:

http://www.shop.xy/prehled_objednavek.php#konec

s tím, že tam mám kotvu, abych se dostal na konec tabulky, kde poslední řádek má:

<tr id="konec">....</tr>

Při načítání bez kódu níže se načte stránka a hodí mě k tomuto ID, tedy na "konec".

Problém nastává, když jsem použil tento kód, abych zobrazil načítání kolečka dokud se nenačte stránka.

<style>
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
/* Center the loader */
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
@-webkit-keyframes animatebottom {
from { bottom:0px; opacity:0 }
to { bottom:0px; opacity:1 }
}
@keyframes animatebottom {
from{ bottom: 0px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#myDiv {
display: none;
}
</style>
<body onload="myFunction()">
        <div id="loader"></div>
        <div style="display:none;" id="myDiv" class="animate-bottom">
                obsah ---- tabulka ----- atd
<script>
                var myVar;

                function myFunction() {
                    myVar = setTimeout(showPage, 100);
                }

                function showPage() {
                  document.getElementById("loader").style.display = "none";
                  document.getElementById("myDiv").style.display = "block";
                }
            </script>
        </div>
    </body>
</html>

Proč to tento script blokuje? Pokud umístím odkaz na tuto stránku

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

tak všechno funguje.

Zdroj načítacího kolečka jsem použil z https://www.w3schools.com/…s_loader.asp

Kde hledat chybu?

Díky za pomoc

 
Odpovědět 13. září 22:24
Avatar
Robert Poč
Člen
Avatar
Robert Poč:14. září 14:26

Ten odkaz/kotva funguje, ale vzheldem k tomu, že myDiv má v okamžiku zavolání kotvy výšku 0px, postaví se prohlížeč na začátek. Teprve následně se zobrazí obsah, který se ale již odroluje.

Zkus v těle showPage() odrolovat na #kotva

Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět 14. září 14:26
Avatar
Tomáš Dvořák:14. září 20:45

Tomuto jsem se nejprve bránil, ale dává smyl, že to tam vyruší.

Kdyby to někdo řešil, tak jsem tam udělal toto, doufám, že je to v rámci JS v pořádku

var type = window.location.hash.substr(1);
location.href = "#" + type;
 
Nahoru Odpovědět 14. září 20:45
Avatar
Taskkill
Šéfredaktor
Avatar
Odpovídá na Tomáš Dvořák
Taskkill:14. září 20:51

Proc osekavas z toho stringu prvni znak, kdyz ten samej znak k nemu pak zase prilepis?
Pokud se nepletu, muzes proste udelat:

location.href = window.location.hash
 
Nahoru Odpovědět 14. září 20:51
Avatar
Tomáš Dvořák:14. září 20:53

Ano, jsem trotl. Jak jednoduché.

Děkuji

Editováno 14. září 20:53
 
Nahoru Odpovědět 14. září 20:53
Avatar
Tomáš Dvořák:14. září 21:41

Jen doplním, že v případě, že je odkaz bez hashtagu, tak se to zacyklí, upravil jsem to takto:

var hash = window.location.hash;
if (hash){
        location.href = hash;
}

Je to takto ok?

 
Nahoru Odpovědět  +1 14. září 21:41
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 6 zpráv z 6.