anchor in achor - something changes DOM

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

Please do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.

This forum is for discussing mojoPortal development

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

You can monitor commits to the repository from this page. We also recommend developers to subscribe to email notifications in the developer forum as occasionally important things are announced.

Before posting questions here you might want to review the developer documentation.

Do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.
This thread is closed to new posts. You must sign in to post in the forums.
7/18/2012 8:25:58 AM
Gravatar
Total Posts 4

anchor in achor - something changes DOM

Dear Community, dear developers,

I'm currently developing a site with Mojo, using our custom controls. Currently using the latest, 2.3.8.5.

I'm asking for your kind help with the issue below. Something, most likely some client script, changes DOM, and makes error.

<!-- V1. coming from server -->
<div class="topmenu">
&nbsp;
<a href="javascript:void(0)" id="ctl00_TopMenu1_alma" class="topmenu-main">
<span class="topmenu-main-title">Megoldásaink</span>
<div class="topmenu-itemcontent">
<a href="xxx">asdas</a> <!-- when I remove this internal anchor, everything is ok; when I use this the site (prob some javascript) changes dom.  -->
</div>
</a>


<!-- V2. changed by client? -->
<a href="javascript:void(0)" id="ctl00_TopMenu1_alma" class="topmenu-main bbnotgood">
<span class="topmenu-main-title">Megoldásaink</span>
</a>   <!-- unintentionally closes the anchor -->

<div class="topmenu-itemcontent"><a href="javascript:void(0)" id="ctl00_TopMenu1_alma" class="topmenu-main bbnotgood"><!-- unintentionally repeats the anchor -->
</a><a href="xxx" class="bbnotgood">asdas</a>

</div>

Thank you,

 

Peter

7/18/2012 8:28:25 AM
Gravatar
Total Posts 4

Re: anchor in achor - something changes DOM

Some further comments:

- by the way, what is bbnotgood? Alien code.

- the unkown suspicious script makes different output on different browsers.

- when I remove inner anchor (link) everything is ok

7/18/2012 10:18:28 AM
Gravatar
Total Posts 18

Re: anchor in achor - something changes DOM

All the browsers behave differently because nested anchor tags are not legal html, so each is trying to fix your code in order to display it.

7/19/2012 4:03:01 AM
Gravatar
Total Posts 4

Re: anchor in achor - something changes DOM

Thank you for your reply.

All right, I did a try, and created nested anchors outside mojoportal. That case there was no any modification happened.

But the workaround what I'm trying to use is currently to switch the first anchor, with hovering to div. Miracle: a div:hover seems to be existing and working. (At least in most of my browsers.)  So, this is actually what HuwR indirectly suggested with "illegal html".

 

7/19/2012 9:23:05 AM
Gravatar
Total Posts 2239

Re: anchor in achor - something changes DOM

Hi,

I am not sure what your end goal is but your markup is invalid and you shouldn't assume it's going to work at all in any browser (even if it does right now). It is invalid to have a DIV inside of an A because a DIV is a block level element and an A is an inline element. Inline elements cannot contain Block elements. It is also invalid to put an A inside of an A. I really don't understand why you would want to do that anyway. If you can explain what your end goal is, I can probably provide you with markup that is valid and will work in all browsers, all the time.

7/20/2012 2:16:34 AM
Gravatar
Total Posts 4

Re: anchor in achor - something changes DOM

Yes, most likely I'm doing invalid markups, but why and what changes the code. If I want illegal markup, let me do it. :)

Ok, really, I don't want illegal markups. I'm making websites very rarely, and my goal was to quickly build a popup, or dropdown. (not only menu, which is already in mojoportal:pagemenu, but custom content of the popup panel.)

In pure .net or html there is no trouble with this. In the source :hover I change the display style attribute of the popup. It's not my invention, I've seen it somewhere else. I promise, next time I will watch for a more standard way.

 

Thank you for your reply, answer,  and attention.

 

7/20/2012 6:49:51 AM
Gravatar
Total Posts 18

Re: anchor in achor - something changes DOM

You really should be writing valid html, if you don't you can't guarantee how a browser is going to behave or how it is going to render your html.

Menus are normally built using lists like below

<div class="topmenu">
    <ul id="TopMenu1_alma" class="topmenu-main" >
        <li class="topmenu-main-title">Megoldásaink
            <ul class="topmenu-itemcontent">
                <li><a href="xxx">asdas</a></li>
            </ul>
        </li>
    </ul>
</div>

7/20/2012 8:44:27 AM
Gravatar
Total Posts 2239

Re: anchor in achor - something changes DOM

Nothing in mojoPortal is changing your markup. Your markup is more than likely being changed by the browser because it's invalid. I would write your markup this way:

<div class="topmenu">
  <ul>
    <li onClick="javascript:void(0)" id="ctl00_TopMenu1_alma" class="topmenu-main">
      <span class="topmenu-main-title">Megoldásaink</span>
      <span class="topmenu-itemcontent">
        <a href="xxx">asdas</a>
      </span>
    </li>
  </ul>
</div>	 

HTH,
Joe D.
 

You must sign in to post in the forums. This thread is closed to new posts.