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.

  34. Einste1n sagt:

    braucht jquery dafür ein plugin oder hat sich etwas verändert ?
    weil bei mir reagiert der überhaupt nicht. Der macht also garnichts wenn ich diese Funktion einbaue 🙁

    • @Einste1n: dazu benötigt jQuery kein Plugin. Es ist in erster Linie eine Markup-Frage, denn die Container müssen fleibel sein, sonst nützt das ausblenden nichts.

  35. Einste1n sagt:

    okay, was heißt denn "flexibel" ?

  36. Einste1n sagt:

    okay danke ... dann werde ich mal etwas umbauen müssen 🙂

  37. Bjoern sagt:

    gefaellt mir gut. ich benutze allerdings mygallery (wildbits.de). falls dieses plugin aktiv funktioniert die slidefunction nicht. vielleicht benutzt mygallery eine aehnliche javascript funktion mit gleichem Namen, was die die jquery funktion deaktiviert? any ideas?

    • @Bjoern: myGallery lädt eine eigene Libary, dass kann und sollte man aus meiner Sicht ändern. Ebenfalls bietet jQuery einen spez. Syntax, um diverse Probleme zu vermeiden.

      
      jQuery(function($) {
      
  38. mario sagt:

    hello!
    i love this jQuery horizontal slide function... im working on a new web site, my first and i would like to implement that..
    i was wondering, as a novice is there possible to make some working example for this function?
    or at least can yo please post a complete working markup of a code?
    div structure with css? is that possible

    i've downloaded this site put the code you previously posted there on the page but its still not working...am i missing something?
    thx! .-)

  39. mario sagt:

    thank you Frank!
    i can wait there is no hurry...
    🙂

  40. @mario: you can find a small example here: test/jquery_horizontal_slide.php
    I hope, this is enough for understanding.
    Best regards

  41. thomas sagt:

    hi,

    js meldete bei mir immer nen $-fehler. liess sich beheben indem $ gegen jQuery geändert wird, also bspw.
    $("a#ToogleSidebar").click().toggle(function() { gegen
    jQuery("a#ToogleSidebar").click().toggle(function() {

    viel spass und gruss,
    thomas

  42. thomas sagt:

    ebenfalls funktionsfähig ($ zur not gegen jQuery tauschen):

    $(document).ready(function() {
    // hides the slickbox as soon as the DOM is ready
    // (a little sooner than page load)
    $('#slickbox').hide();
    // shows the slickbox on clicking the noted link
    $('a#slick-show').click(function() {
    $('#slickbox').show('slow');
    return false;
    });
    // hides the slickbox on clicking the noted link
    $('a#slick-hide').click(function() {
    $('#slickbox').hide('fast');
    return false;
    });
    // toggles the slickbox on clicking the noted link
    $('a#slick-toggle').click(function() {
    $('#slickbox').toggle(400);
    return false;
    });
    });

    http://www.learningjquery.com/2006/09/slicker-show-and-hide

  43. hups sagt:

    hallo hier mein code warum muss ich beim ersten mal doppelt auf klick mich klicken ??

  44. hups sagt:

    noch ein versuch

    hier der code

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

    kann man da auch bounce reinbringen? oder eine andere snimation ?

    • Im Grunde kann man alles machen, das ist ja der Hintergrund. Hast du dir die Demo angesehen? Alle weiteren Funktion von jQuery kann man einbinden. Ich habe mich in dem Fall nur für animate entschieden.

  45. hups sagt:

    aber warum muss ich am anfang 2 * klicken

  46. @hups: du blendest in der ersten Zeile den Sidebar aus, hier ist mein Scriptcode.

  47. hups sagt:

    aso ich wollte einfach nur deinen code so haben das das togglefeld beim starten zu ist

    könntest du mir das sagen

    • die erste Funktion wird via click aufgerufen, sie muss direkt beim laden der Seite geladen werden, also dort wo hide gestartet wird.

      jQuery('a#ToogleSidebar').click().toggle(function() {
      zu
      jQuery('a#ToogleSidebar').toggle(function() {
      sollte gehen

  48. hups sagt:

    geht immer noch nicht ist immer offen am anfang soll aber zu sein beim start

  49. mario sagt:

    Frank thank you very much for the working example!
    best regards...

  50. Einste1n sagt:

    vielen Dank für deine Beispiele ... hab es heute nochmal probiert und es funktioniert. Allerdings sieht das noch etwas bescheiden da die Schrift im ausblenden zerpresst wird =)
    naja ich hoffe ich bekomme das noch hin. Wird noch viel arbeit wenn ich die komplette Seite auf jquery bekommen will. Wer sehens will :

    spielwiese.einste1n.de > entwicklungsversion
    einste1n.de > mootool original

    kennt jemand auch nen gutes deutschsprachiges Forum wo man sich erkundigen kann, falls ich irgendwo feststecke ?

    mfg
    Einste1n

  51. Chris sagt:

    Hmm, ich hab den Code 1 zu 1 so kopiert und in ein WordPress Template einfügt, wo außer ein paar divs sonst kein Code vorhanden ist.
    Sieht auch genau so aus wie auf der Beispielseite, nur funktioniert es nicht.

    Fehlermeldung lautet:

    Fehler: $("a#ToogleSidebar") is null
    Quelldatei: http://127.0.0.1/beispiel/#
    Zeile: 58

  52. Chris sagt:

    Grummel, hat sich erledigt...
    Das beißt sich wohl mit dem lightbox plugin.

  53. Simone sagt:

    ...nu such' ich schon seit Stunden, weil ich es alleine rauskriegen wollte...

    Hallo Frank,

    in welche Datei muß ich den den code ablegen???????????????

    sorry, bin echt noch ein Greenhorn

    Gruß, Simone

    • @Simone: der js-code muss in ein js-file und geladen werden, dass file muss dann im head oder footer geladen werden. Aber das Amrkup und das CSS müssen dazu passen, ansonsten funktioniert das nicht.

  54. Andy sagt:

    Hallo Frank,

    der Effekt ist echt cool. Ich habe schon einige Zeit rumprobiert, aber leider krieg ich es nicht hin den auf meiner Seite zum laufen zu bringen. Was muss ich tun, um den Effekt für alle Artikel auf meinem Blog zum laufen zu bringen?

    - Andy

  55. Andy sagt:

    @Frank: Ja, ich habe mir alles angesehen. Ich kenne mich nicht so gut mit JS aus. Wie schwer wäre es, daraus ein WordPress Plugin zu machen?

    • @Andy: das geht gar nicht, da ich das CSS des Themes nicht beeinflussen kann; ich muss jedes Theme kennen. Nur wenn der Sidebar nicht statisch ist, dann kann ich den via JS ausblenden, da ich ja quasi die CSS Eigenschaften ändere.

  56. Andy sagt:

    @Frank: Wenn ich das jetzt richtig verstanden habe, muss ich:
    1. HTML Code in der single.php von WordPress einfügen - für die "Klick mich" Funktion.
    2. Im style.css etwas einfügen. (Voraussetzung für alles ist, dass die Sidebar nicht statisch ist).
    3. Eine extra .js Datei irgendwo auf meinem Server haben.

    Ist das richtig?

    • @Andy: punkt 3, man muss jQuery als Framework haben und ein eigenes JS bauen, was diese Funktion von jQuery nutzt; hast du die Demo angesehen, den Quellcode?

  57. Andy sagt:

    @Frank: Ja, ich habe mir die Demo und den Quellcode angesehen. Soweit ich weis, habe ich jQuery, und nutze die Funktionen. Wie baue ich das eigene .js ein?

    • @Andy: das muss in den Quellcode, wenn es sich um WordPress handelt, dann setzt man es am besten via Funktion ab, heißt das Script in eine Datei oder Funktion und in der functions.php aufrufen. Dies ist komplex und von diversen Randbedingungen abhängig um es so klar zu erklären.
      Solltest du das in deinem Theme einbauen wollen, dann muss der content und der Sidebar seine Breite verlieren, denn aktuell sind die statisch breit, in px. Im klassischen Fall ist der content daher 100% und der Sidebar in px statisch und via JS wird dann der sidebar ausgeblendet.

  58. Andy sagt:

    @Frank: Danke. Dann scheint mir die Sache zu schwer zu werden. Wie lange würde ein Pro wie Du für das hinzufügen der Ein- und Ausblendfunktion brauchen?

  59. Timm sagt:

    Hallo Frank,
    Seit Monaten verfolge ich Deinen Blog, auch wenn ich bisher noch keine Kommentare abgab. Naja.
    Ich kann nur sagen, Danke für Deine Hilfe und Ideen.

    Jetzt endlich habe ich mein Blog auf Holderlein.de soweit fertig. Bestimmt gibt es noch kleine Dinge, die ich ändern möchte.
    Dazu gehört auch die Sliding-Funktion der Kommentare.
    Ich möchte, das die Kommentare selbst, beim Aufruf der Seite versteckt sind, die Kommentarhilfe und die -Regeln (wie bei Dir) jedoch ersichtlich sind.
    Nach langem Suchen fand ich Deinen Artikel. Aber irgendwie klappt gar nichts.
    Wenn ich den Link anklicke, wandert die Seite nach oben....
    Weiter gesucht und das gefunden:
    <div class="toggle_icon"Kommentare verstecken/anzeigen

    Insoweit klappt das Ein-/Ausklappen. Nur würde ich gerne ein Kreuz vor dem Text haben, damit erkenntlich ist, das es ich um eine Funktion handelt (Wie bei Dir).
    Keine Ahnung, wie ich das hinbekommen soll.

    Ich besitze in meinem Theme ein Shortcode mit dem Accordion-Effekt.
    Das klapp in den Beitragen ganz gut. Nur würde ich diesen Shortcode im Quellcode nutzen (für Anzeige/Verstecken der Kommentarliste). Bei meinen kläglichen Versuchen mit echo do_shortcode kam ich nur zu dem Ergebnis, das ich den Titel anklickte und das Kreuz auf zu minus wurde. Nichts wurde versteckt bzw. Angezeigt.
    Hier der Code, den in meiner functions.php ist:
    // [accordion]
    function add_accordion( $atts, $content = null) {
    extract(shortcode_atts(array(
    'bg_color' => ''
    ), $atts));

    $content = str_replace("", "", $content);
    $content = str_replace("", "", $content);

    return ''.do_shortcode($content).'';

    }

    add_shortcode('accordion', 'add_accordion');

    function add_title( $atts, $content = null) {
    extract(shortcode_atts(array(
    'color' => ''
    ), $atts));
    return ''.do_shortcode($content).'';

    }
    add_shortcode('acctitle', 'add_title');

    function add_text( $atts, $content = null) {
    extract(shortcode_atts(array(
    'color' => ''
    ), $atts));
    return ''.$content.'';

    }
    add_shortcode('acctext', 'add_text');

    Hier nun der Code, den ich Testweise verwendete:
    echo do_shortcode('[accordion] [acctitle]Why have an ARDS Network?[/acctitle] [acctext]At this time, there is no specific treatment for ARDS, and therapy is only supportive, in the hope that the patient will spontaneously recover. Unfortunately, there is disagreement about what constitutes the best support. The development of effective treatments, both supportive and curative, for ARDS is essential. Reaching this goal has been difficult, in part because it requires the study of large numbers of patients in rigorously conducted complex clinical trials.[/acctext] [/accordion] ');

    Ich habe Dir meine Header.php, functions.php und comments.php zum download angeboten. Vielleicht kannst Du mir helfen.


    Vielen Dank schon einmal.
    Timm

    • @Timm: der Effekt wird via CSS erreicht; ich gebe mit JS jeweils eine andere Klasse, je nach dem, ob ein- oder ausgefahren ist und diese Klasse stellt dann das entsprechende Icon dar.

  60. Timm sagt:

    So richtig habe ich das noch nicht verstanden. Wie kann nach dem Klick ein anderes CSS verwendet werden?
    Ich habe jetzt eine Lösung gefunden. Wie findest du sie. Oder was kann ich verbessern?
    Vielen Dank.
    Timm

  61. Timm sagt:

    Hallo Frank,

    habe jetzt alles anders gelöst. Sieht ganz ok aus.
    Ansonsten vielen Dank für die des Slidings.

    WennDu Verbesserungsvorschläge haben solltest, ... jederzeit herzlich willkommen. 🙂

  62. Sven sagt:

    Hi, erstmal hast du da ne richtig gute Seite. Tolle Erklärungen. Ich habe dein beispiel zum tooglen ausprobiert, der text tooglet auch. Das Problem ist das meine Seite nicht breiter wird wie hier bei der auf der Seite. Wie geht das ? Kannst du mir da vielleicht per mail helfen? mfg

    Sven

  63. Sven sagt:

    Hi,
    ich bin gerade dabei ein toogle script für meine Comments zu schreiben. Habe deins ein wenig abgewandelt. hier ein link zum schauen: http://www.photo-folio.de/panorama/

    Einblenden funktioniert. Es wird auch der text einblenden gezeigt. Ausblenden nur dann wenn ich 2 mal klicke. Der text wird korrekt angeteigt. hast du ne diee wie ich das sauber hinbekomme?


    Ich danke dir im voraus

  64. Michael sagt:

    Ich suche schon seit Stunden nach diesem horizontalem Slider!

    Und nun habe ich es gefunden. Danke und es wird gleich eingebaut 😉

  65. Sebastian sagt:

    Ein sehr schönes Tutorial!

    Nur leider scheint es mit der WordPress 3.3.1-eigenen jQuery Bibliothek (Version 1.7.1)

    Einbindung in functions.php oder / header.php des betreffendes Themes:
    wp_enqueue_script('jquery');

    NICHT zu klappen, sondern nur mit der im Beispiel erwähnten Google-Bibliothek.

    Im Übrigen müssen bei der jQuery Biblo die Dollarzeichen bei $(...) durch jQuery(...) ersetzt werden.

    • @Sebastian: $muss nicht ersetzt werden, es muss nur bekannt gemacht werden; ansonsten weis jQuery davon nix. 1.7.1 muss ebenso klappen. Hier noch einige Tipps zu jQuery und WP.

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