浮動按鈕HTML5

-1

我似乎無法解決此浮動按鈕問題。我相信這與iframe標記的某些屬性不能使用html5有關。有沒有任何簡單的替代方案來使這項工作正確？浮動按鈕HTML5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 


<head> 

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 

    <title>Quadax Registration</title> 

<script language="javascript" id="clientEventHandlersJS"> 
    function btnComplete_onclick() { 
     frmQuadMaX.OBKey_REG_Ticket_Status_1.value = "C"; 
     frmQuadMaX.OBBtn_Yes.click(); 
     btnComplete.disabled = true; 
    } 
</script> 

<script language="javascript" id="Script1"> 
    function btnCancel_onclick() { 
     frmQuadMaX.OBBtn_Yes.click(); 
    } 
</script> 


<script type="text/javascript"> 
    function submitform(){ 
     //Parent Submit Form Function 
     frmQuadMaX.OBBtn_Yes.click(); 
    } 

    function calcHeight(){ 
     //find the height of the internal page 
     var the_height= document.getElementById('fraQuadMaX').contentWindow.document.body.scrollHeight; 
     //change the height of the iframe 
     document.getElementById('fraQuadMaX').height= the_height; 
    } 

function resizeFrame() 
{ 
//resize the iframe so complete and cancel buttons are always visible 
var frameHeights= document.getElementById('fraQuadMaX').scrollHeight; 
var frameHeight= document.getElementById('fraQuadMaX').innerHTML = window.innerHeight; 
var bodyHeight = document.body.clientHeight; 

if (frameHeight > 40) 
{ 
var scroll = ((bodyHeight - 60)/bodyHeight * 100); 
document.getElementById('fraQuadMaX').style.height=("length" + scroll); 
} 

var frameHeight= document.getElementById('fraQuadMaX').scrollHeight; 
var formHeight = frameHeight + 10; 
document.getElementById('btnCancel').style.top = formHeight - 10; 
document.getElementById('btnComplete').style.top = formHeight - 10; 

} 


</script> 
</head> 

<body onload="resizeFrame()" onresize="resizeFrame()" style="overflow: hidden">   

<FORM id="frmQuadMaX" action ="--Webbot-Self--" name="frmQuadMaX" 
    method="post"> 
    <INPUT id="OBKey_HARP_Account_Number_1" 
     style="Z-INDEX: 101; VISIBILITY: hidden; LEFT: 136px; POSITION: absolute; TOP: 31px" 
     tabIndex="0" type="text" name="OBKey_HARP_Account_Number_1"/> 
    <INPUT id="OBKey_Collection_Date_1" 
     style="Z-INDEX: 106; VISIBILITY: hidden; LEFT: 136px; POSITION: absolute; TOP: 56px" 
     tabIndex="0" type="text" name="OBKey_Collection_Date_1"/> 
    <INPUT id="OBKey_Patient_Last_Name_1" 
     style="Z-INDEX: 103; VISIBILITY: hidden; LEFT: 136px; POSITION: absolute; TOP: 80px" 
     tabIndex="0" type="text" name="OBKey_Patient_Last_Name_1"/> 
    <INPUT id="OBKey_Patient_First_Name_1" 
     style="Z-INDEX: 104; VISIBILITY: hidden; LEFT: 136px; POSITION: absolute; TOP: 80px" 
     tabIndex="0" type="text" name="OBKey_Patient_First_Name_1"/> 
    <INPUT id="OBKey_Date_of_Birth_1" 
     style="Z-INDEX: 102; VISIBILITY: hidden; LEFT: 136px; POSITION: absolute; TOP: 80px" 
     tabIndex="0" type="text" name="OBKey_Date_of_Birth_1"/> 
    <INPUT id="OBKey_REG_Ticket_Status_1" 
     style="Z-INDEX: 105; VISIBILITY: hidden; LEFT: 136px; POSITION: absolute; TOP: 80px" 
     tabIndex="0" type="text" name="OBKey_REG_Ticket_Status_1"/> 
    <INPUT id="OBKey_Requisition_Number_1" 
     style="Z-INDEX: 110; VISIBILITY: hidden; LEFT: 135px; POSITION: absolute; TOP: 128px" 
     tabIndex="0" type="text" name="OBKey_Requisition_Number_1"/> 

    <INPUT id="OBBtn_Yes" Style=" visibility:hidden" 
     type="submit" value="Submit" name="OBBtn_Yes"/> 
    <INPUT id="btnComplete" 
     style="FONT-WEIGHT: bold; Z-INDEX: 115; LEFT: 9px; VISIBILITY: visible; WIDTH: 92px; COLOR: darkblue; BORDER-TOP-STYLE: outset; BORDER-RIGHT-STYLE: outset; BORDER-LEFT-STYLE: outset; POSITION: absolute; BOTTOM: 107px; HEIGHT: 24px; BACKGROUND-COLOR: transparent; BORDER-BOTTOM-STYLE: outset" 
     type="button" value="Complete" name="btnComplete" 
     language="javascript" onclick="return btnComplete_onclick()" 
     tabIndex="1"/> 
    <INPUT id="btnCancel" 
     style="FONT-WEIGHT: bold; Z-INDEX: 109; LEFT: 108px; VISIBILITY: visible; WIDTH: 92px; COLOR: darkblue; BORDER-TOP-STYLE: outset; BORDER-RIGHT-STYLE: outset; BORDER-LEFT-STYLE: outset; POSITION: absolute; BOTTOM: 107px; HEIGHT: 24px; BACKGROUND-COLOR: transparent; BORDER-BOTTOM-STYLE: outset" 
     type="button" value="Cancel" name="btnCancel" 
     language="javascript" onclick="return btnCancel_onclick()" 
     tabIndex="1"/>  

