Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer Cross browser scripting.

    Hi all,


    I am working on a registration type portion to a site, in which I have a table, a field name, then an input. I decided to add a "Whats This" next a field.

    In an attempt to bybass zealous popup blockers, I added a <div> tag, make some java script, all was good. Untill it blew up. Here is an example of the site [ This is just a static HTML rendering of it, since the page is dynamic. ]

    Registration Page


    Here are the codes I am using:

    Code:
    /* _w : which ID (1) or (2) */
    /* _h : (h)ide or (s)how */
    function display(eid,action,display)
    {
    	var isIE=document.all?true:false;
    	var isDOM=document.getElementById?true:false;
    	var isNS4=document.layers?true:false;
    
    	if ( isDOM )
    	{
    		if (action=='s') document.getElementById(eid).style.display=display;
    		if (action=='h') document.getElementById(eid).style.display=display;
    	}
    	else if ( isIE )
    	{
    		if (action=='s') eval("document.all."+eid+".style.display="+display+";");
    		if (action=='h') eval("document.all."+eid+".style.display=display;");
    	}
    	else if( isNS4 )
    	{
    		if (action=='s') eval("document.layers['"+eid+"'].display="+display+";");
    		if (action=='h') eval("document.layers['"+eid+"'].display=display;");
    	}
    }
    Code:
    dl {
    	margin:0 0 0 1em;
    	padding: 0 0;
    	position:relative;
    }
    dl dt, dl dd {
    	position:static;
    	margin:0;
    }
    dl dt {
    	padding:0;
    	font-weight:bold;
    }
    dl dd {
    	padding:.15em .15em 0 .15em;
    	text-indent:7ex;
    	position:relative;
    }
    
    fieldset legend {
    	font-weight:bold;
    	color:#000; /* IE on XP uses theme colour, and won't accept inherit */
    	position:relative;
    }
    
    
    label, label input, legend, legend input, legend img, dl.simple dt img, dl.simple dd img
    {
    	vertical-align:middle;
    }
    
    dl.simple
    {
    	list-style:none;
    	margin:0 0 0 0;
    	padding:0;
    }
    .simple dl.simple
    {
    	margin:0 0 0 1em;
    }
    dl.simple dt
    {
    	display:block;
    	margin:0;
    	padding:0;
    	text-indent:0;
    	vertical-align:middle;
    	position:relative;
    }
    dl.simple dt
    {
    	float:left;
    	clear:left;
    	font-weight:bold;
    	line-height:1.5em;
    	position:relative; /* vanishes in IE without it */
    	padding-right:1ex;
    }
    dl.simple dt 
    {
    	float:none;
    	clear:none;
    }
    
    .column2 {
    	float:none;
    	display:none;
    	width:265px;
    	position:relative;
    	//right:100px;
    	//width: 50%
    	align: left;
    	//padding-right:10ex;
    	valign: top;
    	padding: 15px 265px 10px 0px;
    	//padding: 15px 0px 0px 400px;
    }
    and the HTML:

    Code:
    <table border="0">
    <form action="manage.php" method="post">
     <tr>
      <td colspan="3"><b>Registration Information</b></td>
     </td>
     </tr>
     <tr>
      <td align="left" valign="middle">Name:</td>
      <td align="left" valign="middle"><input type="text" name="name" value="{new_artist.NAME}" class="forminput"></td>
      <td></td>
     </tr>
     <tr>
      <td align="left" valign="middle">Genre:</td>
      <td align="left" valign="middle">{new_artist.GENRE}</td>
      <td></td>
     </tr>
     <tr>
      <td align="left" valign="middle">Account Type:</td>
      <td align="left" valign="middle">{new_artist.ACCOUNT}<input type="hidden" name="new" value="true"></td>
      <td align="left" valign="middle"><a href="#" onclick="display('helpbox', 's', 'inline');display('question', 'h', 'none');" id="question"><b style="font-weight:bold; color:#adc562;" onMouseOver="this.innerHTML = '&nbsp;&nbsp;Whats this?'" onMouseOut="this.innerHTML = '&nbsp;&nbsp;?'" onclick="this.innerHTML = '&nbsp;&nbsp;?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'">&nbsp;&nbsp;?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></a></td>
     </tr>
     <div class="column2" id="helpbox">
     <!--<div style="float:left;align:left;display:block;" -->
     <fieldset>
     <legend>&nbsp;<b>Help Box</b></legend>
     <div id="a_free"><a href="#" onclick="display('free', 's', 'inline');display('tiny', 'h', 'none');display('medium', 'h', 'none');display('giant', 'h', 'none');display('a_free', 'h', 'none');display('a_tiny', 's', 'block');display('a_medium', 's', 'block');display('a_giant', 's', 'block');">Free Account</a></div>
     <div id="free" style="display:none;" onclick="display('free', 'h', 'none');display('a_free', 's', 'block');">
     <dl class="simple">
         <dt>Free Account - Free!</dt>
         <dd>Free account.</dd>
     </dl>
     </div>
     <div id="a_tiny"><a href="#" onclick="display('free', 'h', 'none');display('tiny', 's', 'inline');display('medium', 'h', 'none');display('giant', 'h', 'none');display('a_tiny', 'h', 'none');display('a_free', 's', 'block');display('a_medium', 's', 'block');display('a_giant', 's', 'block');">Tiny Account</a></div>
     <div id="tiny" style="display:none;" onclick="display('tiny', 'h', 'none');display('a_tiny', 's', 'block');">
     <dl class="simple">
         <dt>Tiny Account</dt>
         <dd>Little bigger</dd>
     </dl>
     </div>
     <div id="a_medium"><a href="#" onclick="display('free', 'h', 'none');display('tiny', 'h', 'none');display('medium', 's', 'inline');display('giant', 'h', 'none');display('a_medium', 'h', 'none');display('a_free', 's', 'block');display('a_tiny', 's', 'block');display('a_giant', 's', 'block');">Medium Account</a></div>
     <div id="medium" style="display:none;" onclick="display('medium', 'h', 'none');display('a_medium', 's', 'block');">
     <dl class="simple">
         <dt>Medium Account</dt>
         <dd>A bit more bigger then the previous.</dd>
     </dl>
     </div>
     <div id="a_giant"><a href="#" onclick="display('free', 'h', 'none');display('tiny', 'h', 'none');display('medium', 'h', 'none');display('giant', 's', 'inline');display('a_free', 's', 'block');display('a_tiny', 's', 'block');display('a_medium', 's', 'block');display('a_giant', 'h', 'none');">Giant Account</a></div>
     <div id="giant" style="display:none;" onclick="display('giant', 'h', 'none');display('a_giant', 's', 'block');">
     <dl class="simple">
         <dt>Giant Account</dt>
         <dd>This guy is huge.</dd>
     </dl>
     </div>
     <div align="right" style="text-align:right;align:right;"><span style="text-align: right; align: right;"><a href="#" onclick="display('helpbox', 'h', 'none');display('question', 's', 'inline');">[ <b>Close</b> ]</span></div>
     </fieldset>
     </div>
     <!--</div> -->
     <tr>
      <td></td>
      <td align="right" style="padding-top: 10px;"><input type="hidden" name="mode" value="artist_profile"><input type="hidden" name="submit" value=1><input type="image" id="submit" src="images/texts/letters/submit1.gif" onMouseOver="selectletter(this);" onMouseOut="deselectletter(this);">
      <td></td>
     </tr>
    </form>
    </table>
    Thanks for any and all help,
    ILM

  • #2
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation

    Bump.


    I'm afriad I might have to re-script the entire page...is that what it's coming too?


    ILM

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    What seems to be the actual problem with the page?

  • #4
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    View the page in IE, then in FireFox.


    Notice how once the "?" is pressed the help box shows up fine in Firefox [ to the right of the input boxes


    But In IE it pushes all the page down and appears above it [ in the smallest width possible ].


    I'll take screen shots for those of you who are missing one browser or the other.



    ILM
    Last edited by ILoserMan; 08-22-2005 at 03:31 PM.

  • #5
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    bu bu bu bump.


  •  

    Posting Permissions

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