CODEWITHSUNDEEP
htmlcssmobiledrop-down-menu
Small Legend
Small Legend

Reputation: 688

HTML phone drop down inconsistency

So I have code to create a drop down that is used for my website aimed at mobile users. However it works on one page but not another.

What other code could be interfering for this problem to occur?

It works here:

  <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <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="#page-top">Fortune Filly</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <li class="page-scroll">
                        <a href="#portfolio">Memberships</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#about">About</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#contact">Contact</a>
                    </li>
                    <li class="page-scroll">
                        <a href="loginTemplate.php">Login</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

But not here: 

<nav class="navbar navbar-default navbar-fixed-top">

        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <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="index.html">Fortune Filly </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <li class="page-scroll">
                        <a href="index.html">Home</a>
                    </li>
                    <li class="page-scroll">
                        <a href="accountDetails.php">Account Details</a>
                    </li>
                    <li class="page-scroll">
                        <a href="logout.php">Logout</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
</nav>

I will add that on the page that it isn't working I am getting the error: session_start() Cannot send session cache limiter - headers already sent

Here is the rest of the code for the page which doesn't work: 

<?php
include 'connect.php';
session_start();
ob_start();
if(!isset($_SESSION['username']))
{
    header("location:http://www.fortunefilly.com/loginTemplate.php");
}
else
{
    $username =$_SESSION['username'];
    $check = $mysqli->query("SELECT id FROM users WHERE username = '$username'");
    $row = $check->fetch_assoc();
    $id = $row['id'];
}
?>
<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">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Fortune Filly</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/freelancer.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body id="page-top" class="index">

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top">

            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header page-scroll">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <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="index.html">Fortune Filly </a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="hidden">
                            <a href="#page-top"></a>
                        </li>
                        <li>
                            <a href="index.html">Home</a>

                        <li>
                            <a href="accountDetails.php">Account Details</a>
                        </li>
                        <li>
                            <a href="logout.php">Logout</a>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
    </nav>

<section class="success" id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <br>
                    <h2>Welcome <?php echo $username;?></h2>
                    <hr class="star-light">
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-lg-offset-2">
                    <p>To gain access to the members section and receive daily horse racing tips from our professionals <a href='userPage.php'>Click here</a></p>   

                    <?php
                    $check = $mysqli->query("SELECT is_member FROM users WHERE username = '$username'");
                    $row = $check->fetch_assoc();
                    $isMember = $row['is_member'];
                    if ($isMember == 0){
                    echo'<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="CTKLZLJZBA4P4">
<table>
<tr><td><input type="hidden" name="on0" value=""></td></tr><tr><td><select name="os0">
    <option value="Weekly">Weekly : £5.00 GBP - weekly</option>
    <option value="Monthly">Monthly : £15.00 GBP - monthly</option>
    <option value="Yearly">Yearly : £60.00 GBP - yearly</option>
</select> </td></tr>
</table>
<input type="hidden" name="custom" value="$id">
<input type="hidden" name="currency_code" value="GBP">
<input type="image" src="https://www.sandbox.paypal.com/en_US/GB/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.sandbox.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>


                    ';
                    // echo '<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" target="_top">
                    // <input type="hidden" name="cmd" value="_s-xclick">
                    // <input type="hidden" name="custom" value="$id">
                    // <input type="hidden" name="hosted_button_id" value="H4K679J6Y5T7C">
                    // <input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
                    // <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
                    // </form>';
                    }
                    ?>


                </div>

            </div>
        </div>
    </section>
</body>

</html>

Upvotes: 0

Views: 164

Answers (1)

APAD1
APAD1

Reputation: 13666

Alright, so based on the latest code you posted, I believe this is your issue. On the login page, there is a bit of jQuery at the bottom of the page:

$(document).ready(function() {
    LoginModalController.initialize();
});

However, it seems like jQuery is either not loading properly or it's being loaded after the function is fired because I'm getting:

Uncaught ReferenceError: $ is not defined

It also looks like you're not loading bootstrap.min.js on the login page which, I believe, is required for the nav dropdown(not entirely sure though as I've never used that feature of Bootstrap).

UPDATE: OP was calling the login.js file in the header and footer, the one being called in the header was causing a reference error as it was firing before jQuery was loaded.

Upvotes: 1

Related Questions