Is your jQuery code failing to load properly?

https://jsfiddle.net/11632r3m/

My attempt to create a simple color change for a div element in my HTML file has been unsuccessful. The provided fiddle showcases the issue.

HTML

<div class="pagewrap"></div>
<div class="sidebar"></div> <!--Sidebar container-->   
<div class="mainbody"></div> <!--Main Body container-->

CSS

.sidebar {
    float: left;
    background-color: yellow;
    width: 10%;
    height: 100%;
    position: fixed;

}

jQuery

$( document ).ready(function() {
    $(".sidebar").click(function() {
        $(this).css("background-color","black");
    });
});

Answer №1

It seems like there is an issue with your code because the jQuery library has not been loaded properly. To fix this, you can go to a fiddle and navigate to the JavaScript section: Click on the JavaScript toggle and select the FRAMEWORKS & EXTENSIONS option to choose jQuery 3.2.1. Voila! Your code should now be functioning correctly.

Answer №2

Your code is missing some end brackets and divs that are necessary for proper functionality.

<div class="pagewrap"><!--Container for everything-->
  <div class="sidebar"></div> <!--Container for Sidebar-->   
  <div class="mainbody"></div><!--Container for Main Body-->
</div>

.sidebar {
  float: left;
  background-color: yellow;
  width: 10%;
  height: 100%;
  position: fixed; 
}

Additionally, JQuery library was not included in your fiddle, causing an error in finding the variable.

Here is the updated fiddle link: https://jsfiddle.net/11632r3m/7/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The SVG syntax underwent alterations following its transmission via email

Can someone please help me fix this code? My visual studio code interpreter seems to be having trouble recognizing the style code within it. <?xml version="1.0" encoding="utf-8"?> <!-- (c) ammap.com | SVG weather icons --> <svg vers ...

Passing a PHP variable to an AJAX URL: A simple guide

Hey there! I am just getting started with javascript and I'm facing an issue while trying to send a PHP variable to an AJAX URL file. I can't seem to figure out where the problem lies. Any assistance would be greatly appreciated! In this scenari ...

What is the best way to design a bookmarklet that can overlay an HTML/div layer and apply CSS styles from an

Is there a way to incorporate a bookmarklet that can bring in a new layer/div with additional HTML and CSS from an external file, overlaying it on the current page? If anyone has an example of a bookmarklet that achieves this, would you be willing to shar ...

Exploring ng-view navigation in AngularJS

I have come across an SEO issue while working on a static website in AngularJS. Google Webmasters Tools report no crawl errors, but when I attempt to fetch different routes, it consistently returns the same home page result. It seems to be ignoring what ...

Css beforehand, unique subject matter

Trying to use a jQuery plugin that has CSS code like this: .icon-eye:before { content: '\56'; } On the plugin's site, it displays as an eye icon. However, when I install the plugin on my local PC, I see 'V' instead of the ey ...

Differences between flexible and fixed-width columns in responsive grid layouts

Recently, I've been diving into the world of flexbox and creating my own grid system. Traditionally, when building a grid system using floats, you have to calculate the number of columns per layout and assign percentages for each column's width. ...

Locate a Sub-Child href Element using Selenium

I am attempting to interact with a link using Selenium automation tool. <div id="RECORD_2" class="search-results-item"> <a hasautosubmit="true" oncontextmenu="javascript:return IsAllowedRightClick(this);" class="smallV110" href="#;cacheurl ...

Attempting to align a navigation block next to an SVG image

On my website, I envisioned a photoshopped image featuring a SVG picture of a book on the left and a "navigation block" on the right. The navigation block consists of links that redirect to other pages but it's not displaying properly. You can view th ...

Do LI elements need to be floated left for right alignment within a container?

I have a code where the LI elements are floated left and aligned to the left of the container. I want to change their alignment to the right using CSS. How can I achieve this? For example: [Item1..................................Item2] Below is the HTML ...

Combining two images using HTML and CSS resulted in conflicts when attempting to overlay any additional elements

I have managed to overlay two images successfully, but I am experiencing conflicts when trying to do the same with other div images. Here is the code on jsfiddle: https://jsfiddle.net/cLew1t2v/ and here is the code snippet: <div> <div style ...

Adding a PHP script alters the way content is displayed in a web browser

Forgive me for what may seem like a trivial question, but I have been searching for hours without any luck. It appears that including more than one file in an already included file is causing a minor change to the page layout. The issue manifests as a sli ...

Automatically pre-fill and send hidden form

I'm working on a form and have set up a handler for the submit button like this: $( '#submit_btn' ).click( function( data ){ theForm = document.getElementById( 'realForm' ); theForm.meetingName.value = document.getElement ...

Retrieve the information located within the error section of an Ajax request

When sending an ajax request to a Django view, I am including data in the response based on certain logic. return JsonResponse(content={ "Message": "user is not present.", },status=400) This response falls under the error section ...

Designing a File Export Functionality in MVC3

I am working on a strongly typed View in ASP.NET MVC3 that displays a Model, and I want to implement a feature where the user can download the displayed model as a CSV file. My initial thought is to create a link that points to another action on the contro ...

Achieving centered text alignment in a span using Bootstrap 5

I am facing an issue with a span in an input group that has a minimum width of 6rem. This is causing the text to not be centered, as spans typically adjust to the width of the text itself. .input-group-text { min-width: 6rem; } <link rel="stylesheet ...

Executing a click event on an HTML table dynamically created from an AJAX request

I have a script that creates an html table displaying Users of the application, with options to either EDIT or DEACTIVATE each user. These actions are handled using AJAX. The table structure is as follows: <tr><td><a id='edit_link&apo ...

In what ways can the accessibility of a website be impacted by using CSS

After reading numerous articles on Google and Stack Overflow, I have decided to ask my question straightforwardly in the hopes of receiving a clear and direct answer. Adding another layer to the discussion about whether Does opacity:0 have exactly the sam ...

Learning how to access my CSS file using Express and Node.js

I am new to using express and node.js. I am trying to develop my app, but for some reason, my style.css file is not being recognized and I am unsure why. Initially, I attempted to use .scss files, but after researching, I discovered that it was not possi ...

Having trouble retrieving information from JSON when making a call to the server-side web service

Client-Side Code var pre = "{\"objEmployees\": {\"Employee\": [{"; var array = JSON.stringify(employee); var last = "}}"; var ArrayofObjects = pre + array + last; DoSort(ArrayofObjects); function DoSort(ArrayofObjects) { $.aj ...

divide an item according to its category

Hey guys, I need some help with a coding problem! So here's the object I'm working with: var x = {code0: "codefdg", mcode0: "mcodefdg", mcode1: "mcodefdg", comments1: "commentsfdg", code3: "fdg"…} I want to split this object into different pa ...