jQuery und die horizontale Slide-Funktion

bueltge.de [by:ltge.de] wird von Frank Bültge geführt, administriert und gestaltet. Alle Inhalte sind persönlich von mir ausgewählt und erstellt, nach bestem Gewissen und Können, was die Möglichkeit von Fehlern nicht ausschließt.

Kommentare

  
  1. Chris sagt:

    Hallo Frank,
    nicht nur dass das Ein- / Ausblenden im Firefox v2.0.0.6 einwandfrei funktioniert, es sieht auch noch absolut genial aus.
    Viele Grüße aus dem Rheinland,
    Chris

  2. Alex sagt:

    sidebar ein- und ausfahren funktioniert wunderbar. sag mal, hast du die abgerundeten ecken auch mit jquery gemacht? oder sind das grafiken? ich hab mal das jquery-corner-plugin benutzt, aber im safari wurden die ecken dann nie rund angezeigt, deine werden mir aber rund angezeigt und deswegen wollt ich wissen, wie du die ecken gemacht hast.

    mfg

    Alex

  3. Alex sagt:

    mir is gerad doch was aufgefallen: ist es beabsichtigt, dass auf der startseite die sidebar nicht untereinander sondern nebeneinander angezeigt wird und sich nicht ausblenden lässt?

  4. juliaL49 sagt:

    Yup, Firefox einwandfrei und auch mit Opera 9 funktioniert es. Wirklich hübsch!

  5. @Alex: Die Ecken sind Grafiken, alt hergebracht. Welche Funktion von jQuery kann den Rundungen beim Design erzeugen. Ich kannte nur eine andere JS-Lösung, beruht nicht auf jQuery?

    Unterschied zwischen single und Startseite etc. ist gewollt.

    Danke für die Rückmeldungen an alle!

  6. Stefan sagt:

    Mit IE7 funktioniert es super. Nachher probiere ich zu Hause noch mit Safari und Camino.
    Ich freue mich schon auf den 2.Teil deines WordPress Tutorials.

  7. Alex sagt:

    auf der jquery seite unter plugins gibts das jquery-roundcorners-canvas plugin. der entwickler sitzt hier: http://www.meerbox.nl/

  8. trokon sagt:

    yupp funktioniert. Dein neues Minus/Plus-Symbol ist logisch. Das vorherige Fähnchen hat aber eher auf sich aufmerksam gemacht.

  9. Tino sagt:

    Kann ich bestätigen.
    Im Firefox, IE7 und Opera funktionierts.

  10. Flori sagt:

    die netten js-spielereinen machen einen schlanken fuss, aber sollte man eine seite unbedingt um 80kb aufblähen?

  11. Hy Flori, du hast da sicher was falsch verstanden. Ich habe 80kByte weniger, weil ich die Bibliothek nicht benötige, sondern nur noch jQuery (21kByte).

  12. Flori sagt:

    ups... da habe ich mich doch glatt verlesen... dann ist es der weg in die richtige richtung 😉
    21 kb sind schon in ordnung...

  13. Alex sagt:

    Hey Frank,

    also der Button mit der Sidebar aus- und einblenden sieht jetzt hervorragend aus. Perfekte Loesung, passt wunderbar ins Design 🙂

    Die Funktion klappt auch wunderbar

    Alex

  14. macdet sagt:

    Einfach Klasse. NEID. Meine ersten Geh/Steh Versuche sind da noch nicht so berauschend. Lediglich das Zeigen von Fotos unter der Gallery ->

    http://mobbing-gegner.de/photos/gallery/MobbingGegner/

    aber nun bin ich voll motiviert. Danke!

    macdet
    -- hartz iv muss man sich leisten können --

  15. Klasse. Tolle Idee und gut umgesetzt. Wie überhaupt das gesamte Redesign.
    Sobald Zeit ist, muss ich mir unbedingt JQuery mal näher anschauen. 2009?

    Einen netten Typo hast du übrigens im Quelltext-Ausschnitt weiter oben:
    > $("a#ToogleSidebar") und id="ToogleSidebar"
    Ein- und ausschalten heißt eigentlich "toggle", wie in "slideToggle-Funktion", aber Google wird sich freuen, dass der Klang ihres Namens so einen Einfluss hat 😉

    Grüße aus Groningen
    Peter

  16. Hallo Peter,
    zu erst einmal Glückwunsch zur kommenden DVD, toll.

    Manchmal ist Google eben doch übermächtig, daran sieht man mal wieder wie G* mich eingenommen hat ;-).
    Mit der Zeit ist das so eine Sache - ich versuche ja schon seit langer Zeit das Schlafen weg zu lassen, deshalb auch dieser größere Font hier. Leider werden die Zeichen trotzdem irgendwann unscharf und der Inhalt wird nicht so richtig aufgenommen.
    LG aus Eisenach in den Norden.
    Frank

  17. > zu erst einmal Glückwunsch zur kommenden DVD, toll.
    Danke. Ich bin sehr gespannt darauf.

    Und dir einen Glückwunsch zum Redesign. Das ist hier ja eine Fundgrube an gut umgesetzten Design-Ideen geworden.

    > das Schlafen weg zu lassen, deshalb auch dieser größere Font hier.
    Das muss ich auch mal probieren, einfach die Schrift größer und dann bin ich nicht auf einmal nicht mehr müde 😉

    Ciao
    Peter

  18. Vielen Dank für die Blumen, das nehme ich mir als reiner Hobby-"Webdesigner" gerne an! Auch wenn wohl mein Steckenpferd das Markup/ Code bleiben wird.
    Alles Gute
    Frank

  19. Jakob sagt:

    Ich habe hier noch ne jQuery-Demo für die interface.js, die ja auch schon mit WP kommt, gefunden. Dort wird dann $("a#sidebartoggle").click(function() {
    $("div#primary.sidebar").SlideToggleRight(500, null, 'bounceout');
    return false;
    });

    benutzt, was also auch noch ne Möglichkeit ist. Hat aber nicht den Fade-Effekt, den wohl animate mit sich bringt.

  20. Hy Jakob,
    aufpassen, diese Funktion steht nur zur Verfügung, wenn eine weitere Bibliothek (Interface Elements) geladen wird. Auch die ist in WP enthalten. Habe ich kurz im Artikel oben angerissen, denn die hatte ich im Vorfeld im Einsatz. Bringt aber zusätzliche 80kByte mit.

  21. Kristjan sagt:

    Is it possible to make plugin for wordpress to do job automaticly?

  22. Yes, I think it am possible, but not really meaningful. It is easy to integrate.

  23. Das Dush sagt:

    bisell alt der topic ...ich weiß, aber genial dass das ding auch unter safari läuft, bisher hat dieses nämlich keines der tuts getan die ich gesehen habe! 🙂
    gruß

  24. Heiko sagt:

    Hallo,

    habe folgendes Problem, wenn ich denn Code in WordPress einbinde und ausführe, bekomme ich die Fehlermeldung, dass $ keine funktion sei. Was mache ich den falsch? Denn Code habe ich per Trag and Drop aus der Seite genommen und im header eingefügt.

    Gruß

    heiko

  25. Nichts, du nutzt eine andere Version von jQuery und die hat einen Bug in der Hinsicht. Nutze mal eine andere, eventuell die aus meinem PhotoBlogFb-Theme, im Paket zu finden.

  26. Heiko sagt:

    Hallo,

    ich habe mal die aktuelle jQuery per Hand eingefügt und dann tut es auch. Danke Dir.

  27. Steffen sagt:

    Hallo,

    ich brauche eure Hilfe. Ich versuche diese Toogle-Funktion ebenfalls zu verwenden, jedoch soll bei mir mein DIV erste nicht zu sehen sein und erst wenn ich auf "einblenden" klicke, sollen meine Zusatzinfos angezeigt werden. Kann mir bitte jemand von euch einen Tipp geben? Muss ich hier mit addClass arbeiten? Und wenn ich das per CSS mache, muss man zweimal auf den Link "einblenden" klicken, dass ist ja auch keine Lösung.

    Vielen Dank schonmal.

    MfG Steffen

  28. nein, du musst das Ausblenden beim Laden der Seite schon realisieren.

    $(document).ready(function() {
    	$("#sidebar").hide();
    

    sorgt für Ausblenden sofort. Kannst du die im aktuellen PhotoBlog-Theme ansehen, nur eben horizontal.

  29. Steffen sagt:

    Hallo Frank,

    danke für deine Antwort, das funktioniert auch, aber ich hbae hier denselben Effekt wie bei meinem Test mit dem CSS. Ich muss auf "hier klicken" wenn die Seite neu geladen ist immer zweimal draufklicken, danach funktioniert es dann auch mit "Einmalklick". Woran kann das liegen?

    Das ist mein Code zur Zeit!


    jQuery(document).ready(function() {
    $(".sidebar").hide();
    $('a#ToogleSidebar').click().toggle(function() {
    $('.sidebar').animate({
    height: 'hide',
    opacity: 'hide',
    }, 'slow');
    }, function() {
    $('.sidebar').animate({
    height: 'show',
    opacity: 'show'
    }, 'slow');
    return false;
    });
    });

    Danke Dir schonmal.

  30. Da würde ich lieber in einem JS-Forum mal anfragen, da tummeln sich wesentlich bessere Experten. Ich nutze JS nur Rudimentär.

  31. Steffen sagt:

    Ich habs:


    jQuery(document).ready(function() {
    $('.sidebar').hide();
    $('a#ToogleSidebar').click().toggle(function() {
    $('.sidebar').animate({
    height: 'show',
    opacity: 'show'
    }, 'slow');
    }, function() {
    $('.sidebar').animate({
    height: 'hide',
    opacity: 'hide'
    }, 'slow');
    return false;
    });
    });

  32. niss sagt:

    Hi!

    Excuse me, but I'm french and I don't speak german 🙂 I hope, no, I'm sure you understand english.

    This effect is wonderful and I'm trying to apply your tutorial, but when I use the mentionned code in the sidebar.php file (I'm using WordPress too) the sidebar desappears, but the content doesn't go bigger as it is on your website... Could you please explain me how to do this?

    Thanx a lot!!

  33. It is possible to see the problem on a site, a link?
    The Format is from the stylesheet-file. jQuery slide function is only for hide the div.

© 2016, since 2005 bueltge.de [by:ltge.de] · Theme is built by ThemeShift