Forums
View unanswered posts | View active topics It is currently Thu Jul 24, 2014 9:25 am



Reply to topic  [ 9 posts ] 
 Problem with dynamically positioned element 
Author Message

Joined: Wed Dec 01, 2010 4:20 pm
Posts: 7
Post Problem with dynamically positioned element
I have hidden elements on a page that are used as modal boxes, help bubbles, and tool tips. They are dynamically positioned using javascript to line up with a target element. The problem I am having is that after the first successful positioning, the css3pie generated drop shadow is in the wrong position for about 1/2 second. It then moves into the correct position. I've tried numerous javascript and css based solutions with no success. My css looks something like this:

Code:
        background-color: #fff;
   border: 2px solid #82a6bc;
        display: none;
   float: left;
   padding: 8px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   -webkit-box-shadow: #7c7e79 5px 5px 5px;
   -moz-box-shadow: #7c7e79 5px 5px 5px;
   box-shadow: #7c7e79 5px 5px 5px;
        behavior: url(/PIE/PIE.htc);


The only solution I've come up with is to create a hidden element that is attached to every target element, as the problem seems to be tied to the pages initial rendering.


Mon Dec 06, 2010 5:46 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Problem with dynamically positioned element
Hey there Kevin,

Are you using the new beta3 build? There was a change that went into the release that slightly changed how style.display modifications are handled. I'm wondering if this change would affect what you're seeing.

Also, are you seeing this in all IEs or only IE8?


Mon Dec 06, 2010 6:50 pm
Profile

Joined: Wed Dec 01, 2010 4:20 pm
Posts: 7
Post Re: Problem with dynamically positioned element
Hi Jason,

Nope. I'm on beta2. I'll give beta3 a shot, and let you know how it goes. Thanks!


Mon Dec 06, 2010 6:56 pm
Profile

Joined: Wed Dec 01, 2010 4:20 pm
Posts: 7
Post Re: Problem with dynamically positioned element
Unfortunately, beta3 did not fix it. I've attached a screen image of the problem.


Attachments:
File comment: The hover is over the number, which is where the flyout content is, but the border, and box shadow is off to the left.
pie.jpg [27.49 KiB]
Downloaded 334 times
Tue Dec 07, 2010 11:55 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Problem with dynamically positioned element
Well poop. ;)

So I can get a better understanding of your setup... when you show the bubble, does it set display:block and then set the left/top? The other way around?

Does the 1/2 second delay occur in all versions of IE or just IE8?


Tue Dec 07, 2010 9:10 pm
Profile

Joined: Wed Dec 01, 2010 4:20 pm
Posts: 7
Post Re: Problem with dynamically positioned element
I think I'm getting close. If I add display block, then remove, and add the element back it's looking pretty good.


Wed Dec 08, 2010 1:44 pm
Profile

Joined: Wed Dec 01, 2010 4:20 pm
Posts: 7
Post Re: Problem with dynamically positioned element
What ended up working is this flow for IE8:
1.show the element
2.position the element
3.remove the element
4.append the element back to it's parent

For FireFox and Chrome the flow is slightly different:
1.position the element
2.remove the element
3.append the element
4.show the element


Wed Dec 08, 2010 3:58 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Problem with dynamically positioned element
Glad you found a flow, but YUCK! ;)

If it's the showing/hiding that's missing it up, as I suspect it is, you might try changing it to repositioning off the screen (e.g. left:-999px; top:-999px;) instead of setting display:none.


Wed Dec 08, 2010 4:45 pm
Profile

Joined: Wed Dec 01, 2010 4:20 pm
Posts: 7
Post Re: Problem with dynamically positioned element
I'll give that a try as well. It would be cleaner.


Thu Dec 09, 2010 10:49 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 9 posts ] 

Who is online

Users browsing this forum: Baidu [Spider] and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.