Alpha Software Mobile Development Tools:   Alpha Anywhere    |   Alpha TransForm subscribe to our YouTube Channel  Follow Us on LinkedIn  Follow Us on Twitter  Follow Us on Facebook

Announcement

Collapse

The Alpha Software Forum Participation Guidelines

The Alpha Software Forum is a free forum created for Alpha Software Developer Community to ask for help, exchange ideas, and share solutions. Alpha Software strives to create an environment where all members of the community can feel safe to participate. In order to ensure the Alpha Software Forum is a place where all feel welcome, forum participants are expected to behave as follows:
  • Be professional in your conduct
  • Be kind to others
  • Be constructive when giving feedback
  • Be open to new ideas and suggestions
  • Stay on topic


Be sure all comments and threads you post are respectful. Posts that contain any of the following content will be considered a violation of your agreement as a member of the Alpha Software Forum Community and will be moderated:
  • Spam.
  • Vulgar language.
  • Quotes from private conversations without permission, including pricing and other sales related discussions.
  • Personal attacks, insults, or subtle put-downs.
  • Harassment, bullying, threatening, mocking, shaming, or deriding anyone.
  • Sexist, racist, homophobic, transphobic, ableist, or otherwise discriminatory jokes and language.
  • Sexually explicit or violent material, links, or language.
  • Pirated, hacked, or copyright-infringing material.
  • Encouraging of others to engage in the above behaviors.


If a thread or post is found to contain any of the content outlined above, a moderator may choose to take one of the following actions:
  • Remove the Post or Thread - the content is removed from the forum.
  • Place the User in Moderation - all posts and new threads must be approved by a moderator before they are posted.
  • Temporarily Ban the User - user is banned from forum for a period of time.
  • Permanently Ban the User - user is permanently banned from the forum.


Moderators may also rename posts and threads if they are too generic or do not property reflect the content.

Moderators may move threads if they have been posted in the incorrect forum.

Threads/Posts questioning specific moderator decisions or actions (such as "why was a user banned?") are not allowed and will be removed.

The owners of Alpha Software Corporation (Forum Owner) reserve the right to remove, edit, move, or close any thread for any reason; or ban any forum member without notice, reason, or explanation.

Community members are encouraged to click the "Report Post" icon in the lower left of a given post if they feel the post is in violation of the rules. This will alert the Moderators to take a look.

Alpha Software Corporation may amend the guidelines from time to time and may also vary the procedures it sets out where appropriate in a particular case. Your agreement to comply with the guidelines will be deemed agreement to any changes to it.



Bonus TIPS for Successful Posting

Try a Search First
It is highly recommended that a Search be done on your topic before posting, as many questions have been answered in prior posts. As with any search engine, the shorter the search term, the more "hits" will be returned, but the more specific the search term is, the greater the relevance of those "hits". Searching for "table" might well return every message on the board while "tablesum" would greatly restrict the number of messages returned.

When you do post
First, make sure you are posting your question in the correct forum. For example, if you post an issue regarding Desktop applications on the Mobile & Browser Applications board , not only will your question not be seen by the appropriate audience, it may also be removed or relocated.

The more detail you provide about your problem or question, the more likely someone is to understand your request and be able to help. A sample database with a minimum of records (and its support files, zipped together) will make it much easier to diagnose issues with your application. Screen shots of error messages are especially helpful.

When explaining how to reproduce your problem, please be as detailed as possible. Describe every step, click-by-click and keypress-by-keypress. Otherwise when others try to duplicate your problem, they may do something slightly different and end up with different results.

A note about attachments
You may only attach one file to each message. Attachment file size is limited to 2MB. If you need to include several files, you may do so by zipping them into a single archive.

If you forgot to attach your files to your post, please do NOT create a new thread. Instead, reply to your original message and attach the file there.

