PDA

View Full Version : Animated Collapsible DIV v2.4 -- 'data-openimage' does not validate



Shammus
02-03-2010, 04:36 PM
Animated Collapsible DIV v2.4
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.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?

Shammus
02-03-2010, 10:16 PM
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?

ddadmin
02-03-2010, 10:25 PM
"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:


<!DOCTYPE HTML>

Shammus
02-03-2010, 10:32 PM
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.

ddadmin
02-03-2010, 10:51 PM
Try replacing that with the one I mentioned. Here's more info (http://www.javascriptkit.com/howto/doctype.shtml) on this doctype.

Shammus
02-03-2010, 10:57 PM
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?

ddadmin
02-03-2010, 11:00 PM
By problems, do you mean in IE8?

Shammus
02-03-2010, 11:05 PM
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....

ddadmin
02-03-2010, 11:42 PM
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:


<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.

Shammus
02-04-2010, 03:48 PM
Exactly what I needed. Thanks man, the script works perfectly and validates as well. Much appreciated!

Wakel
10-31-2010, 09:19 AM
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:


<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.

Hi DDAdmin,

Replacing all "data-openimage" with "title", and all "data-closedimage" with "rev" works great, but I use title as my image alt for FireFox

title="images/minus_icon.png" rev="images/plus_icon.png" title"myimagetitle".
and its not validating as a xhtml because it has two title's. Is there something else to replace "data-openimage" with "title", but not title???

Many thanks for your time

ddadmin
11-01-2010, 07:39 AM
Hmm you're really running out of attributes to use then. :) Instead of "title", you may want to try "class" or "dir".

It should be noted again that "data-*" attributes are valid attributes in HTML 5. Simply by adding a HTML5 doctype to the top of your page will cause your page to validate properly:


<!DOCTYPE HTML>