Results 1 to 2 of 2

Thread: AnyLink CSS Menu and the rel attribute

  1. #1
    Join Date
    Dec 2012
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default AnyLink CSS Menu and the rel attribute

    Script Title: AnyLink CSS Menu v2.3
    Script URL (on DD): http://www.dynamicdrive.com/dynamici...anylinkcss.htm

    I have been using Demo #2 (multiple columns) as the basis for my site’s menus and have been quite happy with them (http://www.spaceandastronomystamps.com/). As I get ready for HTML5, I am running into validation problems with the way the rel attribute is used in this script.

    I am looking for either (1) a way to modify AnyLink CSS so that something other than rel is used to associate the drop-down with the anchors or (2) a completely different multi-column menu scheme that does not use rel.

    TIA

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    It really doesn't matter nor hurt anything. But for purists, read on . . .

    In HTML 5 a new constraint was placed upon the validity of the rel attribute. It's value must now be registered with an online database that's more or less a part of the HTML 5 standard. It's impractical to register each use you might want to put the rel attribute to and it's value is supposed to fit a narrow list of categories which is impossible for the use this script needs to make of it. However, also with the advent of HTML 5 we are given a whole new set of attributes that are valid on any element, the data dash attributes. Any attribute name that begins with 'data-' can have any text value as long as that value begins with a letter or an underscore.

    To make use of that, around line #213 of anylinkcssmenu.js we have this highlighted code:

    Code:
    setupmenu:function(targetclass, anchorobj, pos){
    	this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
    	var relattr=anchorobj.getAttribute("rel")
    	var dropmenuid=relattr.replace(/\[(\w+)\]/, '')
    	var menu=this.menusmap[targetclass+pos]={
    		id: targetclass+pos,
    		anchorobj: anchorobj,	
    		dropmenu: document.getElementById(dropmenuid),
    		revealtype: (relattr.length!=dropmenuid.length && RegExp.$1=="click") || anylinkcssmenu.ismobile? "click" : "mouseover",
    		orientation: anchorobj.getAttribute("rev")=="lr"? "lr" : "ud",
    		shadow: document.createElement("div")
    	}
    	menu.anchorobj._internalI . . .
    Using a text only editor like NotePad, make that line like so:

    Code:
    	var relattr=anchorobj.getAttribute("data-rel")
    Save and use that version. Now in your markup, instead of using the rel attribute, you can use the data-rel attribute which is valid in HTML 5. Just be aware that it's not valid in the other DOCTYPES.
    Last edited by jscheuer1; 02-10-2013 at 02:25 PM. Reason: add filename
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    huygens1962 (02-10-2013)

Similar Threads

  1. Replace <img> tag with it's alt attribute ?
    By PhillyPhanatic in forum JavaScript
    Replies: 7
    Last Post: 10-09-2009, 12:15 PM
  2. Switch Menu - "Missing Secure Attribute"
    By dvarner in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-07-2008, 04:27 PM
  3. get & set attribute functions
    By Trinithis in forum JavaScript
    Replies: 2
    Last Post: 05-20-2007, 09:49 PM
  4. AnyLink Drop Down Menu/Anylink Css
    By wendyscountrycloset in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-04-2007, 04:07 PM
  5. Replies: 2
    Last Post: 08-03-2006, 01:56 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •