Hei
Aijemmassa keskustelussa kysyin, että miksi elementti hyppää vasemman puoleisen alapuolelle.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://jqueryui.com/latest/jquery-1.3.2.js" type="text/javascript"></script>
<script src="http://jqueryui.com/latest/ui/effects.core.js" type="text/javascript"></script>
<script src="http://jqueryui.com/latest/ui/effects.slide.js" type="text/javascript"></script>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body { margin-right: 0px; background-image: url("tausta.bmp"); }
#vasen { float: left; width: 300px; border: 1px solid black; padding: 5px; }
#oikea { background-color: rgb(2, 22, 47); color: white; border: 1px solid black; padding: 5px; margin-left: 320px;}
.linkki { width: 290px; background-color: rgb(2, 22, 47); margin-bottom: 5px; padding: 5px; color: white; }
.linkki:hover { background-color: transparent; }
img { border: 0px; }
</style>
<script type="text/javascript">
$().ready(function(){
setInterval(checkAnchor, 300);
});
var currentAnchor = null;
function checkAnchor(){
if(currentAnchor != document.location.hash) {
currentAnchor = document.location.hash;
if(!currentAnchor) {
query = "sivu=etusivu";
} else {
var splits = currentAnchor.substring(1).split('&');
var section = splits[0];
delete splits[0];
var params = splits.join('&');
var query = "sivu=" + section + params;
}
if(window.location.hash) {
$.get("include.php", query, function(data) {
$("#oikea").hide("slide", { direction: "right" }, 2000);
$("#oikea").show("slide", { direction: "right" }, 2000);
$("#oikea").html(data);
});
}
}
}
function show() {
$('#oikea').show();
}
</script>
<title></title>
</head>
<body>
<noscript><b>Kehotus:</b> Laitathan JavaScript tuen päälle selaimessasi, jotta sivut toimivat oikein.</noscript>
<div id="vasen">
<div class="linkki" onClick="document.location.hash = 'etusivu'">Etusivu</div>
<div class="linkki" onClick="document.location.hash = 'jep'">Jep</div>
<div class="linkki" onClick="document.location.hash = 'huuhaa'">Huuhaa</div>
<div class="linkki" onClick="document.location.hash = 'error'">Error</div>
</div>
<div id="oikea">
<?php include("etusivu.php"); ?>
</div>
</body>
</html><?php $sivu = (isset($_GET["sivu"])) ? $_GET["sivu"] : "etusivu"; if(!file_exists($sivu . ".php")) $sivu = "error"; include("$sivu.php"); ?>
Kysyn sitä vielä näin erikseen, kun en vastausta saanut. On jo painunut aikas alas sekin keskustelu. Miten pystyisin estämään sen, että jos käyttäjä painaa vasemmalta linkkä ja avaa sivun jep, niin ettei sivu lähde aukeamaan uudelleen kuin painaa liukumisen aikana huuhaa? Eli, ettei sivu villiinny ja jää liukumaan edestakaisin.
Kyllä täällä kai joku tietää, eikai ole vain huomannut aihetta...? Ärsyttävän näköinen tuo hyppy.
Laita kokonainen, testauskelpoinen versio jonnekin näytille. Ainakaan minua ei kiinnosta kaivaa ulkoasuongelmia suoraan (osittaisesta) koodista näkemättä itse ongelmaa, kun selityskin on noin epämääräinen.
Ei vielä se, mutta koodikin on liian vajaa ongelmien bongaamiseksi. Ulkoasuongelmien kohdalla on parempi saada lopullinen HTML-koodi, ei PHP-sivua joka generoi HTML:ää.
http://koti.mbnet.fi/pelmikko/hyppivatelementit.
Siinä teille esimerkki. Ääkköset menivät, kun käytin väärää konetta editointiin.
Itselläni toimii tuo sivu kyllä varsin sekavasti.
Ehkä, sillä tuo on hyvin keskeneräinen, mutta entä se ongelman laita...
Ei minulla ainakaan mikään hypi minkään alle. Sen sijaan liu'utuksen ajan elementti on tuplaetäisyydellä vasemmasta laidasta ja alareunassa on vastaavasti sen verran ylimääräistä vierityspalkkia. Toisin sanoen sivua vaihtaessa sivu hyppää heti parisataa pikseliä oikealle, ja samoin uuden sivun liuku loppuu parin sadan pikselin yllätyshyppyyn.
Minulla ei ole niin suurta ongelmaa sen kansa, se ei hyppää vaan pitenee parikymmentä pikseliä, ja vierityspalkki syntyy. Explorerilla käy myös niin, että liu'un ajan oikea palkki on vasemmanpuoleisen korkeuden verran yläreunasta, eli perjaatteessa menee tämän alle.
MIB kirjoitti:
Minulla ei ole niin suurta ongelmaa sen kansa
Se varmaan lohduttaa kävijöitäsi paljon.
Voi olla, että nämä kaikki ongelman muodot johtuvat samasta CSS-virheestä, jonka eri selaimet (ja eri versiot) vielä tulkitsevat liu'utustilanteessa eri tavalla.
Luultavasti jopa helpoiten ongelma ratkeaa, kun etsit jostain toimivan esimerkin tuollaisesta ja muokkaat sen omiin tarpeisiisi. Testaa jokaisen pienenkin muutoksen jälkeen, ettei mikään ole hajonnut.
Aihe on jo aika vanha, joten et voi enää vastata siihen.