Solved

no script tag

Posted on 2009-06-27
9
249 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

0
Comment
Question by:BobHavertyComh
  • 6
  • 2
9 Comments
 
LVL 17

Expert Comment

by:Thomas4019
ID: 24729418
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

0
 
LVL 9

Author Comment

by:BobHavertyComh
ID: 24729620
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.
0
 
LVL 9

Author Comment

by:BobHavertyComh
ID: 24729643
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>

0
 
LVL 9

Author Comment

by:BobHavertyComh
ID: 24729658
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.
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 17

Expert Comment

by:Thomas4019
ID: 24729716
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.
0
 
LVL 9

Author Comment

by:BobHavertyComh
ID: 24731064
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.
0
 
LVL 12

Accepted Solution

by:
Chad Haney earned 500 total points
ID: 24731735
I'm with Thomas4019 and say that you are best to have the code written up for the div to be hidden by default, but to place a line of javascript after the div to change the display.

Here are two different ways you could go about what you are saying.  Both in which noscript would not be necessary.
<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>

<div id="movieFrame>

<!---movieFrame code-->

</div>

<script type="text/javascript">

document.getElementById("video").style.display="block";

document.getElementById("movieFrame").style.display="none";

</script>
 

///////////////////////////////////////////////////////
 

<div id="movieFrame>

<!---movieFrame code-->

</div>

<script type="text/javascript">

document.write ('<div id="video"><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>');

document.getElementById("movieFrame").style.display="none";

</script>

Open in new window

0
 
LVL 9

Author Comment

by:BobHavertyComh
ID: 24744443
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?


0
 
LVL 9

Author Closing Comment

by:BobHavertyComh
ID: 31597608
Hey thanks for the solution. I guess that's as good as any.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now