JqxMenu which doesn't show !

[bronsonParticipant]

Hi every body
I run in pb with «Styling and Appearance» try to setup a horizontal menu with the flwg html

the hml imbricated in quiet sophisticated html page refuse to show, the container jqxmenuH show but the first level item keep hidden and the ul is far at right outside with a margin-left topping at more than 8 000 px !!!???

Is there a bug with the jqwidget’s lastest version ?
Any help would be appreciated

[bronsonParticipant]

Hi every body, sorry for my first post which i screwed up by mis-managing the tags

I run in pb with «Styling and Appearance» trying to setup a horizontal menu with the flwg html

<div id='jqxWidget' style='height: 40px;'>
    <div id='jqxMenuH' class="SousTitre-Epce" style='margin-left:20px; margin-right: 20px; margin-top: 5px; border:1px solid #FFF; background-color:rgba(255,255,255,0.4); '>
<ul style="padding-top:5px; ">
    <li style="border:0px solid #000; width:130px; "><a style="cursor:pointer; width:200px; ">Votre Espace</a>
        <ul style='width: 200px;'>
            <li>Votre identification
                <ul style='width: 200px;'>
                    <li><a href="#" id="vousIdentifier" class="Text-Epce Qtip2Fonction" onclick="Traffic(1, 'Oui'); " title="Si pour une raison quelconque vous avez perdu votre identification ou vous n’êtes pas <u style='color:#999; '>patronyme</u>, utilisez cette fonction d'identification.">Vous identifier</a></li>
                    <li><a href="#" class="Text-Epce Qtip2Fonction" title="Pour modifier votre mot de passe">Vos identifiants</a></li>
                </ul>
            </li>
            <li><a href="#" class="Text-Epce Qtip2Fonction" onclick="fenetreAideGene(); centralUpdater('../PHP/StatPerso.php', '', 'contenuFenetreAideGene'); " title="Pour accéder à vos statisques personnelles">Vos statistiques</a></li>
            <li><a href="#" class="Text-Epce Qtip2Fonction" title="Pour correspondre avec votre référent">Votre référent</a></li>
        </ul>
    </li>
    <li style="border:0px solid #000; width:130px; "><a href="#" id="aideGenerale" class="Qtip2Fonction" title="Un wiki est en cours de réalisation, patience...">Aide générale</a></li>                  
    <li style="border:0px solid #000; width:130px; " id="nousJoindre"><a href="#" class="Qtip2Fonction" title="Pour nous signaler un disfonctionnement (bug), un lien «&nbsp;&lt;i&gt;mort&lt;/i&gt;&nbsp;», un abus ou nous faire une suggestion.">nous Signaler…</a>
        <ul style="width:160px; ">
            <li><a href="#" class="Text-Epce" onClick="$('masque').style.display= 'block'; centralUpdater('../Commun/Mail.php', 1,  'PropositionRessources'); $('PropositionRessources').style.display= 'block'; return false; ">Un abus</a></li>
            <li><a href="#" class="Text-Epce" onClick="gestionBug(this); ">Un bug</a></li>
            <li><a href="#" class="Text-Epce" onClick="gestionBug(this); ">Une suggestion</a></li>
        </ul>
    </li>
    <li style="border:0px solid #000; width:130px; " id="Manifestations"><a href="#" class="Qtip2Fonction" title="liste des évènements&nbsp;:<br />• Lieu d’installation<br />• Région d’installation<br />• Nationales<br /><strong>En cours de mise en œuvre</strong>">Les Manifestations</a>
        <ul style="width:160px; ">
            <li><a href="#" class="Text-Epce">Locales</a></li>
            <li><a href="#" class="Text-Epce">Régionales</a></li>
            <li><a href="#" class="Text-Epce">Nationale</a></li>
        </ul>
    </li>
    <li href="#" style="border:0px solid #000; width:130px; "><img src="../Images/Communication/faceBook.png" id="facebook" style="cursor:pointer; width:16px; height:16px; margin-top:0px; margin-right:10px; " title="Facebook" /><img src="../Images/Communication/twitterLogo.png" id="twitter" style="cursor:pointer; width:18px; height:15px; margin-top:0px; margin-left:10px; " title="Twitter" />&nbsp;<img src="../Images/Deconexion.png" name="deconnexion" id="deconnexion" style="cursor:pointer; width:15px; height:15px; margin-left:10px; " title="Pour vous déconnecter" onClick="deconnecter(); " /></li>
</ul>    </div>
</div>

The script loaded at the end of loading process and is as :

$j("#jqxMenuH").jqxMenu({ height: 30, theme: 'azerty', mode: 'horizontal', animationShowDuration: 0, animationHideDuration: 0, animationShowDelay: 0, animationShowDuration: 300, animationHideDuration: 200, animationShowDelay: 200, popupZIndex: 999999});
	$j("#jqxMenuH").css('visibility', 'visible');
	// Create a jqxMenu	width: '100%', height: 35, mode: 'horizontal'
	var centerItems = function () {
		var firstItem = $j($j("#jqxMenuH ul:first").children()[0]);
		firstItem.css('margin-left', 0);
		var width = 0;
		var borderOffset = 2;
		$j.each($j("#jqxMenuH ul:first").children(), function () {
			width += $j(this).outerWidth(true) + borderOffset;
		});
		var menuWidth = $j("#jqxMenuH").outerWidth();
		firstItem.css('margin-left', (menuWidth / 2 ) - (width / 2));
	}
	centerItems();
	$j(window).resize(function () {
		centerItems();
	});

On a stand alone basis the process works (http://inedie.dyndns.org/ComperioV3/Sanstitre-1.php)

The hml imbricated in quiet sophisticated html page refuse to show, the container jqxmenuH show but empty the first level item keep hidden and the ul is far at right outside of the screen with a margin-left topping at more than 8 000 px !!!???
Is there a way to circum-navigate this
Is there a bug with the jqwidget’s lastest version ?
How can’i load an older jqwidget version ?
Any help would be appreciated

[Peter StoevKeymaster]

Hi bronson,

On your page, you do not use the latest version. In addition, to work with “click” events, the “itemclick” event of jqxMenu is expected to be used. What should we observe on the posted page? Btw. setting margins is part of external styling of the menu.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[bronsonParticipant]

Thanks Peter,

I checks my problems against your advises and come back to you soon !

[bronsonParticipant]

Every things works fine now
Thks Peter

[Peter StoevKeymaster]

Hi bronson,

Thanks about the update.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts