CODEWITHSUNDEEP
jqueryjquery-ui
JellyBelly
JellyBelly

Reputation: 2431

jQuery-UI Position not work when the scrollbar

There are two things:

I have a webpage with an iframe.

I want to place an icon in the lower left of the iframe. So I thought I could do this with jquery-ui position.

here is my attempt does not work:

<!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>

the nice thing is that if you change the height of the iframe option height="1600px" to height="300px"

The widget works correctly! :S

How is it possible? Thanks

Upvotes: 1

Views: 2031

Answers (1)

Artem
Artem

Reputation: 3700

What you need is to use collision option of position widget (set it to none). Default value is flip which tries to automatically adjust position for you (to visible part of a page)

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

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

Upvotes: 5

Related Questions