CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Abdalla Abouzeid
Abdalla Abouzeid

Reputation: 9

My jQuery isnt working on specific things

I have written some jQuery but what I write seems to have no effect whatsoever. I have tested jQuery to check if its working or not by doing $(document).ready(function(){ alert("jQuery is working !"); }); and it does send the alert.

I have tried re-linking jQuery and checked my <head> tags millions of times and my eyes couldnt find anything wrong.

<!DOCTYPE html>
<html>

<head>
    <title>Abdalla Abouzeid</title>
    <script src="jquery-ui.min.js"></script>
    <script src="jquery-3.4.1.min.js"></script>
    <script src="javascript.js"></script>
    <meta name="description" content="This is my portoflio">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta property="og:site_name" content="www.anzads.com" />
    <meta property="og:type" content="Portoflio" />
    <meta property="og:image" content="413976bd.jpg">
    <link href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Poiret+One&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Sacramento&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://use.typekit.net/zyl3kwb.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
    <link rel="stylesheet" type="text/css" href="jquery-ui.structure.min.css">
    <link rel="stylesheet" type="text/css" href="jquery-ui.theme.min.css">
</head>

<body>
    <!--This is the header {logo , menu}-->
    <div id="container">
        <div id="header">
            <div class="logo">
                <a href="default.html">
                    <p>
                        A n Z
                    </p>
                </a>
            </div>

            <ul class="menu">


                <a href="default.html">
                    <li>Home</li>
                </a>
                <a class="links" href="Contact.html">
                    <li>Contact</li>
                </a>


                <a class="links" href="Projects.html">
                    <li>Projects</li>
                </a>
            </ul>



        </div>


        <div class="content">
            <hr>

            <h1>
                Are you trying to build a professional website ?
            </h1>

            <P>
                Hello , i am a web designer / front end developer. Bringing your vision alive is pivotal to me and that is what sets me apart. Let's create a professional yet astonishing desgins for our website that shows your vision.
            </P>


            <hr>

            <h2>My Services</h2>
            <hr class="titleUnderline">
            <div class="services , separation">

                <div class="leftBox , serviceBox">
                    <img class="serviceLogo" src="web-design.svg">
                    <h3> Web Design <br/> <span class="subTitle">UI Focused</span></h3>

                    <p>
                        Designing a website must be specific to its activity. This is what i do , designing a website professionally to deliver its purpose to the users of the website. User focused website should be the primary goal of any website.
                    </p>
                </div>

                <div class="rightBox , serviceBox">
                    <img class="serviceLogo" src="responsive-design-symbol.svg">
                    <h3> Web Development <br/> <span class="subTitle">Responsive and Fast</span></h4>
                        <p>
                            Every Website must have to goals to achieve . First it must be resposive which means for it to work on all devices . Second it has to to load as fast as possible to guarantee a very good user experiece.
                        </p>
                </div>
            </div>
            <div class="services , separation">
                <div class="leftBox , serviceBox">
                    <img class="serviceLogo" src="G designing.svg">
                    <h3>Logo Designing <br/> <span class="subTitle">Iconic Styles</span></h3>
                    <p>
                        A website's logo describes their product , targets audience and industry . It commonly outlines fundamental information about the business, the desired design , the project timing and the budget.
                </div>

                <div class="rightBox , serviceBox">
                    <img class="serviceLogo" src="htmlcss.svg">
                    <h3>Front-End Development <br/> <span class="subTitle">HTML / CSS</span></h3>
                    <p>
                        Creating a strong foundation for a website means getting the HTML and CSS architecture right. If you've got a design I can create the front-end code for it.
                    </p>

                </div>
            </div>
        </div>
        <br/>
        <hr>
        <div id="footer">
            <div class="copyright">
                <p>
                    &copy;Copyright 2019 AnZ <sup>&reg;</sup>
                </p>


                <a href="https://www.instagram.com/abuzied365/?hl=en" target="_blank">
                    <img src="instagram.svg"></a>
                <a href="https://www.facebook.com/AbuziedAbdalla" target="_blank">
                    <img src="facebook.svg">
                </a>
                <a href="https://twitter.com/AbuzeidAbdalla" target="_blank">
                    <img src="twitter.svg">
                </a>
            </div>
        </div>

    </div>
    </div>

