I'm struggling to add a moving bar to my website's navigation and need some help. I tried following a tutorial at the following link: (http://css-tricks.com/jquery-magicline-navigation/)
Here is what I ended up with:
If anyone could take a look and let me know what went wrong, I would greatly appreciate it.
Thank you so much! -Matt
One issue is that the CSS is missing for the #magic-line because there is a selector named #MagicLine in the CSS file.
Another problem is that the .hover() selector is not correct. It should bind the hover event to the child <a> tags of the menu items
$("#example-one li a").hover(function() {$("#navMagicLine li a").hover(function() {Fixing these issues may resolve the menu problem, but I would suggest reviewing example code or creating your own demo to troubleshoot. Creating a demo in jsFiddle or another site often helps clarify the issue :-)
Edit:
Furthermore, your CSS still does not match the demo. The list items should have display:inline-block, otherwise jQuery cannot calculate the .width(). Inline elements do not have width (or height).
The CSS should be:
#navMagicLine li {
display: inline-block;
}
The .hover() should be on the <a> of your menu, not on the dynamic line. It should be:
$("#navMagicLine li a").hover(function() {
// function body
})
Seeking assistance with integrating jQuery into AngularJS for a project. I am relatively new to AngularJS and experiencing difficulty in firing jQuery on Dom Ready. Despite various attempts, the code does not seem to work as expected. I am currently using ...
How can I execute a function when the user submits a form using an external JavaScript file? index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>example</title> ...
After loading the grid, I'm attempting to trigger a click on the first cell. However, despite my knowledge of how to achieve this, the "loadComplete" event isn't firing as expected. I added a simple function with an alert for testing purposes, bu ...
I'm encountering an issue where my CSS code is not rendering in the browser, and it seems to be related to MIME types (which I'm not familiar with). I am using EJS as a template engine. The error I see in the console is... Refused to apply sty ...
I'm having an issue passing an array from my .js file to a PHP file. In JavaScript, the array is structured as follows: theBlock[0 - 79] with color, x, and y values. For example, theBlock[10].color or theBlock[79].x The data is sent using the follow ...
I created a basic menu using an unordered list: <ul class="courses"> <a href="#"> <li class="spinny"> <h3>Course Title</h3> <img class="rotateme" src="images/logo_transparent.png"/> </li& ...
I have a table that I'm populating with data from a firebase database using the append() function. $("#table_body").append("<tr><td>" + name + "</td>" + "<td>" + brand + "</td>" + ...
A chatbot I created using Microsoft Bot Framework has been integrated into my website through DirectLine: <div id="chatbot_body"></div> <script src="https://unpkg.com/botframework-webchat/botchat.js"></script> <script> ...
In developing an interactive infographic, I am working with three integers assigned to variables, each ranging from 0 to 50000. These numbers often have values that are close to each other, and I am looking for a way to identify when either 2, all 3, or no ...
I've been going through various jQuery ajax tutorials and trying to integrate it with my Play! app, but I'm having some difficulty understanding certain aspects. Can someone please guide me on how to perform the following tasks using Ajax calls: ...
Is it possible to calculate a date-time interval in MySQL when the format is "Sunday 31 January 2016 - 00:55" and not in TIMESTAMPDIFF format? Any suggestions on how to achieve this? I have been using a jQuery script to select dates and times from this pl ...
I'm currently developing a Django App on Heroku and I need to be able to temporarily store something on my dyno there. From what I've gathered, this can be achieved by using a workaround involving the /tmp/-folder in the root directory of the dyn ...
To enhance our user experience, we are tasked with creating a captivating screen saver featuring 3 images. The bottom image will remain fixed in its position. The middle image should move across the screen. Lastly, the top image will move at a faster ...
After extensive effort, I have been diligently striving to create a solution that allows a table's column headers to scroll with the body horizontally and the first column to scroll with the rows vertically. While I've come across solutions that ...
I am currently working on a feature where hitting the Enter key in a textbox should not automatically submit the form. The textbox is located within a form: @Html.TextBoxFor(model => model.ID, new { @class = "form-control input-sm", placehold ...
I created a 960 layout using 3 divs to easily organize child divs with images and text. However, I'm having trouble getting the background image of the first div to display. Can you help me figure out what I'm doing wrong? This is the concept f ...
Welcome to my website: Is there a way to hide the button on mobile phones? I want to create different buttons specifically for mobile devices. Below is the HTML code for the buttons. HTML <a href="http://site9171756.91.webydo.com/Info.html" target="p ...
Currently, I am working on developing a responsive drawer in React using mui v5. In the set-up, the minimum width of the drawer is defined as 600px when it expands to full width. However, an issue arises when the screen exceeds 600px - at this point, the d ...
Curious about the incorporation of PHP in CSS, especially in relation to my current Wordpress Theme project. I am aiming for high levels of customization and have been using a JS file to change CSS Properties through PHP. However, I'm not entirely con ...
Having trouble with AJAX? Let me show you my approach to making a POST request to my RESTful service using AJAX: var lat = marker.getPosition().lat(); var lng = marker.getPosition().lng(); //xmlhttp.open("GET","http://192.168.1.100:8080/MapDemo/serv ...