</FORM> 

<IFRAME id="fraQuadMaX" tabIndex="0" name="fraQuadMaX" 
     style="OVERFLOW:auto; WIDTH:101%; HEIGHT:91%; position:absolute; top:0px; z-index: 100; left: 8px;" 
     height="2000px" > 
</IFRAME> 

<script> 



    fraQuadMaX.document.write("Please Wait...") 

    var lvURL = "https://atbsvr.quadax.com/static/HarpDemoRedirect.htm?X=OPEN&acct=" + 
     frmQuadMaX.OBKey_HARP_Account_Number_1.value + "&cli=SX" + "&virt=QUADAX" + "&EDI_DOS=" + 
     frmQuadMaX.OBKey_Collection_Date_1.value + "&PT_LAST_NAME=" + 
     frmQuadMaX.OBKey_Patient_Last_Name_1.value + "&PT_FIRST_NAME=" + 
     frmQuadMaX.OBKey_Patient_First_Name_1.value + "&EDI_REQ_NUM=" + 
     frmQuadMaX.OBKey_Requisition_Number_1.value + "&PT_BIRTH_DT=" + 
     frmQuadMaX.OBKey_Date_of_Birth_1.value; 

    fraQuadMaX.document.location.href = lvURL; 


</script> 

</body> 
</html>

Floating Button

來源

2013-04-05 Scott

什麼是「不正確」，什麼是「正確」。你的問題含糊不清「浮動按鈕問題」是什麼？「正確工作」什麼是正確的？哪裏不對？提供澄清，我會刪除我的downvote。 – Leeish 2013-04-05 16:22:10

這可能是最好的開始看你的個人元素，看看你試圖使用的iframe屬性的html5替代品。例如，html5中不支持'scrolling'屬性。 – seanbreeden 2013-04-05 16:23:05

我同意。如果它的定位，你有位置：絕對，所以位置在哪裏：相對於？你是否默認了IFRAME的家長，或者你是否在其他地方指定了親戚？ – 2013-04-05 16:23:10

body{ 
    height:2000px; 
} 
#float{ 
    background:red; 
    width:20px; 
    height:100px; 
    position:fixed; 
    top:50px; 
    left:0; 
}

這將創建一個浮動菜單中添加社交網絡圖標等在頁邊。

檢查此小提琴：http://jsfiddle.net/TVwAv/

來源

2013-04-05 16:24:53 harishannam

回答

相關問題