View Full Version : Resolved Bullet List Accordion menuheader width

07-10-2013, 03:55 PM
1) Script Title: Bullet List Accordion menuheader width

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm

3) Describe problem: Hello again ! I need your help once again with thw width of a menu (the nested bullet List Accordion). I already posted a thread about the glossy accordion (i had problem with the width), but I found on another post that I would not be able to do multi level with the glossy model, so I changed for the Bullet.
Again, I have problem with the width, but only the part where there are the red/black menu header. Everything else is fine. I removed the width from :

width: 180px; /*width of accordion menu*/

from the css stylesheet, but the menu header still is a problem.

Heres a printscreen (i cannot post the URL since it's in an Intranet):

Did I, again, do something wrong?

Thank you

Have a nice day.

07-11-2013, 08:06 AM
Same deal here again, in developer tools, if I delete the width, the menu, including the headers with the red and the dark gray background images, fills the width of the parent. Last time you had a parent that was narrow and you got the menu outside of that parent, I think by removing it. In this case, that may or may not be harder to do, and/or there could possibly be another problem or problems, because I see that the sub-menu items are wide, and this wasn't the case before. Perhaps you added a style to the header classes (.menuheader and/or .expandable), like, maybe display: inline; or display: inline-block;, etc., causing that. Or it could be browser specific. What browser are you using?

I can't really be much more specific without seeing the page.

I know you are doing this on an intranet and that makes it hard for you to publish an example. But if you really need more help, you could make a copy of the page and its assets, and put those up live somewhere to demonstrate the issue. You could change link names and text to "protect the innocent", and still show us what it actually looks like as far as layout goes.

In fact, if you're still stumped, just the mere act of trying to duplicate the issue in this fashion may cause the light bulb to turn on and thereby solve the problem.

07-11-2013, 05:40 PM
Hi again,

unfortunately, I see no parents problem this time and there seems to be no header class problem.
I tried to modify some of them, but it doens't seem to work.

I can give you the link to the page : http://intraedition/vpaf-ti-normasyst/ListeDocuments.asp?Critere=CASCompCadNor;\Normasyst\ComposantesCadreNormatif\Demarchedeveloppement\ChoixSolutionAffaires&Titre=Choix d'une solution d'affaires&Survol=survol-sa.htm

but since I'm working for the Government here (I am not working on confidential content), you might not be able to see it.
We only use IE as browser, because all the links won't work on another broswer.

If the link doens't work, heres the code i ahve in Visual Studio (but it's only one part of the page with the accordion) :


'Ajout validation code utilisateur pour l'affichage du bouton

strUserID = Request.ServerVariables("LOGON_USER")
strCodeIdent = Split(strUserID, "\")

if Len(strCodeIdent(1)) > 7 then
bolAffichageBouton = false
bolAffichageBouton = true
end if

'Ouverture des fichiers XML pour le bouton d'affichage
Set objXMLFichr = CreateObject("MSXML2.DOMDocument")
objXMLFichr.async = False
strCheminXML = Server.MapPath("/commun/parametres/abon-compo-excl.xml")
Set objXMLExt = CreateObject("MSXML2.DOMDocument")
objXMLExt.async = False
strCheminXML = Server.MapPath("/commun/parametres/abon-types-fich-incl.xml")

dim strURLPage

function AbnPageReprtr(strURLPage)

set objXMLTopFichr = objXMLFichr.documentElement
strURL = Left(strURLPage, InStrRev(strURLpage,"/"))
aURL = Split(strURL,"/")
strURL = "/"
AbnPageReprtr = true
For Each l in aURL
If l <> "" Then
strURL = strURL & l & "/"
set objcurrentNodeFichr = objXMLTopFichr.selectSingleNode("//url-commun-objet [@type-compo=""rep""] [. = """ & strURL & """]")
if not(objcurrentNodeFichr is nothing) then
AbnPageReprtr = false 'est dans le fichier d'exclusion
exit for
AbnPageReprtr = true
end if
end if
if AbnPageReprtr then
set objcurrentNodeFichr = objXMLTopFichr.selectSingleNode("//url-commun-objet [@type-compo=""page""] [. = """ & strURLPage &"""]")
if objcurrentNodeFichr is nothing then
AbnPageReprtr = true 'n'est pas dans le fichier d'exclusion
AbnPageReprtr = false 'est dans le fichier d'exclusion
end if
end if
set objXMLTopFichr = nothing
set objcurrentNodeFichr = nothing
end function

Function AbnExtension(strURLPage)

intLongueur = Len(strURLPage)
if Right(strURLPage, 1) <> "/" then
intPosition = InStrRev(strURLPage, ".")
if intPosition <> 0 then
strExtension = mid(strURLPage, intPosition+1, Len(strURLPage))
set objXMLTopExt = objXMLExt.documentElement
set objcurrentNodeExt = objXMLTopExt.selectSingleNode("//extension-fichier [. = '" & LCase(strExtension) & "']")
if objcurrentNodeExt is nothing then
AbnExtension = false 'n'est pas dans le fichier d'extension
AbnExtension = true 'est dans le fichier d'extension
end if
AbnExtension = false
end if
AbnExtension = true
end if
set objXMLTopExt = nothing
set objcurrentNodeExt = nothing
end function

That's part 1, part 2 will be on another post

The problem is that the element in the accordion are dynamics and they changed depending on the button we press in the previous page.

So i had to work with a page that already exists to put the multi-level accordion in it, so all the code is not mine, it was there before me.

Thanks for you help, it is very appreciated. I'm still searching for the problem on my side.
If you want the code from my page (with the asp adn the java and the html) just tell me and i'll post it.

Have a nice day !

07-11-2013, 05:41 PM
part 2

if Request.QueryString("Critere") <> "" then
'on error resume next

'Création du recordset de résultat
'set g_rsResultat = g_oQuery.CreateRecordSet("sequential")

'Gestion des erreurs générées par Copernic à la création du Recordset
if err.number <> 0 or Query.exception <> 1 then%>
<table border="0">
<div class="TexteNormal">

<%If Query.exception <> 1 Then%>

<p><b>La requête n'est pas valide.</b></p>
<p>Essayez à nouveau. Si le problème persiste, soulevez le problème au SSPOC.</p>

<%elseIf err.number <> 0 Then%>

<p><b>Une erreur est survenue sur le serveur.</b></p>
<p><b>No. Erreur :</b> <%Response.write err.number%><br>
<b>Description :</b> <%Response.write err.description%><br>
<b>Requete :</b> <%=g_strQuery%><br>
<b>Colonnes :</b> <%=g_oQuery.Columns%></p>
<p>Essayez une autre requête. Si le problème persiste, soulevez le problème au SSPOC.</p>

<%end If%>


<%else 'Aucune erreur lors du CreateRecordset
on error goto 0
end if 'err.number <> 0 %>

<table border="0">

<%if err.number = 0 And Query.Exception = 1 then 'Aucune erreur lors du CreateRecordset

dim strImgTypeDoc 'Contient le nom de l'image correspondant au type de document
dim strCategDocPrec 'Contient la catégorie du document précédent

strCategDocPrec = "" %>

<%if g_strSurvol <> "" then
if instr(1, g_strSurvol, ".htm") or instr(1, g_strSurvol, ".html") or instr(1, g_strSurvol, ".asp") then
strImgTypeDoc = "/commun/images/html.gif"

elseif instr(1, g_strSurvol, ".doc") then
strImgTypeDoc = "/commun/images/word.gif"

elseif instr(1, g_strSurvol, ".xsl") then
strImgTypeDoc = "/commun/images/excel.gif"

elseif instr(1, g_strSurvol, ".ppt") then
strImgTypeDoc = "/commun/images/ppt.gif"

elseif instr(1, g_strSurvol, ".pdf") then
strImgTypeDoc = "/commun/images/pdf.gif"

elseif instr(1, g_strSurvol, ".zip") then
strImgTypeDoc = "/commun/images/zip.gif"

strImgTypeDoc = "/commun/images/Type_inconnu.gif"
end if %>

<a href="<%=g_strSurvol%>" target="_self" class="TexteNormal"><img border="0" src="<%=strImgTypeDoc%>" align="top" alt="Survol" hspace="2" width="16" height="16">Survol</a>
<%end if

if Query.TotalCount > 0 then

'Remplir le tableau avec les données que l'on veut trier
dim strIndex, pos1, pos2, len2
strIndex = 0
redim TabDocument(10,Query.totalcount-1)
For Each Document In Query.Results
tabDocument(0,strIndex) = Document.fields("@CASCategorieDocDisplay")
tabDocument(1,strIndex) = Document.fields("@persoTitle")
tabDocument(2,strIndex) = Document.Date
tabDocument(3,strIndex) = strIndex+1
for ctrChampReste = 4 to 10
tabDocument(ctrChampReste,strIndex) = ""
strIndex = strIndex + 1

'Remplir le tableau contenant les ordre de tri pour chaque colonne du tableau à trier
Dim ctrOrdreTri, tabOrdreTri(10)
tabOrdreTri(0) = "d"
tabOrdreTri(1) = "a"
tabOrdreTri(2) = "d"
for ctrOrdreTri = 3 to 10
tabOrdreTri(ctrOrdreTri) = ""

'Exécuter le tri
call TriColTab(tabDocument,tabOrdreTri)%>

<!--Test 05-07-2013-->
<div class="arrowlistmenu">
<!--finTest 05-07-2013-->
<%For i = 0 to Ubound(TabDocument,2)
strIndex = tabDocument(3,i)
set Document = Query.Results(strIndex)

'DEE02 strVPath = g_rsResultat("VPath")
strVPath = document.fields("@PostLienWeb")
strVPath = replace(strVPath,"'","&#39")
strVPath = replace(strVPath,chr(34),"&#34")

strSize = Round(document.FileSize/1024, 0) & "k"

if instr(1,document.fields("@sysFileName"), ".zip") Then
strImgTypeDoc= "/commun/images/zip.gif"
elseif instr(1,document.fields("@sysFileName"),".asp") then
strImgTypeDoc = "/commun/images/html.gif"

elseif instr(1,document.fields("@sysFileName"),".doc") then
strImgTypeDoc = "/commun/images/word.gif"

Select Case document.fields("@sysFileType")

Case "html"
strImgTypeDoc = "/commun/images/html.gif"
Case "xls"
strImgTypeDoc= "/commun/images/excel.gif"
Case "doc"
strImgTypeDoc= "/commun/images/word.gif"
Case "ppt"
strImgTypeDoc= "/commun/images/ppt.gif"
Case "pdf"
strImgTypeDoc= "/commun/images/pdf.gif"
Case else
If InStr(document.fields("@sysFileType"), "text/plain") > 0 or InStr(document.fields("@sysFileType"), "richtext") > 0 then
strImgTypeDoc = "/commun/images/text.gif"
strImgTypeDoc= "/commun/images/Type_inconu.gif"
end if

End Select
end if

'strVPath = GetWebLink(strVPath)

'Divise les documents par Catégorie (Guides, Gabarits, Exemples..)
if document.fields("@CASCategorieDocDisplay") <> strCategDocPrec then%>
<!--Test 08-07-2013 Si i est différent de 0, alors on referme les balises <div> et <ul> pour les sections déroulantes-->
<%if (i <> 0) then%>
<%end if %>
<!--finTest 08-07-2013-->
<!--Test 05-07-2013 ***Slm la section <a>***-->
<h4><a class="menuheader expandable"><b><%=document.fields("@CASCategorieDocDisplay")%></b></a></h4>
<ul class="categoryitems">
<!--finTest 05-07-2013-->

<%end if%>

<span class="TexteNormal" ><a target="_self" href="<%=strVPath%>" ><img src="<%=strImgTypeDoc%>" border="0" hspace="3" WIDTH="16" HEIGHT="16" ><%=document.fields("@persotitle")%></a></span>
<div class="TextePetit" style="color:gray"><%=Year(document.fields("@CACDatePublication")) & "/" & Month(document.fields("@CACDatePublication")) & "/" & Day(document.fields("@CACDatePublication"))%>&nbsp;&nbsp;<%=Unescape(strVPath)%>&nbsp;&nbsp;[<%=strSize%>]</div>

<%strCategDocPrec = document.fields("@CASCategorieDocDisplay")


<%else 'Aucun enregistrement dans le recordset %>

<td colspan="2" class="TexteNormal">Aucun document trouvé en rapport avec &quot;<b><%=g_strTitre%></b>&quot;.</td></tr>

<%end if 'g_rsResultat.properties("RowCount") > 0

end if 'error.number = 0 %>


<%else 'Pas de critère dans le QueryString%>

<table border="0">
<td><span class="TexteNormal"><b>Paramètres manquants.</b></span></td></tr>
<td><span class="TexteNormal">Cette page doit être chargée en cliquant sur un item du menu de gauche.</span></td></tr>

<%end if 'Request.QueryString("Critere") <> ""%>

07-12-2013, 04:21 AM
That's server side asp code used to generate HTML and/or javascript to send to the browser. It's virtually useless to me. What you could do is view the page in the browser and use the browser's "View Source" to see what the browser is seeing (being served). Copy that and include it in a post or posts, or make a .zip file of the view source text and use the advanced editor to attach that to your post.

What version(s) of IE are you using? I just checked the Dynamic Drive demo page in IE 10 in its IE 8 mode, as I'm guessing IE 8 is what you're using, removing the width there works, just as I said before. I also checked its IE 9 and native IE 10 modes, all good.

Even with the "View Source" code I may not be able to figure this out, as it might be linked in styles that are to blame. Once again, if you could put up a live demo of the problem, then I would have the best chance of fixing it. This live demo need not have anything other than the menu on it, but it must include whatever is causing it to have the problem you describe.

And that's something you could try, removing any and all styles not directly used by the menu. If that fixes it, go through those styles one by one to find the one responsible.

One possibility is the DOCTYPE. If your page isn't using a standards invoking DOCTYPE, that might be the problem. But I tried quirks mode in IE and that did not prevent the headers from showing full width on the DD demo page.

07-12-2013, 12:58 PM
Hi again,

here's the code in a file: 5142

I'm using IE 8.

I will try to remove style one by one and try to find if it could be the problem.

Thank you so much for your time, I never used javascript before (i'm still studying) so I had to learn by myself (i wasnt so hard) and having to use code that already exists is not a simple task...

Have a nice week-end.

07-12-2013, 04:40 PM
OK, I think I found it. Where you have (and similar):

<h4><a class="menuheader expandable"><b>Guide</b></a></h4>

That really should be just:

<h4 class="menuheader expandable">Guide</h4>

But, if that's too much of a problem to arrange, you can probably just add this to the stylesheet:

.menuheader {display: block;}

The browser cache may need to be cleared and/or the page refreshed to see changes.

07-15-2013, 03:24 PM
Hi !

You are absolutely right ! I removed the <a> tag and the <b> tag, and now it's working perfectly !

I should have seen that way sooner, I must be blind and I apologise.

Your help was more than enough and more than precious, I should have looked more carefully.

Thank you a million times.

Best regards