2012-04-03 30 views
1

は2つありますとき:jQueryの-UIの位置は動作しないスクロールバー

  • それともジャーク
  • または私もバグ

私はIFRAMEでWebページを持っていました。

iframeの左下にアイコンを配置したいとします。だから私はjquery-uiの位置でこれを行うことができると思った。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
     "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <title>test positionLogo</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" 
      type="text/css" media="screen"/> 
    <style type="text/css"> 
     div.positionLogo { 
      width: 64px; 
      height: 64px; 
      position: absolute; 
      display: block; 
      text-align: center; 
      background: #FFFFFF url(http://qooxdoo.org/_media/stackoverflow.png) no-repeat center; 
     } 
    </style> 
</head> 
<body> 

<h2>Header</h2> 

<iframe id="idIframe" name="idIframe" scrolling="no" height="1600px" width="100%" src="http://www.google.it" 
     frameborder="0"></iframe> 

<div class="positionLogo"></div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".positionLogo").position({ 
      of:$("#idIframe"), 
      my:"left bottom", 
      at:"left bottom" 
     }); 
    }); 
</script> 

</body> 
</html> 

素晴らしい事は、あなたがIFRAMEの高さオプション height="1600px"

height="300px"へのウィジェットの動作を変更場合ということである。ここで

は私の試みがうまくいかないです正しく! :S

どうすれば可能ですか? ありがとう

答えて

5

必要なのは、位置ウィジェットの衝突オプションを使用することです(noneに設定してください)。デフォルト値は自動的に(ページの可視部分に)あなたのための位置を調整しようとするフリップそんなに

http://jqueryui.com/demos/position/#option-collision

$(document).ready(function() { 
     $(".positionLogo").position({ 
      of:$("#idIframe"), 
      my:"left bottom", 
      at:"left bottom", 
      collision: 'none' 
     }); 
    }); 
+0

感謝です! – JellyBelly

関連する問題