Member Avatar for Violet_82

Hi peeps,
I have a question about accessibility
Now, this is the website I am working on http://antobbo.webspace.virginmedia.com/webediting/tables.htm and my question is about the best way to make sure that people with their javascript off can enjoy the same benefits as those having javascript on and if there is anything in the HTML code/CSS that I can do to achieve that
The above page has few javascripts: the second table and the comment form at the bottom.
Let's start with the box. At the moment it has 2 buttons but I also provided a link at the bottom of the page that has the same functionality of the script, id shows you the table in the box as if it had borders. Now, is there an accessible way that I can somehow display both versions of the table (with and without borders) in the page only to people with javascript off instead of providing a link to another page as I have done? Something like if javascript is off then display the 2 versions of the table in 2 separate boxes - sorry but I really don't know how to implement that.

Pretty mush the same thing for the form at the bottom of every page. If you click on the "comment" button then a form pops up and you can send the comment through. Is there a way that I can say in the code

if and only if javascript's off always display the form

?
Hope that makes sense
thanks

  • 2 Contributors
  • 8 Replies
  • 239 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Violet_82
Member Avatar for Kraai

You can use <noscript>your html things here</noscript> in the body part of your page, but not all browsers are happy with that. There is a workaround in CSS that all browsers understand:

In CSS you write a function that turns the display property to none and call this function with the onload attribute of the body element.

function hidemsg(){
  document.getElementById('jsmsg').style.display='none';}
  ...
<div id="jsmsg">your html things or text comes here</div>

The message between <div> and </div> will appear on a non-script enabled browser or one with scripting turned off

Hope this helps!

Member Avatar for Violet_82

Hi Kraai,
thanks for your suggestion. I tried to put that in action but it doesn't seem to work - I am sure I have done something wrong!
Anyway, here is the page I wanted to apply the above http://www.antobbo.webspace.virginmedia.com/webediting/testing/bold_and_other.htm
I have a box with some content that changes when you click the "bold it!" or "reset" button and I have placed the javascript in the head :

<script type="text/javascript">
<!--
function no_javascript()
{

	document.getElementById('noJava').style.display='none';

}

//-->
</script>

then in the body :

<body onload="no_javascript()">

and finally the div :

<div id="noJava"><p>this should display only when javascript is off!</p>
</div>

but "his should display only when javascript is off!" but that's there all the time. I was even thinking to hide the buttons...
Can't quite get what I have done wrong...sorry
thanks

Edited by Violet_82 because: amending mistake
Member Avatar for Violet_82

Apologies...it works, I will do some more testing before posting again

Member Avatar for Kraai

cool, glad you got solved, can you please mark this thread as solved, so other users with same kind of problem will know to look at this one.

Member Avatar for Violet_82

Kraai, yes it works fine, thanks for the advice. There is only one thing though that I don't understand. When I applied your trick I also decided to hide the buttons (which makes sense because if javascript is off they won't work) but I had a side effect and I am not sure how to amend that.
Have a look at the buttons under the box here http://www.antobbo.webspace.virginmedia.com/webediting/bold_and_other.htm they are one next to the other one but when I changed the code slightly to hide them in here http://www.antobbo.webspace.virginmedia.com/webediting/testing/bold_and_other.htm
they are one below the other one, and it is driving me crazy because I don't seem to be able to fix this...how is that?
thanks

Member Avatar for Kraai

I'm not sure, on the one you hide the buttons, it seems that you have some funny html like extra paragraph plus linebreak between:

</div><!--END OF BOX -->
[B]<p><br></p>[/B]

See what happens if you take it out, or some of it out.

Member Avatar for Violet_82

no that's just to add a line break. Basically if javascript is off there will be 2 boxes appearing on the page: one - which is there even when javascript is on - and the other one. The

<p><br></p>

simply adds a space between the two.
The problem with the 2 buttons happened straight away after I included the code to hide them when javascript is off.
The original code - with no problems to the buttons - is the following.
javascripts:

...
function changeBold()
{
	document.getElementById('bold_right').style.display='none';
	document.getElementById('bold_wrong').style.display='block';
}

function resetBold()
{

document.getElementById('bold_wrong').style.display='none';
document.getElementById('bold_right').style.display='block';
	
}
//-->
</script>

<!--WHEN USERS HAVE JAVASCRIPT OFF -->
<script type="text/javascript">
<!--
function no_javascript()
{

	document.getElementById('noJava').style.display='none';


}

//-->
</script>

</head>
<body onload="no_javascript()">
...

and the div :

