Tunnus:

Salasana:

Uusi käyttäjä

Haku

Pikalinkit

Kesähaaste 2010

Paranna Morpion-pelin kansainvälisiä ennätyksiä!

Ohjeet | Nettipeli | Tuloslista

Putkaposti

Suunnittele tiedosto, josta tulee suuri ZIP-paketti!

Vastauksia: 37
Paras: 1158

Tehtävään...

Keskustelu

Ostakaa mieluummin vaikka käyttis joka tukee Unicodea terminaalissa... (Muut kielet) lisää...


Keskustelu: Nettisivut ja -ohjelmointi: Elementti hyppää väärälle riville

MIB [31.01.2010 12:03:45] LainaaMuokkaa
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.

MIB [02.02.2010 18:59:22] LainaaMuokkaa
Kyllä täällä kai joku tietää, eikai ole vain huomannut aihetta...? Ärsyttävän näköinen tuo hyppy.

Metabolix [02.02.2010 20:16:09] LainaaMuokkaa
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.

Merri [03.02.2010 08:56:29] LainaaMuokkaa
Ei vielä se, mutta koodikin on liian vajaa ongelmien bongaamiseksi. Ulkoasuongelmien kohdalla on parempi saada lopullinen HTML-koodi, ei PHP-sivua joka generoi HTML:ää.

MIB [03.02.2010 16:59:03] LainaaMuokkaa
http://koti.mbnet.fi/pelmikko/hyppivatelementit.php

Siinä teille esimerkki. Ääkköset menivät, kun käytin väärää konetta editointiin.

jo123 [03.02.2010 17:34:33] LainaaMuokkaa
Itselläni toimii tuo sivu kyllä varsin sekavasti.

MIB [03.02.2010 18:23:39] LainaaMuokkaa
Ehkä, sillä tuo on hyvin keskeneräinen, mutta entä se ongelman laita...

Metabolix [03.02.2010 19:05:22] LainaaMuokkaa
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.

MIB [03.02.2010 19:13:31] LainaaMuokkaa
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.

Metabolix [03.02.2010 20:04:58] LainaaMuokkaa
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.

Tämä aihe on yli kuukauden vanha, eikä siihen voi enää lähettää uusia viestejä.

ylläpito Antti Laaksonen, ulkoasu Otto Seiskari