| Autor |
Nachricht |
sancho22
Threadersteller
Dabei seit: 31.01.2014
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 31.01.2014 18:05
Titel DIV-Slider gesucht |
  |
|
Hallo,
ich möchte gerne innerhalb eines DIVs einen Slider der Text enthält implementieren.
Dieses DIV soll beim Seitenaufruf aufgeklappt (Bild 1) dargestellt sein, und mittels Klick auf das kleine Kreuz an die Seite "fahren" (Bild 2), und natürlich umgehrt.
Wie kann ich das machen?
Bild 1: 
 Bild 2: 
|
|
| |
  |
 |
Mac
Dabei seit: 26.08.2005
Ort: Köln
Alter: 62
Geschlecht: 
|
Verfasst Fr 31.01.2014 18:10
Titel
|
|
|
|
Was du suchst, heißt Akkordeon
|
|
| |
 |
|
|
Anzeige
|
|
|
sancho22
Threadersteller
Dabei seit: 31.01.2014
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 03.02.2014 15:37
Titel
|
|
|
Habe schon einiges gefunden, aber irgendwie haut das nicht so richtig hin.
Hier mal das CSS:
| Code: | #information{
position:absolute;
background-color:#FFFFFF;
filter:alpha(opacity=90); /* IE */
-moz-opacity: 0.90; /* Mozilla */
opacity: 0.90; /* Opera */
margin-top: 0px;
margin-left: 50px;
padding-left: 10px;
height: 70px;
width: 200px;
z-index:100;
}
#bilder{
position:relative;
float: left;
height: 560px;
z-index:10;
}
### ACCORDEON
.trigger {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-box-shadow:0 1px 1px #fff inset;
-webkit-box-shadow:0 1px 1px #fff inset;
box-shadow:0 1px 1px #fff inset;
background-color:#FFFFFF;
filter:alpha(opacity=90); /* IE */
-moz-opacity: 0.90; /* Mozilla */
opacity: 0.90; /* Opera */
color:#888;
cursor:pointer;
margin-bottom:5px;
padding:5px;
width:388px;
}
.trigger_active {
color:#ccc;
}
.toggle_container {
padding:5px 10px;
width:380px;
background-color:#FFFFFF;
filter:alpha(opacity=90); /* IE */
-moz-opacity: 0.90; /* Mozilla */
opacity: 0.90; /* Opera */
} |
HTML
| Code: | <div id="mainContent">
<div id="information">
<h3 class="trigger">Accordion Box 3</h3>
<div class="toggle_container">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div id="bilder">
<img src="../img/bilderauswahl/Bild1.jpg" id="bild" name="bild">
</div>
</div>
</div> |
Javascript:
| Code: | <script type="text/javascript" >
$(document).ready( function() {
$('.trigger').not('.trigger_active').next('.toggle_container').hide();
$('.trigger').click( function() {
var trig = $(this);
if ( trig.hasClass('trigger_active') ) {
trig.next('.toggle_container').slideToggle('slow');
trig.removeClass('trigger_active');
} else {
$('.trigger_active').next('.toggle_container').slideToggle('slow');
$('.trigger_active').removeClass('trigger_active');
trig.next('.toggle_container').slideToggle('slow');
trig.addClass('trigger_active');
};
return false;
});
});
</script> |
Im Prinzip soll es so sein, das bei einem Seitenaufruf das Accordeon geöffnet ist, und wenn man auf einen Link (Pfeil, etc.) klickt, soll sich das Accorden so verschieben, das am Rand ein kleiner Streifen stehen bleibt.
Hier in diesem Beispiel öffnet/schließt sich das Accordeon von oben nach unten. Eigentlich hätte ich es lieber seitwärts, aber ich wäre zufrieden wenn es überhaupt schon mal funktionieren würde.
Das hier gezeigte Beispiel funktioniert im Firefox, aber nicht im IE. Ist da das CSS Schuld?
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
jQuery Info Slider (Content Slider)
Slider-Tool gesucht
Slider with Autoplay
Slider mit Zeitleiste
Slider verlangsamen?
Image slider
|
|
Willkommen auf dem Portal für Mediengestalter
