Is hyperlink creation only using JavaScript JavaScript disabled?

Question

I learn and learn more and more about HTML 5, jQuery, CSS3 and the ability to hide and disable certain elements when JavaScript is disabled or not disabled. ( <noscript> tags)

My questions:

• How to create a hyperlink ONLY if JavaScript is disabled?
• If JavaScript is enabled , how can I make sure the INSTEAD menu of the next hyperlink is displayed in my login menu ?

HTML

Simple enough, I hide my cart area and change the login link if 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 leads to the fact that the slide-in window for logging in (down, so as not to bring people to the login page if they are not needed)

  // 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 a <noscript> and duplicate content, is just to make the hyperlink work only when there is no JavaScript.

I already set the page so that users know when their JS is disabled (e.g. Stack Overflow)

Any questions about my question (hope I wasn’t vague?) Ask!

Answer 1

How to create a hyperlink ONLY if JavaScript is disabled? If JavaScript is enabled, how can I make sure my login popup menu displays INSTEAD by following the hyperlink?

Write a JavaScript function that invokes a menu display. Make sure 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

Almost always the worst solution to a problem. Be progressive and unobtrusive .

Answer 2

You can show the link, and if javascript is enabled, hide it.

Answer 3

You can put the link inside the div, and if JS is enabled, remove the link and put the event in that div Like:

 <div class="link-holder"> <a href="page.html">Link</a> </div> 

And jQuery:

 $(document).ready() { $('.link-holder').text('').click(function(){ displayLogin(); //assuming displayLogin() has your function to, well, display the login }); }