Modifying an image with jQuery

Why won't this image change? Below is the relevant HTML, CSS, and jQuery code.

HTML

<nav id="desktop-nav">
  <div class="logo">
    <a href="#"></a>
  </div>
  <div> ... </div> 
  ...

CSS

nav#desktop-nav .logo a {
  display: block;
  width: 50px;
  height: 50px;
  background-image: url("../path/to/image-logo-white.png");
  background-size: 50px 50px;
}

jQuery

$(document).ready(function(){
  $(window).scroll(function(){
    if($(window).scrollTop() > $(window).height()) {
      $("nav#desktop-nav .logo a").attr("src", "../path/to/image-logo.png");
    }
})

NOTE: I have tested this function, and it does work (I changed the color of text):

$("#desktop-nav #main-nav .main-nav-center .main-nav-list li a").css({"color":"black"});

Can you help me figure out what I am doing wrong?

javascriptjqueryhtmlcss

Answer №1

a does not have the src attribute, so this code will not work as expected:

 $("nav#desktop-nav .logo a").attr("src", "../path/to/image-logo.png");

To address this issue, here is a quick solution that I propose:

CSS

nav#desktop-nav .logo a {
  display: block;
  width: 50px;
  height: 50px;
  background-image: url("../path/to/image-logo-white.png");
  background-size: 50px 50px;
}

nav#desktop-nav .logo a.another-logo {
    /* OVERRIDE ANOTHER LOGO HERE */
   background-image: url("../path/to/image-logo.png");
}

jQuery

