0

So, basically, I'm making navigation for a little project of mine and it's not working.

Link to broken code

I've only put the code on the "Code" link, so just ignore the others.

The problem is: when you hover over the Code link, the "Test :3" text appears. Both the Code link and the "Test :3" are both in a table, each having their own TD. I used Javascript to change the "Test :3" TD to the right class when you mouse-over the parent element, that the table is in. All of this works perfectly fine, it's just that I want the width of the "Test :3" TD to have a transition. I've attempted to add this, but it just isn't working.

If anybody could take a look, I would greatly appreciate it. :)

Grav
  • 1
  • its better to give your code here – Mostafa Shahverdy Mar 17 '13 at 14:28
  • did you try it in different browsers? – btevfik Mar 17 '13 at 14:29
  • 1
    You aren't even specifying widths for it to animate between. Do you think it will just pull some out of thin air? – James Coyle Mar 17 '13 at 14:29
  • Also, you shouldn't be using tables in this situation. It is semantically incorrect. – James Coyle Mar 17 '13 at 14:31
  • Why put them in a table? If I understand you correctly you want the test:3 to "slide in" ? – user1950929 Mar 17 '13 at 14:32
  • @jimjimmy1995 I'm pretty sure that if you took a look at the bottom of the CSS file you'd see that innernav_closed and innernav_opened both have the width supplied. And what else was I supposed to use? If you're gonna answer, tell me what to do, not what not to do. – Grav Mar 17 '13 at 14:37
  • @btevfik I tried in Firfox, IE, and Chrome, all the latest versions. – Grav Mar 17 '13 at 14:38
  • @user1950929 Yes, I do want it's width to transition from 0 to full width (as wide as it's inner content). The width changes appropriately, but there is no transition. I used tables because everything else I could think of refused to stay on the same line as the previous element. – Grav Mar 17 '13 at 14:43
  • Ok I think it would be best to use lists or so. And for the transition: you have to change from width:0 to full width and not from `display:none` to `display:block` or so. – user1950929 Mar 17 '13 at 17:40
  • I created a fiddle http://jsfiddle.net/73pgb/ maybe this could help. – user1950929 Mar 17 '13 at 17:44
  • @user1950929 Okay, I'll try it out. – Grav Mar 17 '13 at 19:16
  • @user1950929 So, that works, just one problem. How do I get it to animate to an automatic width? – Grav Mar 17 '13 at 19:23
  • it is usually not possible to use css transitions on properties with value `auto` , here is a workaround: http://stackoverflow.com/questions/3149419/ (very extensive and semantically not correct) – user1950929 Mar 17 '13 at 20:33

1 Answers1

0

CSS Transitions should be used for <tr> tag, not <td>

llvk
  • 248
  • 2
  • 13