Slide Panel anpassen, erst sichtbar wenn geklickt
lima-city → Forum → Die eigene Homepage → Grafikdesign
auto
blocken
code
datei
deklaration
demo
display
genau anpassen
header
http
image
kommentar
multi
nachbar
panel
position
single
teil
text
url
-
Hallo,
ich hatte vor einiger Zeit bereits ein Thema hierzu erstellt: http://www.lima-city.de/thread/wordpress-komentarbereich-anpassen und bin damals nicht zu einer Lösung gekommen. Nun habe ich es nochmals versucht und habe es geschafft.
Jetzt taucht aber eine neue Frage, eigentlich zwei auf:
1. Wie schaffe ich es das, das Slidepanel erst dann ausgefahren sichtbar ist wenn man es anklickt? In der Demo ist es auch so, dass es standardmäßig zu ist, siehe: http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html
Bei mir ist es aber standardmäßig auf, siehe: http://www.intoxi-hd.de/2011/02/22/fotos-entschleichern-via-unscharf-maskieren/
Meine Single.php sieht an besagter Stelle so aus:
<p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p> <div id="panel"> <?php arras_below_post() ?> <a name="comments"></a> <?php comments_template('', true); ?> <?php arras_below_comments() ?> </div>
Und in der footer.php habe ich das Script eingebunden:
<script type="text/javascript" src="/wp-content/themes/arras/js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false; }); }); </script>
Das Script als solches seht ihr in der oben verlinkten Demo wenn ihr euch den Quelltext anzeigen lasst.
Und in der css das:
#panel { background: #754c24; height: 200px; display: none; } .slide { margin: 0; padding: 0; border-top: solid 4px #422410; background: url(images/btn-slide.gif) no-repeat center top; } .btn-slide { background: url(images/white-arrow.gif) no-repeat right -50px; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: #fff; text-decoration: none; } .active { background-position: right 12px; }
2. Wie bringe ich es dem IE bei?!
Herzlichen Dank schon mal für eure Hilfe! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Auf deiner Seite wird JQuery 2x eingebunden. Ferner gehört das Script in den Header.
Im Header suchen nach:
<script type="text/javascript"> jQuery(document).ready(function($) { $('.multi-sidebar').tabs(); $('.sf-menu').superfish({autoArrows: true, speed: 'fast', dropShadows: 'true'}); $('#commentform').validate(); }); </script>
Ersetzen durch:
<script type="text/javascript"> jQuery(document).ready(function($) { $('.multi-sidebar').tabs(); $('.sf-menu').superfish({autoArrows: true, speed: 'fast', dropShadows: 'true'}); $('#commentform').validate(); $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false; }); }); </script>
Diesen Teil wiederrum aus dem Template entfernen:
<script type="text/javascript" src="/wp-content/themes/arras/js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false; }); }); </script>
Dann muss noch mindestens diese CSS-Deklaration mit rein:
#panel { background: #754c24; height: 200px; display: none; } .active { background-position: right 12px; }
Ohne diese CSS-Deklaration ist das Ding logischerweise automatisch offen, weil es nicht per CSS versteckt wird.
Außerdem funktioniert dein WP Super Cache nicht ;)
Beitrag zuletzt geändert: 12.6.2011 13:09:30 von fabo -
Dank dir! Ich weiß das es zwei Mal eingebunden wird, denn mein Theme benutzt es ebenfalls. Aber wenn ich das Script nicht mit dem entsprechenden Pfad ein zweites Mal einbinde:
<script type="text/javascript" src="/wp-content/themes/arras/js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false; }); }); </script>
geht es irgendwie sonst garnicht...
Und ich habe es jetzt aus dem footer genommen und in die header.php gepackt - kein Effekt es ist nach wie vor automatisch geöffnet, statt geschlossen
-
Musste meinen Beitrag editieren. Siehe oben.
-
Also ich habe es versucht....
Meine CSS war/ist richtig:
<!-- Ab hier Klick-Box --> #panel { background: #754c24; height: 200px; display: none; } .slide { margin: 0; padding: 0; border-top: solid 4px #422410; background: url(images/btn-slide.gif) no-repeat center top; } .btn-slide { background: url(images/white-arrow.gif) no-repeat right -50px; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: #fff; text-decoration: none; } .active { background-position: right 12px; }
Aber diese Stelle finde ich nicht....
<script type="text/javascript"> jQuery(document).ready(function($) { $('.multi-sidebar').tabs(); $('.sf-menu').superfish({autoArrows: true, speed: 'fast', dropShadows: 'true'}); $('#commentform').validate(); }); </script>
Ich kann dir zwei Dateien anbieten wo ich wenigstens eine Zeile fand:
http://dl.dropbox.com/u/29997518/mal%20eben%20schnell/header.js.php ok eine Datei...
Ergo kann ich deine weiteren Schritte nicht befolgen :(
Edit: Woran siehst du das mein Cache Dingens nicht funktioniert?
Beitrag zuletzt geändert: 12.6.2011 13:19:41 von rotuganda -
Das mit dem JS ist schon okay. Hab gesehen, dass du das verschoben hast. Ich hab etwas Zeit gebraucht, um das Teil auf deiner Seite überhaupt zu finden :D
Mal davon abgesehen, dass
$('.multi-sidebar').tabs();
einen Fehler bei dir verursacht, hast du einen groben Fehler in der CSS-Deklaration gemacht :)
Kommentare in einer CSS sehen so aus:
/* Kommentar */
und nicht
<!-- Kommentar -->
Korrigieren (3x, in der intoxi.css) und dann klappts auch mit dem Nachbarn ;)
EDIT:
Das war mein 1.000er Beitrag
Beitrag zuletzt geändert: 12.6.2011 13:50:40 von fabo -
Danke
so schön jetzt kann man das aufklappen :) ich liebe den Nachbarn! 
Edit. herzlichen Glückwunsch und sag mal noch was zu meinem WP Cache Dingens!
Beitrag zuletzt geändert: 12.6.2011 14:02:52 von rotuganda -
Dann sei mal froh, dass ich nicht dein Nachbar bin ;)
In der Datei wp-content/advanced-cache.php muss der Pfad zur Datei wp-cache-phase1.php korrigiert werden. -
Wieso soll ich froh sein das du nicht mein Nachbar bist
Aja, bringt den das Cache-Dingens überhaupt was? Ich habe es jetzt deaktiviert...was muss ich denn da genau anpassen?
Beitrag zuletzt geändert: 12.6.2011 15:52:08 von rotuganda -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage