Seitliche Jquery Tab Slide out

Thema wurde von nataliekayser, 27. Juni 2013 erstellt.

  1. nataliekayser

    nataliekayser Mitglied

    Registriert seit:
    28. Mai 2013
    Beiträge:
    23
    Danke erhalten:
    0
    Danke vergeben:
    8
    Hallo
    ich habe versucht den Tab Slide out Jquery einzubauen - habe dazu die index.html genutzt und bekam auch sofort eine Fehlermeldung. Habe dann geforscht und bin dann hier drauf gestossen funktioniert allerdings auch nicht. Weiß jemand wie und vor allem wo man das einbauen kann??
    Vielen Dank für Euer Interesse.
    lg
     
  2. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.143
    Danke erhalten:
    1.466
    Danke vergeben:
    452
    Beruf:
    Systemadmin, Webentwickler bei Indiv-Style
    Ort:
    PhpStorm
  3. nataliekayser

    nataliekayser Mitglied

    Registriert seit:
    28. Mai 2013
    Beiträge:
    23
    Danke erhalten:
    0
    Danke vergeben:
    8
    Das wäre im Ansatz genau das was ich benötige, gibt es das als Modul?
     
  4. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.143
    Danke erhalten:
    1.466
    Danke vergeben:
    452
    Beruf:
    Systemadmin, Webentwickler bei Indiv-Style
    Ort:
    PhpStorm
    Dafür brauch man kein Modul! Lies dir mit FB den html-Code und die CSS aus. Mehr isses nicht. ;)
     
  5. nataliekayser

    nataliekayser Mitglied

    Registriert seit:
    28. Mai 2013
    Beiträge:
    23
    Danke erhalten:
    0
    Danke vergeben:
    8
    Prinzipiell kann ich das, allerdings weiß ich nicht so recht wo ich es einsetzen soll, da beim gambio gx2 nur die index.html in Frage kommt und die den javascript oder css nicht zuläßt...oder denke ich da im falschen Ansatz??
     
  6. Avenger

    Avenger G-WARD 2012/13/14/15

    Registriert seit:
    26. April 2011
    Beiträge:
    4.771
    Danke erhalten:
    1.478
    Danke vergeben:
    89
    Aber eine jQuery-Lösung kann das schön sanft ein- und ausfahren....

    Mit CSS geht ja nur "an" und "aus"...
     
  7. Anonymous

    Anonymous G-WARD 2015/2016

    Registriert seit:
    20. Februar 2012
    Beiträge:
    8.868
    Danke erhalten:
    1.544
    Danke vergeben:
    1.115
    na das wäre doch mal eine Anleitung wert :), finde das Ding auch sehr nützlich.
     
  8. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.143
    Danke erhalten:
    1.466
    Danke vergeben:
    452
    Beruf:
    Systemadmin, Webentwickler bei Indiv-Style
    Ort:
    PhpStorm
    #8 Steffen (indiv-style.de), 28. Juni 2013
    Zuletzt bearbeitet: 28. Juni 2013
    Nö, stimmt net ganz! Schau mal genau hin: www.indiv-style.de oder www.gartenkamine24.com ;)

    Anleitung:

    das in die /templates/EyeCandy/index.html und Daten anpassen.
    HTML:
    <div class="kundenservice"><a href="/info/mein-kontakt.html"><img src="{$tpl_path}backgrounds/kundenservice.png" alt="Kundenservice bei Ihr Shopname">
    <strong>
    Email<br>
    <span class="big">info@indiv-style.de</span><br><br>
    Phone<br>
    <span class="big">Mo-Fr  9-17 Uhr<br>
    +49(0)3672 - 4838866</span>
    </strong></a>
    </div>
    
    das in eine CSS packen:

    PHP:
    .kundenservice 
    -
    webkit-transition-propertyopacityleftbackground
    -
    webkit-transition-duration1700ms
    -
    moz-transition-propertyopacityleftbackground
    -
    moz-transition-duration1700ms
    -
    o-transition-propertyopacityleftbackground
    -
    o-transition-duration700ms;
    transition-propertyopacityleftbackground
    transition-duration1700ms
    }

    .
    kundenservice a strong opacity:0;
    -
    webkit-transition-propertyopacityleftbackground
    -
    webkit-transition-duration1300ms;
    -
    moz-transition-propertyopacityleftbackground
    -
    moz-transition-duration1300ms;
    -
    o-transition-propertyopacityleftbackground
    -
    o-transition-duration1300ms;
    transition-propertyopacityleftbackground
    transition-duration1300ms;
    left: -250px;
    }
    .
    big color#0FA2D0;font-size: 16px; font-weight: bold; text-shadow: 0 0 2px #0FA2D0;}
    .kundenservice {position:fixedmargin-top:150pxheight:200pxwidth:35pxopacity0.2;}
    .
    kundenservice a strong display:blockpadding:8px 10px;position:fixedmargin-top:-170px; }
    .
    kundenservice:hover {z-index999;position:fixed;opacity:1width:270pxbackground:#333 url(/backgrounds/kundenservice.png) -35px 1px no-repeat; box-shadow: 0 2px 6px #666; }
    .kundenservice:hover a strong {position:fixedwhite-space:nowrapopacity:1margin-top:-170pxleft45pxcolor:#fff; }
    und den Anhang in /templates/EyeCandy/background kopieren......
     

    Anhänge:

  9. Avenger

    Avenger G-WARD 2012/13/14/15

    Registriert seit:
    26. April 2011
    Beiträge:
    4.771
    Danke erhalten:
    1.478
    Danke vergeben:
    89
    Muss mich doch langsam mal näher mit CSS3 befassen...
     
  10. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.143
    Danke erhalten:
    1.466
    Danke vergeben:
    452
    Beruf:
    Systemadmin, Webentwickler bei Indiv-Style
    Ort:
    PhpStorm
    ja, da gibt es richtig geile Features! ;)

    Die Themen html5, CSS3, XAJAX oder auch Responsiv-Design werden m.E. nach eh zu wenig beachtet.
     
  11. DrNuke

    DrNuke Erfahrener Benutzer

    Registriert seit:
    7. Mai 2012
    Beiträge:
    208
    Danke erhalten:
    19
    Danke vergeben:
    22
    Hab das mal versucht bei uns einzubauen.
    Bin allerdings kläglich gescheitert.
    Bei uns "slided" da nix rein oder raus.
    Es kommt lediglich der "Balken" Kundenservice und darunter stehen dann die Daten wie Email und Telefon in extra Zeilen.
    Hab den Code in die index.html kopiert und eine kundenservice.css angelegt. Die liegt im gleichen Ordner wie die index.html. Also in Eyecandy

    Jemand nen Tipp was ich falsch mache???
     
  12. Anonymous

    Anonymous G-WARD 2015/2016

    Registriert seit:
    20. Februar 2012
    Beiträge:
    8.868
    Danke erhalten:
    1.544
    Danke vergeben:
    1.115
    wie meinst Du das? Die kundenservice.css liegt im gleichen Ordner?
    ich habe die css in meiner stylesheet.css angefügt und dann funzt es auch. Oder in den Ordner EyeCandy/usermod/css
     
  13. DrNuke

    DrNuke Erfahrener Benutzer

    Registriert seit:
    7. Mai 2012
    Beiträge:
    208
    Danke erhalten:
    19
    Danke vergeben:
    22
    Danke, hat bestens funktioniert.
    Manchmal sieht man den Wald vor lauter Bäumen nicht.
    Hätte aber noch eine Frage, Bevor man über den Button fährt ist dieser leider fast nicht sichtbar. Welchen wert muss ich in der CSS ändern, damit die Transparenz nicht so stark am anfang ist?
     
  14. Anonymous

    Anonymous G-WARD 2015/2016

    Registriert seit:
    20. Februar 2012
    Beiträge:
    8.868
    Danke erhalten:
    1.544
    Danke vergeben:
    1.115
    da teste mal andere Werte bei opacity
     
  15. albertv

    albertv Erfahrener Benutzer

    Registriert seit:
    27. Februar 2013
    Beiträge:
    59
    Danke erhalten:
    5
    Danke vergeben:
    19
    Ich lasse mal ein dickes DANKE da. Ich bin immer wieder begeistert was man hier so nebenbei mitnehmen kann, ganz grosses Tennis, echt!
     
  16. Anonymous

    Anonymous G-WARD 2015/2016

    Registriert seit:
    20. Februar 2012
    Beiträge:
    8.868
    Danke erhalten:
    1.544
    Danke vergeben:
    1.115
    Hinweis: im Testhop bei mir im Firefox sah das gut aus, im Opera völlig zerschossen, andere Browser habe ich gar nicht erst ausprobiert.
    Testet es auch lieber mal mit den anderen Browsern aus. Ich habe es erstmal wieder raus genommen mangels Zeit mich drum zu kümmern.

    Übrigens bei Steffen sieht es auch im Opera gut aus!
     
  17. DrNuke

    DrNuke Erfahrener Benutzer

    Registriert seit:
    7. Mai 2012
    Beiträge:
    208
    Danke erhalten:
    19
    Danke vergeben:
    22
    Funktioniert bestens.
    In Firefox, IE und Safari.
     
  18. nataliekayser

    nataliekayser Mitglied

    Registriert seit:
    28. Mai 2013
    Beiträge:
    23
    Danke erhalten:
    0
    Danke vergeben:
    8
    Erst mal vielen lieben Dank!! Habe es mal eingebaut und funktioniert prächtig - vielen Dank für die tolle Anleitung!!
     
  19. BB-Toys

    BB-Toys Erfahrener Benutzer

    Registriert seit:
    12. Januar 2012
    Beiträge:
    175
    Danke erhalten:
    21
    Danke vergeben:
    40
    hallo

    kann man das auch erweitern mit Newsletteranmeldung oder so.Wäre nicht schlecht
     
  20. Anonymous

    Anonymous G-WARD 2015/2016

    Registriert seit:
    20. Februar 2012
    Beiträge:
    8.868
    Danke erhalten:
    1.544
    Danke vergeben:
    1.115
    Guckst Du hier:

    (Link nur für registrierte Nutzer sichtbar.)