1
\$\begingroup\$

I am using a simple page with 2 pullout functions, one on the left and one on the right side. I would like to simplify or combine the two functions into one and make one pullout close, when I click on the other one, so that only one can be seen at a time.

Here is a Fiddle: http://jsfiddle.net/schakalwal/gwu2gob3/

JavaScript:

<script type="text/javascript">
    $(document).ready(function () {
        $("#clickme").click(function () {
            if($(this).parent().hasClass("popped")){
            $(this).parent().animate({left:'-750px'}, {queue: false, duration: 400}).removeClass("popped");
            $(".overlay").fadeOut(500);
        }else {
            $(this).parent().animate({left: "0px" }, {queue: false, duration: 400}).addClass("popped");
            $(".overlay").fadeIn(500);
            }
        });

        $(".overlay").click(function(){
            $("#clickme").click();
        });


        $("#clickme2").click(function () {
            if($(this).parent().hasClass("popped")){
            $(this).parent().animate({right:'-750px'}, {queue: false, duration: 400}).removeClass("popped");
            $(".overlay2").fadeOut(500);
        }else {
            $(this).parent().animate({right: "0px" }, {queue: false, duration: 400}).addClass("popped");
            $(".overlay2").fadeIn(500);
            }
        });

        $(".overlay2").click(function(){
            $("#clickme2").click();
        });

    });
</script>

CSS:

#slideout, #slideout2 {
    background: #f4f4f4;
    position: fixed;
    width: 750px;
    height: auto;
    top: 20%;
     -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    z-index:9999;
}

#slideout {
    left:-750px;
}

#slideout2 {
    top: 40%;
    right: -750px;
} 

#clickme, #clickme2 {
    position: absolute;
    top: 0;
    height: 102px;
    width: 184px;
    background: url(../../assets/images/pullout.png) top left no-repeat;
    cursor: pointer;
     -webkit-transition: all 0.2s 1s ease-in-out;
    -moz-transition: all 0.2s 1s ease-in-out;
    -o-transition: all 0.2s 1s ease-in-out;
    transition: all 0.2s 1s ease-in-out;

}

#clickme {
    right: -184px;
}

#clickme2 {
    background: url(../../assets/images/pullout2.png) top left no-repeat;
    left: -184px;
}

#slidecontent, #slidecontent2 {
    float: left;
    font-size: 15px;
    line-height: 28px;
    padding: 25px;
}

#slidecontent p, #slidecontent2 p {
    padding: 0 10px;
}


#slideout.popped, #slideout2.popped {
    -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,.6);
    box-shadow: 0 0 15px 0 rgba(0,0,0,.6);
}

#slideout.popped #clickme, #slideout2.popped #clickme2 {
    background-position: 0 -103px;
}

.overlay, .overlay2 {
    display:none;
    bottom: 0;
    left: 0;
    opacity: 0.65;
    filter: alpha(opacity = 65); /* IE7 & 8 */
    position: fixed;
    right: 0;
    top: 0;
    z-index: 49;
    background-color: #000;
    cursor:pointer;

}

HTML:

<!-- Gutschein Pullout Start 1 -->
<div class="overlay"> &nbsp;</div>

<div id="slideout">
    <div id="slidecontent">
        <a href="assets/images/Lenz_Massivholz_Gewinn-Karte_15-04_WEB.pdf" target="_blank">
            <img src="assets/images/Lenz_Massivholz_Gewinn-Karte_15-04_WEB.jpg" width="600" height="426" alt="Jetzt Teilnahmekarte anklicken, ausdrucken und ausfüllen">
        </a>
        <p style="margin:5px 0 15px;">Einfach auf die Teilnahmekarte klicken und die Grafik ausdrucken und ausfülen. Anschließend beim nächsten Einkauf bei <b>Möbel Lenz</b> abgeben und mit etwas Glück gewinnen.</p>
        <p style="font-size: 12px; font-style:italic;">*  Nur eine Teilnahmekarte pro Person einlösbar.</p>
    </div>
    <div id="clickme"></div>
</div>
<!-- Gutschein Pullout Ende 1 -->

<!-- Gutschein Pullout Start 2 -->
<div class="overlay2"> &nbsp;</div>

<div id="slideout2">
    <div id="slidecontent2">
        <a href="assets/images/Lenz_Massivholz_GUT-Blume_15-04_WEB.pdf" target="_blank">
            <img src="assets/images/Lenz_Massivholz_GUT-Blume_15-04_WEB.jpg" width="600" height="300" alt="Jetzt Gutschein anklicken und ausdrucken">
        </a>
        <p style="margin:5px 0 15px;">Einfach auf den Gutschein klicken und die Grafik ausdrucken, oder herunterladen. Anschließend beim nächsten Einkauf bei <b>Möbel Lenz</b> vorzeigen einen Frühlingsblüher mitnehmen.</p>
        <p style="font-size: 12px; font-style:italic;">*  Nur ein Gutschein pro Person einlösbar.</p>
    </div>
    <div id="clickme2"></div>
</div>
<!-- Gutschein Pullout Ende 2 -->

And you can see the current state live version here.

