Solved

Jquery slide to left

Posted on 2011-03-10
7
744 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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

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 500 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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 the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

706 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now