Alignment, and remembering state

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:18

Alignment, and remembering state

Poster: dilbert
Dated: Monday June 23 2008 - 3:57:55 BST

I have two menus on a page, both are in tables.

Demo here: http://www.bloodbanktalk.com/tools/drugs.cfm

I would like the second menu to be aligned in the center of the cell. I can't get it to do so in IE, but in FF I can align the cell in the table and it aligns.
What is the correct way to get the entire menu to align in the center?

Is there a way to get each letter the same width?

Also, if you mouse over a letter there is a background image. It does not go away on when you move the mouse out. It's a subtle image, but clearly there.

Also, this is in a cold fusion page. It works great on remembering the page you are on and displaying the background image correctly. I have a variable set for the page to call each letter, ie. aI("text=A;url=drugs.cfm?letter=A;");. This works perfectly, except I have a second variable for links at the bottom using First | Next | Previous | Last that also add another variable. As soon as the second variable is added, the background image is lost, ie drugs.cfm?PageNum_drug_list=1&letter=A. At first I thought it was due to the first variable being moved to the second spot, but after much wrestling with the code to get it to do this drugs.cfm?letter=A&PageNum_drug_list=1, it still failed. It only seems to work with drugs.cfm?letter=A. Is there any way for it to recognize the drugs.cfm?letter=A at the beginning and ignore the second variable after the &? If not, then I'll just set them whole menu up as simple links with the letter, it just looks a lot nicer with the menu.

Thanks

Re: Alignment, and remembering state

Poster: John
Dated: Monday June 23 2008 - 16:13:13 BST

First you'll need to move up to the current version - v5.796. While that probably won't fix this problem our rule is for assistance here in the forum you need to be at the current level.

How are you using the & in the URL - as just a plain &, or as the & amp ; (without spaces, of course)? I write CF, and have found it is sometimes necessary to use one over the other. No idea why at this point, but whatever works.

Re: Alignment, and remembering state

Poster: dilbert
Dated: Monday June 23 2008 - 23:43:14 BST

Thanks John, I updated to the current version.

Below is the code that generates the page. Below that is the menu page I am including.

The two issues I have is the background does not stay when I use the previous / next setup - and the background image does not go away when the mouse is no longer on the menu item.

I let Dream weaver build the beginning of the First | Previous... section. I set it back to it's original state, but when I played with it to force it to list the letter=A part first, it still failed.

Code:

<cfinclude template="inc_header.cfm">

<cfif NOT IsDefined("letter")><cfset letter = "">
</cfif>

<cfquery name="drug_list" DataSource="#DSN#">
SELECT *
FROM Drugs
WHERE Trade_Name like '#letter#%'
ORDER BY Trade_Name 
</cfquery>
<cfset xyzxyz=ValueList(drug_list.Trade_Name)>

<cfquery name="drug_count" DataSource="#DSN#">
SELECT *
FROM drugs
WHERE Trade_Name like '#letter#%'
</cfquery>

<cfset CurrentPage=GetFileFromPath(GetBaseTemplatePath())>
<cfparam name="PageNum_drug_list" default="1">
<cfset MaxRows_drug_list=50>
<cfset StartRow_drug_list=Min((PageNum_drug_list-1)*MaxRows_drug_list+1,Max(drug_list.RecordCount,1))>
<cfset EndRow_drug_list=Min(StartRow_drug_list+MaxRows_drug_list-1,drug_list.RecordCount)>
<cfset TotalPages_drug_list=Ceiling(drug_list.RecordCount/MaxRows_drug_list)>
<cfset QueryString_drug_list=Iif(CGI.QUERY_STRING NEQ "",DE("&"&XMLFormat(CGI.QUERY_STRING)),DE(""))>
<cfset tempPos=ListContainsNoCase(QueryString_drug_list,"PageNum_drug_list=","&")>
<cfif tempPos NEQ 0>
  <cfset QueryString_drug_list=ListDeleteAt(QueryString_drug_list,tempPos,"&")>
</cfif>





