This is a strange issue...
getNode()
Trying to add a tinyMCE button (inside WordPress) that opens a TinyMCEPopup window.
There I need to check the current NODE where the user has clicked inside the text -- specifically if they have clicked inside a LI node/tag.
I'm using:
tinyMCE.activeEditor.selection.getNode().nodeName
Works well inside, FireFox, Chrome etc, but NOT in IE.
In IE I always get the node "DIV" and...
In IE it actually checks a completely different portion of the markup, like... it seems to get the parent node of the whole TinyMCE editor markup instead of where the user has clicked.
That's why it always returns a DIV.
In IE, when I click inside a LI element (in the visual view of the editor), it puts a strange frame around, which does not put my cursor inside that list element, unless I double-click the frame. See this screenshot here: http://screencast.com/t/9HVjMUvy
getContent()
Does also NOT seem to work in IE...
tinyMCE.activeEditor.selection.getContent()
(IE returns always "empty", nothing selected, while all other browsers give correctly selected portion of the text)
Any ideas how to fix these?
Much appreciated!
Concerning the resize handles you may get rid of them using the following tinymce configuration paramter
object_resizing : false
Related
Scenario
I click on an element in the CSS styles tab of Chrome dev tools and then click the + symbol to add an instance of the selected element so I can make independent changes to it, this action creates an instance of the selected element (image 1).
Problem
When I click in-between the curly braces of the new instance of the element in the styles tab it then disappears (image 2).
Does anyone know why this his happening and how to prevent it? This doesn't happen when I follow the same procedure in FireFox and I've not encountered it before. It is also happening on every element.
Thanks,
This problem stopped happening when I updated my version of SASS.
Here is the web site: plantcatching.com
Set "Montreal" in the search textbox and hit Enter. The map should go there and show results (after you zoom in one notch I think). A panel will slide from the left for the list of results. This panel has a white arrow attached so that it's possible to collapse/expand it. Here is what happens:
On IE/Firefox: the panel slides well.
On Chrome: the first time the panel extends, it works well. Then any
new manipulation shows the issue. The content of the panel and the
tabs will change position only after the jquery.animate("left") is
finished.
I let you have a look at the css structure under firebug or other dev bar, but basically it seems that chrome doesn't like the various "position:relative" css rules inside the panel. The problem is that I don't control them. They are set by the mCustomScrollbar jquery plugin. To check that this is the actual reason, just zoom out a little until a small window appears notifying that you should zoom in again. This empties the content of the pane and collapses it. See how it closes nicely this time, since there is no content anymore in the pane.
The question is: how should I modify the css (the part I control) so that it works well in Chrome and continues to work well in other browsers?
Let me know if something is unclear, I will update this question.Thanks for your help.
There was no answer here, so I decided to fix it myself by adopting css3 transitions on chrome only. This is now far better but you will notice that the tabs are a bit lagging when the panel slides. This does not happen in non webkit browsers.
I've run into one of many Internet Explorer bugs ;)
I'm doing some custom styled input fields and they work exactly as supposed in all browsers, except IE! The inputfields have some padding added on both sides, which works fine on load when the input field isnt filled out with text. But whenever the inputfield gets filled out with text, it kind of ignores the padding that it has been given..
I've uploaded a screenshot of the problem:
...and made a very simple example so you can try for yourself: http://valuable.dk/test.htm
How do I solve this :) ?
In Internet Explorer, there is unnecessary padding that occurs to the left and right within the button when the button name is large. As a result of this, the known solution is to add "width: auto" and "overflow:visible" to the button style, but doing so will inadvertently make the text in the button disappear when the user scrolls the page down and then back up.
I would very much like to use the style I've included so the padding stays removed, but more importantly resolve the issue with the button text disappearing. It's really an odd one!
I've created this DEMO page for you to test the code where it's happening: http://jsbin.com/uhuze3
Note: You'll need IE7 to see the issue, so for those who don't have it, I create this video for you to see the issue. http://screencast.com/t/MTg0NzY2Zj
I was able to resolve this and improve the code a bit.
You can see the code here:
http://jsbin.com/uhuze3/4
This was the old code:
http://jsbin.com/uhuze3
Edit by Johnny5 :
It seem to be the combinaison of "height" and "line-height" that correct the bug.
I want to debug the CSS for a DHTML menu, but the element I want to debug is a submenu, so it only appears when the top element in the menu is clicked.
So I can't use that button on Firebug that shows the CSS for the next element clicked, because when I click on the top menu item it will show the CSS for that element, not its child, and if I expand the menu first and then click on the Firebug button the submenu disappears (it disappears when it loses focus).
Any tips on how to get out of this catch-22?
Use firebug console command line to run click event. Like $('#menutab a').click(); If it's needed, you could also set breakpoint to avoid hidding.
Read more in firebug documentation
Select your element in the HTML tab, directly in the source.
Then, you can hover your page to toggle it.
In cases like this I sometimes alter the script slightly in order for the 'hidden' element to stay visible.
In this case, I would perhaps comment out/disable the script code which hides the element on blur. That way you can click the main element, and inspect the now visible item for as long as needed.
What about debuging with all the buttons visible? Or you can still find the elemnt in the HTML tree.
In Opera, you can use Dragonfly (Tools > Advanced > Developer Tools, or Ctrl+Shift+i) to solve this issue. When the tools are active, clicking on any part of the page will navigate to that section of the HTML side-by-side with its CSS.