Side Scrolling Application with jquery and Bootstrap

onepice(60)

Published in

#utopian-io

Words

909

Reading

5 min

Listen

Play

Repository

Jquery GitHub

Bootstrap GitHub

My GitHub Profile

Side Scrolling Application with jquery and Bootstrap GitHub

What Will I Learn?

You will learn how to make a side scrolling application using JQuery and bootstrap.
You will learn basic bootstrap grid system.
You will learn text-center class in bootstrap.
You will learn display properties in CSS
You will learn next() and prev() functions in JQuery
You will learn eq() function in JQuery
You will learn removeClass() and addClass() functions in jQuery

Requirements

Visual Studio Code in GitHub

Difficulty

Intermediate

Tutorial Contents

Hello everyone,
I will describe how to do side scrolling application using jquery and bootstrap in this article.

I will place one div list and two buttons on the screen. I will design these html elements with Bootstrap. I will bring only one element of the list to the screen, and with the help of the buttons I can go to the previous and next list element.

I will do jquery on the transition between list elements.

Files required for our project:

jquery.min.js
bootstrap.css
index.html
script.js
style.css

I will write our own jQuery code into the script.js file and I will write my own CSS code into the style.css file.

We need to have the bootstrap and jquery code installed in our project in order to perform these operations.

Let's upload all the files we will use to the index.html page.

<head> 
        <meta charset="utf-8">
        <title>Side Scrolling Application </title>
        <script src="jquery.min.js"></script>
        <link href="bootstrap.css" rel="stylesheet">
        <link href="style.css" rel="stylesheet" />
        <script src="script.js"></script>
</head>

I think it makes sense to allocate specific chapters because I have created an application and am trying to explain it. I will explain better if I explain the steps I take step by step.

STEP 1 : Place a list of divs and buttons

I will place 10 divs on the page and place two buttons side by side under them. The button on the right hand side will perform the next operation the button on the left hand side will perform the prev operation.

  <div>slide 1</div>
  <div >slide 2</div>
  <div>slide 3</div>
  <div>slide 4</div>
  <div>slide 5</div>
  <div>slide 6</div>
  <div>slide 7</div>
  <div>slide 8</div>
  <div>slide 9</div>
  <div>slide 10</div>

   <button>Prev</button>
   <button>Next</button>

Screenshot 1

It looks like this on the screen. I will use bootstrap to make this screen more beautiful than I don't like.

STEP 2: Use bootstrap

The buttons and divs stood on the left side of the page. I want to average the this html elements, I will use the container class in the bootstrap for this.

<div class="container">
//divs and buttons
</div>

The elements that are now written in this div are placed on center the page.

The bootstrap also has page 12 grid structure. If we want to divide the page into two pages we have to define two divs and we have to divide 6 fields into one and 6 fields from the other. We can place the buttons like this.

If you want a button to have the bootstrap button properties, you can just type class = "btn". You can use specific colors if you want to adjust the color. We can use the btn-warning class for the yellow color and the btn-success class for the green color.

With the alert class we have design a div with Bootstrap and with alert-info we get a blue color.

We will use the row class to separate the area of the buttons with the divs field.

<div class="container">
            <div class="row">
                <div class="col-md-12 all">
                    <div class="myslide alert alert-info">slide 1</div>
                    <div class="myslide alert alert-info">slide 2</div>
                    <div class="myslide alert alert-info">slide 3</div>
                    <div class="myslide alert alert-info">slide 4</div>
                    <div class="myslide alert alert-info">slide 5</div>
                    <div class="myslide alert alert-info">slide 6</div>
                    <div class="myslide alert alert-info">slide 7</div>
                    <div class="myslide alert alert-info">slide 8</div>
                    <div class="myslide alert alert-info">slide 9</div>
                    <div class="myslide alert alert-info">slide 10</div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <button id="prev" class="btn btn-warning ">Prev</button>
                </div>
                <div class="col-md-6">
                    <button id="next" class="btn btn-success">Next</button>
                </div>
            </div>

        </div>

I will define myslide and all classes in my own style.css file.

With col-md-6 the row is divided into two columns.

Screenshot 2

The buttons are leaning left in the div they are in. We can get a better image by centering them.

We need to add the div text-center class they are in to center the buttons.

<div class="col-md-6 text-center">
     <button id="prev" class="btn btn-warning ">Prev</button>
</div>
<div class="col-md-6 text-center">
     <button id="next" class="btn btn-success">Next</button>
 </div>

Screenshot 3

STEP 3 : Edit the style.css file

I want only one of these divs to be visible I can hide the rest of the divs.

With display:none, let's make all of the divs invisible.

.all > .myslide{
    display:none;
}

Let's create a class called active and make this class visible in the div.

.all > .myslide.active{
    display:block;
}

I can make it visible with display:block.

We use the active class to run our code.

<div class="myslide alert alert-info active">slide 1</div>

Screenshot 4

STEP 4 : Next button events

When next button is clicked, the next div must pass. So we will delete the active class and add the next div. We must first find the current active div.

We need to delete the active class from this div and add the next div active class.

We use the removeClass() function to delete a class from an html element. The addClass() function is used to add a class.

With the next() function, sibling html elements are passed to the next.

  $("#next").click(function(){
        var activeDiv=$('div.active');
        activeDiv.removeClass('active');
        activeDiv.next().addClass('active'); 
  });

When I click next id button I choose the div that is active class. First I delete the active class from this div and add the next div active class.

But when the last div comes in, all the divs will be invisible when we click on the next button again.

Screenshot 5

div ten

click next button

To solve this problem, we need to take the active class to the start point when the next () function is equal to length zero.

$("#next").click(function(){
        var activeDiv=$('div.active');
        activeDiv.removeClass('active');
        if(activeDiv.next().length==0){
          $('div.myslide').eq(0).addClass('active');
        }else{
            activeDiv.next().addClass('active');
        }
        
    });

With eq (0), the first element of the div list is selected.

Screenshot 6

div ten

click next button

STEP 5 : Prev button events

The same thing happens when the next key is pressed. The two events are different:

The prev() function is used instead of the next() function.

The prev() function selects the previous one among the sibling html elements

The eq(-1) function is used.

With the eq(-1) function, the tenth div comes after the first div

$("#prev").click(function(){
        var activeDiv=$('div.active');
        activeDiv.removeClass('active');
        if(activeDiv.prev().length==0){
            $('div.myslide').eq(-1).addClass('active');
        }else{
            activeDiv.prev().addClass('active');
        }
        
    });