add opacity to my div it loses its resize handles

1) sublime99 Group: Members
Posts: 13 Joined: 12 May 2008 Location: Canada IP: 64.254.--.--

Posted:

In Internet Explorer, when I add opacity to my div it loses its resize handles and capabilities. I have tried various combinations. Adding post creating, adding via the className. Any suggestions?

<script>
function createDiv(){
var div = document.createElement('DIV');
div.id = "div_images_1"
div.className="drsElement drsMoveHandle";
div.innerHTML = "<span class=\"label\">1</span>";;
div.style.border = '1px solid #CCC';
div.style.margin = '5px';
div.style.cursor = 'pointer';
div.style.position = 'absolute';
div.style.top = '100px';
div.style.left = '100px';
div.style.width = '300px';
div.style.height = '300px';
div.style.align = 'center';
div.style.opacity = '0.5'
div.style.filter = 'alpha(opacity="100")';
document.body.appendChild(div);
}

</script>

document.getElementById(div.id).style.filter = 'alpha(opacity="70")';

3) sublime99 Group: Members
Posts: 13 Joined: 12 May 2008 Location: Canada IP: 64.254.--.--

Posted:

just add the following to your page for testing simplicity
div{
filter:alpha(opacity=70);
}

4) Angus Turnbull Group: Moderators
Posts: 4235 Joined: 7 Dec 2003 Location: New Zealand IP: 118.92.--.--

Posted:

Yeah, it will, as applying a DirectX filter will essentially clip the DIV to its visible region and this script places the resize handles "outside" the DIV using negative margins.

A simple, but dirty fix is to apply the opacity filter to a div within the resizable div.

- Angus.

5) sublime99 Group: Members
Posts: 13 Joined: 12 May 2008 Location: Canada IP: 64.254.--.--

Posted:

Thanks. I can use kevin's workaround:
http://www.twinhelix.com/cgi-bin/forum.pl/dragresize/6

I thought about adding a resize type image to the bottom corner and activating resize when the image was clicked, but it appears complicated.

add opacity to my div it loses its resize handles

Post a Reply: