#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    23
    Rep Power
    0

    Form elements on a floating menu... problem


    Hello all.

    My site has a floating menu (follows the user down the page).

    When I went to add a 'working' calculator script to that floating menu, it appeared there fine and all, but the calculator buttons and text field didn't work.

    Is there a confict here, or is there a workaround for this problem?

    Here's the external js script:
    Code:
    floatX=437;
    floatY=160;
    layerwidth=10;
    layerheight=13;
    halign="right";
    valign="top";
    delayspeed=0;
    
    // This script is copyright (c) Henrik Petersen, NetKontoret
    // Feel free to use this script on your own pages as long as you do not change it.
    // It is illegal to distribute the script as part of a tutorial / script archive.
    // Updated version available at: http://www.echoecho.com/toolfloatinglayer.htm
    // This comment and the 4 lines above may not be removed from the code.
    
    NS6=false;
    IE4=(document.all);
    if (!IE4) {NS6=(document.getElementById);}
    NS4=(document.layers);
    
    function adjust() {
    if ((NS4) || (NS6)) {
    if (lastX==-1 || delayspeed==0)
    {
    lastX=window.pageXOffset + floatX;
    lastY=window.pageYOffset + floatY;
    }
    else
    {
    var dx=Math.abs(window.pageXOffset+floatX-lastX);
    var dy=Math.abs(window.pageYOffset+floatY-lastY);
    var d=Math.sqrt(dx*dx+dy*dy);
    var c=Math.round(d/10);
    if (window.pageXOffset+floatX>lastX) {lastX=lastX+delayspeed+c;}
    if (window.pageXOffset+floatX<lastX) {lastX=lastX-delayspeed-c;}
    if (window.pageYOffset+floatY>lastY) {lastY=lastY+delayspeed+c;}
    if (window.pageYOffset+floatY<lastY) {lastY=lastY-delayspeed-c;}
    }
    if (NS4){
    document.layers['floatlayer'].pageX = lastX;
    document.layers['floatlayer'].pageY = lastY;
    }
    if (NS6){
    document.getElementById('floatlayer').style.left=lastX;
    document.getElementById('floatlayer').style.top=lastY;
    }
    }
    else if (IE4){
    if (lastX==-1 || delayspeed==0)
    {
    lastX=document.body.scrollLeft + floatX;
    lastY=document.body.scrollTop + floatY;
    }
    else
    {
    var dx=Math.abs(document.body.scrollLeft+floatX-lastX);
    var dy=Math.abs(document.body.scrollTop+floatY-lastY);
    var d=Math.sqrt(dx*dx+dy*dy);
    var c=Math.round(d/10);
    if (document.body.scrollLeft+floatX>lastX) {lastX=lastX+delayspeed+c;}
    if (document.body.scrollLeft+floatX<lastX) {lastX=lastX-delayspeed-c;}
    if (document.body.scrollTop+floatY>lastY) {lastY=lastY+delayspeed+c;}
    if (document.body.scrollTop+floatY<lastY) {lastY=lastY-delayspeed-c;}
    }
    document.all['floatlayer'].style.posLeft = lastX;
    document.all['floatlayer'].style.posTop = lastY;
    } 
    setTimeout('adjust()',50);
    }
    
    function define()
    {
    if ((NS4) || (NS6)) 
    { 
    if (halign=="left") {floatX=ifloatX};
    if (halign=="right") {floatX=window.innerWidth-ifloatX-layerwidth-20};
    if (halign=="center") {floatX=Math.round((window.innerWidth-20)/2)-Math.round(layerwidth/2)};
    if (valign=="top") {floatY=ifloatY};
    if (valign=="bottom") {floatY=window.innerHeight-ifloatY-layerheight};
    if (valign=="center") {floatY=Math.round((window.innerHeight-20)/2)-Math.round(layerheight/2)};
    }
    if (IE4) 
    {
    if (halign=="left") {floatX=ifloatX};
    if (halign=="right") {floatX=document.body.offsetWidth-ifloatX-layerwidth-20}
    if (halign=="center") {floatX=Math.round((document.body.offsetWidth-20)/2)-Math.round(layerwidth/2)}
    if (valign=="top") {floatY=ifloatY};
    if (valign=="bottom") {floatY=document.body.offsetHeight-ifloatY-layerheight}
    if (valign=="center") {floatY=Math.round((document.body.offsetHeight-20)/2)-Math.round(layerheight/2)}
    }
    }
    Here's the HTML script:
    Code:
    <script>
    	if (NS4) {document.write('<LAYER NAME="floatlayer" LEFT="'+floatX+'" TOP="'+floatY+'">');}
    if ((IE4) || (NS6)) {document.write('<div id="floatlayer" style="position:absolute; left:'+floatX+'; top:'+floatY+';">');}
    </script>
    <!----***** ENTER THE CONTENT FOR YOUR LAYER HERE *****----->
    <!-----------------START OF SITE NAVIGATION MAP--------------->
    
    
    <FORM NAME="Calculator">
    <TABLE BORDER=4>
    <TR>
    <TD>
    <INPUT TYPE="text" NAME="Calc_Input" Size="16">
    <br>
    </TD>
    </TR>
    <TR>
    <TD>
    <INPUT TYPE="button" NAME="one"   VALUE="  1  " OnClick="Calculator.Calc_Input.value += '1'">
    <INPUT TYPE="button" NAME="two"   VALUE="  2  " OnCLick="Calculator.Calc_Input.value += '2'">
    <INPUT TYPE="button" NAME="three" VALUE="  3  " OnClick="Calculator.Calc_Input.value += '3'">
    <INPUT TYPE="button" NAME="plus"  VALUE="  +  " OnClick="Calculator.Calc_Input.value += ' + '">
    <br>
    <INPUT TYPE="button" NAME="four"  VALUE="  4  " OnClick="Calculator.Calc_Input.value += '4'">
    <INPUT TYPE="button" NAME="five"  VALUE="  5  " OnCLick="Calculator.Calc_Input.value += '5'">
    <INPUT TYPE="button" NAME="six"   VALUE="  6  " OnClick="Calculator.Calc_Input.value += '6'">
    <INPUT TYPE="button" NAME="minus" VALUE="  -   " OnClick="Calculator.Calc_Input.value += ' - '">
    <br>
    <INPUT TYPE="button" NAME="seven" VALUE="  7  " OnClick="Calculator.Calc_Input.value += '7'">
    <INPUT TYPE="button" NAME="eight" VALUE="  8  " OnCLick="Calculator.Calc_Input.value += '8'">
    <INPUT TYPE="button" NAME="nine"  VALUE="  9  " OnClick="Calculator.Calc_Input.value += '9'">
    <INPUT TYPE="button" NAME="times" VALUE="  x  " OnClick="Calculator.Calc_Input.value += ' * '">
    <br>
    <INPUT TYPE="button" NAME="clear" VALUE="  c  " OnClick="Calculator.Calc_Input.value = ''">
    <INPUT TYPE="button" NAME="zero"  VALUE="  0  " OnClick="Calculator.Calc_Input.value += '0'">
    <INPUT TYPE="button" NAME="DoIt"  VALUE="  =  " OnClick="Calculator.Calc_Input.value = eval(Calculator.Calc_Input.value)">
    <INPUT TYPE="button" NAME="div"   VALUE="  /  " OnClick="Calculator.Calc_Input.value += ' / '">
    <br>
    </TD>
    </TR>
    </TABLE>
    </FORM>
    <!-----------------END OF SITE NAVIGATION MAP---------------> 
    <script>
    if (NS4) 
    {
    document.write('</LAYER>');
    }
    if ((IE4) || (NS6)) 
    {
    document.write('</DIV>');
    }
    ifloatX=floatX;
    ifloatY=floatY;
    define();
    window.onresize=define;
    lastX=-1;
    lastY=-1;
    adjust();
    
    </script>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    23
    Rep Power
    0
    Anyone?

    Maybe I'm not being clear:

    when you float a FORM element, it no longer acts like a form element (ie. internal functions don't work).

    Anyone know why it acts like this, and is there a way around it?

IMN logo majestic logo threadwatch logo seochat tools logo