When I click on a text in a contenteditable div, the cursor does not appear to move.
once text is typed, the cursor becomes visible and text is entered in the clicked location.
its as if the cursor moves, but is not being redrawn.
I am unable to reproduce the bug in a simple jsfiddle environment.
Has anyone encountered such an issue before?
In the meantime I am trying to isolate the cause of the problem by removing css and javascript file references from the page.
and reverse- starting with a blank page and adding js/css in attempt to reproduce.
EDIT IN RESPONSE TO COMMENTS BELOW:
Browser: chrome
Javascript modules: jquery, jquery ui, rangy.
I tried to remove all javascript. and the bug was still there.
It must be coming from the css.
I am trying to single out the css rules involved. It appears to be a combination of things.
the :before psudo class (that I am using to show placeholder text in the div if it has no text) seems to be part of the problem.
The problem was traced to css3 3d transformations on a div that is located in the background of the contenteditable element.
Will try to place the background element in an iframe to resolve the issue.
Related
I have this page where I tried to create a on page pop-up for an image using JS/JQuery, following this example (http://www.jqueryscript.net/lightbox/Simple-jQuery-Plugin-For-Opening-A-Popup-Window-On-Page-load.html).
Although I succeeded on it, when I try to implement it on my customer page, some divs are on front of my pop-up, no matter how high I configure the "z-index" for it. Also, these divs seem to be dinamically generated, as they have the "wrap" id div around that I can't find on my .php file for this page.
So, no matter what I do, these images are on front of my pop-up (except if I remove them using the "Inspect element" tool or change the z-index on them with Inspect Element, changing the inline style for this automatically generated "wrap" div).
This is the page without any changes on "Inspect Element", the white image boxes with the red arrows are the problem here (they belong to the page under the pop-up and I need them to be under the pop-up): http://imgur.com/waB1igo
This is what happens if I change the z-index of the automatically generated div "wrap" that I can find searching the code with "Inspect element" for one of the boxes (the first one): imgur.com/lDk1eRA
So, any of you guys have a tip for me on how to solve this problem?
I've already tried to create new css rules for this div or the img's tags, using the "!important" and these kind of things, without result.
Thanks very much in advance and sorry for english errors,
Matheus Barreto.
You might want to try setting the position property of the overlay to absolute. Images that have their positions set to absolute will get on top of everything that is not set to position absolute or fixed which can be very annoying. You might need to work around a bit with centering it or other issues that come from setting its position to absolute but this should work.
Try to make sure your overlay DIVs are outside wrappers, inside the </body> tag, before closing scripts... If the DIV is inside another that has a lower z-index, it won't "pop out" of it.
Also, you may try really high z-index, such as 8000 or higher. You should be able to use up to 65535 (higher depending on the browser's implementation).
It's worth noting that you should have a plan for z indexes of fixed/absolutely positioned items.
There was a similar question asked on here (not enough information was given) so no real solution was presented. I am using MixItUp to filter content within a framework (Foundation) based on a button being clicked. I noticed a weird movement that happens when a button is clicked. I have uploaded the files to be viewed here
http://cantaloupecreative.info/filter-code-snippet/
After the animation fires, I see page elements jump to the right a bit. If that's what you're referring to, take a look at the scroll bar. When there aren't enough elements on the page, the scroll bar disappears and everything re-centers, which is likely what you're seeing. You can avoid this by permanently enabling or disabling the scroll bar with CSS
overflow-y: scroll;
or something similar.
Okay here is what I uncovered in my search for a solution. WebKit is overriding the css change I am making to my body class. You cannot use overflow-y in chrome because of this. Now when I was making the change to my sass file it wasn't compiling correctly. After hardcoding the webkit fix into my stylesheet I was able to remove the scrollbar on all toggled divs with the following code.
::-webkit-scrollbar {
display:none
}
Obviously this only fixes half of the problem because now I am without a scrollbar. But it atleasts fixes the hoping issue.
In one of my projects, I am replacing the default cursor in the browser with an SVG one. I am appending this SVG cursor via jQuery. This works fine, but I want to change the cursor when it hovers over links, and right now, nothing I have tried has worked.
I think it is because even though the cursor has a position of fixed and a high z-index value, it cannot tell what it is hovering over because technically it is below the content.
Does anyone have suggestions?
EDIT: Right after I posted this question and after I included a JS Fiddle in the comments, I changed my code to make the cursor appear before the content. The issue remains, however.
Look above in the comments for #mcbex's JS Fiddle! Apparently, one does not simply add a class to an SVG, one must customize it with fill colors.
I'm trying to let a user select an element on a page using their mouse, like you see in chrome's dev tools. (yes, I know it's open source and already js)
The problem arises when trying to detect when the mouse moves from a parent element to a child element. As you can see right now I'm getting around that by resetting the element_hover div, but this creates a terrible flashing effect.
Any idea how I can emulate webkit's inspector with a bare minimum amount of code?
http://jsfiddle.net/Atked/
Don't hide the red div while the mouse is over the red div. Temporarily hide the red div while you work out which element to highlight, you can work out which element to highlight using getElementFromPoint.
You could try something like this: (not perfect, but better than what you had, and a start at least) http://jsfiddle.net/Atked/1/
I have a script that lets you put a link at the bottom of some text so you can reveal more text. It works great in Firefox. When you click the link, the div appears and the other parent divs expand with the growing child div. But the parent divs don't expand in IE. The text actually disappears behind the row (this is in a table created with divs) below. I want it to push the next row down so that the rest of the text appears.
Also, my images seem larger in IE than they are in Firefox. Can I scale the images a little bit with a conditional statement? If so, how?
Have you considered using something like the JQuery Accordion? It's a quick way to accomplish something like you're going for, if I understand correctly.
you have more than one problem, anyway images with fixed sizes should render the same across browsers. For the first problem with the link you should post some code. I suggest you to check if your script throws some errors in IE using the IE developer toolbar (bundled with IE8 or downlodable here from Microsoft)