Question

I have been researching and learning more and more about HTML 5, jQuery, CSS3, and the power of hiding and disabling certain elements when JavaScript is or is not disabled. (<noscript> tags)

My questions are,

1. How do I make a hyperlink ONLY work if JavaScript is DISABLED?
2. If JavaScript is enabled, how do I make sure that my drop-down login menu displays INSTEAD of following the hyperlink?

HTML

Simple enough, I hide my cart area and change the login link if the JS is disabled.

<!-- If JavaScript is disabled it will make the login link take you to a login page instead of a drop-down box. -->         
<noscript>
    <style>
        .login-form, .js-enabled{
            display: none;
        }
        .cart{
            top: -80px;
        }
    </style>                                
    <div class="cart">
        <a href="#" id="cart_img">
            <img src="img/bag.jpg" alt="Check Cart"
            onmouseover="this.src='img/bag-gold.jpg'"
            onmouseout="this.src='img/bag.jpg'">
        </a>
        <a href="#">Why HorseTack?</a> | 
        <a href="#">About</a> | 
        <a href="#">Contact</a> | 
        <a href="http://www.LOGINPAGELINK.com">Login</a>
    </div>
</noscript>
<!-- End JavaScript text -->

<div class="cart js-enabled">
    <a href="#" id="cart_img">
        <img src="img/bag.jpg" alt="Check Cart"
        onmouseover="this.src='img/bag-gold.jpg'"
        onmouseout="this.src='img/bag.jpg'">
    </a>
    <a href="#">Why HorseTack?</a> | 
    <a href="#">About</a> | 
    <a href="#">Contact</a> |                           
    <a href="#" class="login-box">Login</a>
        <div class="login-form">
            <form class="login-frm">
                <label><input type="text" placeholder="Username"></label>
                <label><input type="password" placeholder="Password"></label><br>
                <input type="submit" value="Login"><br>
                <a href="#">New User?</a>
            </form>
        </div>
</div>

JQuery

This makes the login-box slide down (just to avoid taking people to a login page unless they have to)

    // Login Box Pop-Up
jQuery(document).ready(function() {
    jQuery(".login-form").hide();
    //toggle the componenet with class msg_body
    jQuery(".login-box").click(function()
    {
    jQuery(this).next(".login-form").slideToggle(500);
    });
});

What I would like instead of having that <noscript> tag and the content duplicated, just a way for the hyperlink to only work when there is no JavaScript.

I have already set the page up to let users know when their JS is disabled (like Stack Overflow has done)

Any questions about my question (hopefully I wasn’t vague?) ask!

Answer 1

How do I make a hyperlink ONLY work if JavaScript is DISABLED?
If JavaScript is enabled, how do I make sure that my drop-down login menu displays INSTEAD of following the hyperlink?

Write a JavaScript function that causes the menu to be displayed. Make sure that it captures the first argument (which will be the event object).

Bind the function to the link as an event handler.

Call preventDefault() on the event object.

function (event) { /* display menu then ... */ event.preventDefault(); }

---

<noscript> tags

There are almost always the worst solution to a problem. Be progressive and unobtrusive.