locked
Toggle bar issues RRS feed

  • Question

  • User-527908287 posted

    Good day, i recently transferred my project work to another laptop and I have been trying to make my toggle bar respond when ever i minimize my window but it is not responding upon clicking on it. here is the code i used on the web form. i need help to make it work again. thank you in anticipation.

    -Donald Simon

    %@ Page Language="C#" AutoEventWireup="true" CodeFile="Homepage.aspx.cs" Inherits="Homepage" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Joscheck Home</title>
    
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <link href="css/StyleSheet.css" rel="stylesheet" />
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body style=" background-color:#DCDCDC; background-image:url('images/Dox.png'); overflow-x:hidden;">
        <form id="form1" runat="server">
        <div>
            <div class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color:#200662; font-family:Nunito;">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="background-color:#200662;color:white">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="Homepage.aspx"></a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="Homepage.aspx" style="color: #FFFFFF">Home</a></li>
                        <li><a href="About.aspx" style="color: #FFFFFF">About Us</a></li>
                        <li><a href="Login.aspx"style="color: #FFFFFF">Login/Register</a></li>
                    </ul>
                </div>
            </div>
        </div>
        </div>
                <div class="jumbotron" style="margin-top:20px; border:10px #ccc; box-shadow:4px 8px 10px #ccc; background-color:#A9A9A9; font-family:Nunito; height:200px;">
                    <div class="container">
                   <br /> <h1 style="color:#200662; margin-top:-2%; font-size:xx-large">Welcome To JosCheck</h1>
                    <p>
                        <i style="color:black; font-size:large; font-style:normal">Your Home For Tracking Lost Cars and/or Phones</i></p>
                </div>
                    </div>
          
               <div class="jumbotron" style="margin-top: -8%; background-image: url('images/homeimg.jpg'); height: 350px; background-size: 100% 100%;">
                       <h1 style="color: red; margin-left:10%; font-size: x-large; font-family: Co Headline Corp">Best Tracking System!</h1>
                       <p style="margin-left:10%;">
                           <i style="color: white; font-family:St Ryde; font-size:large; font-style:normal">Search Our Vast Database To Verify That Vehicle Before You Buy</i>
                       </p>
                   
                   </div>
            <div class="container">
                <div class="row">
                    <div class="section">
                        <div class="col-md-4">
                            <h2 style="color: red; margin-top: 0; font-size: x-large; font-family: Capoon PERSONAL USE;">How It Works...</h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
          <!-- Example row of columns -->
          <div class="row">
              <div class="section">
                  <div class="col-lg-4">
                      <h2 style="color: #200662; margin-top: 0; font-size: larger; font-family: St Ryde;">Car Verification and Tracking</h2>
                      <hr />
                      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
                      <p><a class="btn btn-primary" href="#" role="button">Read More &raquo;</a></p>
                  </div>
                  </div>
    
              <div class="col-md-4">
                  <h2 style="color: #200662; margin-top: 0; font-size: larger; font-family: St Ryde;">Phone Verification and Tracking</h2>
                  <hr />
                  <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
                  <p><a class="btn btn-primary" href="#" role="button">Read More &raquo;</a></p>
              </div>
    
              <div class="col-md-4">
                  <h2 style="color: #200662; margin-top: 0; font-size: larger; font-family: St Ryde;">Tracking System for Children and Homes Buglars</h2>
                  <hr />
                  <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.  Ut fermentum justo sit amet risus.</p>
                  <p><a class="btn btn-primary" href="#" role="button">Read More &raquo;</a></p>
              </div>
          </div>
            </div>
    
            <hr /><footer class="container" style="background-color:black; width:auto; height:auto;">
                    <p class="pull-right" style="color: white;"><a href="#">Back to Top</a></p>
                    <p style="color: white;">Copyright &copy; 2018 Doxtrak Tech. All Rights Reserved. &middot; <a href="Homepage.aspx">Home</a> &middot; <a href="About.aspx">About Us</a> &middot; <a href="#">Contact</a> &middot</p>
            </footer>
        </form>
         <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
    </body>
    </html>

    Monday, March 9, 2020 12:43 PM

Answers

  • User-1330468790 posted

    Hi, Donald416,

    The reason of your problem might be the missing of the .js file since I replaced the reference for "bootstrap.min.js" in your code with a CDN reference.

    Then everything works well. 

     

    Suggestion:

    Check the URL for "bootstrap.min.js" to see if the js file is referred to correctly.

    <script src="js/bootstrap.min.js"></script>

    Note: I used the bootstrap.3.4.1 by referring to the CDN link

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!-- Bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>

    Result from my side:

    Hope this can help you.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 10, 2020 1:59 AM

All replies

  • User-1330468790 posted

    Hi, Donald416,

    The reason of your problem might be the missing of the .js file since I replaced the reference for "bootstrap.min.js" in your code with a CDN reference.

    Then everything works well. 

     

    Suggestion:

    Check the URL for "bootstrap.min.js" to see if the js file is referred to correctly.

    <script src="js/bootstrap.min.js"></script>

    Note: I used the bootstrap.3.4.1 by referring to the CDN link

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!-- Bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>

    Result from my side:

    Hope this can help you.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 10, 2020 1:59 AM
  • User-527908287 posted

    Thank you Sean,

    I really really appreciate your help. May I please refer you to another post I made; its about my Image. I will be very grateful if you attend to me. Thank you in anticipation.

    Thursday, March 12, 2020 10:23 AM