Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Animated Collapsible DIV v2.4 -- 'data-openimage' does not validate

  1. #1
    Join Date
    Feb 2009
    Posts
    48
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default Animated Collapsible DIV v2.4 -- 'data-openimage' does not validate

    Animated Collapsible DIV v2.4
    http://www.dynamicdrive.com/dynamici...edcollapse.htm

    ------------------------------

    Quick question here. I'm working to make a "group" with just a single link "slidedown". No toggling involved. Simply for each panel that I open, all the others close up. This way, one panel at least is open at all times. I removed the links with the "slide up" function. The question is, I still want the expand.jpg and collapse.jpgs next to the link to toggle back and forth, however I don't want the image itself to be clickable or part of the event handler...just the link. How do I disable the image so that the user can't use that to toggle back and forth?
    Last edited by Shammus; 02-03-2010 at 10:23 PM.

  2. #2
    Join Date
    Feb 2009
    Posts
    48
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    Actually, I fixed this and got it working by changing the 'toggle' event to 'expand' in the first <a> tag in each line.

    New issue though.... The 'data-openimage' and 'data-closedimage' attributes do not validate. Apparently they aren't valid attributes? Are there other attributes I could use instead?

  3. #3
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    "data-*" is a valid HTML 5 attribute. If you wish your page to validate, you'll need to declare the recommended HTML doctype at the top of your page:

    Code:
    <!DOCTYPE HTML>
    DD Admin

  4. #4
    Join Date
    Feb 2009
    Posts
    48
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    Here's the <doctype> I'm using on this page...

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

    I'm not thinking it's the doctype though. The page that contains the script for the 'Animated Collapsible DIV v2.4' is also kicking up error messages for this attribute.
    Last edited by Shammus; 02-03-2010 at 10:51 PM.

  5. #5
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Try replacing that with the one I mentioned. Here's more info on this doctype.
    DD Admin

  6. #6
    Join Date
    Feb 2009
    Posts
    48
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    That simple doctype works, although I'd prefer my other one as changing the doctype caused a lot of other problems on my page. Is there another way to get this working?

  7. #7
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    By problems, do you mean in IE8?
    DD Admin

  8. #8
    Join Date
    Feb 2009
    Posts
    48
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    There are actually different issues that occur in IE 8 and Firefox 3.5. Random things like elements on the page suddenly not lining up or extra space inserted between things. The validator also kicked up a fresh new set of 30-40 items to fix. Thanks again for taking a look....

  9. #9
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Hmm the other approach is to change the two attributes used, "data-openimage" and "data-closedimage", to something that will validate in your current doctype. The problem is there aren't that many HTML attributes at your disposal, considering "rel" is also taken by the script as well. But just as an example, lets say you decide to use "title" and "rev" respectively instead:

    Code:
    <a href="#" rel="toggle[jason]" title="expand.jpg" rev="collapse.jpg"><img src="collapse.jpg" style="border-width:0" /></a>
    To enable the above, inside the .js file, do a search and replace, replacing all "data-openimage" with "title", and all "data-closedimage" with "rev". That should do it.
    DD Admin

  10. The Following User Says Thank You to ddadmin For This Useful Post:

    Shammus (02-04-2010)

  11. #10
    Join Date
    Feb 2009
    Posts
    48
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    Exactly what I needed. Thanks man, the script works perfectly and validates as well. Much appreciated!

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
  •