Results 1 to 8 of 8

Thread: Bullet List Accordion menuheader width

  1. #1
    Join Date
    Jul 2013
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question Bullet List Accordion menuheader width

    1) Script Title: Bullet List Accordion menuheader width

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...enu-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 :
    Code:
    .arrowlistmenu{
    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):
    Click image for larger version. 

Name:	Widthproblem2.jpg 
Views:	115 
Size:	57.3 KB 
ID:	5140

    Did I, again, do something wrong?

    Thank you

    Have a nice day.
    Last edited by Kaptin; 07-15-2013 at 04:02 PM. Reason: The problem is resolved !

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,994
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Kaptin (07-15-2013)

  4. #3
    Join Date
    Jul 2013
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    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-normasys...es&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) :

    Code:
    <%
    
    '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
      else
    	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")
    objXMLFichr.load(strCheminXML)
    Set objXMLExt = CreateObject("MSXML2.DOMDocument")
    objXMLExt.async = False
    strCheminXML = Server.MapPath("/commun/parametres/abon-types-fich-incl.xml")
    objXMLExt.load(strCheminXML)
    
    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
    		else
    			AbnPageReprtr =  true
    		end if
    	end if		
    	Next 
    	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
    		else
    			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
    			else
    				AbnExtension =  true 'est dans le fichier d'extension
    			end if
    		else
    			AbnExtension = false
    		end if
    	else
    		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 !

  5. #4
    Join Date
    Jul 2013
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    part 2

    Code:
    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">
    					<tr>
    						<td>
    							<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%>
    
    							</div>
    						</td></tr></table>
    
    	<%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"
    
    			else
    				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) = "" 
    				next
    				strIndex = strIndex + 1 
    			next
    	
    			'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) = "" 
    			next
    
    			'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				
    					DocType="doc"
    					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"
    
    				Else					
    					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" 	  
    					   else	
    					          strImgTypeDoc= "/commun/images/Type_inconu.gif"
    					   end if
    
    					End Select 
    				end if
    				
    				'strVPath = GetWebLink(strVPath)
    				
    				'Divise les documents par Catégorie (Guides, Gabarits, Exemples..)
    				'*** LE RECORDSET DOIT ÊTRE TRIÉ PAR CATÉGORIE DE DOCUMENT ***
    				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%>
                                </ul>
                              <%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%>
    						
    						<li>
                                <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>
                            </li>
    	
    				<%strCategDocPrec = document.fields("@CASCategorieDocDisplay")			
    			
    			Next%>
                </div>
    			
    		<%else 'Aucun enregistrement dans le recordset %>
    		
    					<tr>
    						<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 %>
    
    </table>
    
    <%else  'Pas de critère dans le QueryString%>
    
    					<table border="0">
    					<tr>
    						<td><span class="TexteNormal"><b>Paramètres manquants.</b></span></td></tr>
    					<tr>
    						<td><span class="TexteNormal">Cette page doit être chargée en cliquant sur un item du menu de gauche.</span></td></tr>
    					</table>
    					
    <%end if  'Request.QueryString("Critere") <> ""%>

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,994
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Kaptin (07-15-2013)

  8. #6
    Join Date
    Jul 2013
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Hi again,

    here's the code in a file: viewsource.zip

    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.
    Last edited by Kaptin; 07-12-2013 at 12:58 PM. Reason: Zip at wrong place in text

  9. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,994
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    OK, I think I found it. Where you have (and similar):

    Code:
    <h4><a class="menuheader expandable"><b>Guide</b></a></h4>
    That really should be just:

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

    Code:
    .menuheader {display: block;}
    The browser cache may need to be cleared and/or the page refreshed to see changes.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Kaptin (07-15-2013)

  11. #8
    Join Date
    Jul 2013
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    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

    Stéphanie

Similar Threads

  1. Need a little help with Bullet List Accordion Menu
    By Kerstey in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 08-26-2010, 06:37 AM
  2. Bullet List Accordion Menu - AGAIN
    By taziq in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 08-16-2010, 04:11 AM
  3. Bullet List Accordion Menu-Non Expandable items in list
    By taziq in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 08-14-2010, 09:04 PM
  4. Bullet List Accordion Menu Gap
    By jumpmantang in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 03-19-2009, 07:04 PM
  5. Bullet List Accordion Menu
    By johnp392002 in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 01-08-2009, 05:56 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •