Solved

Jquery slide to left

Posted on 2011-03-10
7
752 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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

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

 

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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
iframe - style elements within an iframe 7 36
Explain this javascript function to me 2 25
Insert Button on a table 16 37
How to make google charts responsive 4 4
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

861 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