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?

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

Can you explain the steps to implement this feature in a modal window using jQuery?

My HTML list contains a bunch of li elements. ul li img .det li I am looking to create a modal popup that appears when I click on something. I want this modal popup to have previous and next buttons, preferably implemented using jQuery. I have alr ...

Unable to receive a response in React-Native after sending a post request

My current challenge involves sending a response back after successfully making a post request in react-native. Unfortunately, the response is not arriving as expected. router.route("/addUser").post((req, res) => { let name= req.body.name; connection ...

Retrieve information from a JSON API on one server and showcase it on an HTML page hosted on a different server

I have a situation where I need to transfer data from one project (Project1) to another project (Project2). To achieve this, I decided to convert the Project1 data stored in a database into a JSON API and then call it using an HTML page from Project2. Howe ...

What is the process for choosing the 1st, 4th, 7th element, and beyond?

Is there a way to choose the 1st, 4th, 7th elements and so on? Also, how can I select the 3rd, 6th, 9th, and beyond? The method involves selecting an element then skipping two before selecting the third one. I believe the :nth-child selector is the key bu ...

Utilizing a JSON object passed from one JavaScript function to another: A comprehensive guide

After creating a function that returns JSON format through an ajax call, I received the following JSON data: { "communication": [{ "communication_name": "None", "communication_id": "1" }], "hardware": [{ "hardware_name ...

Creating a dynamic design with a responsive background image and three columns of engaging content placed on top using Bootstrap

I'm struggling to translate a design mockup into Bootstrap 3.3.6 Here is an image showcasing the concept I am aiming for: The blue background represents an image, with grey text boxes overlaid on top (one of which includes a form). The entire layout ...

Ensure that the div extends to the bottom of the page

I'm currently working on a web design assignment for one of my courses, and I'm facing some challenges with getting the div elements to span the entire page in terms of color. http://jsfiddle.net/vmm1s4Lt/ http://codepen.io/bmxatvman14/pen/fih ...

Prevent the tab key from exiting the input field and instead direct it to a designated element on the webpage

I have customized a select menu for user interaction, but I am facing issues with normal keyboard behaviors not working as expected. Specifically, I want to enable tab functionality to navigate to my styled select menu just like when clicking tab to cycle ...

Determine the index of a specific character within a string using a "for of" loop

How can I obtain the position of a character in a string when it has been separated programmatically using a for...of loop? For instance, if I wish to display the position of each character in a string with the following loop: for (let c of myString) { ...

Get the object method within an AJAX success callback

Is there a way for me to access the FileUploader.prototype.saveImage() method in my code? Here is an example snippet: function FileUploader(object) { this.checkInputs(object); if (this.isImageSelected()) { this.beforeInit(object); ...

Attempting to showcase the data stored within MongoDB documents on my website's user interface

I am facing difficulties in showing the data stored in my database on the front end of my grocery list app, which is built using the MERN stack. I have a form that successfully sends data to MongoDB and saves it upon submission. In order to retrieve the d ...

Parsing HTML in Python 3: A Guide to Extracting Information

Trying to extract text from a webpage using Python 3.3 and then search for specific strings within that text. When a matching string is found, the goal is to store the subsequent text. For instance, taking this page as an example: and I need to preserve ...

Focusing on a particular iframe

I am currently using the "Music" theme from Organic Theme on my WordPress site and have inserted this code to prevent SoundCloud and MixCloud oEmbeds from stretching the page width: iframe, embed { height: 100%; width: 100%; } Although the fitvid ...

Include a lower border on the webview that's being shown

Currently, the webview I'm working with has horizontal scrolling similar to a book layout for displaying HTML content. To achieve this effect, I am utilizing the scroll function. My inquiry revolves around implementing a bottom border on each page usi ...

Organize information by time intervals using JavaScript

I am currently facing an issue where I need to dynamically sort data from the server based on different fields. While sorting is working flawlessly for all fields, I am encountering a problem with the time slot field. The challenge lies in sorting the data ...

What steps can I take to troubleshoot issues when creating a React app?

While attempting to set up a react application using npx create-react-app projectreact, I encountered the following error message: PS C:\Users\ahnaa\OneDrive\Documents\Web Developent\Reaact JS> npx create-react-app project ...

What is the best way to style the currently selected option element in a select dropdown?

I am trying to change the font color of specific option elements within a select dropdown by adding style="color: #D4D4D4". When I apply this style directly to an option element like <option value="TEST" style="color: #D4D4D4">TEST</option>, it ...

Tips for creating a vintage, weathered font appearance on a web browser

Is it possible to create unique, randomly outwashed letters using a standard font? Instead of relying on pre-designed outwashed fonts available at , I am interested in achieving the same effect with a regular font that appears washed out when displayed in ...

The MuiPrivateTabScrollButton alters the dimensions and flexibility properties using CSS

I have been facing a challenge with overwriting the css of MuiPrivateTabScrollButton. Since this class is generated from material ui, I am unable to successfully overwrite it. Despite debugging and trying various fixes such as adding border colors, I still ...

I am facing an issue where my AngularJS code is not executing properly on JSF

I'm trying to clear the text inside a textarea using AngularJS after typing and clicking on a button. Here's the link to the fiddle for reference: http://jsfiddle.net/aman2690/2Ljrp54q/10/ However, I keep encountering the following error messag ...