Sliding a DIV using Jquery to occupy the top half of the page

Question

Sliding a DIV using Jquery to occupy the top half of the page

I am attempting to create a functionality similar to what is found on Microsoft's Support Website. You can check it out here: (Visit Here)

By clicking on any product listed there, a drop-down menu appears. (Please note that the purpose of this article/question is not to market any product, but purely for educational purposes.)

After selecting an item from the menu, a new "Select a topic" list appears, and upon selection from this list, a third list is displayed. I am trying to replicate this functionality by creating a script. I have searched online and created a div slider, however, it slides the entire div. Below is the code that I have written:

HTML

<div id="gallery">
  <div id="slider">
     <div style="background:#cf5">1</div>
     <div style="background:#ada">2</div>
     <div style="background:#b0b">3</div>
  </div>
  <span id="prev">Prev</span>
  <span id="next">Next</span>
</div>

CSS

#gallery{
  position:relative;
  margin: 0 auto;
  overflow:hidden;
  width:500px;
  height:330px; /* +30 = space for buttons */
  text-align:center; /* to center the buttons */
}
#slider{
  position:absolute;
  left:0;
  height:300px;  
  text-align:left; /* to reset text inside slides */
}
#slider > div {
  position:relative;
  float:left;
  width:500px;
  height:300px;
}
#prev, #next{
  display:inline-block;
  position:relative;
  top:300px;
  cursor:pointer;
  padding:5px;
}

Jquery

$(function(){

    var $gal = $('#gallery'),
    $sli = $('#slider'),
    $box = $('div',$sli),
    W    = $gal.width(), // 500
    N    = $box.length,  // 3
    C    = 0;            // a counter

    $sli.width(W*N);

    $('#prev, #next').click(function(){
    C = (this.id=='next' ? ++C : --C) <0 ? N-1 : C%N;
    $sli.stop().animate({left: -C*W },800);
    }); 

});

For a working example of my code, you can visit Fiddle.

javascript jquery css jquery-ui jquery-ui-slider

Answer 1

Answer №1

Upon conducting research and development, I was able to create something similar to the following:

HTML

<div>
        <input type="submit" id = "submit" value = "Show panel"/>
        <span id = "showpanel1"></span>
    </div>

    <div id = "slider"  style = "display:none">
        <div class = "panel1" style = "display:none">
            <ul>
                <li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
                <li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
                <li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
                <li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
                <li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>
                <li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
                <li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
                <li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
                <li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
            </ul>
        </div>

        <div class = "panel2" style = "display:none">
            <ul>
                <li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
                <li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
                <li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
                <li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
                <li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>
                <li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
                <li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
                <li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
                <li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
            </ul>
        </div>

    </div>


    <!-- Load Loder GIF -->


        <div id = "loader" style = "display:none">
            <img src = "loader.gif">
        </div>

    <!-- QnA Div Start -->

    <div id = "qaslider"  style = "display:none">
        <div class = "mainpanel" style = "display:none">
            <ul>
                <li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
                <li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
                <li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
                <li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
                <li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>
                <li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
                <li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
                <li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
                <li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
            </ul>
        </div>


    </div>

JS

<script src="js/jquery-1.9.1.js"></script>
  <script src="js/jquery-ui.js"></script>
  <script>  
    $(document).ready(function() {
         var firsttext;
         $(".panel1").on('click','li',function (){
            $(".panel2").show("slide", { direction: "right" }, 1000);
            $("span").text($(this).html());
            firsttext = $(this).html();

        });

        $('#submit').click(function() {
            $(".mainpanel").hide();
            $("#slider").show("slide", { direction: "right" }, 0);
            $(".panel2").hide("slide", { direction: "right" }, 0);
            $(".panel1").show("slide", { direction: "right" }, 1000);
        });

        $(".panel2").on('click','li',function (){
            $("span").text(firsttext + " > " + $(this).html());
            $( "#slider" ).fadeOut( "slow" );
            $("#loader").show("slide", { direction: "right" }, 800);
            $("#loader").center(true);
            setTimeout(removeslider,4000)
        });

    });

    function removeslider()
    {
        $("#loader").hide("slide", { direction: "left" }, 800);
        $("#qaslider").show("slide", { direction: "right" }, 0);
        $(".mainpanel").show("slide", { direction: "right" }, 1000);
    }
    // Custom jQuery Function to stop/place element at center screen

    jQuery.fn.center = function(parent) {
        if (parent) {
            parent = this.parent();
        } else {
            parent = window;
        }
        this.css({
            "position": "absolute",
            "top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
            "left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
        });
        return this;
    }

  </script>

Style

