Improve company productivity with a Business Account.Sign Up

x
?
Solved

Jquery slide to left

Posted on 2011-03-10
7
Medium Priority
?
765 Views
Last Modified: 2012-05-11
Hi

i want to create an effect whee,rby i have content and when a button is clicked or hovered over the hidden content on the right is revealed because it slides to the left

So, in theory like a fruit machine wheel but horizontal instead of vertical.

Can this be done with jquery?

Thanks
0
Comment
Question by:coolispaul
  • 4
  • 2
7 Comments
 
LVL 5

Expert Comment

by:soujanya_g
ID: 35095438
Hi


Check this link


http://www.1stwebdesigner.com/css/36-eye-catching-jquery-navigation-menus/

where  will have multiple sliding
But I think the opt one is

http://www.ndoherty.biz/demos/coda-slider/1.1.1/#4
0
 
LVL 13

Expert Comment

by:darren-w-
ID: 35096034
a simple example, hover would be .hover()

<html>
    <head>
        <title>test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

        <style type="text/css">
            html,body {

                position:absolute;
            }


            #a {
                display:block;
                position: absolute;
                left: 0;
                top: 0;
                height:100px;
                width:100px;
                background-color:blue;
                z-index: 10;
            }
            #b {
                display:block;
                position: absolute;
                left: 0;
                top: 0;
                height:100px;
                width:100px;
                background-color:red;


            }
            input{
                position: absolute;
                left: 0;
                top:130px;
            }


        </style>

        <script type="text/javascript" src="preload.js"></script>

        <script type='text/javascript'>
            $(function(){
                $("input[type='button']").click(function() {
                    $('#a').animate({left: parseInt($('#a').css('left'),10) == 0 ? -$('#a').outerWidth():0
                    });
                });
            });
        </script>
    </head>
    <body>
        <div id="a"></div>
        <div id="b">Hi</div>
        <input type="button" value="click here"/>
    </body>
</html>

Open in new window

0
 
LVL 13

Expert Comment

by:darren-w-
ID: 35096114
bit of code for hover/mouse over
              $("#a,#b").mouseover(function() {
                    $('#a').animate({left: parseInt($('#a').css('left'),10) == 0 ? -$('#a').outerWidth():0
                    });
                })

Open in new window

0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 

Author Comment

by:coolispaul
ID: 35096160
can this example be expanded to have unlimited slides rather than 2?

Cheers
0
 
LVL 13

Expert Comment

by:darren-w-
ID: 35108439
Had a play and come up with this:
<html>
    <head>
        <title>test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

        <style type="text/css">
            html,body {

            }
            .area{
                position:relative;
                height:100px;
                margin-top: 50px;
                width:100px;


            }
            .a {
                display:block;
                position: absolute;               
                height:100px;
                width:100px;
                background-color:blue;
                z-index: 10;
                left:0;
            }
            .b {
                display:block;
                position: absolute;                
                height:105px;
                width:100px;

                background-color:red;


            }
            input{
                position: absolute;
                left: 0;
                top:130px;
            }


        </style>

        <script type="text/javascript" src="preload.js"></script>

        <script type='text/javascript'>
            $(function(){
                $(".area").each(function(){
                    $(this).mouseenter(function() {
                        var tomove = $(this).children(".a");
                        var outer = tomove.outerWidth();
                        var leftside= tomove.css('left');
                        tomove.stop().animate({left: parseInt(leftside,10) == 0 ? -outer:0
                        });
                    });
                });
                
            });
        </script>
    </head>
    <body>
        <div class ="area">
            <div class="a">Whats the first day of the week</div>
            <div class="b">Monday</div>

        </div>
        <div class ="area">
            <div class="a">How many 2's in 20</div>
            <div class="b">10</div>

        </div>
        <div class ="area">
            <div class="a"></div>
            <div class="b">Hi</div>

        </div>
        <!--        <input type="button" value="click here"/>-->
    </body>
</html>

Open in new window

0
 

Author Comment

by:coolispaul
ID: 35108898
Hi Thanks although i meant the number of slides rather than instances of a slide

So at the moment you have a blue slide then a red slide on hover. If i wanted a third slide shown when hovering on the red slide how can that be achieved?
0
 
LVL 13

Accepted Solution

by:
darren-w- earned 2000 total points
ID: 35109197
Here you go, its not 100%, a bit more work is required to get them to slide back in order (if required), but in answer to the question jquery can do this :)

<html>
    <head>
        <title>test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

        <style type="text/css">
            html,body {

            }
            .area{
                position:relative;
                height:100px;
                margin-top: 50px;
                width:100px;


            }
            .a {
                display:block;
                position: absolute;               
                height:120px;
                width:100px;
                background-color:blue;
                z-index: 10;
                left:0;
            }
            .b {
                display:block;
                position: absolute;                
                height:110px;
                width:100px;
                z-index: 5;

                background-color:red;


            }
                        .c {
                display:block;
                position: absolute;
                height:100px;
                width:100px;

                background-color:yellow;


            }
            input{
                position: absolute;
                left: 0;
                top:130px;
            }


        </style>

        <script type="text/javascript" src="preload.js"></script>

        <script type='text/javascript'>
            $(function(){
                $('.a,.b').each(function(){
                    $(this).mouseenter(function() {
                        var tomove = $(this)
                        var outer = tomove.outerWidth();
                        var leftside= tomove.css('left');
                        tomove.stop().animate({left: parseInt(leftside,10) == 0 ? -outer:0
                        });
                    });
                });
            });
        </script>
    </head>
    <body>
        <div class ="area">
            <div class="a">Whats the first day of the week</div>
            <div class="b">Monday</div>
            <div class="c">Monday</div>

        </div>
        <div class ="area">
            <div class="a">How many 2's in 20</div>
            <div class="b">10</div>
            <div class="c">ten</div>

        </div>
        <div class ="area">
            <div class="a">a</div>
            <div class="b">b</div>
             <div class="c">c</div>

        </div>
        <!--        <input type="button" value="click here"/>-->
    </body>
</html>

Open in new window

0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

606 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question