<table width="100%" cellspacing="0" cellpadding="3">
  <tr>
  
  <!--- Begin Left Column --->
    <td width="10%" valign="top">
    
       
    
    </td>
    <!--- End Left Column --->
    <td width="70%" valign="top">
  <!--- Begin Mid Column --->
    <div class="midtitle">drugs</div>
    
    
    <table cellspacing="0" cellpadding="0" border="0" width="100%">
   <tr style="height: 1em;">
    <td align="left">
    <div class="tabcontent">
   <table cellspacing="0" cellpadding="4" border="0" width="100%" class="dashborder">
   <tr style="height: 1em">
   <td align="left" valign="top">
   <table cellspacing="0" cellpadding="2" border="0" width="100%" class="dashcontent">
   <tr>
    <td align="left" valign="top">
   <table width="100%"  border="0" cellspacing="1" cellpadding="2">
    <tr>
   <td width="50" class="smalltext">Drugs</td>
   <td valign="middle">
    <div class="linediv">
    <img src="http://www.bloodbanktalk.com/support/themes/admin_default/space.gif" height="1" width="1" alt="" />
    </div>
    </td>
    </tr>
   </table>
   <table width="100%" border="0" cellspacing="1" cellpadding="2">
    <tr valign="top">
      <td colspan="5">
      <cfinclude template="inc_abc_menu.cfm">
      </td>
      </tr>
    <tr align="center" valign="top" class="smalltext" >
      <td>Name</td>
      <td>Trade Name</td>
      <td>Contains aspirin</td>
      <td>Associated Medical Conditions</td>
      <td>Edit</td>
    </tr> 
    <cfoutput query="drug_list" startRow="#StartRow_drug_list#" maxRows="#MaxRows_drug_list#">
    <CFSET rowclass="row#Int(drug_list.CurrentRow MOD 2)#"> 
      <tr class="#rowclass#">
        <td class="smalltext">&nbsp;</td>
        <td class="smalltext">#Trade_Name#</td>
        <td class="smalltext">&nbsp;</td>
        <td class="smalltext">&nbsp;</td>
        <td class="smalltext">&nbsp;</td>
      </tr>
    </cfoutput>
   </table>
    <table width="100%" border="0" cellspacing="1" cellpadding="2">
     <tr>
        <td><a href="<cfoutput>#CurrentPage#?PageNum_drug_list=1#QueryString_drug_list#</cfoutput>">First </a><a href="<cfoutput>#CurrentPage#?PageNum_drug_list=#Max(DecrementValue(PageNum_drug_list),1)##QueryString_drug_list#</cfoutput>">Previous</a> <a href="<cfoutput>#CurrentPage#?PageNum_drug_list=#Min(IncrementValue(PageNum_drug_list),TotalPages_drug_list)##QueryString_drug_list#</cfoutput>">Next</a> <a href="<cfoutput>#CurrentPage#?PageNum_drug_list=#TotalPages_drug_list##QueryString_drug_list#</cfoutput>">Last</a></td>
     </tr>
   </table>

   </td>
    </tr>
   </table>
   </td>
   </tr>
   </table>
   </div>
   </td>
    </tr>
   </table>
    
   <!--- End Mid Column --->
    </td>
  <!--- Begin Right Column --->
    <td width="20%" valign="top">
    
    
    
    <div class="midtitle">search</div>
    
    
    <table cellspacing="0" cellpadding="0" border="0" width="100%">
   <tr style="height: 1em;">
    <td align="left">
    <div class="tabcontent">
   <table cellspacing="0" cellpadding="4" border="0" width="100%" class="dashborder">
   <tr style="height: 1em">
   <td align="left" valign="top">
   <table cellspacing="0" cellpadding="2" border="0" width="100%" class="dashcontent">
   <tr>
    <td align="left" valign="top">
   <table width="100%"  border="0" cellspacing="1" cellpadding="2">
    <tr>
   <td width="10" class="smalltext">&nbsp;</td>
   <td valign="middle">
    <div class="linediv">
    <img src="http://www.bloodbanktalk.com/support/themes/admin_default/space.gif" height="1" width="1" alt="" />
    </div>
    </td>
    </tr>
   </table>
   <table width="100%" border="0" cellspacing="1" cellpadding="2">
    
    <tr class="smalltext">
     <td>
      
      <cfform name="search" method="post" action="drugs_search.cfm">
        Enter text of a drug to search for: 
        <cfinput type="text"
      name="artname">
        <input type="submit" name="Submit" value="Search" class="c2">
      </cfform>
      
      </td>
     </tr>
      
   </table>
   </td>
    </tr>
   </table>
   </td>
   </tr>
   </table>
   </div>
   </td>
    </tr>
   </table>
    
    <br />
    
     <div class="midtitle">statistics</div>
    
    
    <table cellspacing="0" cellpadding="0" border="0" width="100%">
   <tr style="height: 1em;">
    <td align="left">
    <div class="tabcontent">
   <table cellspacing="0" cellpadding="4" border="0" width="100%" class="dashborder">
   <tr style="height: 1em">
   <td align="left" valign="top">
   <table cellspacing="0" cellpadding="2" border="0" width="100%" class="dashcontent">
   <tr>
    <td align="left" valign="top">
   <table width="100%"  border="0" cellspacing="1" cellpadding="2">
    <tr>
   <td width="10" class="smalltext">&nbsp;</td>
   <td valign="middle">
    <div class="linediv">
    <img src="http://www.bloodbanktalk.com/support/themes/admin_default/space.gif" height="1" width="1" alt="" />
    </div>
    </td>
    </tr>
   </table>
   <table width="100%" border="0" cellspacing="1" cellpadding="2">
    
    <tr class="smalltext">
     <td>
    <cfif letter EQ ''>
      <p>There are <cfoutput>#NumberFormat(drug_count.RecordCount, '999,999')# Drugs listed in the database.</cfoutput></p>

   <cfelseif drug_count.RecordCount EQ '1'>
      <p>There is 1 Drug that start with the letter <cfoutput>#letter#</cfoutput>.</p>

   <cfelseif drug_count.RecordCount EQ '0'>
      <p>There aren't any Drugs that start with the letter <cfoutput>#letter#</cfoutput>.</p>

   <cfelseif drug_count.RecordCount GT '1'>
      <p>There are <cfoutput>#NumberFormat(drug_count.RecordCount, '999,999')# Drugs that start with the letter #letter#</cfoutput>.</p>
   </cfif>
      </td>
     </tr>
      
   </table>
   </td>
    </tr>
   </table>
   </td>
   </tr>
   </table>
   </div>
   </td>
    </tr>
   </table>
    
    
    
    </td>
  <!--- End First Column --->
  </tr>