<style>
    .panel1 .panel1
    {
        border:1px solid black;
        margin-right:800;
        margin-top:20px;
    }
    #loader
    {
        margin-right:708;
        margin-top:117px;
        margin-left:525px;
    }
    .panel1 ul li:hover, .panel2 ul li:hover
    {
        cursor:hand
    }
    #slider > div {
      position:relative;
      float:left;
      width:500px;
      height:300px;
    }
  </style>

Answer 2

Upon conducting research and development, I was able to create something similar to the following:

HTML

<div>
        <input type="submit" id = "submit" value = "Show panel"/>
        <span id = "showpanel1"></span>
    </div>

    <div id = "slider"  style = "display:none">
        <div class = "panel1" style = "display:none">
            <ul>
                <li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
                <li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
                <li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
                <li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
                <li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>
                <li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
                <li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
                <li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
                <li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
            </ul>
        </div>

        <div class = "panel2" style = "display:none">
            <ul>
                <li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
                <li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
                <li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
                <li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
                <li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>
                <li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
                <li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
                <li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
                <li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
            </ul>
        </div>

    </div>


    <!-- Load Loder GIF -->


        <div id = "loader" style = "display:none">
            <img src = "loader.gif">
        </div>

    <!-- QnA Div Start -->

    <div id = "qaslider"  style = "display:none">
        <div class = "mainpanel" style = "display:none">
            <ul>
                <li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
                <li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
                <li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
                <li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
                <li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>
                <li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
                <li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
                <li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
                <li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
            </ul>
        </div>


    </div>

JS

<script src="js/jquery-1.9.1.js"></script>
  <script src="js/jquery-ui.js"></script>
  <script>  
    $(document).ready(function() {
         var firsttext;
         $(".panel1").on('click','li',function (){
            $(".panel2").show("slide", { direction: "right" }, 1000);
            $("span").text($(this).html());
            firsttext = $(this).html();

        });

        $('#submit').click(function() {
            $(".mainpanel").hide();
            $("#slider").show("slide", { direction: "right" }, 0);
            $(".panel2").hide("slide", { direction: "right" }, 0);
            $(".panel1").show("slide", { direction: "right" }, 1000);
        });

        $(".panel2").on('click','li',function (){
            $("span").text(firsttext + " > " + $(this).html());
            $( "#slider" ).fadeOut( "slow" );
            $("#loader").show("slide", { direction: "right" }, 800);
            $("#loader").center(true);
            setTimeout(removeslider,4000)
        });

    });

    function removeslider()
    {
        $("#loader").hide("slide", { direction: "left" }, 800);
        $("#qaslider").show("slide", { direction: "right" }, 0);
        $(".mainpanel").show("slide", { direction: "right" }, 1000);
    }
    // Custom jQuery Function to stop/place element at center screen

    jQuery.fn.center = function(parent) {
        if (parent) {
            parent = this.parent();
        } else {
            parent = window;
        }
        this.css({
            "position": "absolute",
            "top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
            "left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
        });
        return this;
    }

  </script>

Style

<style>
    .panel1 .panel1
    {
        border:1px solid black;
        margin-right:800;
        margin-top:20px;
    }
    #loader
    {
        margin-right:708;
        margin-top:117px;
        margin-left:525px;
    }
    .panel1 ul li:hover, .panel2 ul li:hover
    {
        cursor:hand
    }
    #slider > div {
      position:relative;
      float:left;
      width:500px;
      height:300px;
    }
  </style>

Sliding a DIV using Jquery to occupy the top half of the page

Answer №1

Similar questions

What is the best way to position the left sidebar on top of the other components and shift them to the

Issue with data entry: unable to enter the letter 'S' in search field

The absence of the 'Access-Control-Allow-Origin' CORS header was noticed in the response from the Wikipedia API

Using jQuery to verify the presence of an element, especially one that may have been dynamically inserted via AJAX

If the color of the border matches and the width of the border is equal to

Guide on making a color legend with JavaScript hover effects

Issue with Github actions: Failure in mark-compacts process due to ineffective operation near heap limit causing allocation failure - running out of memory in

What is the best way to organize objects by their respective dates?

Tips on invoking the ('keyup') function within an AJAX request's success callback

Node.js does not support running Bootstrap and CSS, resulting in style not being applied due to the MIME type ('text/html') not being a supported stylesheet MIME type

Displaying a plethora of data points on a single graph using jQchart with a

Leveraging OAuth 2 with Google

Learn the technique of invoking a sub component's method from the parent component in Vue.js

What could be causing certain values within my array to appear as undefined?

Sending an array and an object simultaneously through a single ajax request

What is the best way to transfer global Meteor variables to templates and effectively utilize them?

Does the CSS :not() selector function properly when used with distant descendants?

Using React's higher order component (HOC) in TypeScript may trigger warnings when transitioning from non-TypeScript environments

When using Material UI TextField with input type "date", the event.target.value does not seem to be accessible

Tips for positioning an asp.net Button alongside other elements in a form by making use of Bootstrap styling