Seite 1 von 4 1234 LetzteLetzte
Ergebnis 1 bis 10 von 32

Thema: marker setzen auf eine karte

  1. #1
    Youngster
    Registriert seit
    08.03.2014
    Beiträge
    17
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard marker setzen auf eine karte

    Hallo zusammen. Ich möchte euch gerne um Hilfe bitten.
    Ich programmiere gerade eine Karte für ein Spiel in html, css, javascript und natürlich php.
    Dort kann man via javascript Icons setzen, über ein modales fenster mit verschiedenen Feldern zum ausfüllen.
    Es funktioniert alles super. Verbindet sich mit der Datenbank etc.
    Aber nun habe ich das auf dem Server hochgeladen und ein paar pins gesetzt. Bei mir werden die dort angezeigt, wo ich die hinplatziert habe.
    Aber bei anderen Leuten werden die woanders dargestellt.
    Ich poste mal die php datei von einer Karte und hoffe, ihr könnt mir sagen, wo der Fehler ist und was ich dafür ändern muss.
    Ich denke am CSS liegt es irgendwo.

    Code:
    <?php include('login.php'); ?><html>
        <title>TreWa Map - Cyrodiil</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
        <style type="text/css">
        html {
            max-height: 620px;
            background-color:#CCCCCC;
        }
        body
        {
            font-family:arial;
            background-color:#CCCCCC;
            margin:0;
            padding:0;
            max-height:620px;
        }
        .pin {
            position: absolute;
            cursor:pointer;
        }
        figure {
            display: compact;
            box-shadow:0 0 10px #000;
        }
        #modal {
            display:none;
            position:absolute;
            box-shadow:0 0px 100px #000;
            border-radius:10px;
            overflow: visible;
            max-width: 600px;
            padding: 5px 20px 13px 20px;
            background: #fff;
            background: -moz-linear-gradient(#fff, #999);
            background: -webkit-linear-gradient(#fff, #999);
            background: -o-linear-gradient(#fff, #999);
        }
        #modal textarea, input {
            display:block;
            width:100%;
        }
        #infoModal {
            display: inline;
            position:absolute;
            box-shadow:0 0 20px #000;
            max-width: 600px;
            padding: 5px 20px 13px 20px;
            border-radius: 10px;
            background: #FFFFFF;
            background: -moz-linear-gradient(#FFFFFF, #999999);
            background: -webkit-linear-gradient(#FFFFFF, #999999);
            background: -o-linear-gradient(#FFFFFF, #999999)
            overflow: inherit;
        }
        #infoModal span.close {
            display: inline;
            background: #285C82;
            color: #FFFFFF;
            line-height: 25px;
            position: absolute;
            right: -12px;
            text-align: center;
            top: -10px;
            width: 24px;
            text-decoration: none;
            font-weight: bold;
            -webkit-border-radius: 12px;
            -moz-border-radius: 12px;
            border-radius: 12px;
            -moz-box-shadow: 1px 1px 3px #000;
            -webkit-box-shadow: 1px 1px 3px #000;
            box-shadow: 1px 1px 3px #000;
            cursor:pointer;
        }
        #modal span.delete {
            display: inline;
            background: #606061;
            color: #FFFFFF;
            line-height: 25px;
            position: absolute;
            right: -12px;
            text-align: center;
            top: -10px;
            width: 24px;
            text-decoration: none;
            font-weight: bold;
            -webkit-border-radius: 12px;
            -moz-border-radius: 12px;
            border-radius: 12px;
            -moz-box-shadow: 1px 1px 3px #000;
            -webkit-box-shadow: 1px 1px 3px #000;
            box-shadow: 1px 1px 3px #000;
            cursor:pointer;
        }
        #infoModal span.pic {
            max-height: 350;
            max-width: 550px;
            display: block;
        }
        #infoModal span.title {
            font-weight:700;
        }
        #infoModal span.text {
            display: block;
            font-size:12px;
        }
        #banner
        {
            float:top;
            text-align:center;
        }
        #login
        {
            float:top;
            text-align:right;
            margin-right:10px;
        }
        #rechts
        {
            float: right;
            width: 250px;
            position: relative;
            display: block;
            background: #999999;
            min-height: 600px;
            border-style:solid;
            border-width:medium;
            -webkit-border-radius: 12px;
            -moz-border-radius: 12px;
        }
        #mapContainer
        {
            position: absolute;
            float:center;
            text-align:center;
            background-color:#CCCCCC;
        }
        #map
        {
            max-height: 1000px;
            text-align:center;
            background-color:#CCCCCC;
            border-style:solid;
            border-width:medium;
            -webkit-border-radius: 12px;
            -moz-border-radius: 12px;    
        }
        #foot 
        {
         text-align:center;
        }
        </style>
        </head>
        <body>
            <div id="banner">
            <a href="http://teso.trewa.net/"><img src="logo.gif" width="300px" height="200px" border="0" alt="logo"></a>
            </div>
            <div id="login">
            <?php
            if(isset($_SESSION['login']) && $_SESSION['login'] == true) {
                echo "<h2>Willkommen <u>".$_SESSION['username']."</u></h2><br>";
                echo '<form method="POST" action="logout.php" width="20px">
                <b>Logout:</b><br><button>Ausloggen</button>
                </form>';
            }
            ?>
            </div>
            <div id="mapContainer">
            <?php
                if(isset($_SESSION['login']) && $_SESSION['login'] == true) {
                if($_SESSION['isAdmin'] == true) {
                    echo '<img id="map" src="Cyrodiil.jpg" width="70%" height="1000px" border="1px" style="z-index:2; cursor:pointer;">';
                } else {
                    echo '<img id="map" src="Cyrodiil.jpg" width="70%" height="1000px" border="1px" style="z-index:2;">';
                }} else {
                    echo '<img id="map" src="Cyrodiil.jpg" width="70%" height="1000px" border="1px" style="z-index:2;">';
                }
                // Kartenvariable anlegen zum übergreifen auf den Loadprozess
                include('mapName.php');
                $mapName ="Cyrodiil";
                // Aufrufen des Datenbankzugriffs um die Marker zu laden
                include('loadmarker.php');
            ?>
            <div id="modal" style="z-index:2;">
                <span class="delete">X</span>
                <input type="text" name="title" placeholder="Titel..">
                Nur fuer Mitglieder sichtbar? 
                <select id="memberchoise">
                    <option value="true">ja</option>
                    <option value="false">nein</option>
                </select>
                <input type="text" name="youtube" placeholder="Youtube VideoID..">
                <input type="text" name="pic" placeholder="Bild URL..">
                <textarea name="text"></textarea>
                <button id="save">Speichern</button>
                </div>
                <div id="infoModal" style="z-index:2;"> <span class="close">X</span>
                <span class="title"></span>
                    <div class="yt"></div> <span class="pic"></span> <span class="text"></span>
                </div>
            </div>
            <div id="rechts" style="z-index:1;"><br>
                <h1>
                <b><i> Navigation: </b></i>
                <ul>
                <li>
                    <a href="index.php"> Weltkarte </a>
                </li>
                <hr>
                <?php
                    if(isset($_SESSION['login']) && $_SESSION['login'] == true) {
                    if($_SESSION['isAdmin'] == true) {
                ?>
                <button class="iconSelect">
                    <img data-offsetLeft="10" data-offsetTop="10" src="TESO-Icon.png">
                </button>
                <button class="iconSelect">
                    <img src="pin1.png">
                </button>
                <?php
                    }}
                ?>
            </div>
            <div id="foot">@Christopher Teichert</div>
            <script type="text/javascript">
                var $infoModal = $("#infoModal");
                $infoModal.hide();
                
                $(document).on("click", ".pin", function (e) {
                    $this = $(this);
                    $infoModal.css("top", $this.css("top"));
                    $infoModal.css("left", $this.css("left"));
                    $infoModal.show();
                    var title = $this.attr("data-title");
                    var youtube = $this.attr("data-yt");
                    var picture = $this.attr("data-pic");
                    if (youtube != "") {
                        youtube = '<iframe width="560" height="315" src="//www.youtube.com/embed/' + youtube + '?rel=0" frameborder="0" allowfullscreen></iframe>';
                    }
                    if (picture != "") {
                        picture = '<figure><img src="'+ picture +'" width="100%" height="100%" /></figure>';
                    }
                    var text = $this.attr("data-text");
                    $infoModal.children(".title").html(title);
                    $infoModal.children(".yt").html(youtube);
                    $infoModal.children(".pic").html(picture);
                    $infoModal.children(".text").html(text);
                });
                $("#infoModal span.close").click(function () {
                    $infoModal.hide();
                });
            </script>
            <?php
                if(isset($_SESSION['login']) && $_SESSION['login'] == true) {
                if($_SESSION['isAdmin'] == true) {
            ?>
            <script type="text/javascript">
                var currentIcon = "pin1.png";
                var imgOffsetTop = 0;
                var imgOffsetLeft = 0;
    
    
                $(".iconSelect").click(function () {
                    $img = $(this).children('img');
                    currentIcon = $img.attr('src');
                    imgOffsetTop = imgOffsetTop.attr('data-offsetTop');
                    imgOffsetLeft = imgOffsetTop.attr('data-offsetLeft');
                });
                var offsetLeft;
                var offsetTop;
                $("#map").click(function (e) {
                    e.preventDefault();
                    var parentOffset = $(this).position();
                    offsetLeft = e.offsetX + parentOffset.left-12;
                    offsetTop = e.offsetY + parentOffset.top-25;
                    openModal(offsetLeft, offsetTop);
                });
    
    
                var $modal = $("#modal");
                var clickState;
                function openModal(x, y) {
                    clickState = false;
                    $modal.children("input").val("");
                    $modal.children("textarea").val("");
                    $modal.css({
                        left: x,
                        top: y
                    });
                    $modal.show();
                    return true;
                }
    
    
                $("#save").click(function () {
                    dataTitle = $modal.children("input[name=title]").val();
                    dataYt = $modal.children("input[name=youtube]").val();
                    dataPic = $modal.children("input[name=pic]").val();
                    dataMember = $modal.children("select[id=memberchoise]").val();
                    dataText = $modal.children("textarea[name=text]").val();
                    
                    $.ajax({
                        type: 'POST',
                        url: 'savemarker.php',
                        data: { title: dataTitle, yt: dataYt, pic: dataPic, text: dataText, x: offsetLeft, y: offsetTop, member: dataMember, map: "Cyrodiil", src: currentIcon }
                    });
    
    
                    dataString = "data-title=\"" + dataTitle + "\" data-yt=\"" +          
                    dataYt + "\" data-pic=\"" + dataPic + "\" + data-text=\"" +     
                    dataText + "\"";
                    
                    $("#mapContainer").append("<img " + dataString + " class=\"pin\"  src=\"" + currentIcon + "\" style=\"left:" + offsetLeft + "px;top:" + offsetTop + "px;\">");
                    $modal.hide();
                });
                $("#modal span.delete").click(function () {
                    $modal.hide();
                });
            </script>
            <?php
            }}
            ?>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
            <script>
                $("#mapContainer").width($("body").width());
                $("#rechts").height($("#map").height());
            </script>
        </body>
    </html>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.150
    Danke
    14
    Bekam 63 mal "Danke" in 61 Postings

    Standard AW: marker setzen auf eine karte

    Keiner hat Lust deine Datei erst zu erstellen. Ein Link?

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    08.03.2014
    Beiträge
    17
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: marker setzen auf eine karte

    Ein link wohin?
    also ich kann dir das hier anbieten...

    teso.trewa.net/map

  4. #4
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: marker setzen auf eine karte

    EDIT: Das ist deine Startseite, denkst du allen Ernstes daran dass wir uns einloggen.

    Davon abgesehen, Der Validator zeigt schon dort etliche Fehler an --> http://validator.w3.org/unicorn/chec...k=conformance#

    Du solltest allea auf UTF-8 umstellen.
    Geändert von explanator (09.03.2014 um 00:35 Uhr)

  5. #5
    Youngster
    Themenstarter

    Registriert seit
    08.03.2014
    Beiträge
    17
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: marker setzen auf eine karte

    Man muss sich nicht einloggen^^
    Das einloggen ist nur für pins, welche nur für Mitglieder sichtbar sein sollen.
    Ansonsten kann man alle pins sehen.

  6. #6
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: marker setzen auf eine karte

    Ok, habe ich erst nicht gesehen. Dennoch solltest du erst einmal die Fehler beheben, Ohne doctype rendern die Browser deine Seite im Quirksmodus, da ist alles denkbar.

  7. #7
    Youngster
    Themenstarter

    Registriert seit
    08.03.2014
    Beiträge
    17
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: marker setzen auf eine karte

    Was ist denn der Doctype und was ist der Quirksmodus?

  8. #8
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: marker setzen auf eine karte

    Zitat Zitat von Christopher25 Beitrag anzeigen
    Was ist denn der Doctype und was ist der Quirksmodus?
    Dazu hätte ich von dir ein wenig Eigeninitiative erwartet, denn das meiste lässt sich mit einer Suchmaschine sehr leicht finden.

    Aber nun gut, hier ein Link --> http://www.mediaevent.de/xhtml/doctype.html

    Um der nächsten Frage gleich vorzubeugen.

    Du kannst folgende Einleitung für deine Seiten nehmen:

    HTML-Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    Deine Seiten solltest du im Editor ebenfalls in UTF-8 speichern, dann passt das schon mal.

  9. #9
    Youngster
    Themenstarter

    Registriert seit
    08.03.2014
    Beiträge
    17
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: marker setzen auf eine karte

    so habe das mal bei jedem eingefügt, indem html vorkommt

  10. #10
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: marker setzen auf eine karte

    Ich kann bei deiner Seite http://teso.trewa.net/map/ nicht erkennen, das da ein doctype ist. Kannst du selber überprüfen indem du im Firefox Browser mit der rechten Maustaste in ein freies Feld deiner Seite klickst und danach den Punkt Quellcode anzeigen auswählst.

    Hast du auch die anderen Fehler schon gesehen. Den Link vom Validator hatte ich ja bereits mitgeteilt.

    Sieht bis jetzt noch aus:

    HTML-Code:
    <html>
     <head>
      <title> Test</title>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
      <style type="text/css">
    Geändert von explanator (09.03.2014 um 12:28 Uhr)

Ähnliche Themen

  1. Eine Variable prüfen und dann Variablen zusammen setzen
    Von Unregistriert im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 17.03.2013, 17:19
  2. mit php eine Klasse setzen funktioniert nicht.
    Von aragonthebest im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 23.06.2012, 19:03
  3. Schnittstelle für eine WLAN Karte PCI
    Von Unregistriert im Forum Computer - Internet Forum
    Antworten: 2
    Letzter Beitrag: 25.01.2011, 20:53
  4. TV-Karte
    Von davidos_no.1 im Forum Computer - Internet Forum
    Antworten: 4
    Letzter Beitrag: 19.06.2005, 14:43
  5. TV Karte
    Von ::RMB:: im Forum Computer - Internet Forum
    Antworten: 6
    Letzter Beitrag: 10.06.2005, 22:56

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •