Ergebnis 1 bis 2 von 2
  1. 24-04-2016, 13:21 #1
    xCrimsonAxe
    xCrimsonAxe ist offline Grünschnabel
    registriert
    18-03-2016
    Beiträge
    3

    HTML / CSS / JS / JQ - Slider zum Elemente Ein-/Ausblenden

    Hallo meine lieben ich bin hier gerade am verzweifeln...
    Ich versuche seit Stunden einen Slider in einer Seite einzubinden welcher beim umlegen Segmente auf der rechten Seite ein bzw ausblendet.

    Hier einige Bilder und Codeschnipsel vorweg:

    Derzeitiges Layout:
    Unbenannt.PNG    		 Wie es nach umlegen des Sliders aussehen sollte:
    Unbenannt.PNG


    Und da der Code die zulässigen 20.000 Zeichen überschreitet:
    HTML-Code: https://codeshare.io/26iBj
    CSS-Code: https://codeshare.io/JV2nM

    Ich habe bereits 2 Lösungsansätze versucht welche aber aus Gründe welche sich mir nicht erschließen beide gescheitert sind.

    Lösungsansatz 1: JQuery
    HTML-Code:
    [...]
<head>
   <meta charset="UTF-8">
   <title>Startseite - Halunkenbande</title>
   <link rel="stylesheet" href="css/style.css" type="text/css">
   <script type="text/javascript" src="jquery-1.12.3.min.js"></script>
   <script type="text/javascript">
      $(document).ready(function(){
         if ($('#slider_schatten').is(:checked)) {
            $('#object').show();
            } else {
            $('#object').hide();
         }
      });
   </script>
</head>
[...]

[...]
<td>Schatten-Pets</td>
<td>
   <div class="slider">	
      <input type="checkbox" id="slider_schatten" name="Schatten-Pets" />
      <label class="shadow" for="slider_schatten"></label>
   </div>
</td>
[...]

[...]
<li id="object" style="display:none">  
   <a href="#" class="figure"><img src="http://forum.jswelt.de/images/pets/monster800.jpg" alt=""></a>
   <span><a href="#">Schlorps</a></span>
</li>
[...]
    Lösungsansatz 2: CSS (Folgt später da ich es im moment nicht rekonstruieren kann)

    Woran kann es liegen das es nicht funktioniert?
    Hoffe ihr könnt mir helfen...

    Mit besten Grüßen
    Geändert von xCrimsonAxe (24-04-2016 um 13:27 Uhr)
    Zitieren Zitieren
  2. 28-04-2016, 17:05 #2
    Avatar von kkapsner
    kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.667

    AW: HTML / CSS / JS / JQ - Slider zum Elemente Ein-/Ausblenden

    Zitat Zitat von xCrimsonAxe Beitrag anzeigen
    Woran kann es liegen das es nicht funktioniert?
    Dein JS hat einen Syntaxfehler... aber dieser Ansatz scheint mir nicht sehr robust/wartungsfreundlich zu sein. Da IDs ja dokumentenweit eindeutig sein müssen, musst du jedesmal dein JS anpassen, wenn du da ein <li> hinzufügst. Ich würde das über CSS-Klassenänderung auf dem <ul> machen. Z.B. würdest du die Klasse "showShadow" entfernen/hinzufügen und im CSS hättest du dann
    Code:
    li.shadow {
	display: none;
}
.showShadow li.shadow {
	display: initial;
}
    kkapsner.de
    Zitieren Zitieren
« Vorheriges Thema | Nächstes Thema »

Ähnliche Themen

  1. Elemente ein & ausblenden
    Von FrillMaster im Forum JavaScript
    Antworten: 7
    Letzter Beitrag: 01-11-2009, 17:12
  2. mehrere Elemente ausblenden
    Von scripper im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 11-11-2008, 23:15
  3. combobox-elemente ausblenden
    Von berni.walzl im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 22-08-2008, 22:50
  4. Mit Javascript mehrere Block-Elemente ausblenden ?
    Von Lagerhaus_Jonny im Forum JavaScript
    Antworten: 23
    Letzter Beitrag: 18-06-2008, 10:01
  5. gezielt elemente einer website ausblenden
    Von fager im Forum CSS und (X)HTML
    Antworten: 0
    Letzter Beitrag: 18-11-2004, 17:30

Stichworte

Lesezeichen

Berechtigungen

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

Foren-Regeln