kostenloser Webspace werbefrei: lima-city


Slide Panel anpassen, erst sichtbar wenn geklickt

lima-cityForumDie eigene HomepageGrafikdesign

  1. Autor dieses Themas

    rotuganda

    Kostenloser Webspace von rotuganda

    rotuganda hat kostenlosen Webspace.

    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!
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. 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
  4. Autor dieses Themas

    rotuganda

    Kostenloser Webspace von rotuganda

    rotuganda hat kostenlosen Webspace.

    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 :confused:
  5. Musste meinen Beitrag editieren. Siehe oben.
  6. Autor dieses Themas

    rotuganda

    Kostenloser Webspace von rotuganda

    rotuganda hat kostenlosen Webspace.

    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
  7. 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 :sex:

    Beitrag zuletzt geändert: 12.6.2011 13:50:40 von fabo
  8. Autor dieses Themas

    rotuganda

    Kostenloser Webspace von rotuganda

    rotuganda hat kostenlosen Webspace.

    Danke :prost: so schön jetzt kann man das aufklappen :) ich liebe den Nachbarn! :blah:
    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
  9. 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.
  10. Autor dieses Themas

    rotuganda

    Kostenloser Webspace von rotuganda

    rotuganda hat kostenlosen Webspace.

    Wieso soll ich froh sein das du nicht mein Nachbar bist :scared:
    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
  11. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!