How can I hide a div when my webpage is viewed in Lynx?

Question

My website has a div element (in form of a block) that I want to make invisible whenever a user visits the website through a text based browser like Lynx, that doesn't support JavaScript.

Basically what command or code do I need to write in order for this to happen?

Constructionist

Answer 1

Since you can't run javascript there, you have to not send that div in the first place for it to be invisible in the text-mode browser.

You can make a server side user-agent check and do not render that div. Lynx user agents: http://www.useragentstring.com/pages/Lynx/

Illyricum

Answer 2

You can set the div invisible by default.
and make it visible in your js code.
Thus it'd not appear on a text-mode browser.

Eye

Easy and simple. Now, why didn't I think of this? Thank you! – Constructionist

This doesn't work. Lynx actually reveals hidden HTML elements. Back to the problemsovling! Thanks for the suggestion anyway. – Constructionist

Answer 3

To jump in more than 10 years after the original question was asked: apparently, text-only browsers with no JavaScript support are hard to kill.

The accepted answer with server-side user-agent checks works when considering Lynx alone, but there are other text browsers besides Lynx, and 'regular' browsers might also have JavaScript disabled.

The general approach would be to show a no-JavaScript version of a page to everyone and then insert HTML tags via JavaScript in browsers that do support it. Now, I prefer to keep my JS code clean and not mix it too much with HTML, especially for this infrequent purpose. So, I am using the following (in HTML file):

<!-- This template holder div is shown to everyone, but it's empty -->
<div id="template-holder"></div>

<!-- This template is parsed only by browsers with JS support -->
<script id="template" type="text/html">

    <!-- This is the div you want to hide from browsers without JS support -->
    <div id="hide-me">...</div>

</script>

<!-- Use JS (where available) to insert the template into the template holder -->
<script>
    document.getElementById("template-holder").innerHTML =
        document.getElementById("template").innerHTML;
</script>
<!-- We're done! -->

This way all HTML code stayed in the original file, and we kept our original JS code intact.

Leech