$(document).ready(function(){
  $(window).scroll(function(){
    if($(window).scrollTop() > $(window).height()) {
      $("nav#desktop-nav .logo a").addClass('another-logo');
    }
    else {
       $("nav#desktop-nav .logo a").removeClass('another-logo');
    }
})

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

Displaying entries of input data

I have an application that includes a modal window with filters, but I am looking to add another type of filter. However, I am struggling with implementing it in React and would appreciate any help with the code or recommended links. Essentially, I want t ...

javascriptreactjsfilter

CSS problem causing issues with block display in basic gallery

I've created this code: <head> <style type="text/css"> div.img { margin: 2px; border: 1px solid #0000ff; height: auto; width: auto; float: left; text-align: center; } div.img img { display: inline; margin: 3px; border: 1 ...

csslayout

employing JavaScript to present an image

Here is the image code I have: <img id="imgId" src="img/cart.png" style="display: none"/> After clicking a button, it triggers a JavaScript function to show the image document.getElementById("imgId").style.display = "inline" The image display ...

javascriptcss

Develop an Innovative Data-Driven Application using AJAX Technology

After inputting an artist's name and clicking on the button, I expect to receive a visually appealing list of their songs. I am encountering the following issue: Whenever I hit the button, no results are being returned, and I am unsure of the reaso ...

javascriptjqueryhtmlajaxgetelementbyid

Create a default function within a mongoose field

Is there a way to achieve the following in my code: var categorySchema = new Schema({ id: { unique: true, default: function() { //set the last item inserted id + 1 as the current value. } }, name: String }); Can this be done? ...

javascriptnode.jsmongodbexpressmongoose

PHP time counting script

Can a countdown script be created using PHP? Websites like 4shared.com or megaupload.com utilize a similar script that starts counting from 20 seconds to 0. I am able to see how many seconds are left on the web page before I can click on the download but ...

phpjqueryhtml

Display a collection of objects using Jade / Pug syntax

Struggling to find resources on Pug / Jade templating, turning to this platform for help. I've been diving into documentation on iterations along with consulting this helpful link. Working with Node.js, Express, and pug for a school project - a mock ...

javascriptnode.jsexpresspug

Avoid the default behavior when employing jQuery for Ajax requests

I am facing an issue with preventing the default action when submitting a form using ajax. It seems that my code is causing a page refresh and clearing the form without sending any data to the database. I tried including the php processing script link in t ...

phpjavascriptjqueryajax

Guide on retrieving URL data using Ajax

While I am familiar with the method in PHP (e.g. curl) to retrieve the contents of a URL, I am unsure of how to do so using ajax. Unfortunately, I have tried writing code without success in displaying the contents from the URL and separating them into vari ...

javascriptphpajax

How to create a custom button or menu design with ExtJS

My objective is to customize the appearance of an ExtJS button along with its menu. I am facing difficulty in applying styling to a button even with a CSS class. I have attempted the following code: CSS: .customStyle { font-size: 20px !important; ...

javascriptjqueryhtmlextjsweb

When scraping daily HTML tables with Selenium, I am only able to retrieve the last page

Exploring web scraping to gather data for my latest project has been quite the adventure. This is my first attempt at extracting information from websites, specifically prices that are listed on a website. The challenge I am facing is that I require this d ...

pythonhtmlseleniumbeautifulsoup

Using Node.js and JWT: A guide to securely storing and using access tokens in the Authorization header

Has anyone encountered this issue before? I've searched extensively online but haven't found much information on the topic. I'm relatively new to using node and JWTs, and my goal is to generate a JWT and store it in the Authorization header ...

javascriptnode.jsexpressauthenticationjwt

a beginner's guide to utilizing the grunt target

Here is an example of my Gruntfile.js: 'use strict'; module.exports = function(grunt) { grunt.initConfig({ grunt.config.set('targ', grunt.option('target')); cachebuster: { build: { ...

javascriptgruntjsnpm

Dividing Javascript code in bs4 using Python

I've encountered some challenges when attempting to extract Javascript values from a bs4 code. The javascript snippet appears like this: <script type="text/javascript"> var FancyboxI18nClose = 'Close'; var FancyboxI18nNext = 'Ne ...

javascriptpythonbeautifulsoup

Data table created with functional components is not refreshing when columns are added or removed, which are stored in the state as an array of objects

I’ve been working on setting up a datatable with a checkbox dropdown feature to add or remove columns from the table. Everything is functioning properly, except for one issue – the table is not refreshing unless I click on one of the header titles. At ...

javascriptreactjsmaterial-ui

Javascript Error: Fictitious Path Troubles

When attempting to retrieve the file path, it displays as follows: "C:\fakepath\amine.jpeg", causing an issue with uploading the file to the server. $('input[type=file]').change(function () { var filePath = $('#file-input&apo ...

javascriptphpajax

Encountered an issue while trying to establish a connection between node.js and MongoDB

db connection error querySrv ENOTFOUND _mongodb._tcp.nodeapi.vlvom.mongodb.net (node:7720) UnhandledPromiseRejectionWarning: Error: querySrv ENOTFOUND _mongodb._tcp.nodeapi.vlvom.mongodb.net at QueryReqWrap.onresolve [as oncomplete] (dns.js:203:19) (Us ...

javascriptnode.jsmongodb

Is it possible to alter preact-material-components to switch to mdc-theme--dark mode, thereby changing the CSS style of all descendant components?

I recently created a preact-cli app and added the following code in Header.js: document.body.classList.add('mdc-theme--dark'); However, when a user tries to switch from the light theme to the dark theme, only the background of the app changes. ...

htmlcssmaterial-uithemespreact

What is the best way to manage several asynchronous requests concurrently?

Can anyone recommend some valuable resources or books that explain how to effectively manage multiple asynchronous requests? Consider the code snippet below: Payment.createToken = function(data) { var data = data; apiCall("POST", "api/createToke ...

javascriptajax

Tips for effectively utilizing Vuelidate to display errors selectively after the user has completed input:

I have implemented a form using Bootstrap-Vue with some Vuelidation code applied to it. <b-form @submit.prevent="onSubmit"> <input type="hidden" name="_token" :value="csrf" /> <transition-group name="fade"> <b-form ...

javascriptvue.jsbootstrap-vuevuelidate