Search code examples
javascriptcssasp.nethref

Href in <a> not working properly

I am having some issues with the href's on my web page. When the page loads, I check the screen width, and if it is small enough for mobile I am changing the href of the tags in the header. Here is what the javascript looks like.

$(function () {
    var hrefs = [$('#BTN_Services').attr('href'), 'http://jdcservices.ca' + '#mobileServices'];

    $(window).on('resize', function () {
    $('#BTN_Services').attr('href', function () {
        return hrefs[$(window).width() > 1240 ? 0 : 1];
    });
    }).trigger('resize');
}

This is the code that changes the href from the /Services.aspx page to the #mobileServices div.

Below is my header that I am changing. 

<a href="#" id="logo"></a>

<nav>

    <a href="#" id="menu-icon"></a>

    <ul>

        <li><a id="BTN_Home" href="/Index.aspx" class="current">HOME</a></li>
        <li><a href="/Safety.aspx">SAFETY</a></li>
        <li><a id="BTN_Services" href="/Services.aspx">SERVICES</a></li>
        <li><a href="/Careers.aspx">CAREERS</a></li>
        <li><a href="/Contact.aspx">CONTACT</a></li>

    </ul>

</nav>

</header>


<div id="mobileServices"  style="width: 100%; padding-bottom: 5%;">
        <div class="row" style="padding-bottom: 5%;">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h1 style="text-align: center; font-weight: bold;">Services</h1>
                <hr width="75%" />
                <p>
                    Based in Hinton, AB and servicing Hinton, Edson, Grande Cache, and Fox Creek area, JD&C Services has grown and adapted to meet the needs of its clients with a team of highly skilled individuals.  We strive to perform our jobs in an efficient, safe, and environmentally responsible manner exceeding the expectations of our customers.
                </p>
            </div>
        </div>
        <div class="row" style="text-align: center; height:100%; overflow: hidden;">
            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 sameHeight" style="background-color: #421C4C; color:white;  vertical-align: middle; padding-top: 4%; padding-bottom: 2%;">
                <h2><i class="fa fa-truck"></i>&nbsp;&nbsp; Tank Truck Services</h2>
                <hr width="75%"/>
                <p>
                    - Sour sealed tank truck services
                    <br />
                    - Body jobs
                    <br />
                    - Tri-Tri's
                    <br />
                    - Super B's
                    <br />
                    * All trucks are equipped with GPS tracking hardware.
                </p>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 sameHeight" style="background-color: white; color:black;  vertical-align: middle; padding-top: 2%; padding-bottom: 2%;">
                <h2><i class="fa fa-database"></i>&nbsp;&nbsp;Product Sales</h2>
                <hr width="75%"/>
                <p>
                    - KCL sales
                    <br />
                    - Clay stabalizer
                    <br />
                    - Hot and cold water sales
                    <br />
                    - Kill fluid
                </p>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 sameHeight" style="background-color: #421C4C; color:white; vertical-align: middle; padding-top: 2%; padding-bottom: 4%;">
                <h2><i class="fa fa-road"></i>&nbsp;&nbsp;Portable Filter Units</h2>
                <hr width="75%"/>
                <p>
                    Portable filter units are available for delivery and rental. Various micron filters are available.
                </p>
            </div>
        </div>
        <br />
    </div>

So from what I can inspect inside google chrome, is that the href is changing as expected, but the href will still not take me to the correct div. I am not sure what I am doing, maybe it is something preventing it in my CSS?

Here is the site that I am working on

Solution

  • What I can tell from your website is that you're using JavaScript to navigate pages using Ajax (with a flashy animation). I'm guessing that code is callling preventDefault on the event preventing the default action, which is not what you want in this case.