</body>

</html>

        body {
            width: 100%;
            margin: auto;
            color: #7D7B7B;
        }

        #header {
            font-family: 'Yanone Kaffeesatz', sans-serif;
            height: 15%;
            position: relative;
            top: 10px;
            text-align: center;
        }

        h2,
        h3,
        h4,
        h5,
        h5 {
            font-family: 'Yanone Kaffeesatz', sans-serif;
        }

        h1 {
            font-family: 'Yanone Kaffeesatz', sans-serif;
            font-size: 45px;
        }

        p {
            font-family: 'Poiret One', cursive;
            font-size: 20px;
            font-weight: 650;
        }

        a:link {
            text-decoration: none;
        }

        a:active {
            text-decoration: none;
        }

        a:hover {
            text-decoration: none;
        }

        .logo p {
            font-family: 'Sacramento', cursive;
            font-size: 50px;
            outline: 0;
            text-rendering: optimizeLegibility;
            color: #7D7B7B;
        }

        ul {
            list-style-type: none;
        }

        #container {
            width: 80%;
            margin: auto;
        }

        hr {
            border: 1px solid #7D7B7B;
            margin-top: 15px;
            margin-bottom: 15px;
        }

        .menu li {
            display: inline;
            font-size: 20px;
        }

        .links {
            margin-left: 7%;
        }

        .menu {
            padding: 4px;
        }

        .menu a {
            color: #7D7B7B;
        }

        .leftBox {
            width: 30%;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            margin-right: 10%;
            margin-left: 5%;
            text-align: center;
            border-radius: 15px;
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            -ms-border-radius: 15px;
            -o-border-radius: 15px;
        }

        .rightBox {
            width: 30%;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            margin-left: 10%;
            text-align: center;
            border-radius: 15px;
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            -ms-border-radius: 15px;
            -o-border-radius: 15px;
        }

        h2 {
            font-size: 35px;
        }

        h3 {
            font-size: 30px;
        }

        .services {
            width: 100%;
            display: flex;
            flex-flow: row;
        }

        .services p,
        h3 {
            padding: 5px;
            line-height: 35px;
        }

        .subTitle {
            font-weight: 100;
            font-size: 25px;
        }

        .titleUnderline {
            width: 8%;
            float: left;
            margin-bottom: 25px;
        }

        .serviceLogo {
            width: 150px;
            height: 200px;
        }

        .separation {
            margin-top: 100px;
        }

        .copyright {
            text-align: center;
        }

        .copyright img {
            width: 40px;
            height: 40px;
            margin-bottom: 50px;
        }

        .contactMe img {
            width: 50px;
            height: 50px;
            float: left;
            margin-right: 30px;
        }

        .underline {
            width: 11%;
            float: left;
        }

        .title {
            margin-bottom: 100px;
        }

        .number,
        .myEmail {
            font-family: 'Gruppo', cursive;
            font-weight: 600;
            font-size: 26px;
        }

        .comingSoon {
            font-size: 60px;
            text-align: center;
        }
        /*  @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
        .leftBox,
        .rightBox {
            width: 80%;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            margin-right: 10%;
            margin-left: 5%;
            text-align: center;
            border-radius: 15px;
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            -ms-border-radius: 15px;
            -o-border-radius: 15px;
        }
    }*/


$(".logo").click(function() {
    $("body").css("background-color", "black");
});

These are all the codes I have on my page. I thought it might be a linking issue but I dont know if it actually is. I check the visual studio code editor to see if there are any syntax or semantics errors and it didnt show me anything.

Upvotes: 0

Views: 56

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42304

