DIV show-hide flickering in IE only - html

I've got a problem with showing images triggered by a MouseOver (see: http://camera.vu.nl/v2)
In Safari and Firefox it's ok. In IE when you move of the text onto the Visible background layer with the blob-image, the layer is turned on and off leading to flickering.
I build it using the standard options in Dreamweaver CS4.
Can anyone please help me avoid this flicker in IE without destroying the idea of the page?
Thanks ever so much!
Marco

I've had this problem when I've added a mouseover and mouse out on a div which showed a div which covered the div which had the mouseout event set.
Is this the case? If so, then when the div shows, it will fire the mouse out event and then end up in a loop on mouseover and mouseout until you truly move the pointer out.
if not, could you post some code sample?

Related

HTML/CSS Popup Jitter - Image pops down immediately after poping up [SOLVED]

I'm trying to figure out how to prevent a popup image from poping up and down repeatedly (forever) when the user moves the mouse to a location on the page.
See https://codesandbox.io/s/jitterbug-on-popup-25kp4 to illustrate the problem. Hover over the text Mouse over this and the Jitter Image will appear to see the jitter problem.
EDIT: Since this was originally posted, I incorporated the solution into the code showing the problem, and now it also shows a solution.
Details
What follows is a text description of the problem, but the code does illustrates the problem as well (and with a lot less text).
On a web page, that has a vertical scroll bar,
The user moves the mouse over a div which has a MouseEnter javascript handler.
the on MouseEnter event fires which causes an image to pop up.
The popup causes the scroll bar to scroll the content. So now, the mouse is no longer hovering over the hover item so the MouseLeave event fires which causes the image to pop down.
With the image no longer being displayed, the scroll bar moves the content back to where it was prior to the popup and viola, the mouse is overtop of the div and the MouseEnter event fires again to pop up the image.
Steps 2-4 repeat forever at the speed at which the browser can keep up.
Or when the user moves the mouse to stop the popup/popdown from happening.
I've seen this happen on some other websites and now that it's happening to me, I want to fix it but I'm not sure how to.
I've searched for a solution but haven't found one yet. Here are some links I found:
https://css-tricks.com/content-jumping-avoid/ - This was good but suggests using min-height which doesn't work in my situation.
I've also tried using overflow: hidden which does prevent the jitter effect described above but leaves the user with no way to see the rest of the popup image. This, however, is a better solution than the jitter effect described above.
I'm using AngularJS and JQuery if that affects the answer.
position:absolute on the image, will solve this as it won't change the current flow when you display the image and the scroll bar will remain in it current position.

Click through elements phonegap

I am using phonegap to build an application. On the page, there are a link A and a div. Take a look at the illustrative picture.
The div overlaps the link, we cannot see the link. But if I click on the the div at the location of the link, a click event fired on the link. Is this a phonegap bug? How to resolve it?
I've been banging my head around this for a while...
The problem is not phonegap, it's the jquery mobile's VCLICK-event See the yellow warning here: http://api.jquerymobile.com/vclick/
Webkit based browsers synthesize mousedown, mouseup, and click events
roughly 300ms after the touchend event is dispatched.
I suppose, you handle the "vclick", then in 300ms the overlapping DIV disappears and the "click" is passed to the LINK.
Solution Simply don't use the 'vclick' event on overlapping elements. Or when the DOM is being modified (and becomes different in 300ms)

Make an overlay hidden on page load in Angular

Using this article I made an overlay div fade in/out on mouse click with ng-hide/ng-show. It works fine except one small thing - when page is loading and not all Angular is loaded yet, the overlay flickers for a moment then fades out when Angular loads respective variables that are in charge for overlay visibility.
The div looks like this in Jade:
.overlay(ng-show="overlayStatus=='on'", ng-init="overlayStatus='off'", ng-animate="'fade'")
Now to remove that flickering, and make the overlay hidden on load without Angular evaluations, I add style="display:none;" to this div and it seems to fix the issue. Though I am not sure if it's a proper way to do this.
Please advise.
You need to use ng-cloak directive

Why do mouse clicks not always work for styled input buttons?

Throughout our application, we use styled input buttons for submitting forms. For some reason you have to precisely click them in order for the click to be registered. Over half the time, it looks like the button is clicked (i.e. changes on mousedown/mouseup), but nothing happens and we have to click again. If we simply remove the css styling, the button works fine all the time.
Example:
Our users really like the look of the styled buttons, but are a bit annoyed by not knowing if the click event went through. Any easy way to solve this?
Update
I was finally able to neatly reproduce this in jsfiddle: http://jsfiddle.net/xRK4C/3/ . You can see the behavior if you click on the upper left few pixels of the button with the rounded corner. I'm thinking it's because the button moves when being clicked, which causes the mouse to be outside the button on mouse-up. Our users wanted this though, so is there any good way to keep the 3d effect without sacrificing click area?
I believe it's the relative positioning on :active. I guess the moving of the button gets the mouse events confused. I'd suggest to changing the margins instead.
EDIT: Margins don't work either, neither a CSS 2 translation.
You need to somehow move the "image" of the button without moving the button (thus the area that is clicked on) itself, but I can't think of anything right now.
Went to the JSFiddle site and played around with the styling there.
I noticed the hover was successful on the edge of the button, but the click was not.
So, I changed the left:2px; top:2px; to left:0px; top:0px; and the hover, of course, still worked, but the click was successful on the edge of the button.

Float HTML elements over .swf file without triggering flash events

I was wondering if anyone has came up with a way to float html elements, with some content, over .swf without triggering any flash events.
In my case the problem is I have flash map, and drop down menu on top of it.
I simplified this into the following example:
http://f1vlad.com/etc/d.html
If you mouseover any elements in gray box, you will see that stuff behind it, in a flash file, triggers hover effects.
Have you tried adjusting the z-index of the HTML elements with CSS.
Try applying this to your HTML element:
z-index: 1000;
Update: I have placed HTML elements over an .swf and had the area of the flash that is covered by the HTML not respond to click events. Is this essentially the same symptoms you want to correct?
try
display: block;
In Firefox 3.5, your page sort of works. When I mouseout of the floating box and on to Canada it will trigger the mouseover event for Canada. However, if I mouseover the floating box again the SWF doesn't receive the mouseout event so Canada stays highlighted. I assume you want to have Canada receive the mouseout event when this happens?
I would use ExternalInterface to have the floating box call methods in the SWF when the mouse enters and leaves the floating box. That way you can simulate the mouseleave event to reset the country highlight and popups, then when the mouse leaves the floating box you can check to see if the mouse is over a country and perform the mouseover event normally.