iFrame ausgabe über breite Hinnaus

ziggel · 23. Dezember 2014

Guten Morgen erstmal. Ich habe folgendes Problem an dem ich mir dir Zähne ausbeiße.

Und zwar habe ich mir eine ja sagen wir mal Rasterkarte zusammen gebastelt. Diese sieht wie folgt aus!

[Blockierte Grafik: http://www.bilder-upload.eu/thumb/bf92b4-1419318108.jpg]

Und zwar hatte ich mir gedacht, dass ich jedes Feld in der Datenbank definiere (derzeit um die 10100) und dann einzeln ausgeben lasse. Das würde bei ca. 290 Felder für die gesamte Karte dann auch als "Quadrat" enden. Aber bei 10109 Feldern führt es sich auf dieser Breite fröhlich weiter nach unten, sodass ich ein nach unten gezogenes Rechteck hab. Und da liegt der Hase im Pfeffer. Ich will nämlich, das alle Felder zusammen, als Quadrat dargestellt werden. Mir ist klar, das ich so nicht alle Felder auf einmal anzeigen lassen kann. Daher die Frage. Wie kann ich es schaffen, dass es z. B. via iFrames einigermaßen als Quardrat ausgegeben wird.

Gruß Marv

wolf · 23. Dezember 2014

Willkommen hier!
Du kannst natürlich alle Felder als Quadrat ausgeben lassen!
Müssen die Felder denn feste Maße haben?

Hier eine Möglichkeit ( Feldern einfach immer den % wert an breite mitgeben den sie Brauchen.. ergibt sich aus 100 / Spaltenanzahl )
Das ganze kann natürlich auch in PHP umsetzen ( um mit der DB arbeiten zu können), aber hier fürs Beispiel mal JS
http://jsfiddle.net/ohw0nch3/2/

JavaScript

$(document).ready(function(){
    // funktion aufrufen und Anzahl mitgeben
    erzeug_boxen(289);
})
function erzeug_boxen(anzahl) {
    // Quadratwurzel aus Anzahl ziehen (ergibt Spaltenzahl)
    var br = Math.sqrt(anzahl);
    //Breite einer Box errechnen ( 100% durch Spalten)
    var width = 100 / br;
    //Erste Zeile öffnen
    var html = '<div>';
    //Spaltenzähler
    var x = 0;
    for (var i = 0; i < anzahl; i++) {
        //Box füllen
        html += '<img style="width: '+width+'%" src="http://hydra-media.cursecdn.com/minecraft.gamepedia.com/d/d5/BrownMushroomStalk.png">';
        //Wenn Letzte Spalte der Zeile
        if (x == br-1) {
            //Zeile schliesen und neue öffnen
            html += '</div><div>';
            //Spaltenzähler wierder auf 0 setzen ( eine zeile drunter wird +1 gezählt, deswegen hier -1..
            x = -1;
        };
        // Spalte dazu zählen
        x++;
    };
    //Letzte Zeile schließen
    html += '</div>';
    //Das ganze ausgeben
    $('body').append(html);
}

Alles anzeigen

Wenn die Boxen eine Feste px Breite bruachen.. musst du der Elternbox ( um die ganzen Spalten - Div's herrum) einfach eine Feste PX Breite geben, die halt so groß ist das alle Spalten reinpassen..

Grüße, Wolf

ziggel · 23. Dezember 2014

Gute Morgen Wolf,

schonmal danke für die schnelle Hilfe Die Felder haben feste abmessungen von 32x32 px. Es werden verschiedene Grafiken entsprechen des Feld-Typs eingefügt.

Die Elternbox hat schon ne feste Breite.

Hier einfach mal der Code

PHP

<center><h2>Bebarnburg</h2>
<div style="width:650px; height:550px; overflow:auto; overflow-x: auto; overflow-y: scroll;">
<?php$abfrage = "SELECT * FROM fields_ac";$ergebnis = mysql_query($abfrage);while($row = mysql_fetch_object($ergebnis)) {
echo "<a href='?page=field_info&id=".$row->id."' title='Feld Nr.: ".$row->id." - ".$row->beschrei."' class='tooltip'><img src='images/mapitem/".$row->fieldtype.".png'></a>";      }?>
</div> 
</center>

Ich hätte halt gern, dass man in einem Frame noch nach links und rechts scrollen kann.

wolf · 23. Dezember 2014

Okay, bitte achte ( vorallem in deinem Sinne ) auf ZEILENUMBRÜCHE und EINRÜCKUNGEN sonnst wirst du und alle anderen hier Verrückt

Ich habe deinen Code mal strukturiert und übersichtlich gemacht.. damit arbeiten wir weiter :p

PHP

<style>
    .wrap{
        width:650px;
        height:550px;
    }
</style>
<div class="wrap">
    <?php
        $abfrage = "SELECT * FROM `fields_ac`";
        $ergebnis = mysql_query($abfrage);
        while($row = mysql_fetch_object($ergebnis)) {
            echo "
                <a
                    href='?page=field_info&id=".$row->id."' 
                    title='Feld Nr.: ".$row->id." - ".$row->beschrei."' 
                    class='tooltip mapitem'
                >
                    <img src='images/mapitem/".$row->fieldtype.".png'>
                </a>\n
            ";
        }
    ?>
</div>

Alles anzeigen

So funktioniert es bei mir, wenn jetzt body kleiner als die Spaltenzahl erscheint ein scrollbalnken

PHP

<style>
    .wrap{




    }
    .wrap div:after{
        clear: both;
        display: block;
        content: '';
    }
    .mapitem{
        display: block;
        float: left;
    }
    .mapitem img{
        display: block;
        width: 32px;
        height: 32px;
    }
</style>
<?php
    //Felder abfragen
    $abfrage = "SELECT * FROM `fields_ac`";
    $ergebnis = mysql_query($abfrage);
    //Felder Zählen
    $felder = mysql_num_rows($ergebnis);
    //Spalten ermitteln
    $spalten = sqrt( (int) $felder );
    //Zeilenbreite ermitten (Spalten  * Feldbreite)
    $wrapBreite = $spalten * $breite;
    //Spaltenzähler
    $x = 0;
    //Wrap mit richtiger Breite ausgeben
    echo '<div class="wrap" style="width: '.$wrapBreite.'px;">'."\n";
    //Erste Zeile anfangen
    echo "<div>";
    while($row = mysql_fetch_object($ergebnis)) {
        echo "
            <a
                href='?page=field_info&id=".$row->id."' 
                title='Feld Nr.: ".$row->id." - ".$row->beschrei."' 
                class='tooltip mapitem'
            >
                <img src='http://hydra-media.cursecdn.com/minecraft.gamepedia.com/d/d5/BrownMushroomStalk".$row->fieldtype.".png'>
            </a>\n
        ";
        //Wenn gezählte Spaltenzahl == Ausgerechnete Spaltenzahl
        if ($x == $spalten-1) {
            //Neue zeile anfangen
            echo "</div>\n<div>";
            $x = -1;
        }
        $x++;
    }
    //Letzte Zeile schliesen
    echo "<div>";
    echo "</div>\n";
?>

Alles anzeigen

iFrame ausgabe über breite Hinnaus

Jetzt mitmachen!

Teilen