Chrome is showing a div at the wrong location - javascript

I'm moving some divs around and it works fine in Firefox and IE. But in chrome it freezes the display of the div sometimes (even though the div is actually still moving).
Also the div is cursor:pointer and when I hover over where it should be (not where it is drawn) only then the cursor turns to pointer.
Also if I switch tabs in chrome and switch back, it draws the div at the correct spot.
Also if I change anything about the div (like background color) in the "Inspect Element" window, the div snaps into place.
How do I fix this?
The light blue box is where the div really is internally. Notice all the boxes in the left column are not drawn at the correct spot.

I just found out that this only happens when one of the divs happens to move into a google ad. Then since this is Google chrome and a Google ad, it freaks out and shuts of rendering my content, so that I don't mess with their ads.
I guess the solution is to not allow your divs to run into ads, even though your divs are in a container that's away from the ads and has overflow:hidden. So the div that is hitting the ad isn't even being displayed but still chrome doesn't like it.

Related

When scrollbar appears, it pushes all content to left. How to instead make scrollbar appear to right of existing container?

This is for a Chrome Extension I'm working on.
The scrollbar isn't coded into the HTML/CSS/Javascript anywhere in its present form. When enough elements get added to the Extension memory, and a button is clicked to reveal a user's saved items, the default browser scrollbar simply appears there.
When it does appear, it pushes all previously visible content left, shifting it all from its previous position, and it's pretty visually clunky and unattractive.
How could I instead make this scrollbar appear to the right of the pop-up div container -- with everything inside of there remaining in their original position?
Thanks!

Strange behavior with containers in IE

I have the following scenario: I have a few divs embedded in eachother, the main div has position:absolute, and floats happily somewhere in the middle of the screen.
The issue is that this main div is supposedly invisible in the beginning.
If I hover over a menu point, it appears. This main div also has submenus, which also make other things appear-disappear, depending where the mouse is.
The strange part: On everything else, this works perfectly, but for some reason on IE 11, whenever one of the submenus child ul-s gets the display: block from the mouse over event listener, the main div decides just to disappear.
The fun part is, that the main div still has display: block in it. If I manually remove it, and re-add it, it reappers! But I cannot make both the submenu, and the main div make appear.
Anyone has experience regarding this? I tried searching the web whole and wide, and I cannot see any answers.
Oh, one more additional detail, it usually works regardless, but sometimes don't, only if the user is zoomed in (zoom > 125%) it does this with 100% accuracy. I really hate IE.

safari ios div position fixed vanished

i have a modal(position fixed ...) with one input inside it.
every time i start typing something, all of the content just go overlap, like z-index -99999, something like that.
this problem is on safari ios, only.
i tried to force in the main div zindex 9999..., also on the input, but the problem continues.
http://www.e-konomista.pt/artigo/isencao-imi-para-idosos/
the modal is position fixed bottom, if doesnt appear, just refresh.
udealsonline.s3.amazonaws.com/ekonomista/1.png
udealsonline.s3.amazonaws.com/ekonomista/2.png
help guys, and sorry for my english

Div follow mouse and avoid browser boundaries

I've figured how to get a div to follow a mouse, but how can I get it to reposition when the div comes close to the edge of the browser window?
For example, on Youtube, if you hover over the video makers name the div will always stay in the browser and never go off screen.
Click here, hover over Lindsey Stirling and resize your browser a few times for a live example.
Does anyone know how to do this?
Use the "title" property. This example should work fine. http://jsfiddle.net/8vj3k7zo/
<div title="no, I am 100% serious, please look at me! Oh, and try resizing the browser window.">This is some test text look at me!!!"</div>
Of course, you can't style the title tooltip, as it's part of the native browser implementation. If you'd like to get a styled div to peek over the edge of the browser, you can't do that.
On the other hand, if you would like to make sure that the entirety of the custom CSS tooltip is always inside the browser when the mouse is close to the edge (and not partially outside the bounds of the window), check out this excellent library: https://github.com/HubSpot/tooltip

Zoom out automatically on iPhone safari browser using javascript

I have designed my webpage to fit an Iphone screen perfectly. It has a small text box in the top corner.
When the user clicks on the text box to type in the text, the Iphone browser automatically zooms into the top corner of the screen, which is totally cool. But after the user hits search the browser is still zoomed into the top corner. The user has to manually zoom out to see the full screen.
Hence I would like to know a way to fix this issue by calling a javascript that will zoom out automatically and shows the full web page.
Thanks
I'm having the same problem/requirement, so I was hoping to find an answer here (which I haven't).
Here is what I've got so far:
Add an 'onblur' event handler to the text box mark-up (in the HTML, where you declare the text box).
The callback is triggered after the 'Done' button is pressed.
At this point, I'm not sure how to zoom out back to the previous zoom-level.

Categories