Hello there, I am a crucial part of a webpage that is designed to only display if javascript is enabled.
I have experimented with two different methods:
Method 1: Initially, I set the class to display: hidden; and then modify it if javascript is functioning properly by overriding it...
<script type="text/javascript>
//<![CDATA[
$(document).ready(function() {
document.getElementById('only-show-if-js-enabled').style.display = 'block';});
//]]>
</script>
and additionally,
Method 2: I alter the id to one that has its display property set as block (or auto)...
<script type="text/javascript>
//<![CDATA[
$(document).ready(function() {
$("#js-not-enabled").attr('id', 'js-enabled');
});
//]]>
</script>
Unfortunately, both methods appear to disrupt the actual formatting of the page. The first method ignores my CSS instructions for list style none, while the second doesn't respect the overflow:hidden setting.
What could possibly be causing this issue?
UPDATE: In a moment of embarrassment, I discovered that I had mistakenly set overflow to auto instead of hidden. My apologies for the confusion.
I appreciate both responses though, as they offered valuable insights into best practices. Thank you!