I am using Ckeditor balloon toolbar in my application. It works fine on Chrome. But on firefox, when I scroll the page, toolbar scrolls down and next time when I select the text it shows at wrong position.
In the below attached image, the balloon toolbar position is at wrong position.
Why is it so? It works fine on Chrome.
I was able to find the solution for the question I posted above.
The issue was related to CSS. CSS in HTML tag i.e position: relative was conflicting with it.
After removing that, it worked fine.
Related
Im developing a website for my boss and have been noticing weird behavior, after looking closer i corrected my div tags.
Now when I examine my webPage it shows my imageGallery div borders Overlapping my content Div, It still displays most content properly but is confusing me greatly and i want to solve it before moving on.
http://2286bowmanroad.com/
ctrl+shift+i on chrome under elements if you highlight ImageGallery you will see it is also behind content but must be bellow.
Lots of Googling has been tried and trial and error with positioning and fixing div tags this is the only set of divs causing issue and i cant tell why.
I want my image gallery div to be completely bellow the content div but above the footer
I think it is because you gave float: left to the class content. I am sure you gave it for some reason, but moment you remove it, it'll be fine.
Internet Explorer is giving layout to my DIVs in TinyMCE.
This means that when a user starts editing all the text in the div is selected, rather than the cursor being inserted in the desired position, and it has editable drag handles:
Screenshot: http://puu.sh/knI67/c5c7250e56.png
Can I add some JQuery to my page, or to the TinyMCE init() to move the cursor to the desired position when the user clicks inside the div?
It's fine in Chrome, Firefox. Latest version of Tiny MCE.
Thanks in advance
I've worked around it by wrapping in a contenteditable=false div, and then adding contenteditable=true to the other divs inside the editor. Seems to work.
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 have a sidebar in my app that can be hidden/shown via a toggle button. It simply toggles a class on "body" that adds some margin left to the content area and hides/shows the sidebar. Trouble is that the content area isn't resizing its child content when this is toggled. Once I adjust the size of the browser, the content area adjusts to fit the content, but I need it to do this after the toggle without the need to resize the window. Is there a way to trigger an element size refresh or dom refresh to solve this issue? Using Chrome 19.x.
$('#sidebar-toggle').click(function(event) {
event.preventDefault();
$('body').toggleClass('with-sidebar-left');
});
Edit: Seems like it might be a Webkit issue. Works fine in Firefox.
Edit 2: Set up a simplified build at the following location:
https://dl.dropbox.com/u/189605/misc/build-test/grid.html
You can see the boxes are float: left and when you minimize the sidebar using the little arrow button, it should adjust the right so more boxes will fit. In Webkit, you have to resize the browser for it to realize it's got more space. Works in Firefox.
you could just trigger a resize in your click handler, eg:
$(window).trigger('resize')
The workaround from my answer here works for your situation.
Here's a quick demo: http://jsbin.com/amakex
It works in both Chrome and Safari (unsurprisingly, your original demo also didn't work in Safari).
you said-"but I need it to do this after the toggle without the need to resize the window".you can use jquery callback to do that
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)