Sliding divs horizontally with JQuery

Question

so I'm very new to Javascript and Jquery. What I'd like to create is a two column page where links on the left column will cause a div on the right to slide in horizontally from left to right, and slide out of view when clicked again. I know I need to use slide toggle effect but I'm having trouble implementing it in a way that each individual link causes a different div to slide... I've attempted to tweak a few jsfiddles I've found via google searches but I'm pretty lost when it comes to javascript.

So far this is the only fiddle I've been able to tweak successfully... http://jsfiddle.net/bridget_kilgallon/HAQyK/
but those slide vertically, and load all the divs when clicked.

Here's a fiddle I've created for the pagelayout I'd like without any javascript... http://jsfiddle.net/bridget_kilgallon/NhanG/

Please help! :) -Bridget

score 35 · Accepted Answer · answered Mar 25 '12 at 22:25

35

Unfortunately there is no ready made 'horizontal' slide animation with jQuery. Unless you go with bigger packages like jQuery UI. But I don't think that is needed.

The only thing you want is some creative use of the animate() function in jQuery to achieve an effect.

I didn't know which one you'd want to go with since the description was vague so I made 2 examples for minor effects in panel switching:

http://jsfiddle.net/sg3s/rs2QK/ - This one slides panel open from the left and to close to the right

http://jsfiddle.net/sg3s/RZpbK/ - Panels slide open from left to right and close to the left befor opening the new one.

Resources:

http://api.jquery.com/animate/

You can't do this with pure CSS, not yet anyways. The support for transitions is basic and limited to pretty much only webkit based browsers. So since you're going to need jQuery make smart use of it, but you still need to make sure you style as much as possible with css before you use the JS. Note that I don't use any visual styling / manipulations in my JS.

answered Mar 25 '12 at 22:25

sg3s

9,411
3
36
52

The first fiddle is just right. I'll make sure to create my css before adding the script as you suggested. This just made my life much easier- thank you so much! :D – Bridget Kilgallon Mar 25 '12 at 22:58
Think about what you want to do and position your elements in css accordingly so they're at the most optimal position to start as soon as is needed. – sg3s Mar 25 '12 at 23:16
Here's a fiddle with what I've got so far css wise: http://jsfiddle.net/bridget_kilgallon/sMDyB/4/ the fiddle works fine but the transitions aren't working in dreamweaver.. Any ideas? Thanks again -BK – Bridget Kilgallon Mar 26 '12 at 02:23
scratch that - i think i've got it :) – Bridget Kilgallon Mar 26 '12 at 02:55

David Thomas · Answer 2 · 2012-03-25T22:30:00.757

Without using JavaScript you're limited to using CSS transitions, where available. And while these are pretty impressive, they're not particularly great, so far as I've yet found, for conditional animation; they can basically animate from a starting point to another point and then back (based on the native browser events available in the browser itself), with JS you could add/remove additional classes and have the div elements move around to your heart's content, but not with 'just' CSS (though I'd love to be proven wrong on this).

The best I've been able to come up with, so far, is:

#left {
    float:left;
    width:200px;
}
.right {
    height: 0;
    background-color: #fff;
    margin-left: 205px;
    overflow: hidden;
    -webkit-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -moz-transition: all 1s linear;
    transition: all 1s linear;
}
.right:target {
    display: block;
    height: 5em;
    background-color: #ffa;
    -webkit-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -moz-transition: all 1s linear;
    transition: all 1s linear;
}

JS Fiddle demo.

And this doesn't slide from the side (though you can do that if you want to) because it didn't look good, given the content re-reflow that was happening as the width of the element changed.

Edited because I think I may have misinterpreted a portion of the original question:

...I'd like without any javascript

That being the case, and the comment (below) seems to suggest that jQuery's an okay option, this might be worthwhile as a demonstration:

$('#left a').click(
    function(){
        var div = $('div').not('#left').eq($(this).index('#left a'));
        var others = $('div[data-visible="true"]');
        others.each(
            function(){
                $(this).animate({
                    'left' : '2000px'
                },1000,function(){
                    $(this).removeAttr('style data-visible');
                });
            });
        if (div.attr('data-visible')) {
            div.animate({
                'left' : '2000px'
            },1000,function(){
                $(this).removeAttr('style data-visible');
            });
        }
        else {
            div.animate({
                'left' : '210px'
            },1000).attr('data-visible',true);
        }
    });