Assuming you only include the standard jQuery, your jQuery is working as expected; clicking the .logo class changes the <body> colour to black:

$(".logo").click(function() {
    $("body").css("background-color", "black");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
    <!--This is the header {logo , menu}-->
    <div id="container">
        <div id="header">
            <div class="logo">
                <a href="default.html">
                    <p>
                        A n Z
                    </p>
                </a>
            </div>

            <ul class="menu">


                <a href="default.html">
                    <li>Home</li>
                </a>
                <a class="links" href="Contact.html">
                    <li>Contact</li>
                </a>


                <a class="links" href="Projects.html">
                    <li>Projects</li>
                </a>
            </ul>



        </div>


        <div class="content">
            <hr>

            <h1>
                Are you trying to build a professional website ?
            </h1>

            <P>
                Hello , i am a web designer / front end developer. Bringing your vision alive is pivotal to me and that is what sets me apart. Let's create a professional yet astonishing desgins for our website that shows your vision.
            </P>


            <hr>

            <h2>My Services</h2>
            <hr class="titleUnderline">
            <div class="services , separation">

                <div class="leftBox , serviceBox">
                    <img class="serviceLogo" src="web-design.svg">
                    <h3> Web Design <br/> <span class="subTitle">UI Focused</span></h3>

                    <p>
                        Designing a website must be specific to its activity. This is what i do , designing a website professionally to deliver its purpose to the users of the website. User focused website should be the primary goal of any website.
                    </p>
                </div>

                <div class="rightBox , serviceBox">
                    <img class="serviceLogo" src="responsive-design-symbol.svg">
                    <h3> Web Development <br/> <span class="subTitle">Responsive and Fast</span></h4>
                        <p>
                            Every Website must have to goals to achieve . First it must be resposive which means for it to work on all devices . Second it has to to load as fast as possible to guarantee a very good user experiece.
                        </p>
                </div>
            </div>
            <div class="services , separation">
                <div class="leftBox , serviceBox">
                    <img class="serviceLogo" src="G designing.svg">
                    <h3>Logo Designing <br/> <span class="subTitle">Iconic Styles</span></h3>
                    <p>
                        A website's logo describes their product , targets audience and industry . It commonly outlines fundamental information about the business, the desired design , the project timing and the budget.
                </div>

                <div class="rightBox , serviceBox">
                    <img class="serviceLogo" src="htmlcss.svg">
                    <h3>Front-End Development <br/> <span class="subTitle">HTML / CSS</span></h3>
                    <p>
                        Creating a strong foundation for a website means getting the HTML and CSS architecture right. If you've got a design I can create the front-end code for it.
                    </p>

                </div>
            </div>
        </div>
        <br/>
        <hr>
        <div id="footer">
            <div class="copyright">
                <p>
                    &copy;Copyright 2019 AnZ <sup>&reg;</sup>
                </p>


                <a href="https://www.instagram.com/abuzied365/?hl=en" target="_blank">
                    <img src="instagram.svg"></a>
                <a href="https://www.facebook.com/AbuziedAbdalla" target="_blank">
                    <img src="facebook.svg">
                </a>
                <a href="https://twitter.com/AbuzeidAbdalla" target="_blank">
                    <img src="twitter.svg">
                </a>
            </div>
        </div>

    </div>
    </div>

</body>

It's worth nothing that your .logo is compromised of only a single <a> tag, and clicking this will navigate you away (possibly before you see the colour change).

The problem itself is almost certainly in your <head> files: you reference jQuery UI before jQuery itself, and then appear to have a third JavaScript file:

<script src="jquery-ui.min.js"></script>
<script src="jquery-3.4.1.min.js"></script>
<script src="javascript.js"></script>

You'll need to load jQuery before jQueryUI, making sure not to accidentally include jQuery twice, or use any framework that declares $ itself:

<script src="jquery-3.4.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="javascript.js"></script>

Upvotes: 4

Related Questions