A_tom Posted November 10, 2014 Share Posted November 10, 2014 (edited) I have had a website for several years which was originally built by a developer, but ever since it was built I have done all the maintenance and updating myself. I do this using the code editor in cPanel. My webhoster is going out of business, so I'm moving the site to another webhoster. I couple of questions have arisen: 1) Should I start using WordPress and 2) Do I need to update my website html from the current version.Here is my current version:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">While I can manage with directly editing the code, I can only do the most rudimentary things, but it all works. I will provide a link to the website if needed.Thanks for any help or advice. Edited November 10, 2014 by A_tom Link to comment Share on other sites More sharing options...
Ingolme Posted November 10, 2014 Share Posted November 10, 2014 Normally, HTML files are made and edited on your own computer. Open a text editor (notepad is the default one for Windows) and write your code in it. We use editors that are more advanced than notepad, which help with indenting and syntax highlighting, my preferred one is Notepad++. It's way too difficult to maintain a site by editing the file through cPanel, nobody does that. Yes, please update your version of HTML. Transitional was already outdated when it was invented. It was invented to make the transition from HTML 3.2 to HTML 4.01 or XHTML 1.0 easier. Anybody creating a new website using a transitional doctype after 1999 was doing something wrong. Many people only used transitional so that the W3C validator wouldn't complain that they were using elements like <font> and attributes such as bgcolor, but there was a good reason why those elements and attributes were removed from the specification. We use the HTML 5 specification these days, but if you're inclined to using an older version use either HTML 4.01 Strict or XHTML 1.0 Strict. Transitional is out of the question. The doctype declaration for HTML 5 is easy: <!DOCTYPE html> It's so convenient to use it. Besides, HTML 5 provides all kinds of features that were strongly needed in the web, such as embedded audio and video and elements to indicate navigation, page headers and page footers. Wordpress is just one of countless content management systems (or CMS). It's pretty popular because it's free. Wordpress is both friendly to people who don't know how to code as well as to developers. If you're not a coding person you can just install themes in your wordpress administration panel, but if you're a developer you have the knowledge to create your own themes. Before immediately jumping onto Wordpress, you might want to do a search for other CMSs and compare them to see which one suits your purposes best. Wordpress and other content management systems use PHP and usually MySQL. If you intend to use them you'll need a web host that supports PHP and MySQL. For testing on your own computer you can install a simple testing server like WAMP or XAMPP. Link to comment Share on other sites More sharing options...
davej Posted November 10, 2014 Share Posted November 10, 2014 I once suggested that someone update their 1996 vintage HTML and their response was utterly hostile -- as they claimed the effort would be wasted and pointless since their old code would always be acceptable -- because new browsers would always be backwards compatible to the old code. As Ingolme says, the first thing to do is try the W3 Validator out on the current website and see if it detects existing errors. Then when you are error-free you could try changing your website's homepage doctype and see what the validator then complains about. http://validator.w3.org/ http://www.w3schools.com/tags/tag_doctype.asp Link to comment Share on other sites More sharing options...
dsonesuk Posted November 10, 2014 Share Posted November 10, 2014 (edited) Another reason transitional was used, was because soome idiot decided to not support some elements and attributes that are still widely used even to this day, such as iframes and target attribute, in strict. So instead of changing from one to the other depending on support, transitional was used to cover all, it could just as well be as semantically correct as strict but would give additional support for those elements that strict did not.Thankfully in html5 someone saw sense and supported iframe, target and even embed now, so this was no longer an issue. Edited November 10, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
A_tom Posted November 10, 2014 Author Share Posted November 10, 2014 Normally, HTML files are made and edited on your own computer. Open a text editor (notepad is the default one for Windows) and write your code in it. We use editors that are more advanced than notepad, which help with indenting and syntax highlighting, my preferred one is Notepad++. It's way too difficult to maintain a site by editing the file through cPanel, nobody does that. Yes, please update your version of HTML. Transitional was already outdated when it was invented. It was invented to make the transition from HTML 3.2 to HTML 4.01 or XHTML 1.0 easier. Anybody creating a new website using a transitional doctype after 1999 was doing something wrong. Many people only used transitional so that the W3C validator wouldn't complain that they were using elements like <font> and attributes such as bgcolor, but there was a good reason why those elements and attributes were removed from the specification. We use the HTML 5 specification these days, but if you're inclined to using an older version use either HTML 4.01 Strict or XHTML 1.0 Strict. Transitional is out of the question. The doctype declaration for HTML 5 is easy: <!DOCTYPE html> It's so convenient to use it. Besides, HTML 5 provides all kinds of features that were strongly needed in the web, such as embedded audio and video and elements to indicate navigation, page headers and page footers. Wordpress is just one of countless content management systems (or CMS). It's pretty popular because it's free. Wordpress is both friendly to people who don't know how to code as well as to developers. If you're not a coding person you can just install themes in your wordpress administration panel, but if you're a developer you have the knowledge to create your own themes. Before immediately jumping onto Wordpress, you might want to do a search for other CMSs and compare them to see which one suits your purposes best. Wordpress and other content management systems use PHP and usually MySQL. If you intend to use them you'll need a web host that supports PHP and MySQL. For testing on your own computer you can install a simple testing server like WAMP or XAMPP. I almost don't know where to begin. My original site code was built in 2009, so the developer apparently gave me something he shouldn't have. Nevertheless, it's been working, and continues to work. I find using the code editor on cPanel quite easy. I've actually added a lot of pages (by duplication mostly), but I've also added a lot of new stuff within the pages like flash charts and scrollers. I do this by finding example code on the internet and copying it in. The website is siftradingsystem.com, btw. I've run the validator on a couple of pages. When I run it on the home page, I get 53 errors as xhtml 1.0 transitional. If I change the doctype to html5, I get 50 errors. I took another page and did a validation as it and got no errors as xhtml 1.0 transitional. If I change the doctype to html5, I get one error. Since I am in the process of moving to a different webhost (the files have already been migrated, but I haven't change the DNS yet), this may be a good time to make the switch to html5. However, it's not immediately apparent to me what is needed to correct the reported errors. I suppose I can just start and try to work may way through by asking for help on forums, which is my usual method. Do you have any further thoughts on how I might proceed. Thanks. Link to comment Share on other sites More sharing options...
Ingolme Posted November 10, 2014 Share Posted November 10, 2014 Another reason transitional was used, was because soome idiot decided to not support some elements and attributes that are still widely used even to this day, such as iframes and target attribute, in strict. So instead of changing from one to the other depending on support, transitional was used to cover all, it could just as well be as semantically correct as strict but would give additional support for those elements that strict did not.Thankfully in html5 someone saw sense and supported iframe, target and even embed now, so this was no longer an issue. The reason <iframe> was deprecated at first was because its original intention (embedding web pages within web pages) was simply really bad for user experience, it broke the browser history and leads to confusing scenarios with nested websites. The good uses people gave to the iframe (pretty much only Javascript applications) were pretty much non-existent when HTML 4.01 was drafted. The target attribute was deprecated because the W3C felt that it should be in the user's hand whether they wanted a link to open in a new window or not. I can only think of just one or two times where I actually am happy as a user that a link opened a new window for me and it's generally when I'm using Javascript applications like a chatroom or an online document. <embed> wasn't deprecated, it just was never part of the specification before now. It was made up by Netscape but wasn't the chosen solution when embedded plug-ins became a thing. The W3C used <object> instead. <embed> won't even validate in a transitional doctype, and isn't even HTML 3.2. My reason for encouraging a Strict doctype was that if you started off with that then you were far less likely to make some of the big mistakes amateurs make when developing a website. Both the <iframe> and the target attribute can be worked around using Javascript to avoid validation errors. Since Javascript applications are the only good application for them, it's perfectly reasonable to use Javascript to work with them. Link to comment Share on other sites More sharing options...
A_tom Posted November 10, 2014 Author Share Posted November 10, 2014 (edited) Ok, I took one page and converted it to html4.01 strict. I then followed the validator errors and warnings and made the changes. I was able to remove all the errors and warnings and wind up with a page functioning exactly as it did before. Since I have dozens of pages, this is going to be a bit of work. What, if anything, can be done to make it easier? Is there any reason to do this all at once or can I just do a page at a time on it until it's finished? Edited November 10, 2014 by A_tom Link to comment Share on other sites More sharing options...
dsonesuk Posted November 10, 2014 Share Posted November 10, 2014 (edited) The reason <iframe> was deprecated at first was because its original intention (embedding web pages within web pages) was simply really bad for user experience, it broke the browser history and leads to confusing scenarios with nested websites. The good uses people gave to the iframe (pretty much only Javascript applications) were pretty much non-existent when HTML 4.01 was drafted. Just because an iframe was badly misused to show web pages, DOES NOT mean it should have been deprecated, In some cases the iframe would just be used to gather information from another domain,to display on a small module area of a page. No broken browser history, no bad user experience, the user wouldn't even know it was from a different domain in most cases. Target attribute can and is used to send users to another website, without leaving completely the actual site they are referred from, to give user easy access to return to referring page when finish, especially if they get lost clicking other links on the page they are visiting, and need quick escape to return the original page they was interested in visiting in first place, without having to click back button continuously, or try to browse history to find the referral page. embed.. never said that, just knew you would include it to though. ALSO using JavaScript! to by bypass validation, you mean botch it up to pass validation, seriously? you had a go at me for using empty div tags (1 empty div tag, i might add, wahoo that will really affect bandwidth) in a design, and you want developers to add what could be unnecessary js code if someone had really thought about these elements and attribute beforehand, also would not work if JavaScript is disabled, that have now become acceptable NOW! Edited November 10, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
Ingolme Posted November 10, 2014 Share Posted November 10, 2014 Ok, I took one page and converted it to html4.01 strict. I then followed the validator errors and warnings and made the changes. I was able to remove all the errors and warnings and wind up with a page functioning exactly as it did before. Since I have dozens of pages, this is going to be a bit of work. What, if anything, can be done to make it easier? Is there any reason to do this all at once or can I just do a page at a time on it until it's finished? It's best if you use HTML 5. It's going to be the same amount of effort as HTML 4.01 but it's more future-proof. I believe there's a tool called HTML Tidy but I'm not sure how effective it is, it can't read minds. There's no easy way to update all your pages at once, but the longer you put it off the more difficult it will be to update in the future. Changing pages one at a time only has the disadvantage that your pages are not going to be consistent between each other when users view them. It's probably preferable to not re-upload the website until everything is updated, you can leave your old pages up as a placeholder while you're modifying the pages on your computer. Link to comment Share on other sites More sharing options...
A_tom Posted November 11, 2014 Author Share Posted November 11, 2014 Ok, I'm working my way through one of the pages (index), converting to html5. All of these statements are causing a problem and I don't understand what the validator is telling me. <meta name="document_iterator.js" /> <meta name="find_proxy.js" /> <meta name="get_html_text.js" /> <meta name="global_constants.js" /> <meta name="name_injection_builder.js" /> <meta name="number_injection_builder.js" /> <meta name="string_finder.js" /> <meta name="change_sink.js" /> This is the error I get on the first line above. Bad value document_iterator.js for attribute name on element meta: Keyword document_iterator.js is not registered. What does it want? Link to comment Share on other sites More sharing options...
dsonesuk Posted November 11, 2014 Share Posted November 11, 2014 There is no such meta tag with attribute name value you have provided, is what it is telling you.Those are supposed to be JavaScript file links, nothing to do with meta tags.<script type="text/javascript" src="javascriptFileName.js"></script> Link to comment Share on other sites More sharing options...
A_tom Posted November 11, 2014 Author Share Posted November 11, 2014 There is no such meta tag with attribute name value you have provided, is what it is telling you.Those are supposed to be JavaScript file links, nothing to do with meta tags.<script type="text/javascript" src="javascriptFileName.js"></script> For the moment, I have removed all of the offending meta tags and I'm able to get validation of my index page, except for the menu which is an SSI, and I'm down to one problem on it. Here is the relevant code: <div id="ddsidemenubar" class="markermenu"> <ul> <li><a href="index.html">HOME</a></li> <!--<li><a href="#" rel="ddsubmenu1">SYSTEMS</a></li>--> <li><a href="#ddsubmenu1">SYSTEMS</a></li> <!--Drop Down Menu 1 HTML--> <ul id="ddsubmenu1" class="ddsubmenustyle"> I have commented out the original code which does not validate, but the replacement line below it validates, but does not give me the drop down list. Link to comment Share on other sites More sharing options...
Ingolme Posted November 11, 2014 Share Posted November 11, 2014 What does the validation error say? The class and can be on a <div> without any trouble, but be sure you close your </ul> and </div> elements in the right order. Link to comment Share on other sites More sharing options...
A_tom Posted November 11, 2014 Author Share Posted November 11, 2014 What does the validation error say? The class and can be on a <div> without any trouble, but be sure you close your </ul> and </div> elements in the right order. Bad value ddsubmenu1 for attribute rel on element a: The string ddsubmenu1 is not a registered keyword. Link to comment Share on other sites More sharing options...
Ingolme Posted November 11, 2014 Share Posted November 11, 2014 Oh, are you using a Javascript library that requires the rel attribute to be set? If it's not your own library then you will just have to allow that validation error. Link to comment Share on other sites More sharing options...
A_tom Posted November 11, 2014 Author Share Posted November 11, 2014 Oh, are you using a Javascript library that requires the rel attribute to be set? If it's not your own library then you will just have to allow that validation error. <div id="ddsidemenubar" class="markermenu"><ul><li><a href="index.html">HOME</a></li><li><a href="#" rel="ddsubmenu1">SYSTEMS</a></li><!--<li><a href="#ddsubmenu1">SYSTEMS</a></li>--><li><a href="about.html" rel="ddsubmenu2">ABOUTSIF</a></li><li><a href="FAQ.html">FAQ</a></li><li><a href="contact.html" rel="ddsubmenu3">CONTACT</a></li><li><a href="http://www.siftradingsystems.blogspot.com">SIF Blog</a></li><li><a href="CFTC_Disclaimer.html">CFTC Rule</a></li></ul></div><script type="text/javascript">ddlevelsmenu.setup("ddsidemenubar", "sidebar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")</script><!--Drop Down Menu 1 HTML--><ul id="ddsubmenu1" class="ddsubmenustyle"><!--<li><a href="ES_Swing.html">ES Swing</a></li>--><!--<li><a href="BlackjackShotgunStart.html">Shotgun</a></li>--><!--<li><a href="CTTA.html">CTT</a></li>--><!--<li><a href="ES1.html">SIF ES1</a></li>--><!--<li><a href="EScalator.html">EScalator</a></li>--><!--<li><a href="ESc2_FlashCht.html">EScalator2</a></li>--><!--<li><a href="ESCombo6.html">ESCombo6</a></li>--><li><a href="ESCombo7.html">ESCombo7</a></li><li><a href="X3X4Combo.html">X3X4Combo</a></li><!--<li><a href="SIF_ESCombo.html">SIF_ESCombo</a></li>--><li><a href="SIF_ESCombo2.0.html">SIF_ESCombo2.0</a></li><li><a href="ESCombo3.0.html">SIF_ESCombo3.0</a></li><li><a href="Alligator2014.html">Alligator2014</a></li><li><a href="AlligatorPlus.html">Alligator Plus</a></li><li><a href="NQMomentum.html">NQ Momentum</a></li><li><a href="ES14A.html">ES14A Strategy</a></li><!--<li><a href="ES2.html">ES2</a></li>--><!--<li><a href="SIF_ESGumbo.html">SIF_ESGumbo</a></li>--><!--<li><a href="Blackjack.html">Blackjack</a></li>--><!--<li><a href="ESGumboPlusPortfolio.html">ESGumbo Plus</a></li>--><!--<li><a href="Alligator.html">Alligator</a></li>--><!--<li><a href="Alligator3.html">Alligator3.0</a></li>--><!--<li><a href="SixSystemPortfolio_01.html">Six System Portfolio</a></li>--><!--<li><a href="FiveSystemPortfolio.html">Six Minus One Portfolio</a></li>--><!--<li><a href="SIFESOverNight.html">ES OverNight</a></li>--><!--<li><a href="PortfolioX1.html">Portfolio X1</a></li>--><!--<li><a href="PortfolioX2.html">Portfolio X2</a></li>--><!--<li><a href="PortfolioX3.html">Portfolio X3</a></li>--><!--<li><a href="PortfolioX4.html">Portfolio X4</a></li>--><!--<li><a href="SIFPS1.html">PS1 (Position Sizing) Portfolio</a></li>--><!--<li><a href="IDTPS.html">IDTPS - Single Strategy</a></li>--><!--<li><a href="OtherStuff.html">Other Stuff</a></li>--><!--<li><a href="Discontinued.html">Discontinued Systems</a></li>--><!--<li><a href="Subscribe.html">Subscribe</a></li>--><li><a href="disclosure.html">Disclosure</a></li></ul><!-- end drop down divs --> This is the entire code for the SSI menu.shtml, Perhaps that will answer the question. Link to comment Share on other sites More sharing options...
Ingolme Posted November 11, 2014 Share Posted November 11, 2014 The rel attribute on the <a> element is what's not validating. Your Javascript menu library wants a rel attribute, so you just have to accept that you have a validation error, unless you decide to use a different Jaavscript library for the menu. Link to comment Share on other sites More sharing options...
A_tom Posted November 11, 2014 Author Share Posted November 11, 2014 The rel attribute on the <a> element is what's not validating. Your Javascript menu library wants a rel attribute, so you just have to accept that you have a validation error, unless you decide to use a different Jaavscript library for the menu. Not clear on why a different javascript library would mitigate the error, but I'll be trying to figure that out. My coding skills in this area are quite limited, so I usually need to find an example of something which works and plug it in. Fortunately, that's fairly easy to do nowadays. Thanks for the help. Link to comment Share on other sites More sharing options...
Ingolme Posted November 11, 2014 Share Posted November 11, 2014 A different Javascript library would not require you to add rel="ddsubmenu1" to your links, and that's what's causing the error. Link to comment Share on other sites More sharing options...
A_tom Posted November 11, 2014 Author Share Posted November 11, 2014 A different Javascript library would not require you to add rel="ddsubmenu1" to your links, and that's what's causing the error. Ok, I don't want to waste a lot of your time, but I'd like to understand what you're telling me so that I can do something with it. On my website the is a folder called ddlevelsfiles. In this folder there are just a few files; there are 3 css files and I think I know what those are for. Then there is a file called ddlevelsmenu.js. This is the js library file which makes the ddmenus work and which is causing the problem?? I need a different one which won't cause the problem. How do I get a different .js library file which does not cause the validation error? What am I looking for? I have looked elsewhere to try to find out what is going on or how to do it differently, but no luck. Link to comment Share on other sites More sharing options...
Ingolme Posted November 11, 2014 Share Posted November 11, 2014 I'm not exactly sure what your Javasript library is meant to do, but I think what you want is a pulldown menu system. There are plenty of them using CSS or Javascript: http://www.cssplay.co.uk/menus/ http://jqueryui.com/menu/ Link to comment Share on other sites More sharing options...
dsonesuk Posted November 11, 2014 Share Posted November 11, 2014 All you have to do is look in the js file for getAttribute('rel'), and change it to a attribute that will validate as in getAttribute('data-menu'). Now instead of <li><a href="http://www.dynamicdrive.com/new.htm" rel="ddsubmenu1">DHTML</a></li> you use <li><a href="http://www.dynamicdrive.com/new.htm" data-menu="ddsubmenu1">DHTML</a></li> problem solved Link to comment Share on other sites More sharing options...
A_tom Posted November 11, 2014 Author Share Posted November 11, 2014 This is the relevant js file. It contains this comment: //** Aug 13th, 08'- v1.32: Moved "rel" attribute from menu's <li> elements to inner <a>, for validation reasons //** All Levels Navigational Menu- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com//** Script Download/ instructions page: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu///** Usage Terms: http://www.dynamicdrive.com/notice.htm//** July 7th, 08'- Creation Date//** July 16th, 08'- Updated to v 1.3: //1) Adds "Side Bar" orientation option. //2) Drop Down Menus now auto adjust their positioning if too close to either right or bottom window edges. //3) Enhanced IFRAME shim "coverage" on the page.//** July 19th, 08'- Updated to v 1.31: Drop down menu now positions at top of window edge if there's neither room downwards or upwards to settle.//** Aug 13th, 08'- v1.32: Moved "rel" attribute from menu's <li> elements to inner <a>, for validation reasons//** Sept 10th, 08'- Updated to v 1.4: //1) Added optional "sliding" animation when sub menus are revealed. //2) Arrow images now dynamically positioned, instead of relying on CSS's "right" property//** Oct 11th, 08'- Updated to v 1.5: //1) Sliding animation behavior tweaked //2) Added ability to disable iframeshim, customize speed of sliding animation//** Dec 23rd, 08'- Updated to v 2.0: //1) Animation speed refined to be function of time (ie: 1 sec) //2) Added two animations that can be individually enabled/disabled- "slide in" and "fade in". //3) Script now automatically moves HTML for all sub menus to the end of the page, to avoid any containership issues if they are nested in other elements.//** Jan 12, 09'- Updated to v 2.1: //1) Added ability to disable the arrow images from the top level items (see option "showarrow") //2) For Top Level Menu items containing a SPAN element (for sliding doors technique), arrow images are inserted inside SPAN.var ddlevelsmenu={enableshim: true, //enable IFRAME shim to prevent drop down menus from being hidden below SELECT or FLASH elements? (tip: disable if not in use, for efficiency)arrowpointers:{ downarrow: ["ddlevelsfiles/arrow-down.gif", 11,7], //[path_to_down_arrow, arrowwidth, arrowheight] rightarrow: ["ddlevelsfiles/arrow-right.gif", 12,12], //[path_to_right_arrow, arrowwidth, arrowheight] showarrow: {toplevel: true, sublevel: true} //Show arrow images on top level items and sub level items, respectively?},hideinterval: 200, //delay in milliseconds before entire menu disappears onmouseout.effects: {enableswipe: true, enablefade: true, duration: 500},httpsiframesrc: "blank.htm", //If menu is run on a secure (https) page, the IFRAME shim feature used by the script should point to an *blank* page *within* the secure area to prevent an IE security prompt. Specify full URL to that page on your server (leave as is if not applicable).///No need to edit beyond here////////////////////topmenuids: [], //array containing ids of all the primary menus on the pagetopitems: {}, //object array containing all top menu item linkssubuls: {}, //object array containing all ULslastactivesubul: {}, //object object containing info for last mouse out menu item's ULtopitemsindex: -1,ulindex: -1,hidetimers: {}, //object array timershimadded: false,nonFF: !/Firefox[/s](d+.d+)/.test(navigator.userAgent), //detect non FF browsersgetoffset:function(what, offsettype){ return (what.offsetParent)? what[offsettype]+this.getoffset(what.offsetParent, offsettype) : what[offsettype]},getoffsetof:function(el){ el._offsets={left:this.getoffset(el, "offsetLeft"), top:this.getoffset(el, "offsetTop")}},getwindowsize:function(){ this.docwidth=window.innerWidth? window.innerWidth-10 : this.standardbody.clientWidth-10 this.docheight=window.innerHeight? window.innerHeight-15 : this.standardbody.clientHeight-18},gettopitemsdimensions:function(){ for (var m=0; m<this.topmenuids.length; m++){ var topmenuid=this.topmenuids[m] for (var i=0; i<this.topitems[topmenuid].length; i++){ var header=this.topitems[topmenuid][i] var submenu=document.getElementById(header.getAttribute('rel')) header._dimensions={w:header.offsetWidth, h:header.offsetHeight, submenuw:submenu.offsetWidth, submenuh:submenu.offsetHeight} } }},isContained:function(m, e){ var e=window.event || e var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement) while (c && c!=m)try {c=c.parentNode} catch(e){c=m} if (c==m) return true else return false},addpointer:function(target, imgclass, imginfo, BeforeorAfter){ var pointer=document.createElement("img") pointer.src=imginfo[0] pointer.style.width=imginfo[1]+"px" pointer.style.height=imginfo[2]+"px" if(imgclass=="rightarrowpointer"){ pointer.style.left=target.offsetWidth-imginfo[2]-2+"px" } pointer.className=imgclass var target_firstEl=target.childNodes[target.firstChild.nodeType!=1? 1 : 0] //see if the first child element within A is a SPAN (found in sliding doors technique) if (target_firstEl && target_firstEl.tagName=="SPAN"){ target=target_firstEl //arrow should be added inside this SPAN instead if found } if (BeforeorAfter=="before") target.insertBefore(pointer, target.firstChild) else target.appendChild(pointer)},css:function(el, targetclass, action){ var needle=new RegExp("(^|s+)"+targetclass+"($|s+)", "ig") if (action=="check") return needle.test(el.className) else if (action=="remove") el.className=el.className.replace(needle, "") else if (action=="add" && !needle.test(el.className)) el.className+=" "+targetclass},addshimmy:function(target){ var shim=(!window.opera)? document.createElement("iframe") : document.createElement("div") //Opera 9.24 doesnt seem to support transparent IFRAMEs shim.className="ddiframeshim" shim.setAttribute("src", location.protocol=="https:"? this.httpsiframesrc : "about:blank") shim.setAttribute("frameborder", "0") target.appendChild(shim) try{ shim.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)' } catch(e){} return shim},positionshim:function(header, submenu, dir, scrollX, scrollY){ if (header._istoplevel){ var scrollY=window.pageYOffset? window.pageYOffset : this.standardbody.scrollTop var topgap=header._offsets.top-scrollY var bottomgap=scrollY+this.docheight-header._offsets.top-header._dimensions.h if (topgap>0){ this.shimmy.topshim.style.left=scrollX+"px" this.shimmy.topshim.style.top=scrollY+"px" this.shimmy.topshim.style.width="99%" this.shimmy.topshim.style.height=topgap+"px" //distance from top window edge to top of menu item } if (bottomgap>0){ this.shimmy.bottomshim.style.left=scrollX+"px" this.shimmy.bottomshim.style.top=header._offsets.top + header._dimensions.h +"px" this.shimmy.bottomshim.style.width="99%" this.shimmy.bottomshim.style.height=bottomgap+"px" //distance from bottom of menu item to bottom window edge } }},hideshim:function(){ this.shimmy.topshim.style.width=this.shimmy.bottomshim.style.width=0 this.shimmy.topshim.style.height=this.shimmy.bottomshim.style.height=0},buildmenu:function(mainmenuid, header, submenu, submenupos, istoplevel, dir){ header._master=mainmenuid //Indicate which top menu this header is associated with header._pos=submenupos //Indicate pos of sub menu this header is associated with header._istoplevel=istoplevel if (istoplevel){ this.addEvent(header, function(e){ ddlevelsmenu.hidemenu(ddlevelsmenu.subuls[this._master][parseInt(this._pos)]) }, "click") } this.subuls[mainmenuid][submenupos]=submenu header._dimensions={w:header.offsetWidth, h:header.offsetHeight, submenuw:submenu.offsetWidth, submenuh:submenu.offsetHeight} this.getoffsetof(header) submenu.style.left=0 submenu.style.top=0 submenu.style.visibility="hidden" this.addEvent(header, function(e){ //mouseover event if (!ddlevelsmenu.isContained(this, e)){ var submenu=ddlevelsmenu.subuls[this._master][parseInt(this._pos)] if (this._istoplevel){ ddlevelsmenu.css(this, "selected", "add") clearTimeout(ddlevelsmenu.hidetimers[this._master][this._pos]) } ddlevelsmenu.getoffsetof(header) var scrollX=window.pageXOffset? window.pageXOffset : ddlevelsmenu.standardbody.scrollLeft var scrollY=window.pageYOffset? window.pageYOffset : ddlevelsmenu.standardbody.scrollTop var submenurightedge=this._offsets.left + this._dimensions.submenuw + (this._istoplevel && dir=="topbar"? 0 : this._dimensions.w) var submenubottomedge=this._offsets.top + this._dimensions.submenuh //Sub menu starting left position var menuleft=(this._istoplevel? this._offsets.left + (dir=="sidebar"? this._dimensions.w : 0) : this._dimensions.w) if (submenurightedge-scrollX>ddlevelsmenu.docwidth){ menuleft+= -this._dimensions.submenuw + (this._istoplevel && dir=="topbar" ? this._dimensions.w : -this._dimensions.w) } submenu.style.left=menuleft+"px" //Sub menu starting top position var menutop=(this._istoplevel? this._offsets.top + (dir=="sidebar"? 0 : this._dimensions.h) : this.offsetTop) if (submenubottomedge-scrollY>ddlevelsmenu.docheight){ //no room downwards? if (this._dimensions.submenuh<this._offsets.top+(dir=="sidebar"? this._dimensions.h : 0)-scrollY){ //move up? menutop+= - this._dimensions.submenuh + (this._istoplevel && dir=="topbar"? -this._dimensions.h : this._dimensions.h) } else{ //top of window edge menutop+= -(this._offsets.top-scrollY) + (this._istoplevel && dir=="topbar"? -this._dimensions.h : 0) } } submenu.style.top=menutop+"px" if (ddlevelsmenu.enableshim && (ddlevelsmenu.effects.enableswipe==false || ddlevelsmenu.nonFF)){ //apply shim immediately only if animation is turned off, or if on, in non FF2.x browsers ddlevelsmenu.positionshim(header, submenu, dir, scrollX, scrollY) } else{ submenu.FFscrollInfo={x:scrollX, y:scrollY} } ddlevelsmenu.showmenu(header, submenu, dir) } }, "mouseover") this.addEvent(header, function(e){ //mouseout event var submenu=ddlevelsmenu.subuls[this._master][parseInt(this._pos)] if (this._istoplevel){ if (!ddlevelsmenu.isContained(this, e) && !ddlevelsmenu.isContained(submenu, e)) //hide drop down ul if mouse moves out of menu bar item but not into drop down ul itself ddlevelsmenu.hidemenu(submenu) } else if (!this._istoplevel && !ddlevelsmenu.isContained(this, e)){ ddlevelsmenu.hidemenu(submenu) } }, "mouseout")},setopacity:function(el, value){ el.style.opacity=value if (typeof el.style.opacity!="string"){ //if it's not a string (ie: number instead), it means property not supported el.style.MozOpacity=value if (el.filters){ el.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity="+ value*100 +")" } }},showmenu:function(header, submenu, dir){ if (this.effects.enableswipe || this.effects.enablefade){ if (this.effects.enableswipe){ var endpoint=(header._istoplevel && dir=="topbar")? header._dimensions.submenuh : header._dimensions.submenuw submenu.style.width=submenu.style.height=0 submenu.style.overflow="hidden" } if (this.effects.enablefade){ this.setopacity(submenu, 0) //set opacity to 0 so menu appears hidden initially } submenu._curanimatedegree=0 submenu.style.visibility="visible" clearInterval(submenu._animatetimer) submenu._starttime=new Date().getTime() //get time just before animation is run submenu._animatetimer=setInterval(function(){ddlevelsmenu.revealmenu(header, submenu, endpoint, dir)}, 10) } else{ submenu.style.visibility="visible" }},revealmenu:function(header, submenu, endpoint, dir){ var elapsed=new Date().getTime()-submenu._starttime //get time animation has run if (elapsed<this.effects.duration){ if (this.effects.enableswipe){ if (submenu._curanimatedegree==0){ //reset either width or height of sub menu to "auto" when animation begins submenu.style[header._istoplevel && dir=="topbar"? "width" : "height"]="auto" } submenu.style[header._istoplevel && dir=="topbar"? "height" : "width"]=(submenu._curanimatedegree*endpoint)+"px" } if (this.effects.enablefade){ this.setopacity(submenu, submenu._curanimatedegree) } } else{ clearInterval(submenu._animatetimer) if (this.effects.enableswipe){ submenu.style.width="auto" submenu.style.height="auto" submenu.style.overflow="visible" } if (this.effects.enablefade){ this.setopacity(submenu, 1) submenu.style.filter="" } if (this.enableshim && submenu.FFscrollInfo) //if this is FF browser (meaning shim hasn't been applied yet this.positionshim(header, submenu, dir, submenu.FFscrollInfo.x, submenu.FFscrollInfo.y) } submenu._curanimatedegree=(1-Math.cos((elapsed/this.effects.duration)*Math.PI)) / 2},hidemenu:function(submenu){ if (typeof submenu._pos!="undefined"){ //if submenu is outermost UL drop down menu this.css(this.topitems[submenu._master][parseInt(submenu._pos)], "selected", "remove") if (this.enableshim) this.hideshim() } clearInterval(submenu._animatetimer) submenu.style.left=0 submenu.style.top="-1000px" submenu.style.visibility="hidden"},addEvent:function(target, functionref, tasktype) { if (target.addEventListener) target.addEventListener(tasktype, functionref, false); else if (target.attachEvent) target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});},init:function(mainmenuid, dir){ this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body this.topitemsindex=-1 this.ulindex=-1 this.topmenuids.push(mainmenuid) this.topitems[mainmenuid]=[] //declare array on object this.subuls[mainmenuid]=[] //declare array on object this.hidetimers[mainmenuid]=[] //declare hide entire menu timer if (this.enableshim && !this.shimadded){ this.shimmy={} this.shimmy.topshim=this.addshimmy(document.body) //create top iframe shim obj this.shimmy.bottomshim=this.addshimmy(document.body) //create bottom iframe shim obj this.shimadded=true } var menubar=document.getElementById(mainmenuid) var alllinks=menubar.getElementsByTagName("a") this.getwindowsize() for (var i=0; i<alllinks.length; i++){ if (alllinks[i].getAttribute('rel')){ this.topitemsindex++ this.ulindex++ var menuitem=alllinks[i] this.topitems[mainmenuid][this.topitemsindex]=menuitem //store ref to main menu links var dropul=document.getElementById(menuitem.getAttribute('rel')) document.body.appendChild(dropul) //move main ULs to end of document dropul.style.zIndex=2000 //give drop down menus a high z-index dropul._master=mainmenuid //Indicate which main menu this main UL is associated with dropul._pos=this.topitemsindex //Indicate which main menu item this main UL is associated with this.addEvent(dropul, function(){ddlevelsmenu.hidemenu(this)}, "click") var arrowclass=(dir=="sidebar")? "rightarrowpointer" : "downarrowpointer" var arrowpointer=(dir=="sidebar")? this.arrowpointers.rightarrow : this.arrowpointers.downarrow if (this.arrowpointers.showarrow.toplevel) this.addpointer(menuitem, arrowclass, arrowpointer, (dir=="sidebar")? "before" : "after") this.buildmenu(mainmenuid, menuitem, dropul, this.ulindex, true, dir) //build top level menu dropul.onmouseover=function(){ clearTimeout(ddlevelsmenu.hidetimers[this._master][this._pos]) } this.addEvent(dropul, function(e){ //hide menu if mouse moves out of main UL element into open space if (!ddlevelsmenu.isContained(this, e) && !ddlevelsmenu.isContained(ddlevelsmenu.topitems[this._master][parseInt(this._pos)], e)){ var dropul=this if (ddlevelsmenu.enableshim) ddlevelsmenu.hideshim() ddlevelsmenu.hidetimers[this._master][this._pos]=setTimeout(function(){ ddlevelsmenu.hidemenu(dropul) }, ddlevelsmenu.hideinterval) } }, "mouseout") var subuls=dropul.getElementsByTagName("ul") for (var c=0; c<subuls.length; c++){ this.ulindex++ var parentli=subuls[c].parentNode if (this.arrowpointers.showarrow.sublevel) this.addpointer(parentli.getElementsByTagName("a")[0], "rightarrowpointer", this.arrowpointers.rightarrow, "before") this.buildmenu(mainmenuid, parentli, subuls[c], this.ulindex, false, dir) //build sub level menus } } } //end for loop this.addEvent(window, function(){ddlevelsmenu.getwindowsize(); ddlevelsmenu.gettopitemsdimensions()}, "resize")},setup:function(mainmenuid, dir){ this.addEvent(window, function(){ddlevelsmenu.init(mainmenuid, dir)}, "load")}} Link to comment Share on other sites More sharing options...
dsonesuk Posted November 11, 2014 Share Posted November 11, 2014 (edited) Yes, because in 2008 using older doctype rel is not restricted to specific values, but is only supported for anchor elements, For HTML5 it is, so adding anything else in the value of rel attribute causes it to fail validation. In the code above you should have 3 references to .getAttribute('rel'), change these to getAttribute('data-menu'), and use data-menu, which is a custom attribute (after 'data-'), which is acceptable customisable attribute, that will validate, INSTEAD of rel attribute. Edited November 11, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
A_tom Posted November 11, 2014 Author Share Posted November 11, 2014 (edited) Line 237, Column 67: Attribute dd-menu not allowed on element a at this point.… <a href="http://dynamicdrive.com/new.htm" dd-menu="ddsubmenu1">SYSTEMS</a></li> Ok, dd-menu did not work, but data-menu (as you said) does work. Thanks. Edited November 11, 2014 by A_tom Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now