Phantom001 Phantom001 - 3 months ago 10
Javascript Question

Jquery custom Object parameter in Firefox (dynamic Navigation load dynamic content)

Sorry I need your Help again :-(

I have made a Navigation with Main und Sub navigation. The sub menu will be shown or hidden automatically, depending on the click tab/link in the main menu.

The active state changes by the menstr value.

In IE it works perfect :-) in Firefox it does nothing :-(

I think the problem is the custom object attributes from the

<a>
tag that Firefox can't handle ?

Here is my code with comments:

Main level:

<ul>
<li><a id="M1" data-remote="true" menstr="M1:Sub1:S2" href="start1.php">Start1</a></li>
<li><a id="M2" data-remote="true" menstr="M2:0:S0" href="start2.php">Start2</a></li>
</ul>


Sub level:

<div id="Sub1" class="subv" style="display:none">
<ul>
<li><a id="S1" data-remote="true" menstr="M1:Sub1:S1" href="sub1.php">Sub1</a></li>
<li><a id="S2" data-remote="true" menstr="M1:Sub1:S2" href="sub2.php">Sub2</a></li>
</ul>
</div>


menstr:

So menstr gives the actual state on the Navigation.

M1 to Mx = the active main tab (M1 is the first tab in the main bar)

Sub1 to Subx = the name on the sub navigation (0 = no sub bar)

S1 to Sx = The active Sub Tab

jQuery / Java at bottom of the page:

<script>

// Look if <a> is clicked and data-remote is true
$('a[data-remote]').click(function(e) {

// Prevent Default Action
e.preventDefault()

//Remove activ state/class from all Main Tabs
$('.active').removeClass('active');

//Remove active state/class from all Sub Tabs
$('.sub_nav_active').removeClass('sub_nav_active');

//Hide the Sub Tab
$('.subv').hide();

// Get and split the menstr
var $menstr = this.menstr.split(':');

//Set Main tab active
$('#' + $menstr[0]).addClass('active');

//Set Sub tab active
$('#' + $menstr[2]).addClass('sub_nav_active');

//Show Sub div if some is there
$('#' + $menstr[1]).show();

// Load the content of href in the main div
$('#main').load(this.href);

});
</script>


I think one solution is give the menstr string inside the href but I think its not nice ...

The second problem I think is without data-remote I need to identify the links to handle with a class but I need it for the active state ...

THANK YOU VERY MUCH its a real great community :-)

Answer

no problem Phantom001... your code is working fine.. and i was fiddling with it.. you can get a nice sub menu effect if you nest your submenus like this... jsFiddle link

<ul>
<li>
     <a id="M1" data-remote="true" menstr="M1#Sub1#S2" href="start1.php">Start1</a>
    <div id="Sub1" class="subv"  style="display:none">
       <ul>
       <li><a id="S1" data-remote="true" menstr="M1#Sub1#S1" href="sub1.php">Sub1</a></li>
       <li><a id="S2" data-remote="true" menstr="M1#Sub1#S2" href="sub2.php">Sub2</a></li>
     </ul>
     </div>
</li>

 <li>
<a id="M2" data-remote="true" menstr="M2#Sub2#X1" href="start2.php">Start2</a>


  <div id="Sub2" class="subv"  style="display:none">
 <ul>
   <li><a id="X1" data-remote="true" menstr="M2#Sub2#X1" href="sub3.php">Sub3</a></li>
 </ul>
 </div>
     </li>

     </li>

 </ul>