My code is not detecting any click

Question

0.00/5 (No votes)

See more:

I tried linking JQuery in my code but it is not detecting any clicks.
My code is as follows:

Master Page

ASP.NET

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="CollegeDays.Site1" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="css/Style.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.4.1.min.js" type="text/javascript"></script>    
    <script src="Scripts/jquery-ui-1.12.1.min.js" type="text/javascript"></script>
    <link href="Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
    <script type="text/javascript">
        $('.menu-toggle').click(function () {

            $('.site-nav').toggleClass('site-nav--open', 500);
            $(this).toggleClass('open');

        })
    </script>
    <title>Chef Tushr's College Days</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <header>
                <div class="container">
                    <h1 class="logo">Generico<span>Logo</span></h1>
                    <nav class="site-nav">
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Home</a></li>
                        </ul>
                    </nav>

                    <div class="menu-toggle">
                        <div class="hamburger"></div>
                    </div>
                </div>
            </header>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>

CSS

CSS

body {
    background: #F0F8EA;
    font-family: 'Quicksand', sans-serif;
}

.container {
    width: 95%;
    max-width: 1000px;
    margin: 0 auto;
}

header {
    background: #E54B4B;
    color: #EBEBD3;
    padding: 1em 0;
    position: relative;
}

header::after {
    content: '';
    clear: both;
    display: block;
}

.logo {
    float: left;
    font-size: 1rem;
    margin: 0;
    text-transform: uppercase;
    font-weight: 700;
}

.logo span {
    font-weight: 400;
}

.site-nav {
    position: absolute;
    top: 100%;
    right: 0;
    background: #464655;
    height:0px;
    overflow:hidden;
}

.site-nav--open {
    height:auto;
}

.site-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav li {
    border-bottom: 1px solid #575766;
}

.site-nav li:last-child {
    border-bottom: none;
}

.site-nav a {
    color: #EBEBD3;
    display:block;
    padding: 2em 6em;
    text-transform: uppercase;
    text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus {
    background-color: #E4B363;
    color: #464655;
}

.menu-toggle {
    padding: 1em;
    position: absolute;
    top: .5em;
    right: .5em;
    cursor: pointer;
}

.hamburger,
.hamburger::before, 
.hamburger::after {
    content: '';
    display: block;
    background: #EBEBD3;
    height: 3px;
    width: 1.75em;
    border-radius: 3px;
}

.hamburger::before {
    transform: translateY(-6px);
}

.hamburger::after {
    transform: translateY(3px);
}

Webform

ASP.NET

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="CollegeDays.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>

As I am a newbie in coding I got this code from a Youtube Video and the owner of this code has the same code uploaded here.

What I have tried:

I tried linking JQueries from different websites but nothing helped.

Posted 12-Oct-19 1:57am

SidStark

Updated 14-Oct-19 4:52am

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard MacCutchan · Answer 1 · 2019-10-12T02:28:00

Solution 1

If you copy someone else's code and it does not work, then your best option is to go back to the person who wrote it. They will be best placed to help you in the first instance.

Posted 12-Oct-19 2:28am

Richard MacCutchan

F-ES Sitecore · Answer 2 · 2019-10-14T04:53:00

The browser interprets your page as it loads so the script in your header executes immediately;

$('.menu-toggle').click(...)

however at this moment you haven't loaded the body of the page so there are no elements with the menu-toggle class to attach to.

You need to either attach your events on the dom ready event which ensures the js runs after everything has loaded

$( document ).ready() | jQuery Learning Center[^]

or move your script to the bottom of the page so the elements exist when the code is ran.