Beiträge von Seevan

Seevan · 31. August 2017

Ja normalerweise arrangiere ich bilder egal mit oder ohne text auch immer mit div. Da ich das mit mit dem responsive media sreen nicht richtig hinbekommen habe und eine vorlage benutze mit der ich Arbeite müste ich da wieder viel testen. Da die Unterseite mit denn Karten die göße anpassen muss und es komischerweise ohne table nicht greift hab ich es wieder in table gepackt. Ich werde mal heute abend oder morgen mir das genauer anschauen thx.

Seevan · 30. August 2017

achso lesen sollte man schon richtig, habe jetzte verschidene jQuery code getestet kein plan warum es nicht geht obwohl alles richtig ist.

https://ajax.googleapis.com/aj…uery/1.10.2/jquery.min.js aber am code haperts nicht.

Wie es meinstens der fall ist hats an dem vorm PC gehapert hatte den div für das overlay vergessen peinlich.

So ist das wenn man von allen seiten abgelenkt ist hehe, noch mal vielen dank für deine unterstützung.

Solltest du oder wer anders noch einen ratschlag oder tipp haben immer raus da mit ansonsten wurde ja meine frage so zu sagen beantwortet und das auch noch super fix.

Werde aber sicher im laufe der hp gestallung sicher noch 2-3 fragen haben aber das gehört dann ja wieder in einen neuen post.

Seevan · 29. August 2017

hab ich auch schon mit verschiden bowsern online getestet und auch auf handy überall das gleich aber ja hier neuer link

Seevan · 29. August 2017

sehr merkwürdig es ist ja in der css und selbst wenn ich es direkt in die html packe gehts nicht, hab es auch mit andren browser getestet geht auch net.

Kann es sein das es dran liegt das ich den jquery von google lade oder ist das kein kompertibler ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

Seevan · 29. August 2017

wie es ausschaut hatte ich das aktuelle benutzt.

farm-decks-display.js

Code

$(document).ready(function(){
        $("a[data-toshow]").on("click", function () {
            $(".card_content").hide();
            var idtoshow = $(this).data("toshow");
            $("#" + idtoshow).show();
            $(".card_overlay").show();
        });
        $("a.back").on("click", function () {
            $(".card_content").hide();
            $(".card_overlay").hide();
        });
});

Alles anzeigen

deck-style .css

Code

a img {
  border:none;
}

.card_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
}

.card_content {
  display: none;
  position: absolute;
  height:600px;
  width:305px;
  top: 50%;
  left: 50%;
  margin-top: -258px;
  margin-left: -156px;
  padding: 6px;
  background-color: black;
  z-index: 1002;
  overflow: auto;
}

#card_icons {
  width:299px;
  border:0;
}

.card_case {
  background-image: url(http://file2.npage.de/014720/85/bilder/case.png);
  background-repeat: no-repeat;
  height:435px;
  width:299px;
  border:0;
}

.switch_card {
position:relative;
z-index:1003;
margin-top:-235px;
margin-left:-5px;
}

#back_to {
position:relative;
z-index:1003;
margin-top:203px;
margin-left:0px;
}

Alles anzeigen

