Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery custom Object parameter in Firefox (dynamic Navigation load dynamic content)
    primarykey
    data
    text
    <p>Sorry I need your Help again :-(</p> <p>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.</p> <p>The active state changes by the menstr value.</p> <p>In IE it works perfect :-) in Firefox it does nothing :-(</p> <p>I think the problem is the custom object attributes from the <code>&lt;a&gt;</code> tag that Firefox can't handle ?</p> <p>Here is my code with comments:</p> <p>Main level:</p> <pre><code> &lt;ul&gt; &lt;li&gt;&lt;a id="M1" data-remote="true" menstr="M1:Sub1:S2" href="start1.php"&gt;Start1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="M2" data-remote="true" menstr="M2:0:S0" href="start2.php"&gt;Start2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>Sub level:</p> <pre><code>&lt;div id="Sub1" class="subv" style="display:none"&gt; &lt;ul&gt; &lt;li&gt;&lt;a id="S1" data-remote="true" menstr="M1:Sub1:S1" href="sub1.php"&gt;Sub1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="S2" data-remote="true" menstr="M1:Sub1:S2" href="sub2.php"&gt;Sub2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p><strong>menstr:</strong></p> <p>So menstr gives the actual state on the Navigation.</p> <p>M1 to Mx = the active main tab (M1 is the first tab in the main bar)</p> <p>Sub1 to Subx = the name on the sub navigation (0 = no sub bar)</p> <p>S1 to Sx = The active Sub Tab</p> <p>jQuery / Java at bottom of the page:</p> <pre><code> &lt;script&gt; // Look if &lt;a&gt; 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); }); &lt;/script&gt; </code></pre> <p>I think one solution is give the menstr string inside the href but I think its not nice ...</p> <p>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 ...</p> <p>THANK YOU VERY MUCH its a real great community :-)</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload