Is your Javascript navigation functioning properly on some submenus while encountering issues on others?

If you visit , you'll notice that it's a visually appealing site. The navigation submenus seem to be functioning properly, HOWEVER upon inspecting the element, you'll notice that under the PRICING tab, there are submenus that have the same calling actions as others but do not appear. Specifically, under div#Price_links you can find them alongside Wash links, About Links etc., all using this JS:

function showDD(id) {
var element = id + "_links";
document.getElementById(element).style.display = "block";
}

function hideDD(id) {
var element = id + "_links";
document.getElementById(element).style.display = "none";
}

Why aren't the links under pricing being shown?

they follow the same setup for calling as the other visible submenus. I've been trying to solve this mystery for some time now with no luck. Any suggestions? anyone?

javascripthtmlcss

Answer №1

After reviewing the website, I observed the following:

Below is the HTML code for the functional item:

<img src="images/nav/unlimited.png" onmouseover="this.src='images/nav/unlimited_ov.png'; showDD('Wash');" onmouseout="this.src='images/nav/unlimited.png'; hideDD('Wash');" border="0">

And here is the HTML code for the menu item that is not working:

<img src="images/nav/pricing.png" onmouseover="this.src='images/nav/pricing_ov.png';" onmouseout="this.src='images/nav/pricing.png';" border="0">

The issue seems to be missing calls to showDD and hideDD in the non-functional item.

Answer №2

The distinction lies in the fact that the showDD function is being called within the onmouseover event of the elements it is targeting, as seen in the example on line 58:

<a href="zoompass.cfm">
  <img src="images/nav/unlimited.png" onmouseover="this.src='images/nav/unlimited_ov.png'; showDD('Wash');" onmouseout="this.src='images/nav/unlimited.png'; hideDD('Wash');" border="0" />
</a>

However, this is not the case with the pricing image:

<a href="pricing.cfm">
  <img src="images/nav/pricing.png" onmouseover="this.src='images/nav/pricing_ov.png';" onmouseout="this.src='images/nav/pricing.png';" border="0" />
</a>

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

Accessing process.env in Nest.js controllers

Is there a way for me to access process.env.SOME_FIELD in nest.js? app.module.ts ... modules: [ ... ConfigModule.forRoot({ envFilePath: '.env.' + process.env.APP_CODE }), CatModule ... ] ... CatController.ts ...

javascriptnode.jsenvironment-variablesnestjs

The sidebar on the right side of the screen is content to relax beneath my

The positioning of my sidebar is currently below the content on the left side of the page, but I want it to sit beside the content on the right side. I've tried various solutions from similar questions without success. Here is an example of how I woul ...

csshtmlcss-floatsidebar

Creating a multiline centered navigation bar item using Bootstrap 4

My navigation bar is functioning properly with single-line items, but encounters alignment issues when dealing with multi-line items: <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> ...

csstwitter-bootstrapsassbootstrap-4

Generate additional tabs

Currently, I am in the process of working on a project where I have a bar that will contain dynamically filled tabs. My goal is to include a (+) image that becomes visible when the bar is full. When a user clicks on this image, the remaining tabs should ap ...

jqueryhtmlcss

Tips for choosing an item in a multi-select dropdown using Selenium WebDriver

Currently delving into Selenium WebDriver while utilizing Java.. I am curious about how to select values in a Multi-select box where the options are already pre-selected. If I want to choose two or more additional options, how can I go about it? The HTML ...

javahtmlseleniumselenium-webdriver

Unable to set values to an array of objects in JavaScript

Currently, I am facing an issue in my node.js project where I am unable to assign values to an array of objects. This problem has occurred before, but I just can't seem to figure out the root cause. My suspicion is that it might be related to variable ...

javascriptnode.js

The XMLHttpRequest is displaying additional characters within its response

