Question

I have a problem with a div that at the begin is fixed in the bottom-left corner. I need to do it draggable but when I use jquery to do it the bottom position remains and the size of the div changes.

You can see the behavior in this page: http://paraguasparados.com

The div css code is:

.fcp-cpanel{
position:fixed;
bottom:20px;
left:10px;
z-index: 99999;
padding: 5px;
color: #000;
text-align: left; 
font-size: 11px; 
background:url('../img/blueicons/background.jpg') repeat-x;
border:1px solid #000;
}

The jquery code is:

$jn("#fcp-cpanel").draggable({
        containment:"body",
        scroll: false,
        opacity: 0.35
        });

When in firebug I remove the ‘bottom’ css style it works like it should.

Thanks for any help.

Answer 1

The problem is that you are making a fixed element draggable and so the bottom css attribute is messing it up when you start moving it. A fix for this is to create a container div that has the fixed css attributes and inside you can add the draggable element. Something like this:

css:
.fcp-cpanel-container{
position:fixed;
bottom: 10px;
left:10px;
}
.fcp-cpanel{
padding: 5px;
color: #000;
text-align: left;
font-size: 11px;
background:url('http://paraguasparados.com/modules/mod_friendchatppd/img/blueicons/background.jpg') repeat-x;
border:1px solid #000;
}

html:
<div class="fcp-cpanel-container">
    <div class="draggable fcp-cpanel">
         <p><b>Amigos Online</b>
            <span id="onlusers" class="onlusers">0</span><span onclick="register()"><img title="Registrar" alt="Registrar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/visible.jpg"></span>
            <span onclick="maximize()" id="fcp-micon">
                <img title="Maximizar" alt="Maximizar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/max.jpeg">
                <img style="display:none;" title="Minimizar" alt="Minimizar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/min.jpeg">
            </span>
        </p>
    </div>
</div>

I set up a working example with your code here: http://jsfiddle.net/NdUNu/.