pointing out the existing issues with the menu

I am struggling to figure out why I cannot highlight the current menu page on a navigation bar (aside from the fact that I am a complete beginner :-) I have tried using a JQuery function that I found online, but none of them seem to work. Here is the function:

<script type="text/javascript">
    $(function(){
        var path=window.location.pathname;
        path=path.replace(/\/$/, "");
        path = decodeURIComponent(path);

        $('#menu a').each(function() {
            var href=$(this).attr('href');
            if (path.substring(0, href.length) === href) {
                $(this).closest('li').addClass('active');
            }

        });

    });
</script>

Here is my CSS:

@charset "UTF-8";
/* CSS Document */

#menu{ width:100%; height:40px; background-color: pink; border-bottom: 1px silver solid;}

#menu ul {

    list-style: none;
    margin:0 auto; 
    position: relative;
    padding:5px 0;
    width: 940px;
}

#menu ul li {
    display:inline;
    margin-left: 150px;

          }

#menu li:first-child {
  margin-left:0;
    }         

#menu ul li a {
  color: silver;
  display:block-inline;
  font: 16px "Comic Sans MS", cursive;
  text-align: center;
  text-decoration: none;  
        }


#menu ul li a:hover {
  background-color: yellow;
  text-decoration:underline;
}
.active{
    color:green;
    }

The HTML markup looks like this:

<?php
echo<<<END

    <div id="menu">
                    <ul>
                    <li><a id="home" style="color:white; font-size:16px;" href="$doc_root/index.php" title="Home Page">Enzo</a></li>
                    <li><a id="travel" href="$doc_root/travel/grid.php" title="My Trips"><span>travelling</span></a></li>
                    <li><a id="images" href="#">images</a></li>
                    <li><a id="words" href="#">words</a></li>
                    <li><a id="about" href="#">about</a></li>
                    </ul>
            </div>  
END;
?>

I am unsure what is causing the issue, it could be related to my CSS. I have simplified it to just include the color green for now, and I'm not certain if the "active" class is properly inserted into the CSS menu page. Any hints or alternative solutions would be greatly appreciated. Sending love to all! :-)

jquerycssmenuhighlight

Answer №1

Make sure to verify that the $root_dir, which I assume is a PHP variable, follows this format:

<?=$root_dir?>

If you don't have short open PHP tags enabled, you can use:

<?php echo $root_dir; ?>

This ensures that it displays correctly in the HTML. If you inspect the page source and see $root_dir instead of the variable's value, that could be the cause of the issue.

Answer №2

It appears that there have been some adjustments made to your code

Updates in Javascript:

 $(function () {
            var path = window.location.pathname;
            path = path.replace(/\/$/, "");
            path = decodeURIComponent(path);

            $('#menu a').each(function () {
                var href = $(this).attr('href');
                if (href.indexOf(path) != -1) {
                    $(this).closest('li').find('a').addClass('active');
                }

            });

        });

Changes in CSS:

#menu ul li a {    
  display:block-inline;
  font: 16px "Comic Sans MS", cursive;
  text-align: center;
  text-decoration: none;  
        }

Adjusted HTML:

<div id="menu">
            <ul>
                <li><a id="home" href="http://localhost:50160/SelectedMenu.aspx" title="Home Page">Enzo</a></li>
                <li><a id="travel" href="#" title="My Trips"><span>travelling</span></a></li>
                <li><a id="images" href="#">images</a></li>
                <li><a id="words" href="#">words</a></li>
                <li><a id="about" href="#">about</a></li>
            </ul>
        </div>

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

Error encountered in Webpack 4 when trying to compile node modules CSS file: Unexpected .(dot) token