html

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="farm-decks-display.js"></script>
<link rel="stylesheet" href="deck-style.css" type="text/css" media="screen" />
</head>
<body>
<table>
        <tbody>
            <tr>
                <td><a data-toshow="card1" href="javascript:void(0)"><img src="http://file2.npage.de/014720/85/bilder/grabwaechters_vasall.png" title="Grabwächters Vasall" /></a></td>
                <td><a data-toshow="card2" href="javascript:void(0)"><img src="http://file2.npage.de/014720/85/bilder/des_kaenguru.png" title="Grabwächters Vasall" /></a></td>
            </tr>
        </tbody>
    </table>
    <div class="card_content" id="card1">
        <table id="card_icons">
            <tbody>
                <tr>
                    <td align="left" width="80">
                        <img height="17" src="http://file2.npage.de/014720/85/bilder/stapel.png" width="24" /><font color="white"> 1/20</font>
                    </td>
                    <td align="left" width="60">
                        <img height="17" src="http://file2.npage.de/014720/85/bilder/ex.png" width="14" /><font color="white"> 0/ 2</font>
                    </td>
                    <td align="right">
                        <img src="http://file2.npage.de/014720/85/bilder/ur.png" />
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="card_case">
            <tbody>
                <tr>
                    <td align="center" valign="middle">
                        <img src="http://file2.npage.de/014720/85/bilder/big_grabwaechters_vasall.png" />
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="switch_card">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tbody>
                    <tr>
                        <td align="left">
                            <a data-toshow="card2" href="javascript:void(0)"  unselectable="off"><img src="http://file2.npage.de/014720/85/bilder/links2a.gif" /></a>
                        </td>
                        <td>
                            &nbsp;
                        </td>
                        <td align="right">
                            <a data-toshow="card2" href="javascript:void(0)" >
                                <img src="http://file2.npage.de/014720/85/bilder/rechts2a.gif" />
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="back_to">
            <a class="back" href="javascript:void(0)" unselectable="off"><img src="http://file2.npage.de/014720/85/bilder/back.png" title="zurück" /></a>
        </div>
    </div>



    <div class="card_content" id="card2">
        <table id="card_icons">
            <tbody>
                <tr>
                    <td align="left" width="80">
                        <img height="17" src="http://file2.npage.de/014720/85/bilder/stapel.png" width="24" /><font color="white"> 2/20</font>
                    </td>
                    <td align="left" width="60">
                        <img height="17" src="http://file2.npage.de/014720/85/bilder/ex.png" width="14" /><font color="white"> 0/ 2</font>
                    </td>
                    <td align="right">
                        <img src="http://file2.npage.de/014720/85/bilder/ur.png" />
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="card_case">
            <tbody>
                <tr>
                    <td align="center" valign="middle">
                        <img src="http://file2.npage.de/014720/85/bilder/big_des_kaenguru.png" />
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="switch_card">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tbody>
                    <tr>
                        <td align="left">
                            <a data-toshow="card1" href="javascript:void(0)"  unselectable="off">
                                <img src="http://file2.npage.de/014720/85/bilder/links2a.gif" />
                            </a>
                        </td>
                        <td>
                            &nbsp;
                        </td>
                        <td align="right">
                            <a data-toshow="card1" href="javascript:void(0)" >
                                <img src="http://file2.npage.de/014720/85/bilder/rechts2a.gif" />
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="back_to">
            <a class="back" href="javascript:void(0)" unselectable="off"><img src="http://file2.npage.de/014720/85/bilder/back.png" title="zurück" /></a>
        </div>
    </div>

</body>
</html>

Alles anzeigen

Seevan · 29. August 2017

Sry wollte ja nicht merken oder so wegen des tipp, wolte da mit nur sagen das es mir erst eine mal um dem script geht nehme ratschläge immer gerne an.

Super Danke Funtzt, nur ein kleine Problem ist da noch card_overlay wird nicht geladen oder es greift so nicht mehr die background-color.

Nicht lachen aber alleine für die variante habe ich locker 14std gebraucht

html seite habe ich ja schon einige gemacht, das man nicht immer gleich den Perfekten weg findet ist klar wenn man das per lerning by doing prinzip macht.

und nun wieder was dazu gelernt und kann ich mich dann auch mal in die data-toshow funktion ein lesen.

Seevan · 28. August 2017

1. bin ich immer noch am Basteln

2. habe ich nicht mal HTML gelernt oder css und javascript

3. lerning by doing (viel lesen und testen und dan selber versuchen)

Nein es ändern sich ja auch die Zahlen und ja würde es kleiner haben wollen da ich das ja zichmal brauche, als beispiel könnt ihr euch gerne mal http://www.sse.de.to/mokuba_kaiba.html anschauen und selbst das sind noch nicht alle Decks die dann auf einer Seite sind.

Die große ansicht ist ja auch noch nicht fertig da kommen noch ein paar elemente rein die sich dann auch von Karte zu Karte ändern.

Mir gehts jetzt aber nicht ums kleiner machen nur wie ich den javascript: void(0) mittels javascript lade bzw. ich dass in einer script.js datei schreiben muss.

Ich würde lieber erst weiter machen wenn ich die langen scripte aus der html raus habe und ich muss wohl so oder so ein .js benutzten da die noch fehlenden Elemente kein platz mehr haben und auch per javascript eingebaut werden abder da für habe ich schon was gefunden wie ich das machen muss kann.

Seevan · 28. August 2017

Hallo leute,

ich Arbeite an einer Fan Page mit Spiele Guide und würde gerne meine verwendeten Javascript in einer .js deitei haben wie ich wie ein binde ist nur bewust doch habe ich keine plan wie ich das in der datei screiben muss.

HTML

Code

<meta content="width=device-width, initial-scale=1" name="viewport" />
<style type="text/css">
a img {
  border:none;
}

.card_overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
}

.card_content {
  display: none;
  position: absolute;
  height:600px;
  width:305px;
  top: 50%;
  left: 50%;
  margin-top: -258px;
  margin-left: -156px;
  padding: 6px;

  z-index: 1002;
  overflow: auto;
}

#card_icons {
  width:299px;
  border:0;
}