...<div class="box">
<div id="bold_right">
<h1>Bolded paragraph</h1>
<p><br><strong>bla bla bla</strong> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla <strong>bla bla bla</strong> bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
</div>
<div id="bold_wrong" style="display:none;">
<h1>Bolded paragraph</h1>
<p><br><strong>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </strong></p>
</div>

</div><!--END OF BOX -->

<div class="box" id="noJava"><h1>Bolded paragraph</h1>
<p><br><strong>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </strong></p>
</div>


<input type='button' onclick='changeBold()' value='Bold it!'>
<input type='button' onclick='resetBold()' value='Reset'>
...

This code is in http://www.antobbo.webspace.virginmedia.com/webediting/bold_and_other.htm

This code instead is for hiding the buttons when somebody has javascript off and here's when things go wrong with the alignment of the buttons:

...
function changeBold()
{
	document.getElementById('bold_right').style.display='none';
	document.getElementById('bold_wrong').style.display='block';
}

function resetBold()
{

document.getElementById('bold_wrong').style.display='none';
document.getElementById('bold_right').style.display='block';
	
}
//-->
</script>

<!--WHEN USERS HAVE JAVASCRIPT OFF -->
<script type="text/javascript">
<!--
function no_javascript()
{

	document.getElementById('noJava').style.display='none';
	document.getElementById('bold_the_text_button').style.display='block';
	document.getElementById('reset_the_text_button').style.display='block';

}

//-->
</script>

</head>
<body onload="no_javascript()">

...

and the div 

...
<div class="box">
<div id="bold_right">
<h1>Bolded paragraph</h1>
<p><br><strong>bla bla bla</strong> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla <strong>bla bla bla</strong> bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
</div>
<div id="bold_wrong" style="display:none;">
<h1>Bolded paragraph</h1>
<p><br><strong>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </strong></p>
</div>

</div><!--END OF BOX -->
<p><br></p>
<div class="box" id="noJava"><h1>Bolded paragraph</h1>
<p><br><strong>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </strong></p>
</div>


<input type='button' id='bold_the_text_button' onclick='changeBold()' value='Bold it!' style='display:none'>
<input type='button' id='reset_the_text_button' onclick='resetBold()' value='Reset' style='display:none'>
...

this is available here: http://antobbo.webspace.virginmedia.com/webediting/testing/bold_and_other.htm

I hope it is clearer now :)

Edited by Violet_82 because: forgot the url
Member Avatar for Violet_82

Ok I think I cracked it! Still don't know the reason why the two buttons are not on the same line, but if I put both in a div give it an id , hide it as a default and then display it using javascript, the two buttons are back on the same line.
here's the code for the text and buttons:

...
<!--THIS BOX WILL BE DISPLAYED ONLY TO USERS WITH JAVASCRIPT OFF-->
<div class="box" id="noJava"><h1>Bad usage of bold</h1>
<p><br><br>Headings are often not given the right importance...and the right order either.<br><br>
<strong>In Livelink you will find 3 styles: Heading 1, Heading 2 and Heading 3</strong>. Use them. <strong>Search engines use them to rank the pages so try to get them right and make sure they are descriptive enough.</strong><br><br>
The <strong>order you use them is also important. Heading 1 should come first, followed by Heading 2 and Heading 3. </strong>Generally speaking <strong>Heading 1 is the main heading on your page; Heading 2 is the "main sections" heading(which means that you can have as many Headings 2 as you need for as many main sections you have) and Heading 3 is for the subsections of the main sections</strong> (again you can use as many Heading 3 as you need for as many subsections you have).<br><br>
<strong>Only one Heading 1 is allowed on a page(that is the overall heading).<br></strong> 
This is how you create dependencies among different sections of your content on a page:<strong> when you use Heading 3 is because you want to usually give more details about something that you have been mentioning in, say, the preceeding paragraph which has got Heading 2:</strong><br><br></p>
</div>
<div id="bolding_button" style='display:none'>
<input type='button' onclick='changeBold()' value='Bold it!'>
<input type='button' onclick='resetBold()' value='Reset'>
</div>
...

here's the javascript:

...
<!--WHEN USERS HAVE JAVASCRIPT OFF -->
<script type="text/javascript">
<!--
function no_javascript()
{

	document.getElementById('noJava').style.display='none';
	document.getElementById('bolding_button').style.display='block';


}

//-->
</script>

</head>
<body onload="no_javascript()">
...

I tested it disabling javascript and works fine:
http://www.antobbo.webspace.virginmedia.com/webediting/bold_and_other.htm
:cool:

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.