Werbung / Banner buchen
Neuigkeiten
  • Die modified eCommerce Shopsoftware ist kostenlos, aber nicht umsonst.
    Spenden
  • Damit wir die modified eCommerce Shopsoftware auch zukünftig kostenlos anbieten können:
    Spenden
  • Thema: Zwei tabSlideOut jQuery auf einer Seite

    hechicero

    • Mitglied
    • Beiträge: 233
    Zwei tabSlideOut jQuery auf einer Seite
    am: 14. April 2012, 15:54:39
    Hallo,

    ich versuche gerade verzweifelt zu einem bestehenden tabSlideOut jQuery (Warenkorb) einen zweiten (Feedback) einzubauen. Als Vorlage habe ich diese Seite genommen:

    wobei ich für den zweiten ".slide-out-div" durch ".slide-out-feedback-div" jeweils ersetzt habe.

    Den Code für die general.js.php habe ich an verschiedenen Stellen eingebaut aber nirgends funktioniert es. Entweder wird kein Slider angezeigt oder sind beide am unteren Ende ausgefahren ohne Sliderfunktion.

    Was mache ich falsch?

    Grüße hechicero

    Linkback: https://www.modified-shop.org/forum/index.php?topic=19489.0

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.989
    • Geschlecht:
    Re: Zwei tabSlideOut jQuery auf einer Seite
    Antwort #1 am: 14. April 2012, 18:58:20
    Hi hechicero.

    Wo willst du den Slide-Out denn haben ?
    Wenn du einen hast auf der Warenkorbseite ist das ja wohl so gelöst in der general.js.php ?
    Code: PHP  [Auswählen]
    <?php
    if (strpos($PHP_SELF, FILENAME_SHOPPING_CART )) {
    ?>
    <script src="blablabla"</script>

    Den anderen Slide-Out machst du analog.

    Oder wie genau jetzt ?

    Gruß,
    noRiddle

    hechicero

    • Mitglied
    • Beiträge: 233
    Re: Zwei tabSlideOut jQuery auf einer Seite
    Antwort #2 am: 14. April 2012, 19:57:50
    Hallo noRiddle,

    der vorhandene Slider für den Warenkorb ist am linken Rand positioniert und sieht so aus:

    general.js.php:
    Code: PHP  [Auswählen]
    ...
             <script>
             $(function(){
                 $('.slide-out-div').tabSlideOut({
                     tabHandle: '.handle',                              //class of the element that will be your tab
                     pathToTabImage: '<?php echo 'templates/'.CURRENT_TEMPLATE.'/img/cart_tab.png'; ?>',          //path to the image for the tab (optionaly can be set using css)
                     imageHeight: '122px',                               //height of tab image
                     imageWidth: '40px',                               //width of tab image    
                     tabLocation: 'left',                               //side of screen where tab lives, top, right, bottom, or left
                     speed: 300,                                        //speed of animation
                     action: 'click',                                   //options: 'click' or 'hover', action to trigger animation
                     topPos: '250px',                                   //position from the top
                     fixedPosition: true                               //options: true makes it stick(fixed position) on scroll
                 });
             });

             </script>
             <script type="text/javascript">

    $(document).ready(function(){
     
      //hide toolbar and make visible the 'show' button
            $("span.downarr a").click(function() {
        $("#toolbar").slideToggle("fast");
        $("#toolbarbut").fadeIn("slow");    
      });
    ...
     

    Ob
    Code: PHP  [Auswählen]
    $(document).ready(function(){
    ...
    noch zum Slider gehört weiß ich nicht.

    index.html:
    Code: PHP  [Auswählen]
    <div class="slide-out-div">
                <a class="handle" href="shopping_cart.php">Warenkorb</a>
                <h3>Warenkorb</h3>
                <p>{$box_CART}
                </p>
               
    </div>
     

    Jetzt soll der zweite Slider für Feedback auch links unter den ersten. Der müsste eigentlich gleich aufgerufen werden, bekomme es aber nicht gebacken.

    Hoffe meine Erklärung war nicht zu wirr.  :-I

    Grüße

    hechicero

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.989
    • Geschlecht:
    Re: Zwei tabSlideOut jQuery auf einer Seite
    Antwort #3 am: 14. April 2012, 20:08:43
    So wie ich das sehe wird das Panel über seine Klasse (.slide-out-div) angesteuert.
    Entweder du musst dann auch die neu vergebene Klasse, also .slide-out-feedback-div, mit jQuery ansteuern
    Code: Javascript  [Auswählen]
    $(function(){
                 $('.slide-out-feedback-div').tabSlideOut({
                     tabHandle: '.handle',
                        ....      

    und vergibst jedem Panel noch 'ne ID, um die Position im Dokument über CSS eindeutig festlegen zu können,
    oder du vergibst gleich nur IDs
    Code: Javascript  [Auswählen]
    $(function(){
                 $('#slide-out-div').tabSlideOut({
                     tabHandle: '.handle',
                        ....      

    und
    Code: Javascript  [Auswählen]
    $(function(){
                 $('#slide-out-feedback-div').tabSlideOut({
                     tabHandle: '.handle',
                        ....      

    und im HTML
    Code: XML  [Auswählen]
    <div id="slide-out-div">
                <a class="handle" href="shopping_cart.php">Warenkorb</a>
                <h3>Warenkorb</h3>
                <p>{$box_CART}
                </p>
               
    </div>

    und analog dazu mit ID slide-out-feedback-div.

    Wenn du's nicht hinbekommst, wäre ein Link gut...

    Gruß,
    noRiddle

    P.S.
    Wo hast du denn das Kontakt-Form her für diesen Slider ?,
    das sollte man mal 'n bisschen formatieren...

    hechicero

    • Mitglied
    • Beiträge: 233
    Re: Zwei tabSlideOut jQuery auf einer Seite
    Antwort #4 am: 14. April 2012, 21:00:18
    Über eine neue Klasse hatte ich es versucht, aber ohne  Erfolg.

    Jetzt habe ich es nach deiner Vorlage mit ID gemacht, aber das klappt auch nicht.  :-?

    Hier der Link: http://ebook-online-depot.de/testshop/index.php

    (Unten links hängen die beiden.)

    Der Warenkorb-Slider war im Template, das ich mir gegönnt habe schon drin. Für das Feedback muss ich noch schauen, ob ich das Formular von http://www.modified-shop.org/forum/index.php?topic=7026.0 rein bekomme.

    Grüße

    hechicero

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.989
    • Geschlecht:
    Re: Zwei tabSlideOut jQuery auf einer Seite
    Antwort #5 am: 15. April 2012, 05:48:11
    Tja, da ist einiges verkehrt gelaufen.
    Ich kenne dieses jquery.tabSlideOut.v1.3.js nicht, das geht ja auch viel einfacher.

    Ich sehe aber z.B., daß du zweimal eine jQuery -Bibliothek eingebunden hast.
    Code: XML  [Auswählen]
    <script src="templates/jgruen_smilingshops/javascript/jquery.js" type="text/javascript"></script>
    <script src="templates/jgruen_smilingshops/javascript/thickbox.js" type="text/javascript"></script>

    <script type="text/javascript" src="templates/jgruen_smilingshops/javascript/jquery-1.3.js"></script>
            <script type="text/javascript" src="templates/jgruen_smilingshops/javascript/jquery.cycle.all.js"></script>

    Da kann man jetzt ohne viel Reindenkarbeit nichts zu sagen.
    Wenn ein slide-out geht, müssen auch zwei oder mehr gehen, wenn sie eindeutig angesprochen werden.

    Gruß,
    noRiddle

    hechicero

    • Mitglied
    • Beiträge: 233
    Re: Zwei tabSlideOut jQuery auf einer Seite
    Antwort #6 am: 15. April 2012, 12:33:57
    Es sind aber zwei verschiedene Bibliotheken?

    Wenn ich die Slider als Klassen anspreche sind sie immerhin dort wo sie sein sollen. Allerdings haben beide das selbe Label (entweder Warenkorb oder feedback, je nachdem welche Klasse im Code zuletzt steht) und sliden immer gemeinsam, als ob es sich um nur einen handelt.
    [ Für Gäste sind keine Dateianhänge sichtbar ]

    Hier mal der Ausschnitt aus der general.js.php
    Code: PHP  [Auswählen]
    <script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.js" type="text/javascript"></script>
    <script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/thickbox.js" type="text/javascript"></script>

    <script type="text/javascript" src="<?php echo 'templates/'.CURRENT_TEMPLATE.'/javascript/jquery-1.3.js'; ?>"></script>
    <script type="text/javascript" src="<?php echo 'templates/'.CURRENT_TEMPLATE.'/javascript/jquery.cycle.all.js'; ?>"></script>
            <script type="text/javascript">
             $(document).ready(function(){
             $('#myslides').cycle({
             fx: 'fade',
             speed: 2500,
             timeout: 4500,
             next:   '#myslides',
             pause:   1
             });
             });
            </script>
       

    <script src="<?php echo 'templates/'.CURRENT_TEMPLATE.'/javascript/jquery.tabSlideOut.v1.3.js'; ?>"></script>
             
    <script>
      $(function(){
        $('.slide-out-div').tabSlideOut({
        tabHandle: '.handle',                              //class of the element that will be your tab
        pathToTabImage: '<?php echo 'templates/'.CURRENT_TEMPLATE.'/img/cart_tab.png'; ?>',  //path to the image for the tab (optionaly can be set using css)
        imageHeight: '122px',                               //height of tab image
        imageWidth: '40px',                               //width of tab image    
        tabLocation: 'left',                      //side of screen where tab lives, top, right, bottom, or left
        speed: 300,                                        //speed of animation
        action: 'click',                                   //options: 'click' or 'hover', action to trigger animation
        topPos: '250px',                                   //position from the top
        fixedPosition: true                               //options: true makes it stick(fixed position) on scroll
        });
    });

    </script>
                     
    <script>
       $(function(){
         $('.slide-out-feedback-div').tabSlideOut({
           tabHandle: '.handle',                              //class of the element that will be your tab
           pathToTabImage: '<?php echo 'templates/'.CURRENT_TEMPLATE.'/img/feedback_tab.png'; ?> ,  //path to the image for the tab (optionaly can be set using css)
           imageHeight: '122px',                               //height of tab image
           imageWidth: '40px',                               //width of tab image    
           tabLocation: 'left',                        //side of screen where tab lives, top, right, bottom, or left
           speed: 300,                                        //speed of animation
           action: 'click',                              //options: 'click' or 'hover', action to trigger animation
           topPos: '100px',                                   //position from the top
           fixedPosition: true                               //options: true makes it stick(fixed position) on scroll
         });
    });

    </script>
     

    Vielleicht hilft das weiter.

    Grüße

    hechicero

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.989
    • Geschlecht:
    Re: Zwei tabSlideOut jQuery auf einer Seite
    Antwort #7 am: 15. April 2012, 17:48:59
    Die zweite Bibliothek wird gar nicht geladen.
    Ich kann sie im Quelltext nicht aufrufen.

    Wo genau das Problem steckt kann ich dir nicht sagen, das kostet mich zu viel Zeit mich da reinzuarbeiten.

    Bist du sicher die Klassen auch den Elementen im HTML vegeben zu haben.
    Das kann doch gar nicht sein, daß die Slider beide gleichzeitig ausfahren, wenn du denen verschiedene Klassen gibst und sie auch im jQuery-Javascript getrennt ansprichst.

    Gruß,
    noRiddle

    hechicero

    • Mitglied
    • Beiträge: 233
    Re: Zwei tabSlideOut jQuery auf einer Seite
    Antwort #8 am: 15. April 2012, 19:40:15
    In der index.html steht
    Code: PHP  [Auswählen]
    <div class="slide-out-div">
                <a class="handle" href="shopping_cart.php">Warenkorb</a>
                <h3>Warenkorb</h3>
                <p>{$box_CART}
                </p>
               
    </div>

    <div class="slide-out-feedback-div">
                <a class="handle" href="Kontakt:_:7.html">Feedback</a>
                <h3>Feedback</h3>
                <p>hier Formular.
                </p>
    </div>
     

    Wird also separat angesprochen. Es sollte so funktionieren.  :-?

    Vielleicht kennt sich hier noch jemand mit jQuery und Javascript aus?

    Grüße

    hechicero
    0 Antworten
    1454 Aufrufe
    18. April 2015, 21:13:17 von Nils
    3 Antworten
    3447 Aufrufe
    28. Mai 2013, 12:01:40 von Clever
    1 Antworten
    2071 Aufrufe
    02. August 2011, 18:47:34 von web28