.card_case {
  background-image: url(http://file2.npage.de/014720/85/bilder/case.png);
  background-repeat: no-repeat;
  height:435px;
  width:299px;
  border:0;
}

.switch_card {
position:relative;
z-index:1003;
margin-top:-235px;
margin-left:-5px;
}

#back_to {
position:relative;
z-index:1003;
margin-top:203px;
margin-left:0px;
}</style>
<table>
    <tbody>
        <tr>
            <td>
                <a href="javascript:void(0)" onclick="document.getElementById('card1').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://file2.npage.de/014720/85/bilder/grabwaechters_vasall.png" title="Grabwächters Vasall" /></a> <a href="javascript:void(0)" onclick="document.getElementById('card2').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://file2.npage.de/014720/85/bilder/des_kaenguru.png" title="Grabwächters Vasall" /></a>
            </td>
        </tr>
    </tbody>
</table>
<div class="card_content" id="card1">
    <table id="card_icons">
        <tbody>
            <tr>
                <td align="left" width="80">
                    <img height="17" src="http://file2.npage.de/014720/85/bilder/stapel.png" width="24" /><font color="white"> 1/20</font>
                </td>
                <td align="left" width="60">
                    <img height="17" src="http://file2.npage.de/014720/85/bilder/ex.png" width="14" /><font color="white"> 0/ 2</font>
                </td>
                <td align="right">
                    <img src="http://file2.npage.de/014720/85/bilder/ur.png" />
                </td>
            </tr>
        </tbody>
    </table>
    <table class="card_case">
        <tbody>
            <tr>
                <td align="center" valign="middle">
                    <img src="http://file2.npage.de/014720/85/bilder/big_grabwaechters_vasall.png" />
                </td>
            </tr>
        </tbody>
    </table>
    <div class="switch_card">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <tbody>
                <tr>
                    <td align="left">
                        <a href="javascript:void(0)" onclick="document.getElementById('card1').style.display='none';document.getElementById('fade').style.display='none';document.getElementById('card2').style.display='block';document.getElementById('fade').style.display='block'" unselectable="off"><img src="http://file2.npage.de/014720/85/bilder/links2a.gif" /></a>
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td align="right">
                        <a href="javascript:void(0)" onclick="document.getElementById('card1').style.display='none';document.getElementById('fade').style.display='none';document.getElementById('card2').style.display='block';document.getElementById('fade').style.display='block'" unselectable="off"><img src="http://file2.npage.de/014720/85/bilder/rechts2a.gif" /></a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="back_to">
        <a href="javascript:void(0)" onclick="document.getElementById('card1').style.display='none';document.getElementById('fade').style.display='none'" unselectable="off"><img src="http://file2.npage.de/014720/85/bilder/back.png" title="zurück" /></a>
    </div>
</div>
<div class="card_content" id="card2">
    <table id="card_icons">
        <tbody>
            <tr>
                <td align="left" width="80">
                    <img height="17" src="http://file2.npage.de/014720/85/bilder/stapel.png" width="24" /><font color="white"> 2/20</font>
                </td>
                <td align="left" width="60">
                    <img height="17" src="http://file2.npage.de/014720/85/bilder/ex.png" width="14" /><font color="white"> 0/ 2</font>
                </td>
                <td align="right">
                    <img src="http://file2.npage.de/014720/85/bilder/ur.png" />
                </td>
            </tr>
        </tbody>
    </table>
    <table class="card_case">
        <tbody>
            <tr>
                <td align="center" valign="middle">
                    <img src="http://file2.npage.de/014720/85/bilder/big_des_kaenguru.png" />
                </td>
            </tr>
        </tbody>
    </table>
    <div class="switch_card">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <tbody>
                <tr>
                    <td align="left">
                        <a href="javascript:void(0)" onclick="document.getElementById('card2').style.display='none';document.getElementById('fade').style.display='none';document.getElementById('card1').style.display='block';document.getElementById('fade').style.display='block'" unselectable="off"><img class="anime" src="http://file2.npage.de/014720/85/bilder/links2.a.gif" /></a>
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td align="right">
                        <a href="javascript:void(0)" onclick="document.getElementById('card2').style.display='none';document.getElementById('fade').style.display='none';document.getElementById('card1').style.display='block';document.getElementById('fade').style.display='block'" unselectable="off"><img class="anime2" src="http://file2.npage.de/014720/85/bilder/rechts2a.gif" /></a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="back_to">
        <a href="javascript:void(0)" onclick="document.getElementById('card2').style.display='none';document.getElementById('fade').style.display='none'" unselectable="off"><img src="http://file2.npage.de/014720/85/bilder/back.png" title="zurück" /></a>
    </div>
</div>
<div class="card_overlay" id="fade">
    &nbsp;
</div>

Alles anzeigen

Beiträge von Seevan

HTML javascript in eine script.js umwandeln/schreiben

HTML javascript in eine script.js umwandeln/schreiben

HTML javascript in eine script.js umwandeln/schreiben

HTML javascript in eine script.js umwandeln/schreiben

HTML javascript in eine script.js umwandeln/schreiben

HTML javascript in eine script.js umwandeln/schreiben

HTML javascript in eine script.js umwandeln/schreiben

HTML javascript in eine script.js umwandeln/schreiben