Conflict with Oracle Apex when showing "Edit links"

[gfasbend]

Hi All,
I integrated Smart menu’s into Oracle Apex using a list template.
However when you’re in developer mode, Apex adds some hidden links to the Unordered list. So the source becomes something like this:
ul -> li -> a -> a[display:none]
Now when you click the menu, the hidden attribute is applied to the original link.
So both links are now hidden and the menu item disappears.

So the javascript code probable copies attributes from links inside the “li” tag and applies it again later.
If I manually test this and reorder the 2 links, things work fine
so: ul -> li -> a[display:none] -> a

However I can not change the way Apex adds hidden links to existing links.

Can anyone think of a way to prevent the javascript copying the display:none attribute to the previous “a” tag inside the “li” tag?

Regards
Guido

[admin]

Hi,

Please post an exact code sample that I could test as I am not able to reproduce this. I tried the following on the default demo in the download package:

<li><a href="#">Introduction to SmartMenus jQuery<a href="#" style="display:none;">hidden link</a></a></li>

The item does not disappear if I click it (just its parent sub menu is deactivated).

Normally the script shouldn’t copy any attributes the way you describe. I guess some other script on your page is doing that.

Thanks!

[gfasbend]

Hi,

Yes. I grabbed the example from the download and changed the sample menu in the following:

<'ul id="main-menu" class="sm sm-blue">
  <'li><'a href="http://www.smartmenus.org/">Home<'/a><'/li>
  <'li><'a style="color:blue;" href="http://www.smartmenus.org/about/">About<'/a><'a style="display:none;" href="xx">xxx<'/a>
    <'ul>
      <'li><'a href="http://www.smartmenus.org/about/introduction-to-smartmenus-jquery/">Introduction to SmartMenus jQuery<'/a><'/li>
      <'li><'a href="http://www.smartmenus.org/about/themes/">Themes<'/a><'/li>
      <'li><'a href="http://vadikom.com/about/#vasil-dinkov">The author<'/a><'/li>
      <'li><'a href="http://www.smartmenus.org/about/vadikom/">The company<'/a>
        <'ul>
........

I didn’t copy the whole code, but the only thing I changed is the second line with the “About” menu item.
If I run this demo, the “About” menu item disappears and the pulldown menu is placed on top of it.
If I then Inspect the generated html, I see that the first “a” tag (the About link) has now an extra attribute display:none in the style attribute.

Can you reproduce this?
I’m using Firefox and Safari here by the way. I haven’t tried it with IE yet.

Thanks for looking into this.

Regards Guido

[gfasbend]

Mmmm, how can I prevent that html code is interpreted?
I used the “Code” option.
Anyway.
I now see that the thing that’s different in my code is the following, the first a tag is closed and then another is added.
You enclosed an a tag inside the other.
This is how it goes wrong:

<'li><'a href="#">Introduction to SmartMenus jQuery<'/a><'a href="#" style="display:none;">hidden link<'/a><'/li>

If you try it like this, you will probably see the same result.

[admin]

Thanks, I am now able to reproduce the issue!

To fix this you would need a small modification of the default source – you need to find/replace the following:

prevAll('a')

with this:

prevAll('a').eq(-1)

If you use the minified version, just use double quotes prevAll("a").

I actually think this is a good generic tweak so I will make sure it’s added in future versions so you don’t need to worry that you could lose the fix if you decide to upgrade the script in the future.

As for posting HTML code samples, just replace the opening <'s with <'s for now. I will surely fix this when I have a bit more time..

Cheers!

[gfasbend]

Thanks!
This works perfect.
I’ll do it manually for now, no problem.

Thanks for your help.

Guido

[Author]

Posts