\$\endgroup\$
2
  • \$\begingroup\$ Can you add in to jsfiddle.net ? \$\endgroup\$
    – vmariano
    Apr 13 '15 at 17:16
  • \$\begingroup\$ Ok, you are right. Here is a link to a new fiddle: jsfiddle.net/schakalwal/gwu2gob3 Ultimately I would like to have the pullouts underneath each others on the left side only. I think it would be best to hide all the other pullouts, once the user has clicked on one to open it. \$\endgroup\$
    – Supapinzi
    Apr 15 '15 at 14:06
1
\$\begingroup\$

If I've understood you correctly, one way to combine the two click handler functions into one would be as I've written below.

As vmariano has already asked, it would be helpful if we had a JSFiddle link in order to verify our answers, but hopefully this is enough for you to use as a guide at least.

Furthermore, I could offer more suggestions for how to improve/optimise the code should you be interested.

// New-look JS

$("#clickme").click(function() {
    var direction = $(this).parent().attr('data-direction');
    var animation = {};
    if($(this).parent().hasClass("popped")) {
        animation[direction] = '-750px';
        $(this).parent().animate(animation, {queue: false, duration: 400}).removeClass("popped");
        $(".overlay").fadeOut(500);
    } else {
        animation[direction] = '0px';
        $(this).parent().animate(animation, {queue: false, duration: 400}).addClass("popped");
        $(".overlay").fadeIn(500);
    }
});


// New-look HTML

<div id="slideout" data-direction="left">
    ...
</div>
...
<div id="slideou2" data-direction="right">
    ...
</div>
\$\endgroup\$
2
  • \$\begingroup\$ Hi Chris, thank you very much for trying to help. This is very appreciated. Unfortunately my js skills are very limited, which is why I keep asking for some help to learn and understand better. I have added a jsfiddle now: jsfiddle.net/schakalwal/gwu2gob3 As I commented on the other guys posts, I would ultimately like to have the chance to posteven more than two pullouts that wont interfere with each other. best way might be to just hide all inactive ones, while one is clicked, so they are not in the way. \$\endgroup\$
    – Supapinzi
    Apr 15 '15 at 14:10
  • \$\begingroup\$ The animation direction actually can go to waste, as I believe it is best to have all pullouts start from the left and being placed underneath each other. I am trying to use your code, but I can't make it work. \$\endgroup\$
    – Supapinzi
    Apr 15 '15 at 14:17
1
\$\begingroup\$

You may do something like this:

<script type="text/javascript">
    $(document).ready(function () {
        $('.clickme').click(function () {
            $('.popped').not(this).click();
            var animation={},direction=$(this).data('direction'),opacity=.65;
            animation[direction]=0;
            if($(this).hasClass('popped')) {
                animation[direction]='-750px';
                opacity=0;
            }
            $(this).toggleClass('popped')
            .parent().animate(animation,{queue: false, duration: 400});
            $('#overlay').fadeTo(500,opacity);
        });

        $('#overlay').click(function(){
            $('.popped').click();
        });
    });
</script>

I din't reproduce the CSS and HTML parts, their modifications are indicated below. Analyzing the code above you see that:

  • a unique handler is attached to the clickme class (so it must be HTML-added to both clickme and clickme2 div's)
  • the popped class is affected to the clickme element instead of its parent; this allows to simply close the other element before opening the clicked one, through $('.popped').not(this).click();
  • direction ('left' or 'right') for the involved element (which is the only specific data) must be registered in its HTML attribute data-direction, so we can get it through $(this).data('direction')
  • executing the slide-in or slide-out movement is decided depending on the presence/absence of the popped class, then a unique animate statement does the job using the previously set values
  • a unique overlay element is sufficient, and its fadeIn/fadeOut is also reduced to a unique fadeTo using previously set values; in the other hand you may drop top/right/bottom/left and display properties: simply CSS-set width and height to 100% and opacity to 0 is enough
\$\endgroup\$
4
  • \$\begingroup\$ I have added a fiddle here: jsfiddle.net/schakalwal/gwu2gob3 I really appreciate your help. I will try something now. Ultimately, I think it would be best solution to hide each unopened pullout, once one is opened, or anything like that, so that the other pullouts will not get n the way. Hope you understand. \$\endgroup\$
    – Supapinzi
    Apr 15 '15 at 14:09
  • \$\begingroup\$ No offense but... no, I don't understand, since your fiddle reproduces the method you primarily used in your question. While the code I proposed above works fine and totally meets your needs. Now, since you changed to have both "clickme" the same side, it is more simpler yet. You can see it working here: (jsfiddle.net/n37sduwv). \$\endgroup\$
    – cFreed
    Apr 15 '15 at 18:33
  • \$\begingroup\$ The point is, that I would like to close all inactive pullouts, when one is opened/active. so I checked your fiddle and when I click on the first pullout and then while it is still showing I click on the second one, the first one remains visible under the second one. I wanted to automatically close all open pullouts, once I click on a closed pullout to open it. I hope you understand. I created a new fiddle with some changes that actually works really well. The inactive pullouts are hidden, while one is active: jsfiddle.net/schakalwal/2n5nnne5/1 \$\endgroup\$
    – Supapinzi
    Apr 16 '15 at 9:13
  • \$\begingroup\$ Oops! I'm sorry: the fiddle link I proposed was my fork of yours, before I save my modifications! Here is the right one: jsfiddle.net/n37sduwv/1. \$\endgroup\$
    – cFreed
    Apr 16 '15 at 15:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.