Exploring the realms of HTML 5, jQuery, CSS3, and the concept of manipulating elements based on JavaScript's state (<noscript> tags).
In my quest for knowledge, I have two burning questions:
- How can I ensure a hyperlink functions ONLY when JavaScript is DISABLED?
- If JavaScript is enabled, how do I make sure that my drop-down login menu shows INSTEAD of redirecting through the hyperlink?
HTML
A simple approach involves hiding the cart area and modifying the login link depending on JavaScript's status.
<!-- In case JavaScript is disabled, the login link directs users to a login page rather than displaying 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
To prevent sudden redirects to a login page, utilizing a sliding login-box may be an elegant solution.
// 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);
});
});
Taking steps further than Stack Overflow to indicate if JavaScript is disabled, my ultimate goal is for the hyperlink to strictly function without JavaScript involvement.
If any aspects seem unclear, or you require more details regarding my query, feel free to ask!