Upon completing an XMLHttpRequest(), I am receiving the unexpected output of "true↵↵↵". In my php file, all I have is echo json_encode(true); Can anyone shed some light on why this strange behavior is occurring? Thank you ...

javascriptphpajax

Execute various settimeout or display functions on various elements of a webpage

Just a heads up, I'm not really experienced in development. More on the newbie side of things, but eager to learn. I've been looking for an answer to my question, but so far haven't come across anything that fits my specific situation. It m ...

javascriptjqueryhtmlsettimeout

Is there a way to make those three elements line up in a row side by side?

I'm working on a layout using HTML and CSS that will display two images on the left and right sides of the browser window, with text in between them. I want them all to be horizontally aligned within a container. Here is the code snippet: <div cla ...

htmlcss

What is the process for specifying a method on a third-party class in TypeScript?

I'm facing a challenge while trying to extend a third-party class in TypeScript. The issue is that I am unable to access any existing methods of the class within my new method. One possible solution could be to redeclare the existing methods in a sep ...

javascripttypescript

Save only the most recent iteration of the javascript file in the cache

I've encountered an issue with browser caching of JavaScript files, even though I've utilized FileETag MTime Size in my htaccess file to verify the modified time and size for detecting the latest version. My current method of including JavaScri ...

phpjavascriptsvncachingbrowser-cache

Generating requests using ExpressJS

Is it possible to send a POST request using a GET action? Although everything seems to be working fine, the "TOKEN" does not appear after the post. I am puzzled as to why this is happening. const request = require('request'); exports.g ...

javascriptnode.jsexpress

Encountering difficulties in accessing files displayed by serve-index in Express

My Node.js server using Express seems to be working fine for displaying directory contents, but I'm running into an issue when trying to access individual files. After clicking on a file listed in the directory, I keep getting an error message that sa ...

javascriptnode.jsexpressserver

What is the best way to use jQuery to retrieve information from one child element in an XML API in order to locate another child

Hi there, I'm new to jQuery and could use some help. I'm attempting to retrieve specific information like CPU and RAM details from a particular phone model. I've written the jQuery code, but I'm having trouble displaying the RAM and CPU ...

javascripthtmljqueryxmlapi

By pairing delay(0) with refCount(), we can achieve optimal efficiency

The refCount operator is discussed in this article. It explains the necessity of adding delay(0) to prevent unsubscription of observable A: import { Observable } from "rxjs/Observable"; const source = Observable.defer(() => Observable. ...

javascriptangulartypescriptrxjs

Display the QWebEngineView page only after the completion of a JavaScript script

I am currently in the process of developing a C++ Qt application that includes a web view functionality. My goal is to display a webpage (which I do not have control over and cannot modify) to the user only after running some JavaScript code on it. Despit ...

javascriptc++qtqwebengineview

What steps can be taken to make sure that my Ajax request has completed before executing a new function within the window.onload event

Looking for solutions using plain vanilla JavaScript only, as I do not utilize Json or jQuery currently (I have come across several solutions on SE, but they all involve jQuery or Json). There are two functions within a window.onload=function(){... event ...

javascriptajax

Discover how to apply unique styles to specific HTML elements using their index values in jQuery

In the process of creating a party game similar to Tambola or Housie, I am faced with the challenge of automatically detecting and highlighting the numbers called out on each ticket in the game. For instance, if number 86 is announced, I aim to visually di ...

javascripthtmljquerycsshtml-table

Image alignment on a web page

I'm currently working on developing a website that features a unique wave effect at the bottom of the 'hero' image. From my research, I've learned that this can be achieved by cropping the bottom part of the image, making modifications, ...

htmlcssbootstrap-5

Obtaining an image from a URL, saving it, and then animating it? That definitely

Looking to create a dynamic animation with images that update every 15 minutes from the following URL: How should I go about storing and looping through the most recent 24 images for the animation? Is using a MySQL database the best option or are there o ...

phpjavascriptmysqldatabaseanimation