</table>
<div class="footer">
<cfinclude template="inc_footer.cfm">
</div>

Code:

<table width="100%" cellspacing="0">
  <tr>
    <td width="98">
          <script type="text/javascript">
                  with(milonic=new menuname("ABC Menu")){
                  style=horizStyle2;                  
                  alwaysvisible=1;
                  orientation="horizontal";
                  overfilter="";
                  position="relative";
                  margin="5";
                  aI("text=A;url=drugs.cfm?letter=A;");
                  aI("text=B;url=drugs.cfm?letter=B;");
                  aI("text=C;url=drugs.cfm?letter=C;");
                  aI("text=D;url=drugs.cfm?letter=D;");
                  aI("text=E;url=drugs.cfm?letter=E;");
                  aI("text=F;url=drugs.cfm?letter=F;");
                  aI("text=G;url=drugs.cfm?letter=G;");
                  aI("text=H;url=drugs.cfm?letter=H;");
                  aI("text=I;url=drugs.cfm?letter=I;");
                  aI("text=J;url=drugs.cfm?letter=J;");
                  aI("text=K;url=drugs.cfm?letter=K;");
                  aI("text=L;url=drugs.cfm?letter=L;");
                  aI("text=M;url=drugs.cfm?letter=M;");
                  aI("text=N;url=drugs.cfm?letter=N;");
                  aI("text=O;url=drugs.cfm?letter=O;");
                  aI("text=P;url=drugs.cfm?letter=P;");
                  aI("text=Q;url=drugs.cfm?letter=Q;");
                  aI("text=R;url=drugs.cfm?letter=R;");
                  aI("text=S;url=drugs.cfm?letter=S;");
                  aI("text=T;url=drugs.cfm?letter=T;");
                  aI("text=U;url=drugs.cfm?letter=U;");
                  aI("text=V;url=drugs.cfm?letter=V;");
                  aI("text=W;url=drugs.cfm?letter=W;");
                  aI("text=X;url=drugs.cfm?letter=X;");
                  aI("text=Y;url=drugs.cfm?letter=Y;");
                  aI("text=Z;url=drugs.cfm?letter=Z;");
                  aI("text=All;url=drugs.cfm?letter=;");
                  }
                  drawMenus();      
         </script>
    </td>
  </tr>
</table>

Re: Alignment, and remembering state

Poster: Ruth
Dated: Tuesday June 24 2008 - 3:48:18 BST

Hi,

As to the background image issue, that abcd menu has style=horizStyle2; but in your data file for the style you have

Code:

horizStyle2=new copyOf(vertStyle2)
horizStyle.overfilter="";
horizStyle.pagecolor = "#fff"; 

Note that you are not using horizStyle2.overfilter="" etc. So, you need to correct that to be horizStyle2 for that style. Next you need to fix your colors, since as you have it now, the onbgcolor=""; means transparent which means white since that is the color in that table and your oncolor is set to be #fff so the letters are white on white. That's now with the bgimage problem, but even when that is fixed the letters disappear on mouseover since that backon blue one is very light and has a lot of white in it.

As to the bgimage problem and it staying there once moused over, for some reason when there is only an overbgimage set that's what happens, unless you set the bgimages in css or do the easy fix: Make a transparent bgimage, the same as the backon_blue one, then set horizStyle2.bgimage="trans.gif"; Now, because it has a bgimage, when the mouse state changes to mouse off that is what is there, which of course is transparent and not visible.

For the letter width, if you mean the actual letters I think you'd have to do something in css, I vaguely remember something about proportional and something else with regard to printing presses and think that would be here also. But, if you mean the item, then you can do that by setting an itemwidth in that menu. However, you have that table cell set at width=98 so I'm not sure just how wide you want each of the items with only 98px in which to work.

John will have to answer the rest as I don't know about cf. Hope this helped with the other issues

Ruth

Re: Alignment, and remembering state

Poster: dilbert
Dated: Wednesday June 25 2008 - 1:36:47 BST

Ruth,

Thank you very much, I'll make those changes soon, and look forward to any wisdom John can impart.

Industrial Strength JavaScript and DHTML Menus

Alignment, and remembering state

Re: Alignment, and remembering state

Re: Alignment, and remembering state

Re: Alignment, and remembering state

Re: Alignment, and remembering state