CODEWITHSUNDEEP
jqueryhtmlcssslider
Andrés
Andrés

Reputation: 881

Create a slide effect in jQuery

I am trying to make a slide effect like the Grooveshark reproduction list, or the You tube reproduction list. What I have done so far is implement the buttons and the bar, but now I am stuck in the slide effect implementation. This is the code of my html file:

    <!DOCTYPE html>
    <html>
        <head>
            <title>CAMBIAR...</title>
            <link rel="stylesheet" href="html 5/slider.css" />
            <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
            <script type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script>
        </head>

        <body>
            <div id="slider">
                <div id="atras">&lt</div>
                <div id="content">
                    &nbsp;
                </div>
                <div id="adelante">&gt</div>
                <div id="operaciones">
                    <div id="add">+</div>
                </div>
                <div id="footer"></div>
            </div>
            <script>
                $(document).ready(
                    function () {
                        var cuenta = 0;
                        var elementos = Array();

                        $("#slider #atras").mousedown(function() {
                            $(this).css({"box-shadow": "inset 5px 0px 10px rgba(0, 0, 0, 0.5)",
                                         "color": "white"});
                        });

                        $("#slider #atras").mouseup(function() {
                            $(this).css({"box-shadow": "5px 5px 10px rgba(0, 0, 0, 0.5)",
                                         "color": "black"});
                        });

                        $("#slider #adelante").mousedown(function() {
                            $(this).css({"box-shadow": "inset -5px 0px 10px rgba(0, 0, 0, 0.5)",
                                         "color": "white"});
                        });

                        $("#slider #adelante").mouseup(function() {
                            $(this).css({"box-shadow": "5px 5px 10px rgba(0, 0, 0, 0.5)",
                                         "color": "black"});
                        });

                        $("#slider #operaciones #add").click( function() {
                            var new_element = $("<div class='element' id='unique'>"+ (++cuenta) +"</div>");
                            //new_element.insertAfter($("#slider #content .element:last-child"));
                            $("#slider #content").prepend(new_element);
                        });
                    });
            </script>
        </body>
    </html>

This is my CSS file:

    * {
        margin: 0px;
        padding: 0px;
    }

    body {
        background: #57595a;
        font-family: Helvetica, sans-serif;
        font-size: 16px;
        text-align: center;
    }

    #slider {
        border: 5px dotted white ;
        margin: 20px auto;
        line-height: 6.3em;
        padding: 10px;
        width: 95%;
    }

    #slider #atras {
        background-color: #CCCCCC;
        border-radius: 0.25em;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
        color: black;
        float: left;
        height: 100%;
        width: 3%;
    }

    #slider #atras:hover {
        cursor: pointer;
    }
    #slider #content {
        text-align: left;
        float: left;
        width: 74%;
    }

    #slider #adelante {
        background-color: #CCCCCC;
        border-radius: 0.25em;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
        color: black;
        float: left;
        height: 100%;
        width: 3%;
    }

    #slider #adelante {
        cursor: pointer;
    }

    #slider #operaciones {
        float: left;
        width: 20%;
    }

    #slider #content .element {
        background: orange;
        border-radius: 0.5em;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
        color: white;
        display: inline-block;
        height: 100px;
        margin: auto 5px;
        text-align: center;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
        width: 100px;
    }

    #slider #operaciones #add {
        background-color: #f99200;
        border-radius: 0.5em;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
        color: white;
        display: inline-block;
        height: 50px;
        vertical-align: middle;
        margin: 2px 5px;
        line-height: 3.2em;
        text-align: center;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
        width: 50px;
    }

    #slider #content .element:hover {
        background-color: #8a8a8a;
        color: white;
    }

    #slider #operaciones #add:hover {
        background-color: rgb(97, 103, 106);
        cursor: pointer;
    }

    #footer {
        clear: both;
    }

I expect someone could help me out with this. Any approach is valid, I just need to know what to do, not to have it done. Thanks, I appreciate everyone's help.

Upvotes: 0

Views: 1072

Answers (1)

Priebe
Priebe

Reputation: 4982

For jQuery Mobile the slide effect can be made with transition attribute

<a href="#newpage" data-transition="slide">click here</a>

Upvotes: 1

Related Questions