CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2806656
user2806656

Reputation: 59

.css jquery attribute not applying css to div tag

i've created a function to get the pathname of the webpage and if it matches the id of the menu item then it will add a css property to the div tag, showing the div as current page. heres the website im testing on: http://kwp.host22.com. im using alerts to check that variables are correct. heres my html.

<div id="navigation">
        <a href="index.html"><div class="navblocks" id="index.html"><p>Home</p></div></a>
        <a href="cleaning.html"><div class="navblocks" id="cleaning.html"><p>Cleaning</p></div></a>
        <a href="contact.html"><div class="navblocks" id="contact.html"><p>Contact Us</p></div></a>
    </div>

and heres my jquery:

var path = window.location.pathname;
        if(path === "/")
            {
            var pathname = path.replace("/","index.html");
            }
        else
            {
            pathname = path.replace("/","");
            }
        alert("pathname = " + pathname);
        var id = "#" + pathname;
        alert("id = " + id);
        $('a').each(function() 
            {
            var href = $(this).attr("href");
            alert("href = " + href);
            if (href === pathname)
                {
                $(id).css('box-shadow','0px 0px 20px inset');
                }

but its not applying the box shadow to the div tag.

any help would be appreciated im still learning jquery. thanks

Upvotes: 2

Views: 1037

Answers (3)

Daniel West
Daniel West

Reputation: 1808

The issue appears to be with the ids that you are using such as #index.html and #cleaning.html to select the correct DOM element. This is incorrect and you should really be just using #index and #cleaning as these are valid IDs (using . in an ID is illegal HTML/XHTML).

One way of getting around this could be to split the id like this so you can then just use the html filename rather than including the file extension:

 var path = window.location.pathname;
        if(path === "/")
            {
            var pathname = path.replace("/","index.html");
            }
        else
            {
            pathname = path.replace("/","");
            }

        pathname = pathname.split(".");
        var id = "#" + pathname[0];

        alert("id = " + id);
        $('a').each(function() 
            {
            var href = $(this).attr("href");
            alert("href = " + href);
            if (href === pathname)
                {
                $(id).css('box-shadow','0px 0px 20px inset');
                }

Now you will be using #index rather than #index.html as the file extension has now been removed. The code that I have added to do this is:

pathname = pathname.split(".");
var id = "#" + pathname[0];

Source: http://www.w3schools.com/jsref/jsref_split.asp

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128791

The problem is the . within your id. You need to escape this in order for jQuery to read it as an ID and not an ID followed by a Class selector:

id = "#index\\.html"

For this you can use:

var id = "#" + pathname.replace('.', '\\\.');

If we test this within the JavaScript console on your page, we get the following result:

Working Example

Upvotes: 2

dave
dave

Reputation: 64657

The issue is that jQuery will interpret the id "#index.html" as "an element with id index and class html". You need to not use a dot in your id for this to work, or escape the dot.

Alternatively, you could do an attribute selector, something like:

$("[href='"+pathname+"']").find('.navblocks').css('box-shadow','0px 0px 20px inset');

Which would be a lot less work overall

Upvotes: 3

Related Questions