Phantom001 Phantom001 - 2 months ago 6x
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

tag that Firefox can't handle ?

Here is my code with comments:

Main level:

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

Sub level:

<div id="Sub1" class="subv" style="display:none">
<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>


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:


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

// Prevent Default Action

//Remove activ state/class from all Main Tabs

//Remove active state/class from all Sub Tabs

//Hide the Sub Tab

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


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 :-)


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

     <a id="M1" data-remote="true" menstr="M1#Sub1#S2" href="start1.php">Start1</a>
    <div id="Sub1" class="subv"  style="display:none">
       <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>

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

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