I am currently in the process of transitioning my React project from client-side rendering to server-side rendering. Unfortunately, I have encountered an issue with my webpack configuration for CSS that was working perfectly fine in my original project (c ...

cssreactjswebpackreact-ssr

What is the process for incorporating icons and choices into the header bar?

Seeking advice on how to incorporate an icon into the right side alignment of a simple blank header on my webpage, similar to the image provided. I have searched through numerous threads on StackOverflow without finding a suitable solution. Could someone s ...

jqueryhtmlcss

Attempting to allocate the overall quantity of outcomes from the JSON query

I am currently utilizing jQuery to execute a JSON data request that retrieves items based on a search query. My main objective is to showcase the total number of results on the page. Here's my process when the search returns success: if(data){ va ...

jqueryjson

An AJAX function nested within another AJAX function

Is there a way for me to return the second ajax call as the result of the ajax function? I could use some assistance with this. function ajax(url: string, method:string, data:any = null) { var _this = this; return this.csrfWithoutDone().done(funct ...

javascriptjqueryajax

Is there a way to create a PHP function that can process an AJAX request and return a boolean value?

After some testing, I discovered that when the code snippet below is executed within my PHP function to manage an AJAX call: session_start(); if ( $_POST['animal'] != $_SESSION['animal'] ) die(json_encode(false)); Upon returning to th ...

javascriptphpjqueryajax

Steps for removing a chosen file from several input files by clicking a button

Within my application, there is an input file that displays a list of selected files underneath it. Each of these selected files has a corresponding remove button. While I am able to successfully remove a single file with ease, I struggle when attempting t ...

javascriptjqueryfilefilelist

Tips for Successfully Passing Personal Parameters Using Html.BeginForm

I am looking to pass some additional parameters from my MVC Form to the Controller. Can anyone provide guidance on how to accomplish this? Specifically, I want to pass parameters for StateName and CityName with values from the form so that I can retrieve t ...

jqueryasp.net-mvchtmlasp.net-mvc-4

I am experiencing issues with the functionality of the Search Button in my code

I am experiencing an issue with the Search Button in my Search Form. I created the Search form using only html and pure CSS to test whether JS is necessary for a Search form with Drop Down Filter! Do I need to incorporate some JS code or is it feasible to ...

htmlcss

Changing the name of a specific attribute in a JSON Object for showcasing it in an HTML Table

Suppose I have fetched a list of objects from a database: [{ "id":0 ,"name":"John", "lastname":"Shell" },{ "id":1,...]; and want to display this data using the dynatable plugin: data : JSON.stringify(data) success: function(data,status){ $( ...

javascripthtmlcssjsondynatable

Optimal strategies for initializing Knockout JS models from backend code

Upon taking over a website that utilizes knockout js and asp.net, I noticed some performance issues during the initial page load. After investigating, I found that there are approximately 20 models on the site, each making an ajax call to retrieve data fro ...

javascriptjqueryasp.netajaxknockout.js

Using the AJAX post method to generate a JSON object from database results and send it back to a jQuery UI Dialog

I wrote a script that loads sample images from the database based on the relevant category when the page loads. Here's a simplified version of the PHP script: <?php $category = 'granite'; $samples = 'SELECT * FROM material WHERE ma ...

phpjavascriptjqueryjsonjquery-ui

Ways to display certain JSON elements

I'm attempting to retrieve a specific part of a JSON file through AJAX and display it in an HTML div. I only want to show a certain object, like the temperature. Here is the AJAX code: $(function () { $.ajax({ 'url': 'http://ap ...

javascripthtmljqueryjsonajax

Floating color problem

Do you know why the social icons turn black when hovered over? Could it be related to the navbar buttons? Is there a way to change the hover color to blue or red only? Link to code snippet <body> <nav class="navbar navbar-default navbar-fixed-t ...

htmlcsstwitter-bootstrap-3

Accessing the parent div in an Ajax success function

I am looking for a solution to hide a parent div when a link is clicked and an ajax call is successfully made. I have tried placing the hide() function within the success part of the ajax call, but it seems to not work: $('.mylink').click(functi ...

javascriptjqueryajaxjquery-animate

Employing state management in React to toggle the sidebar

A working example of a sidebar that can be toggled to open/close using CSS, HTML and JavaScript is available. Link to the Example The goal is to convert this example to React by utilizing states instead of adding/removing CSS classes. To ensure the side ...

javascripthtmlcssreactjs

Unexpected color changes when hovering over sparkline graphs

One of the jquery plugins I'm using is called sparkline Here's an example of how I am using it: $(function(){ $("#sparkline5").sparkline([2, 8, 10, 22], { type: 'pie', height: '140', sliceColors: [ ...

javascriptjquery

What steps do I need to take to ensure that this Regex pattern only recognizes percentages?

I am attempting to create a specific scenario where I can restrict my string to three digits, followed by a dot and two optional digits after the dot. For example: 100.00 1 10.56 31.5 I've developed a regex pattern that allows me to filter out any ...

javascriptjqueryregexstring

The aesthetic of react-bootstrap and material ui aesthetics is distinctive and visually appealing

As I develop my web application, I have incorporated react-bootstrap for its React components based on Bootstrap. However, wanting to give my project a customized look inspired by Material design, I came across bootstrap-material-design. I am curious if I ...

cssreactjsmaterial-designmaterial-uireact-bootstrap

Choosing between radio buttons either horizontally or vertically within a table

Here is the markup I am working with: <table> <tr> <td><input type="radio" name="radio"></td> <td><input type="radio" name="radio"></td> <td><input type="radio" name="radio"></ ...

javascripthtmlcssradio-button

How to properly format credit card input using JavaScript or jQuery

I need to implement a feature where users input their credit card information, and once they complete the form, I want to display the credit card number in this format: xxxxxxxxxxxx1111 or xxxx-xxxx-xxxx-1111, without altering the actual input value. Is ...

javascriptjqueryhtmlinput