Create this in external JS file please

Forum Moderators: open

Message Too Old, No Replies

Create this in external JS file please

document.write(problem);

phillipe

10:25 pm on Jul 5, 2012 (gmt 0)

Hello,
The following HTML code does not validate in W3C HTML Validator (http://validator.w3.org/).
How can I place the javascript function in an external JS file?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>

<script type="text/javascript">
var subj = encodeURI("Have a look at this:- " + window.location.href);
var body = encodeURI("You might find this interesting:- ") + "%0A%0A" + encodeURI(window.location.href);
document.write("<a href=\"mailto:?subject=" + subj + "&amp;body=" + body + "\">Send link to a friend</a>");
</script>
<noscript>You do not have Javascript enabled so you cannot send the message.</noscript>

</body>
</html>

Any ideas appreciated.
Kind regards,
Phil

Kendo

11:47 pm on Jul 5, 2012 (gmt 0)

What failed validation is probably the NOSCRIPT.

Not much you can do about that. On our sites we only use it where necessary, where form validation is an issue.

But there are some other no-no's that W3 validators don't like, and some of them have been acceptable coding since the beginning of time. If search engines are penalising W3 issues every page ever created using Frontpage and other popular (older) editors will suffer.

Fotiman

12:07 am on Jul 6, 2012 (gmt 0)

noscript is valid within block level elements. So this would be valid:

<body>
<div>
...
<noscript>
...
</noscript>
</div>
</body>

If you wrap the contents of your <body> with a div, then move the contents of your script tag into an external file (not including the <script></script> tags), then you could include it by just adding the src attribute:

<script type="text/javascript" src="script.js"></script>
<noscript>You do not have JavaScript enabled so you cannot send the message.</noscript>

(Note, it's JavaScript, not Javascript).
However, use of document.write should be avoided. Instead, put a placeholder within your HTML, then update that element. The noscript can also be removed. Look into modernizr on ways to deal with that.

phillipe

12:36 am on Jul 6, 2012 (gmt 0)

Can the javascript function be placed in an external JS file and still click operate on the "Send link to a friend" words? (I prefer the words rather than an image).

If so, can someone create the html code and the js file code for me?
(I'm not too good at it).

Kendo, thanks kindly for your interesting information and I assume you mean that the 'noscript' line is somewhat optional.

phillipe

12:43 am on Jul 6, 2012 (gmt 0)

Hi Fotiman,
I missed reading your message before posting my last message. Shall look through it now, many thanks.

phillipe

1:47 am on Jul 6, 2012 (gmt 0)

Hi Fotiman,
Thank you so much for explaining it so well.
Yes, JavaScript it is.
I did this which I hope is OK. At least it validates ..


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>

<body>

<div>
Some words
<br /><br />

<script type="text/javascript" src="scripts/script_a.js"></script>
<noscript>You do not have JavaScript enabled so you cannot send the message.</noscript>

<br /><br />
Some words
</div>

</body>
</html>

JS file ..


<!--
var subj = encodeURI("Have a look at this:- " + window.location.href);
var body = encodeURI("You might find this interesting:- ") + "%0A%0A" + encodeURI(window.location.href);
document.write("<a href=\"mailto:?subject=" + subj + "&amp;body=" + body + "\">Send link to a friend</a>");
//-->

Works in Firefox, IE6 and Chrome.
The idea of a placeholder in the HTML and modernizr to advise removal of noscript is something that I should look into some time.
Just amazing you guys,
thanks again.

Kendo

2:17 am on Jul 6, 2012 (gmt 0)

The DOCTYPE can also affect W3 because the setting governs criteria. Anyway not many sites actually use it. In fact on most Google sites and services all you see is...

<!doctype html>

If you W3 validated most web sites they will fail. On our busiest site traffic didn't increase after spending 80+ hours validating pages and adding things like alt tags, etc.

Fotiman

2:42 am on Jul 6, 2012 (gmt 0)

Don't include HTML comments  in JavaScript.

@kendo, <!doctype html> is a valid DOCTYPE. It's the DOCTYPE for HTML5.

lucy24

7:57 am on Jul 6, 2012 (gmt 0)

Don't include HTML comments  in JavaScript.

:: peering into crystal ball ::

The tutorial told him to use them. The comment markup is necessary because older browsers don't know what javascript is so they simply display everything inside the <script> tags along with the rest of the page. That's "older" as in, uhm, MSIE <5 and the like. Browsers that are now only used by low-budget Estonian robots.

<editorial>
Once a tutorial gets in the habit of recommending something, it will never ever stop. It's like cookbooks telling you to Preheat The Oven even though most people no longer need to chop kindling, light the fire, let it burn up, wait for the temperature to stabilize etc-- all of which needs to be done ahead of time, because a souffl� does not wait. Or putting out dire warnings about playing in discarded refrigerators, even though the latch closing was last seen around 1957.
</editorial>

Fotiman

3:46 pm on Jul 6, 2012 (gmt 0)

Actually, the comments were needed for first generation browsers Mosaic and Netscape 1. (source: [javascript.crockford.com...] Note, those browsers have been dead for over a decade, and it's unfortunate that there's still so many out of date tutorials that include this practice. It's not needed and hasn't been for many, many years.

rocknbil

4:51 pm on Jul 6, 2012 (gmt 0)

Side note, you don't validate to increase traffic, you validate to insure (as best as possible) compatibility with standards compliant devices. That being said, since the OP is using non semantic approaches (empty <br/>, bare text without containers, for example) an XHTML doctype is probably not needed. Think about why you need an XHTML doctype. Most of the time, you don't.

Fotiman

2:07 am on Jul 7, 2012 (gmt 0)

Well put. In fact, Why most of us should NOT use XHTML [webmasterworld.com...]

Dijkgraaf

10:39 pm on Jul 8, 2012 (gmt 0)

If all you want the Noscript to do is to display some text when JavaScript is not enabled you could do use the approach of having a div with text in it which gets hidden by a JavaScript function called by onload.

Fotiman

2:32 pm on Jul 9, 2012 (gmt 0)

Another alternative (which I prefer) is to add the class "no-js" to your <html> tag:

<html class="no-js">

Then in your <head>, include modernizr which will automatically replace that class with "js" if JavaScript is enabled (or write your own script that does the same thing). Then you can define presentation rules that are specific to non-JavaScript enabled visitors like this:


.no-js .js-required {
  display: block;
}
.js-required {
  display: none;
}

Then instead of a <noscript>, just include something like this:


<div class="js-required">
  You do not have JavaScript enabled so you cannot send the message.
</div>

Users with JavaScript enabled will not see the message, and users without JavaScript enabled will see it.

phillipe

8:37 am on Jul 11, 2012 (gmt 0)

I have really appreciated the input you have all given here since my original post.

Fotiman .. good that I should not include the HTML comments in JS files that were needed for first generation browsers.

lucy24 .. yes must have been an old tutorial that had me do so .. enjoyed the stove analogy and refrigerator door latches (humorous).

Kendo .. best practice is not always followed re validation I guess .. actually, my original script does validate in the developing HTML 5. Interesting too, that I saved some work I'd done in ms e-xcel as HTM. Boy, does that come up with some 'validation' errors!

rocknbil and fotiman .. interesting about why you need an XHTML doctype anyway.

Dijkgraaf and fotiman .. to avoid <noscript>, you have some great ideas there.

Cheers for now

phillipe

1:50 am on Aug 15, 2012 (gmt 0)

Hello again folks.
If we look again at the JS file code, I am now wondering how to change the color for the text "Send link to a friend".
I want it to be shown in a color of its own.

myscript.js

var subj = encodeURI("Have a look at this:- " + window.location.href);
var body = encodeURI("You might find this interesting:- ") + "%0A%0A" + encodeURI(window.location.href);
document.write("<a href=\"mailto:?subject=" + subj + "&amp;body=" + body + "\">Send link to a friend</a>");

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>

<div>

<script type="text/javascript" src="myscript.js"></script>
<noscript>You do not have JavaScript enabled so you cannot send the message.</noscript>

</div>

</body>
</html>

Any ideas, thanks again.

Fotiman

3:04 am on Aug 15, 2012 (gmt 0)

Just add a class attribute to your <a> element, and then define the styles in your CSS.

document.write("<a class=\"sendLink\" href=\"mailto:?subject=" + subj + "&body=" + body + "\">Send link to a friend</a>");

And in your css:


a.sendLink {
  color: #0f0; 
}

phillipe

3:20 am on Aug 15, 2012 (gmt 0)

Wow Fotiman, just amazing. Thanks so much!