JS Fiddle demo.

References:

Very nice- thanks for the response! I'm impressed you didn't need a script to do this. I know you can use the animate function to change the div's width to create a horizontal slide but I wasn't crazy about the content changing width also (I think that's the re-flow you're referring to). I'm not opposed to using jquery to create the slide - I'm just very new to it. Do you by chance know a script that will create this effect? — Bridget Kilgallon, Mar 25 '12 at 22:10
Yeah; I think I misunderstood what you meant when I read the "I'd like without any javascript." ...it's been a long day... =/ And I don't know about a pre-existing script (though I suspect there are many), but here's one that seems to work. If you see the edit, following the `
` =) — David Thomas, Mar 25 '12 at 22:32
rad. that's sweet! The only issue would be upon clicking the same link twice the div slides all the way through? — Bridget Kilgallon, Mar 25 '12 at 22:37
Isn't it meant to? And, frankly, checking for double-clicks is an exercise in futility. Your users probably know enough about the web to know that single clicks're how it works. If they're not, they soon will...maybe pop an alert box up if a `dblclick` is detected, telling them to stop it? — David Thomas, Mar 25 '12 at 22:43
Seems awefully complex for something this basic. But at least you bothered to look up the docs of all functions used :| — sg3s, Mar 25 '12 at 22:50

score 1 · Answer 3 · answered Mar 25 '12 at 21:42

1

You could use the effects module from jQuery UI and use show('slide'). Look http://jsfiddle.net/HAQyK/1/

answered Mar 25 '12 at 21:42

elclanrs

92,861
21
134
171

Here's another fiddle: http://jsfiddle.net/bridget_kilgallon/6eKGj/ This is almost exactly what I'm looking for except... 1. All the divs appear when the links are clicked -how can I link to each individual div? 2. Is there any way to cause the div to slide in reverse when the link is clicked a second time? (i.e. slides right on click1 slides left off the screen on click2) – Bridget Kilgallon Mar 25 '12 at 22:50

score 0 · Answer 4 · edited May 23 '17 at 11:47

Here is the code that you want. It's proved that works on IE, Safari, Chrome, Firefox, etc.

Here is the HTML part.

    <div id="slide-wrap" style="width:1000px; height:200px; overflow:hidden; padding:0 auto;">
        <div id="inner-wrap" style="float:left;">
            <!-- 'Put Inline contains here like below.' -->
            <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div>
            <!--  ...  -->
            <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div>
            <!-- 'Put Inline contains here like above.' -->
        </div>
        <div style="display: block; width:40px; height:60px; position: absolute; margin-left:0px;   margin-top:40px">
            <img id='scroll_L_Arrow' src='../assets/img/l-arrow.png' onclick="scrollThumb('Go_L')"/>
        </div>
        <div style="display: block; width:40px; height:60px; position: absolute; margin-left:960px; margin-top:40px">
            <img id='scroll_R_Arrow' src='../assets/img/r-arrow.png' onclick="scrollThumb('Go_R')"/>
        </div>
    </div>

Here is jQuery part in JavaScript function.

       function scrollThumb(direction) {
        if (direction=='Go_L') {
            $('#slide-wrap').animate({
                scrollLeft: "-=" + 250 + "px"
            }, function(){
                // createCookie('scrollPos', $('#slide-wrap').scrollLeft());
            });
        }else
        if (direction=='Go_R') {
            $('#slide-wrap').animate({
                scrollLeft: "+=" + 250 + "px"
            }, function(){
                // createCookie('scrollPos', $('#slide-wrap').scrollLeft());
            });
        }
       }

For hiding the arrows please looking here. Detect end of horizontal scrolling div with jQuery

score 0 · Answer 5 · edited Mar 14 '17 at 10:13

0

$(function () {
$("#wizardV").steps({
    headerTag: "h2",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    stepsOrientation: "vertical"
});
});

*// wizard is a div containing all your content

edited Mar 14 '17 at 10:13

Robert

5,278
43
65
115

answered Mar 14 '17 at 10:00

Cosii Riggz

1

Sliding divs horizontally with JQuery

5 Answers5

Linked