We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

no script tag

Arnold Layne
Arnold Layne asked
on
Medium Priority
278 Views
Last Modified: 2012-05-07
This doesn't work. On FF, if javascript is disabled, it still displays the div, but sends it down to the bottom of the page and basically takes it's parent out of the page flow along with it. The div contains elements that need javascript to run, so i want to take the div entirely out of the html if javascript is disabled.

Thanks. Hopefully an easy 500 for someone. Note, h2 and p are nested within div id="video"
<script type="text/javascript">
document.write ('<div id="video">');
</script>
<noscript>
<div id="video" style="display: none;">
</noscript>
<h2>NH DWI Video<img id="videoCamera" src="/images/camera.png"></h2>
<p><img src="/images/mikebigcropped1.jpg"><br>blank blank blank.<br><a href="#" onClick="showMovie();"><img src="/images/greenButtonDDE8FB.png"></a></p>
</div>

Open in new window

Comment
Watch Question

This code looks quite odd. Its mal formatted HTML. I dont think its valid to try and optionally strech a div tag across the noscript tag.

It looks like you want something to be invisible if they dont have javascript, but visible if they do. In that case, why not make it invisible by default and then in your script tag change the style to make it visible.
I have attached an example
<div id="video" style="display: none;">
<h2>NH DWI Video<img id="videoCamera" src="/images/camera.png"></h2>
<p>
	<img src="/images/mikebigcropped1.jpg"><br>blank blank blank.<br>
	<a href="#" onClick="showMovie();">
		<img src="/images/greenButtonDDE8FB.png">
	</a>
</p>
</div>
 
<script type="text/javascript">
	function makeVisible(name)
	{
		var o = document.getElementById(name);
		o.style.display = "block";
	}
 
	makeVisible("video");
</script>

Open in new window

Arnold LayneDeveloper

Author

Commented:
OK, so the answer is that you have to close an opened div tag within an open noscript tag? I thought it would just simply insert the code you specify, except it obviously doesn't use the document.write function, as this obviously would not work.
Arnold LayneDeveloper

Author

Commented:
The odd part, is that in another place, i need to do the opposite where it becomes visible if they don't have javascript, and in that instance it seems to work. Hmmm..how odd. So the noscript tag seems to turn it on, but it can't turn it of.

 i'm going to love to find out the answer to this one.

turn on one object if javascript is disabled. This works. (Note, it's default state was set as display: none in the linked css)

<script type="text/javascript">
document.write('<div id="movieFrame">');
</script>
<noscript>
<div id="movieFrame" style="display: block;">      
</noscript>

Then, here's my problem child. It's display properties were not set in the linked css and therefore default to block.

<script type="text/javascript">
document.write ('<div id="video">');
</script>
<noscript>
<div id="video" style="display: none;">
</noscript>

Arnold LayneDeveloper

Author

Commented:
In case it matters, the video div has a link that displays the movieframe div on the on click event. So if javascript is disabled, I want the video div to go away and the movieframe div to be displayed without a click from the user.
Yeah, i dont think it is good to leave a tag unclosed in a noscript block.

For this there are two easy ways. You create a javascript version of the page and use document.write to generate it and then the nojavascript version is in the noscript tag. An example of such a page is here.

http://www.htmlcodetutorial.com/scripts/_NOSCRIPT.html

Or you could use the makeVisible method used earlier with a block of code used only if they have javascript. Then you have the nonjavascirpt variant in the nonscript block.

The problem with both of these ways is there will be some redundancy, but if the page is fairly simple, i think it makes sense.
Arnold LayneDeveloper

Author

Commented:
Yeah, I know what you're saying, but I really would like to avoid the redundancy. So I guess i want to wait a day or so to see if someone can tell me for sure whether I can use the noscript tag the way I'm trying to or not, and then, I'll do it the way you've suggested and give you the points and close the question. Thanks.
Chief Technology Officer
CERTIFIED EXPERT
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview
Arnold LayneDeveloper

Author

Commented:
Actually, could I style both sections on the external style sheet and then simply do this?

<script type="text/javascript">
document.getElementById("video").style.display="block";
document.getElementById("movieFrame").style.display="none";
</script>

<div id="movieFrame>
<!---movieFrame code-->
</div>

<div id="video">
<!---video code-->
</div>

video is set to display none and movieFrame is set to display block in external css. Javascript comes along and sets the video div to display and the movieFrame div to hide. This tests whether there is javascript or not and if so, it will hide the movieFrame and show it during an onclick event in the now displayed video div that was set to display none on the external css. If no javascript, then the video div remains hidden and the movie shows by default

So why the need for the document.write? Did I miss something? Anyway, what you have will work as well, but if the document.write is actually not needed, could you redo your answer so i can mark it as the answer for others give you the points?


Arnold LayneDeveloper

Author

Commented:
Hey thanks for the solution. I guess that's as good as any.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.