Olen tekemässä nettisivuja ja ongelmana on navbar.
W3 tutoriaalin mukaisesti tehtynä navbar ei sulkeutunut hampurilaisesta linkkiä avatessa, tämä korjaantui allaolevan koodin mukaisesti mutta nyt linkkiä klikatessa navbar "välähtää" häiritsevästi.
Alla navbarin koodia:
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#naviBaari"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" onClick="document.getElementById('top').scrollIntoView(); " style="cursor:pointer; cursor:hand;">Sivun nimi</a> </div>
<div class="collapse navbar-collapse" id="naviBaari">
<ul class="nav navbar-nav">
<li><a onClick="document.getElementById('info').scrollIntoView(); $('.navbar-toggle').click();" style="cursor:pointer; cursor:hand;">Info</a></li>
<li><a onClick="document.getElementById('contact').scrollIntoView(); $('.navbar-toggle').click();" style="cursor:pointer; cursor:hand;">Yhteystiedot</a></li>
</ul>
</div>
</div>
</nav>Ongelmana on siis navbar-toggle, onko mahdollista jotenkin tarkistaa missä tilassa navbar on jottei navbar-toggle tapahtuisi muuten kuin hampurilaisesta avatessa?
Laita mieluummin nettisivun osoite, jossa tuo on testattavissa, jotta auttaja voi oikeasti katsoa Inspectorilla mitä sivuilla tapahtuu. En usko, että vika johtuu html-koodista, vaan nimenomaan css-tyyleistä.
OT: Olen päivittämässä toisen henkilön tekemiä sivuja mobiiliystävällisemmiksi, sivun raskaus ja css- sekä javascriptipätkät ympäri sivua ovat tiedossa ja väliaikaisia.
Lisäys:
Löysinkin ratkaisun, sikäli jos joku tekee saman kämmin kuin minä, ongelma korjautuu korvaamalla
$('.navbar-toggle').click();pätkällä
$('.navbar-collapse ul li a').click(function(){
$('.navbar-toggle:visible').click();
});Nyt kun vielä olet projektin alussa, toivottavasti, niin kannattaisi unohtaa tuo js:n sotkeminen html:n sekaan. Kaikki css-tyylit laitetaan erillisiin css-tiedostoihin ja kaikki js-koodi laitetaan erillisiin js-tiedostoihin. Sille ei ole mitään perustetta edes väliaikaisesti, koska järkevämpi ratkaisu on kaiken lisäksi nopeampikin.
Navigaation räpsyminen johtuu siitä, että yrität jostain syystä sulkea hampurilaisvalikon myös silloin, kun hampurilaisvalikkoa ei ruudun suuren koon vuoksi näytetä ollenkaan. Yrityksesi korjata koodia toimii ainakin suurin piirtein, mutten itse arvosta valittua tapaa. Koska kyse on Bootstrapin plugarista, niin käyttäisit suoraan sen tarjoamaa apia etkä kikkailisi omiasi, koska silloin todennäköisesti teet vain lisää ongelmia.
Minä en tiedä, onko kyse uudesta vai vanhasta jäljestä, mutta kommentoinpa silti muitakin juttuja.
1. Nykyinen navigaatio- ja sivustototeutus on huono, koska sivuston eri osiin linkkaaminen on mahdotonta. Navigaation "linkit" eivät ole oikeita linkkejä, mikä on myös käytettävyyden kannalta huono, koska sivusto ei toimi niin kuin käyttäjät oletusarvoisesti odottavat.
2. Toinen käytettävyysongelma liittyy gallerian toteutukseen. "Kansioiden" korkeutta on rajoitettu ja siitä syystä niiden sisälle tulee scrollbarit ja kansioiden sisältöä voi rullata. Koska käyttäjä on todennäköisesti vain kelaamassa gallerian ohi (koska kaikki sisältö on yhdellä sivulla), niin koko sivun kelaaminen vaihtuukin yhtäkkiä yksittäisen kansion kelaamiseksi. Monta. Kertaa.
------
Kerronpa nyt vielä sen oikean tavan toteuttaa tuollainen sivua rullaava navigaatio: navigaatio rakennetaan ihka oikeista linkeistä(!) ja sisältöön linkataan käyttämällä ankkureita (#foobar). Voilà, teit toimivan navigaation käyttämättä riviäkään javascriptiä ja kaiken lisäksi se toimii täydellisesti. Voit vielä ladata jostain valmiin jQuery-plugarin tms. jolla lisäät sisällössä siirtymiseen näyttävän efektin. (Pieni huumori sallittaneen.)
<nav> <a href="#top">Tatskasivu</a> <a href="#asiakkaille">Asiakkaille</a> <a href="#galleria">Galleria</a> <a href="#yhteystiedot">Yhteystiedot</a> </nav>
<body id="top">
<article id="asiakkaille">
<h1>Jaren Taztqa/<h1>
<p>Terve tuloa meitsin sivuille!</p>
</article>
<article id="galleria">
<h1>Kuvei</h1>
<ul>
<li><img src="..." alt="Ruusutatska"/></li>
<li><img src="..." alt="Haukitatska"/></li>
</ul>
</article>
<article id="yhteystiedot">
<h1>Yhteystiedot</h1>
<p>Inari</p>
</article>
</body>Aihe on jo aika vanha, joten et voi enää vastata siihen.