Ankündigung

Einklappen
Keine Ankündigung bisher.

Button öffnet Startseite

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    Button öffnet Startseite

    Ich habe mir mal einen kleinen Infobereich gebastelt und bin etwas verwundert. Am Rechner lief alles und im Shop nicht.

    Das ganze läuft mit js.

    Als ich es einbaute, funktionierte alles ganz gut, bis auf die Anzeige des Buttons. Wo ich ihn auch hinlegte und verlinkte, er wurde nicht angezeigt. Google sagte dann, dass der Link in den Ordner css/images/ führt, den es aber gar nicht gibt. Gut, kann man anlegen. Jetzt wird der Button angezeigt und wenn ich ihn benutze, öffnet sich die Startseite. Man kann auch einfach in das Feld klicken/tippen, dann öffnet sie sich nicht. beim Schließen das Gleiche.

    Der Code hierfür sieht wie folgt aus.

    Code:
    <div id="InformationCharts" class="InformationCharts">  <dl>
        <dt><?php echo  BOX_INFORMATION_COLORCHART ?> <a href="#" id="button" class="closed">Details</a></dt>
        <dd>
    
    
        Hier sind viele Bilder, die ich wegen der Übersichtlichkeit entfernte.
        
        </dd>
        <dt><?php echo  BOX_INFORMATION_MEASUREMENT_CHART ?><a href="#" id="button" class="closed">Details</a></dt>
        <dd><h5>Damen Ladies</h5></br><a class="MagicZoom" id="zoom" data-options="zoomMode: off" title="Measurement Chart" href="images/measurement_chart/latex_groessentabelle_damen.jpg"><img src="images/measurement_chart/latex_groessentabelle_damen.jpg"/></a></br><br class="clearBoth"><h5>Herren Gentlemen</h5></br>    
        <a class="MagicZoom" id="zoom" data-options="zoomMode: off" title="..." href="images/measurement_chart/latex_groessentabelle_herren.jpg"><img src="images/measurement_chart/latex_groessentabelle_herren.jpg"/></a>
        <br class="clearBoth">
        </dd>
        <dt class="dt-last"><?php echo  BOX_INFORMATION_MEASUREMENTS_FORM ?> <a href="#" id="button" class="closed">Details</a></dt>
        <dd class="dd-last"><img src="images/measurementsform/amatoris-massblatt-de600x849.jpg" alt="Maßblatt"></br><h5>Downloads</h5></br><a href="download/amatoris-massblatt-de.pdf" type="application/octet-stream">PDF</a><a href="download/amatoris-massblatt-de.jpg" type="application/octet-stream">JPG</a></dd>
      </dl>
    
    
    
    
    
    
    <script type="text/javascript">
    
    
    $(document).ready(function(){
     $("dt").click(function(){ 
      $('dd').slideUp("fast");
      $('dt > a').removeClass('open').addClass("closed");
      $(this).next("dd").slideDown("fast"); 
     $(this).children("a").removeClass('closed').addClass("open");
     });
    });
    
    
    
    
    </script>
    
    
    </div>
    die css dazu:

    Code:
    #InformationCharts {    width:100%;
        margin: 40px 0 40px 0;
    }
    
    
    
    
    #InformationCharts dt {
        font-weight:bold;
        float:left;
        width:100%;
        padding:10px 10px 10px 10px;
        border-top:1px solid #bcc2d1;
        cursor:pointer;
        color:#586482;
    }
    
    
    .dt-last{
        font-weight:bold;
        float:left;
        width:100%;
        padding:10px 10px 10px 10px;
        border-top:1px solid #bcc2d1;
        border-bottom:1px solid #bcc2d1;
        cursor:pointer;
        color:#586482;
    }
    
    
    .InformationCharts dt:hover {
        color:#586482;
    }
    
    
    .InformationCharts dd {
        display:none;
        margin:0 0 15px 0;
        float:left;
        width:100%;
        text-align: center;
    }
    
    
    .dd-last {
        display:none;
        margin:0 0 15px 0;
        float:left;
        width:100%;
        padding-bottom: 20px;
        border-bottom:1px solid #bcc2d1;
        text-align: center;
    }
    
    
    .InformationCharts dd img{
        margin-bottom: 10px;
    }
    
    
    
    
    .dd-last a{
        margin: 20px 20px 20px 20px;
        padding:10px 20px 10px 20px;
        border: 1px solid #bcc2d1;
        background-color: #e9ebf0;
    }
    .dd-last a:hover{
        margin: 20px 20px 20px 20px;
        padding:10px 20px 10px 20px;
        border: 1px solid #bcc2d1;
        background-color: #cbcfdb;
    }
    .InformationCharts #button {
        float:right;
        display:block;
        height:18px;
        width:17px;
        text-indent:-9999px;
    }
    
    
    #InformationCharts .closed { background:url(images/button.png) left no-repeat; }
    
    
    #InformationCharts .open { background:url(images/button.png) right no-repeat; }

    Woran könnte es liegen und was müsste ich ändern?
    Vielen Dank.
    Zuletzt geändert von amatoris; 31.07.2017, 22:15.

    #2
    Ich seh den Zusammenhang mit Zen Cart nicht ganz, aber wenn ein Link mit
    Code:
    <a href="#"
    definiert wird, ohne dass irgendein Javascript dafür was Spezielles vorsieht, dann ist das das normale Verhalten.

    Kommentar


      #3
      Ich habe das jetzt anders gelöst.

      Danke, es hat mein Gehirn angekurbelt.

      Kommentar

      Info zu diesem Forenarchiv:
      Mit Release von 1.5.7 wurde die deutsche Zen Cart Version auf eine reine DIY-Lösung umgestellt.
      Für einen Support via Forum stehen keine personellen und zeitlichen Ressourcen mehr zur Verfügung.
      Dieses Supportforum bleibt im Nur-Lesen-Modus als Wissensarchiv noch online verfügbar.
      PM Funktionalität, Registrierung und Posten neuer Beiträge sind deaktiviert.
      Zugriff auf Anhänge in den Postings ist auch ohne Registrierung/Einloggen möglich.
      FAQ und Downloadbereich des Forums wurden in die neue umfangreiche Knowledgebase auf der zen-cart-pro.at Website übernommen.

      Das Development der deutschen Zen Cart Version geht wie bisher auf Github weiter.
      Wir werden auch weiterhin neue Versionen bereitstellen und die Onlinedokumentation/Knowledgebase aktualisieren.
      Fehler in der Software können auf Github als Issues gemeldet werden.
      Follow us
      aktuelle version
      Zen Cart 1.5.7g deutsch
      vom 12.12.2023
      [Download]
      Lädt...
      X