phdphd Posted December 21, 2012 Share Posted December 21, 2012 Hi All, I have a series of titles to which detailed info is associated, as well as a button that allows to display this info, then to hide it. By default, detailed info is hidden. The problem is that if javascript is disabled, only the titles display, with no means for the user to display detailed info. I would like detailed info to display by default if JS is not enabled on the user's PC. I unsuccessfully tried to find a way to automatically modify the 'display:none' setting of the div section of the detailed info when JS is disabled. Thanks for you help. Quote Link to comment Share on other sites More sharing options...
codefossa Posted December 21, 2012 Share Posted December 21, 2012 Show what you've got so far? Also, show the HTML so we can see how it's all set up. Quote Link to comment Share on other sites More sharing options...
phdphd Posted December 21, 2012 Author Share Posted December 21, 2012 (edited) Here is the complete code. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Display/Hide div in javascript</title> <script> function display_hide(id) { if(document.getElementById(id).style.display=="block") { document.getElementById(id).style.display="none"; document.getElementById('button_'+id).value='+'; } else { document.getElementById(id).style.display="block"; document.getElementById('button_'+id).value='-'; } return true; } </script> <noscript><style>donotdisplay { display:none; }</style></noscript> </head> <body> <br />Title1<donotdisplay> <input type="button" id="button_text1" onclick="javascript:display_hide('text1');" value="+" /></donotdisplay><div style="display: none" id="text1" > Detailed info related to title1</div><br />Title2<donotdisplay> <input type="button" id="button_text2" onclick="javascript:display_hide('text2');" value="+" /></donotdisplay><div style="display: none" id="text2" > Detailed info related to title2</div><br />Title3<donotdisplay> <input type="button" id="button_text3" onclick="javascript:display_hide('text3');" value="+" /></donotdisplay><div style="display: none" id="text3" > Detailed info related to title3</div><br />Title4<donotdisplay> <input type="button" id="button_text4" onclick="javascript:display_hide('text4');" value="+" /></donotdisplay><div style="display: none" id="text4" > Detailed info related to title4</div> </body> </html> I tried to use a <noscript></noscript> tag with some php in it to clear style="display: none" but this does not work. Thanks Edited December 21, 2012 by phdphd Quote Link to comment Share on other sites More sharing options...
kicken Posted December 21, 2012 Share Posted December 21, 2012 Do not set display:none in your CSS at all. Apply that style later with JS after the dom has loaded. One generic way to accomplish this is to define a css class called .has-js or similar which gets applied to the body on dom ready, then use that to apply your hidden styles. for example: <style type="text/css"> .has-js .hide-if-js { display: none; } </style> <script type="text/javascript"> //Use jquery to run a function on dom ready and add the has-js class. $(function(){ $('body').addClass('has-js'); }); </script> <div> <h1>Some title here</h1> <p class="hide-if-js">blah blah blah</p> </div> With the above, the P tag will only get the display:none if one of it's parent's has the .has-js class applied to it. The .has-js class will then be applied to the body tag, but because it is applied via JS, it is only applied if JS is enabled. Quote Link to comment Share on other sites More sharing options...
phdphd Posted December 22, 2012 Author Share Posted December 22, 2012 Hi Kicken, Thank you for your quick reply and solution. However, as shown below I enclosed the div section between the html "body" tags to make P a child of Body and it still does not work. <html> <head> <title>Untitled</title> <style type="text/css"> .has-js .hide-if-js { display: none; } </style> <script type="text/javascript"> //Use jquery to run a function on dom ready and add the has-js class. $(function(){ $('body').addClass('has-js'); }); </script> </head> <body> <div> <h1>Some title here</h1> <p class="hide-if-js">blah blah blah</p> </div> </body> </html> I am quite new to JS. There must be something obvioulsy wrong/missing to gurus that I am still not aware of . I would much appreciate your help again. Thanks. Quote Link to comment Share on other sites More sharing options...
codefossa Posted December 22, 2012 Share Posted December 22, 2012 (edited) It does work, but you didn't include jQuery. The example he gave: http://xaotique.no-ip.org/tmp/35/ Add the jQuery include in the HEAD. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> You should also wrap your JS in a load trigger function. In jQuery, you can just use $.ready(). $(document).ready(function() { $("body").addClass("has-js"); }); Edited December 22, 2012 by Xaotique Quote Link to comment Share on other sites More sharing options...
Christian F. Posted December 22, 2012 Share Posted December 22, 2012 You need to wait for the document to be ready before running the code to apply the class, otherwise the body-element will not have been created yet. If you're using jQuery, then this is done with the .ready () method. Quote Link to comment Share on other sites More sharing options...
phdphd Posted December 22, 2012 Author Share Posted December 22, 2012 Thank you all. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.