jQuery Scroll to Top Control -- Validation Error

[ellenjones6]

1) Script Title: jQuery Scroll to Top Control

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm

3) Describe problem: Once again, I come back for advice and assistance. I have some very long web pages and (following the advice from the Nielsen Norman Group website) I am experimenting with a table of contents for long pages, with in-page links. The Nielsen Norman guys also recommend using a persistent Back to Top button, so I added the jQuery Scroll to Top Control script from Dynamic Drive. I fiddled around with the script, changing the style of the back button to make it consistent with the rest of the site and having the back button bring you back to the table of contents instead of the start of the page.

The page I am experimenting with is here: http://wildadirondacks.org/adirondac...argenteus.html

Here are my questions:

1. When I validate the page with the W3C Validator, I get the following error message: "The text content of element script was not in the required format: Expected asterisk or slash but found w instead [html5]."
2. When I tried checking out my revised script code in various online validators, I got dozens of errors. Did I somehow accidentally mess up the code when I revised it for my purposes? If not, should I just ignore those validators, which I suspect might not always be accurate?
3. Does putting a sticky back to top button on pages like this make sense and (if so) should the back button take you to the table of contents (from whence you came) or to the top of the page?

Please help!

Ellen

Here is my revised script file:

//** jQuery Scroll to Top Control script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** Available/ usage terms at http://www.dynamicdrive.com (March 30th, 09')
//** v1.1 (April 7th, 09'):
//** 1) Adds ability to scroll to an absolute position (from top of page) or specific element on the page instead.
//** 2) Fixes scroll animation not working in Opera. 


var scrolltotop={
	//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
	//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
	setting: {startline:100, scrollto: "contents", scrollduration:1000, fadeduration:[500, 100]},
	controlHTML: '<img src="images/Scroll-to-Top.png" style="width:28px; height:28px" />', //HTML for control, which is auto wrapped in DIV w/ ID="contents"
	controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
	anchorkeyword: '#contents', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

	state: {isvisible:false, shouldvisible:false},

	scrollup:function(){
		if (!this.cssfixedsupport) //if control is positioned using JavaScript
			this.$control.css({opacity:0}) //hide control immediately after clicking it
		var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
		if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
			dest=jQuery('#'+dest).offset().top
		else
			dest=0
		this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
	},

	keepfixed:function(){
		var $window=jQuery(window)
		var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
		var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
		this.$control.css({left:controlx+'px', top:controly+'px'})
	},

	togglecontrol:function(){
		var scrolltop=jQuery(window).scrollTop()
		if (!this.cssfixedsupport)
			this.keepfixed()
		this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
		if (this.state.shouldvisible && !this.state.isvisible){
			this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
			this.state.isvisible=true
		}
		else if (this.state.shouldvisible==false && this.state.isvisible){
			this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
			this.state.isvisible=false
		}
	},
	
	init:function(){
		jQuery(document).ready(function($){
			var mainobj=scrolltotop
			var iebrws=document.all
			mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
			mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
			mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
				.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
				.attr({title:'Scroll Back to Top'})
				.click(function(){mainobj.scrollup(); return false})
				.appendTo('body')
			if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
				mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
			mainobj.togglecontrol()
			$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
				mainobj.scrollup()
				return false
			})
			$(window).bind('scroll resize', function(e){
				mainobj.togglecontrol()
			})
		})
	}
}

scrolltotop.init()

Here is the relevant HTML code for the Table of Contents:

	    <div class="tableofcontents" id="contents"><a href="#description">Description</a> | <a href="#diet">Diet</a> | <a href="#reproduction">Reproduction</a> | <a href="#behavior">Behavior</a> | <a href="#predators">Mortality</a> | <a href="#distribution">Distribution</a> | <a href="#habitat">Habitat</a> | <a href="#where">Where to See </a> | <a href="#references">References</a></div>

[molendijk]

Hello Ellen,
Just use the W3C Validator. Ignore the others. The sticky back to top button is a good idea.

As for the errors found by the W3C Validator:
I. The text content of element script was not in the required format
Reason: the presence of the keep-this-notice-intact-lines. Replace with:

<!--
Scroll To Top Control script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
*Please keep this notice intact
*Visit Project Page at http://www.dynamicdrive.com for full source code
-->
<script src="scrolltopcontrol.js"></script>

II. Attribute webkitallowfullscreen not allowed on element iframe at this point
Reason: the presence of webkitallowfullscreen and mozallowfullscreen. This 'error' is innocent.

III. The type attribute is unnecessary for JavaScript resources
Reason: the presence of type="text/javascript". Just remove it.

IV. Attribute alt not allowed on element button at this point
Just remove the alt-attribute. The title-attribute will do.

That said, your code looks good to me.

[ellenjones6]

Hello Ellen,
Just use the W3C Validator. Ignore the others. The sticky back to top button is a good idea.

As for the errors found by the W3C Validator:
I. The text content of element script was not in the required format
Reason: the presence of the keep-this-notice-intact-lines. Replace with:

<!--
Scroll To Top Control script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
*Please keep this notice intact
*Visit Project Page at http://www.dynamicdrive.com for full source code
-->
<script src="scrolltopcontrol.js"></script>

II. Attribute webkitallowfullscreen not allowed on element iframe at this point
Reason: the presence of webkitallowfullscreen and mozallowfullscreen. This 'error' is innocent.

III. The type attribute is unnecessary for JavaScript resources
Reason: the presence of type="text/javascript". Just remove it.

IV. Attribute alt not allowed on element button at this point
Just remove the alt-attribute. The title-attribute will do.

That said, your code looks good to me.

Hi Arie,

Thank you very much! I made the suggested changes, revalidated in the W3C Validator, and most of the errors went away. The two innocent errors (webkitallowfullscreen and mozallowfullscreen) persist, but (as you advised) I am going to ignore them. However, "The text content of element script was not in the required format" still remains. See https://validator.w3.org/nu/?doc=htt...argenteus.html

I tried to cut and paste your suggested new code into my page, but I seem to have messed it up somehow.

What am I doing wrong? Please advise.

Thanks again for your help, ellen

[molendijk]

What you have now is:

<script src="scrolltopcontrol.js">

<!--
Scroll To Top Control script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
*Please keep this notice intact
*Visit Project Page at http://www.dynamicdrive.com for full source code
-->
<script src="scrolltopcontrol.js"></script>

That should be:

<!--
Scroll To Top Control script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
*Please keep this notice intact
*Visit Project Page at http://www.dynamicdrive.com for full source code
-->
<script src="scrolltopcontrol.js"></script>

[ellenjones6]

Ah, that fixed it!! Thank you!