JavaScript Dashboard

JavaScript
1

When the list item on the sidebar of the dashboard are clicked, the page should be shown on the dashboard not redirecting to another page using javascript

Dashboard functionality on the clicked list items using js.

dashboard
dashboard1216×641 17.4 KB

2

OK, show us the code used so we can help you fix it.

1 Like
3

HERE IS THE HTML CODE…

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Admin | DashBoard</title>
    <link href="css/global.css" rel="stylesheet">
    <script href="js/general.js" type="text/javascript"></script>

  </head>

  <body>
      
      <div id="header"> 
          <div class="logo"><a href="dashboard.php"><span>BLOOD BANK </span> MANAGEMENT SYSTEM</a></div>
      </div>

      <!-- <a class="mobile" href="#">MAIN MENU</a> activate if on mobile view-->

      <div id="container">
        
        <div class="sidebar">
          <ul id="nav">

              <li><a class="selected">NAVIGATION MENU</a></li>
              <li><a href="dashboard.php">Dashboard</a></li>
              <li><a href="manage_blood.php">Manage Blood Group</a></li>
              <li><a href="add_donor.php">Add Donor</a></li>
              <li><a href="add_acceptor.php">Add Acceptor</a></li>
              <li><a href="search_blood.php">Search Blood</a></li>
              <li><a href="manage_pages.php">Manage Pages</a></li>
              <li><a href="change_pswd.php">Change Password</a></li>
              <li><a href="logout.php">Logout</a></li>
            
          </ul>
          
        </div>

        <div class="content">
            <h1>Dashboard</h1>
            <br/>
            <hr/>
            <br/>

            <div id="box">
              <div class="box-top" style="background-color: #2c3e50; ">Listed Blood Groups</div>
              <div class="box-panel"><a href="#">Full Details</a></div>
            </div>
            <div id="box">
              <div class="box-top" style="background-color: #2ecc71;">Registered Blood Groups</div>
              <div class="box-panel"><a href="#">Full Details</a></div>
            </div>
            <div id="box">
              <div class="box-top" style="background-color: #3498db;">Total Queries</div>
              <div class="box-panel"><a href="#">Full Details</a></div>
            </div>
        </div>

      </div>


  </body>
</html>
4

And the JavaScript?

5

Yes I dont know how to go about it…

6

We can help to guide you about things that you’re unfamiliar with, but when it comes to learning JavaScript, getting people to write it for you is not an appropriate solution.

How much JavaScript have you learned already?

2 Likes
7

What you’re asking to achieve here is easily done with no JavaScript at all, just by using frames.
Each section of the navigation can easily load their page in to a frame, with that frame being placed in the main content area.

That is the easiest way to show the navigation sections, without redirecting to other pages.
And, it is always better to avoid JavaScript when it’s more easily done in some other way.

Is that a suitable potential solution for you?

8

@Paul_Wilkins…Thanks

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.