When attaching screen shots, it is best to attach an image file (.BMP, .JPG, .GIF, .PNG, etc.) or a zip file of several images, as opposed to a Word document containing the screen shots. Because Word documents are prone to viruses, many message board users will not open your Word file, therefore limiting their ability to help you.

Similarly, if you are uploading a zipped archive, you should simply create a .ZIP file and not a self-extracting .EXE as many users will not run your EXE file.
See more
See less

Horizontal Navigation Menu and Firefox

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Horizontal Navigation Menu and Firefox

    I have a Horizontal Navigation Menu that I include in each a5w page (a5w_include("common1.a5w").

    Everything works and looks fine with Internet Explorer, but I get inconsistent results with Firefox.

    No error messages- just inconsistent display of the menu. Sometimes the horizontal menu will wrap onto a second line (with one item on the second line). Sometimes it wraps to get two columns on multiple lines. Sometimes it looks like a vertical menu.

    If I refresh the page, it comes out fine. It appears to be a problem only on the initial load of the page. Remember that the horizontal menu is in the included file.

    I don't know if this is related, but text on two of the menu items is physically cut off on the right edge (the text doesn't fit into the box). Again, it looks fine in IE.

    A5V8.
    LMOTCOB (Larry O - Taking Care Of Business)

    #2
    Re: Horizontal Navigation Menu and Firefox

    hey Larry

    this thread may help

    http://msgboard.alphasoftware.com/al...ad.php?t=61277

    it is from the v7 board but may still be applicable

    just a thought
    regards

    martin
    www.jollygreenthumb.com

    Comment


      #3
      Re: Horizontal Navigation Menu and Firefox

      Thanks.
      Yes, removing the navigation menu from the table fixes the inconsistent display (in Firefox) but introduces another problem (in both IE and Firefox). I had <center> and </center> tags around the table. No matter where I put these, it doesn't center the menu unless I use it in a table.

      I still have the problem of the text not fitting in the boxes.
      LMOTCOB (Larry O - Taking Care Of Business)

      Comment


        #4
        Re: Horizontal Navigation Menu and Firefox

        Larry

        not sure about your centering problem
        but i wanted a page that was centered in the browser
        window and this wasnt happeneing with the navigation menu
        and this is due to the way that the javascript renders the page

        my menu is here: http://www.jollygreenthumb.com

        the code that i used is located in the a5_position.js file in the
        javascript directory in the webroot directory

        in the original code (see below) i modified the a5_getEleLeft function
        to allow me to center my menu on a page
        the comments are pretty self explanatory


        Code:
        function a5_getEleLeft(element){
        	var left_pos = element.offsetLeft;
        	var parElement = element.offsetParent;
        	while (parElement != null){
        		left_pos += parElement.offsetLeft;
        		parElement = parElement.offsetParent;
        	}
        	return left_pos;
        }
        
        function a5_getEleTop(element){
        	var top_pos = element.offsetTop;
        	var parElement = element.offsetParent;
        	while (parElement != null){
        		top_pos += parElement.offsetTop;
        		parElement = parElement.offsetParent;
        	}
        	return top_pos;
        }
        
        function a5_setObjPos(parentObj,childObj,posTypeNum,mainOffNum,subOffNum){
        	var parentTopNum = new Number();
        	var parentLeftNum = new Number();
        	var parentWidthNum = new Number();
        	var parentHeightNum = new Number();
        	var childWidthNum = new Number();
        	var childHeightNum = new Number();
        
        	parentTopNum = a5_getEleTop(parentObj);
        	parentLeftNum = a5_getEleLeft(parentObj);
        	parentWidthNum = parentObj.offsetWidth;
        	parentHeightNum = parentObj.offsetHeight;
        	childWidthNum = childObj.offsetWidth;
        	childHeightNum = childObj.offsetHeight;
        
        	switch(posTypeNum){
        		case(1):
        			childObj.style.left = (parentLeftNum-childWidthNum-mainOffNum)+'px'
        			childObj.style.top = (parentTopNum-childHeightNum-subOffNum)+'px'
        		break
        		case(2):
        			childObj.style.left = (parentLeftNum+subOffNum)+'px'
        			childObj.style.top = (parentTopNum-childHeightNum-mainOffNum)+'px'
        		break
        		case(3):
        			childObj.style.left = (parentLeftNum+(parentWidthNum-childWidthNum)-subOffNum)+'px'
        			childObj.style.top = (parentTopNum-childHeightNum-mainOffNum)+'px'
        		break
        		case(4):
        			childObj.style.left = (parentLeftNum+parentWidthNum+mainOffNum)+'px'
        			childObj.style.top = (parentTopNum-childHeightNum-subOffNum)+'px'
        		break
        		case(5):
        			childObj.style.left = (parentLeftNum-childWidthNum-mainOffNum)+'px'
        			childObj.style.top = (parentTopNum+subOffNum)+'px'
        		break
        		case(6):
        			childObj.style.left = (parentLeftNum+subOffNum)+'px'
        			childObj.style.top = (parentTopNum+mainOffNum)+'px'
        		break
        		case(7):
        			childObj.style.left = (parentLeftNum+parentWidthNum-childWidthNum-subOffNum)+'px'
        			childObj.style.top = (parentTopNum+mainOffNum)+'px'
        		break
        		case(8):
        			childObj.style.left = (parentLeftNum+parentWidthNum+mainOffNum)+'px'
        			childObj.style.top = (parentTopNum+subOffNum)+'px'
        		break
        		case(9):
        			childObj.style.left = (parentLeftNum-childWidthNum-mainOffNum)+'px'
        			childObj.style.top = (parentTopNum-(childHeightNum-parentHeightNum)-subOffNum)+'px'
        		break
        		case(10):
        			childObj.style.left = (parentLeftNum+subOffNum)+'px'
        			childObj.style.top = (parentTopNum-(childHeightNum-parentHeightNum)-mainOffNum)+'px'
        		break
        		case(11):
        			childObj.style.left = (parentLeftNum+parentWidthNum-childWidthNum-subOffNum)+'px'
        			childObj.style.top = (parentTopNum-(childHeightNum-parentHeightNum)-mainOffNum)+'px'
        		break
        		case(12):
        			childObj.style.left = (parentLeftNum+parentWidthNum+mainOffNum)+'px'
        			childObj.style.top = (parentTopNum-(childHeightNum-parentHeightNum)-subOffNum)+'px'
        		break
        		case(13):
        			childObj.style.left = (parentLeftNum-childWidthNum-mainOffNum)+'px'
        			childObj.style.top = (parentTopNum+parentHeightNum+subOffNum)+'px'
        		break
        		case(14):
        			childObj.style.left = (parentLeftNum+subOffNum)+'px'
        			childObj.style.top = (parentTopNum+parentHeightNum+mainOffNum)+'px'
        		break
        		case(15):
        			childObj.style.left = (parentLeftNum+(parentWidthNum-childWidthNum)-subOffNum)+'px'
        			childObj.style.top = (parentTopNum+parentHeightNum+mainOffNum)+'px'
        		break
        		case(type=16):
        			childObj.style.left = (parentLeftNum+parentWidthNum+mainOffNum)+'px'
        			childObj.style.top = (parentTopNum+parentHeightNum+subOffNum)+'px'
        		break
        	}
        }

        here is the new a5_position.js file that i use on my site

        Code:
        function a5_getEleLeft(element){
        	// allow the use of horizontal dropdown menus in a browser window with the document centered instead of lleft justified
        	// my document is 800px wide and the menu starts aprox 175px from the left edge of the document
        	// so my document is centered always 1/2 of the window width if the window is larger than the 800px document size
        	// so everytime that you call this routine it must 1) subtract the menu offset and remove 1/2 of the offset due to centering
        	// to maitain the same relation to the parent element	
        	// if the window is less than or equal to  the size of the document then only subtract the menu offset
        
        
        	var winwidth = new Number();	
        	winwidth = document.body.clientWidth; // this is the width of the browser at this time
        	var mymenuoffset = new Number();
        	var mydocwidth = new Number();
        	myoffset = 175;  /// this is the location of the left side of the horizontal menu		
        	mydocwidth = 800; // the size of  my document 
        	var left_pos = element.offsetLeft;
        	var parElement = element.offsetParent;
        
        	while (parElement != null)
        		{		
        		left_pos += parElement.offsetLeft;		
        		parElement = parElement.offsetParent;			
        		}	
        
        	if (winwidth > mydocwidth)
        		{
        		left_pos = left_pos+(400-(winwidth/2))- myoffset; // this will allow the menu to track in a browser window that has the page centered at all times
        		}
        		else
        		{
        		left_pos -= myoffset;// the browser window width is equal to or smaller than the current document width
        		}
        
        	return left_pos;
        }
        
        function a5_getEleTop(element){
        	var top_pos = element.offsetTop;
        	var parElement = element.offsetParent;
        	while (parElement != null){
        		top_pos += parElement.offsetTop;
        		parElement = parElement.offsetParent;
        	}
        	return top_pos;
        }
        
        function a5_setObjPos(parentObj,childObj,posTypeNum,mainOffNum,subOffNum){
        	var parentTopNum = new Number();
        	var parentLeftNum = new Number();
        	var parentWidthNum = new Number();
        	var parentHeightNum = new Number();
        	var childWidthNum = new Number();
        	var childHeightNum = new Number();
        
        	parentTopNum = a5_getEleTop(parentObj);
        	parentLeftNum = a5_getEleLeft(parentObj);
        	parentWidthNum = parentObj.offsetWidth;
        	parentHeightNum = parentObj.offsetHeight;
        	childWidthNum = childObj.offsetWidth;
        	childHeightNum = childObj.offsetHeight;
        	//alert("MAinoffNUM---|" + mainOffNum);
        	switch(posTypeNum){
        		case(1):
        			childObj.style.left = (parentLeftNum-childWidthNum-mainOffNum)+'px'
        			childObj.style.top = (parentTopNum-childHeightNum-subOffNum)+'px'
        		break
        		case(2):
        			childObj.style.left = (parentLeftNum+subOffNum)+'px'
        			childObj.style.top = (parentTopNum-childHeightNum-mainOffNum)+'px'
        		break
        		case(3):
        			childObj.style.left = (parentLeftNum+(parentWidthNum-childWidthNum)-subOffNum)+'px'
        			childObj.style.top = (parentTopNum-childHeightNum-mainOffNum)+'px'
        		break
        		case(4):
        			childObj.style.left = (parentLeftNum+parentWidthNum+mainOffNum)+'px'
        			childObj.style.top = (parentTopNum-childHeightNum-subOffNum)+'px'
        		break
        		case(5):
        			childObj.style.left = (parentLeftNum-childWidthNum-mainOffNum)+'px'
        			childObj.style.top = (parentTopNum+subOffNum)+'px'
        		break
        		case(6):
        			childObj.style.left = (parentLeftNum+subOffNum)+'px'
        			childObj.style.top = (parentTopNum+mainOffNum)+'px'
        		break
        		case(7):
        			childObj.style.left = (parentLeftNum+parentWidthNum-childWidthNum-subOffNum)+'px'
        			childObj.style.top = (parentTopNum+mainOffNum)+'px'
        		break
        		case(8):
        			childObj.style.left = (parentLeftNum+parentWidthNum+mainOffNum)+'px'
        			childObj.style.top = (parentTopNum+subOffNum)+'px'
        		break
        		case(9):
        			childObj.style.left = (parentLeftNum-childWidthNum-mainOffNum)+'px'
        			childObj.style.top = (parentTopNum-(childHeightNum-parentHeightNum)-subOffNum)+'px'
        		break
        		case(10):
        			childObj.style.left = (parentLeftNum+subOffNum)+'px'
        			childObj.style.top = (parentTopNum-(childHeightNum-parentHeightNum)-mainOffNum)+'px'
        		break
        		case(11):
        			childObj.style.left = (parentLeftNum+parentWidthNum-childWidthNum-subOffNum)+'px'
        			childObj.style.top = (parentTopNum-(childHeightNum-parentHeightNum)-mainOffNum)+'px'
        		break
        		case(12):
        			childObj.style.left = (parentLeftNum+parentWidthNum+mainOffNum)+'px'
        			childObj.style.top = (parentTopNum-(childHeightNum-parentHeightNum)-subOffNum)+'px'
        		break
        		case(13):
        			childObj.style.left = (parentLeftNum-childWidthNum-mainOffNum)+'px'
        			childObj.style.top = (parentTopNum+parentHeightNum+subOffNum)+'px'
        		break
        		case(14):
        			childObj.style.left = (parentLeftNum+subOffNum)+'px'
        			childObj.style.top = (parentTopNum+parentHeightNum+mainOffNum)+'px'
        		break
        		case(15):
        			childObj.style.left = (parentLeftNum+(parentWidthNum-childWidthNum)-subOffNum)+'px'
        			childObj.style.top = (parentTopNum+parentHeightNum+mainOffNum)+'px'
        		break
        		case(type=16):
        			childObj.style.left = (parentLeftNum+parentWidthNum+mainOffNum)+'px'
        			childObj.style.top = (parentTopNum+parentHeightNum+subOffNum)+'px'
        		break
        	}
        }

        as you can see this is just a hack and that i have to declare the actual width
        of my page and the menu offset for this to work- but it works for my site so i use it

        if you modify use javascript file then be careful that you dont overwrite it on
        upgrades and publishings -

        it would be great if one the the gurus on the boards like Peter Wayne or Lenny would redo this and allow any width page with any offset be used to center the menu on the page

        hope this helps
        regards

        martin
        www.jollygreenthumb.com

        Comment


          #5
          Re: Horizontal Navigation Menu and Firefox

          Larry

          one thing that i failed to mention
          is that using this technique means that every page served
          will have it's offset and center changed to the values
          that you use in the a5_position.js file
          therefor you cant mix pages of different widths and offsets
          the menu will always be where the a5_position.js file sets the position

          so a narrower page will not render properly - the menu will seem to
          be to far right
          regards

          martin
          www.jollygreenthumb.com

          Comment


            #6
            Re: Horizontal Navigation Menu and Firefox

            Martin,
            Thanks.
            For now, I think I will just settle for the menu to be left justified. Maybe someone can shed some light on why it behaves like it does.
            LMOTCOB (Larry O - Taking Care Of Business)

            Comment


              #7
              Re: Horizontal Navigation Menu and Firefox

              Larry,

              I struggled with the same alignment issues for a long time to product the heading shown in the picture (screen4). Since I'm javascript challenged, I couldn't even begin to use that approach, so here's what I did.

              The top navigation component is called Top_Nav and the lower one is Main_Nav. The code for the page header from the </head> on down as follows:

              HTML Code:
              <body class="ASQPageBody">
              <table width="800" cellpadding="0" cellspacing="0" align="center" border="0">
              <tbody>
              
              <tr><td valign="top" align="left" width="100">
               <img style="WIDTH: 100px; HEIGHT: 133px" src="asqlogo.JPG" alt="asqlogo">
              </td>
              
              <td valign="top" width="700" height="133">
              
              <table cellspacing="0" cellpadding="0" border="0" width="100%" background="portpic.jpg">
              
              <tr><td valign="top" align="center" height="113px">
               <%a5 ?x_Top_Nav.Output.Body.navsysTBH %>
              </td></tr>
              
              <tr><td valign="bottom" align="center">
               <%a5 ?x_Main_Nav.Output.Body.navsysTBH %>
              </td></tr>
              
              </table>
              </td></tr>
              </tbody></table>
              I learned the following:
              1. The header has to be a fixed width to get everything to line up, so I center it. The rest of the page may be wider or narrower, but it looks OK.

              2. Put the header in it's own table. Don't share the table with any other components on the page, because that can affect the width and cause wrap.

              3. Since the nav components only left justify, and I needed the top nav to appear right justified, I put in empty entries to space the visible entries over. See screen5.

              Pat
              Last edited by AaronBBrown; 04-09-2007, 12:04 PM.
              Pat Bremkamp
              MindKicks Consulting

              Comment


                #8
                Re: Horizontal Navigation Menu and Firefox

                Hey Pat

                cool solution
                now why didnt i think of that???
                regards

                martin
                www.jollygreenthumb.com

                Comment


                  #9
                  Re: Horizontal Navigation Menu and Firefox

                  Pat,
                  Sorry for the slow response. My navigation menu is simpler than yours. It looks like what is relevant to mine is:

                  <table width="800" cellpadding="0" cellspacing="0" align="center" border="0"> <tbody>
                  <tr><td align="middle"><%a5 ?x_H_Menu.Output.Body.navsysTBH %></td></tr>
                  </tbody></table>


                  I needed to increase the 800 to 900 to prevent wrapping. It does seem to fix the inconsistent displaying of the menu. I might have a problem that you don't however. Before someone logs in, I have 6 menu items. After they log in, I have 8. So the width increases after a log in. That makes it difficult to get it centered for both cases. Maybe I need to use some xbasic and do something different if they are logged in, but I have not played with that yet.

                  The text still doesn't fit in the menu tabs when using Firefox, but looks fine in IE. Does anyone have any ideas on that?

                  Interesting: In the middle line I save the A5W page with <td align="center"......>, but when I go back it has been changed to <td align="middle".......>
                  Last edited by LMOTCOB; 04-12-2007, 10:17 AM. Reason: additional information
                  LMOTCOB (Larry O - Taking Care Of Business)

                  Comment


                    #10
                    Re: Horizontal Navigation Menu and Firefox

                    I've found that the align="center" to align="middle" change is done by going to the wysiwyg screen. Regardless, it doesn't seem to matter.

                    Pat
                    Pat Bremkamp
                    MindKicks Consulting

                    Comment


                      #11
                      Re: Horizontal Navigation Menu and Firefox

                      I seem to have the issue of text being cut off that is not resolved by the solutions described here. It is very peculiar, and I wonder how many alpha users have issues with firefox.

                      (Note, this was done in Browser Preview, the top navigation is ourside the table, while the bottom one is not)

                      Comment


                        #12
                        Re: Horizontal Navigation Menu and Firefox

                        i believe that you need to set the width of the toolbar buttons in the componenet builder
                        i believe that it will be the same for all the buttpns so you must make it wide enough to accommodate the widest text element that you have in your menu

                        hth
                        regards

                        martin
                        www.jollygreenthumb.com

                        Comment


                          #13
                          Re: Horizontal Navigation Menu and Firefox

                          I went through this with Firefox awhile back, here's what I learned:
                          • Firefox units cannot be in Inches. I used "px" successfully.
                          • If you leave the component Width blank, the menu will auto-adjust to the text size.
                          • If you enter a Width smaller than the text width, it will truncate the text.
                          • If you made the width much much smaller than the text width, it would completely screw up the menu.
                          • I also had to ensure the Component Style Builder setting for NavSysTBSH (the first one) for Padding All (or Padding Left) was set to 0px (I think that is the default anyway).
                          • Also noted that anywhere there was a unit setting in Style Builder you had to include the units (px, etc.). That seems obvious, but I had a few missing and it had a big affect on how the menu looked.

                          IE was a lot more lenient on settings, worked with Inches and was not as picky about settings in the style builder.
                          Steve Wood
                          See my profile on IADN

                          Comment

                          Working...
                          X