I was doing the standard CakePHP blog tutorial (using 2.4 beta since it'll be out of beta by the time I make a real site)
On the add form I'm seeing rendering issues, is this a bug or something I've done:-
The validation popup on the second field is messed up, resizable gap above it a bit like the multi line text input its attached to the validator on the first text box is fine
See the drag handle (top right of the popup)
http://snag.gy/U7tKQ.jpg
And you can drag it
http://snag.gy/087fr.jpg
it seems to be connected to the fact the popup is on a field that is resizable
That's chrome's default behavior
The framework used to generate the form won't affect the appearance of that kind of message. Chrome's default behavior (or simply, behavior - don't think it can be modified) for any input with required="required" is to prevent submitting the form if the input is empty with a hint of Please fill in this field (or similar). This is one of the many features introduced in html5 capable browsers.
js interference?
The mentioned drag handles on the hint popup are not normal - that is likely caused by some javascript or a browser extension.
Go there http://diveintohtml5.info/forms.html and scroll down to form validation.
This is HTML5 built in form validation for the browser you're using, inspect the input element. Honestly I'm not sure if you can style them different but to me it looks like the browser is doing this by adding some markup and CSS to the DOM tree that might conflict with whatever else you have there. I personally haven't had the case before.
Knowing your markup and CSS might help by the way.
Related
I have created two CKEditor plugins. Each of them uses an "Iframe Dialog Field", meaning that a dialog box is launched and the contents of that dialog box is a webpage (you can think of the entire dialog box as being like one big iframe).
Each plugin works perfectly on its own. However if I use both plugins in the same CKEditor app, they both end up displaying the same page, rather than two different pages, despite the fact that they point to two different pages. I see no reason why this should be happening. Does anyone know how to prevent this?
To make sure there is no confusion, an "IFrame Dialog Field" is a dialog box whose contents are another webpage.
Documenentation - http://ckeditor.com/addon/iframedialog
[ This is different from using an "IFrame dialog", which I believe is a plugin that lets the user add an iframe to the page.
Documentation - IFrame Dialog: http://ckeditor.com/addon/iframe ]
In terms of usage, when using an IFrame Dialog Field, you specify the url of the page to load in the addIframe() command. Here is an example of using a CKEditor Iframe dialog
https://gist.github.com/garryyao/1170303
Back to my issue - if I use just one of the plugins in my CKEditor, it works perfectly. Each plugin points at a different url, and opens that url as the contents of the dialog box. But, if I use both plugins in my CKEditor, although I see a different icon for each, both end up launching a dialog box which points to the same url. Depending which one I launch first, that is the url both end up opening. It is as if you are only allowed to use one IFrame Dialog Field in CKEditor, and the first one used overwrites all others.
This same question was asked a couple of years ago, with no response on the CKEditor forum. The person who asked the question posted his solution, or rather his workaround, which was to NOT use the IFrame Dialog Field altogether, but to instead use a regular dialog and then put an iframe element within it.
http://ckeditor.com/forums/CKEditor-3.x/multiple-iframedialog-plugins-display-same-dialog
That seems like an OK workaround, but it is a workaround and not a solution. I haven't tried it yet, and don't know what potential issues I will run into if I go down that route. I'd prefer to fix my existing code rather than rewrite the plugins, unless I have no choice.
Any help would be appreciated.
Since I have not found any further information, or received any answers here, I ended up going with the workaround mentioned at the end of my question - I used a regular dialogue box and put a big Iframe within it. This problem doesn't exist with that approach, and It looks pretty much the same as an Iframe dialog box. (Considering the almost total lack of community support with CKEditor customization, I've realized it is better to just adjust your design/concept to do what is more easily accomplished with CKEditor, rather than get CKeditor to do exactly what you want).
Textbox of google translate (the left textbox- please view my screenshot: http://s970.photobucket.com/albums/ae190/swenteiger7/technology%20screenshot/?action=view¤t=google_translate_textbox_event.png) have a lot of nice effects such as automatic highlight a word, automatically scaled ...
I am currently need to create a textarea so in my web application. I want to know a technology (prefer based on ajax and work well across platforms JSP) or website tutorials which help me to make a textbox like google translate textarea.
Thank you for viewing my question
Just to get you started see: https://developer.mozilla.org/en/HTML/Content_Editable and the links at the bottom of that page.
Basically it's not actually a textbox. It's a regular html element, but is marked as editable so people can type into it. But because it's regular html you can do special effects with it.
I am working on an intranet project that is having the majority of its users move up to ie8 soon. A bug was detected where when attempting to create/edit a page, the rich html editor boxes would be squeezed compared to what they look like in any other browser.
I found the offending style, its inline and its:
style="display:inline-block"
Now if it was just "inline" then it would be fine. However, it is not.
I have attempted to override the PrefixStyleSheet attribute in the master page and have a custom style in the main css file, but it is not working at all.
I have heard that a control adapter might be helpful to post process the html but i am unsure on how to use one.
Is there any advice you guys can give me?
From my experience, using JQuery "hacks" in the master page header is the most convenient approach, without messing up the system css or the backend.
Find the element you want to override the style to a custom style, and assign your custom style. Be careful if the override is page layout specific, then might add to the page layout header placeholder instead.
http://api.jquery.com/css/
Hope it helps.
I'm starting to develop a plugin for CKEditor that needs to be used to insert some HTML snippets in a web page. This is done. Nonetheless I also need to include some special items when switching to WYSIWYG mode (e.g. something more or less similar to Show Blocks plugin, but not just using styles since I need some elements included in there). So my question is :
How could I include extra items or styles (e.g. to hide parts of the contents in WYSIWYG mode) in WYSIWYG view without altering HTML output ?
If someone could provide some information about a working (maybe simple) example, I'd also appreciate your help.
PS: If you need to know further details please ask, but for instance assume inserted raw HTML code is
<div class="xxx">Hello world !</div>
... but in WYSIWYG mode need to display a link on top of it that pops up an alert and toggles dotted border.
About injecting CSS classes in WYSIWYG mode, use addCss function.
About creating fake elements in WYSIWYG mode ... I think I can solve the problem using context menu instead.
I am creating a Firefox extension that is somewhat similar to Firebug. There is a panel (or vbox) at the bottom of the browser that allows users to specify colors to certain Html elements. When they click the OK button, I would like these colors to get updated on the current web page.
I have my JavaScript working when I click the button (i am just throwing an alert), however when I change that JavaScript to change the css or styles of an element (by either using document.getElementById or jquery), nothing changes.
Is there something with Firefox extensions that I am missing? Any help is appreciated.
Let me know if you have any questions. Thanks
https://developer.mozilla.org/en/Extension_Frequently_Asked_Questions#Accessing_the_document_of_a_webpage_doesn%27t_work
You want content.document.getElementById() and similarly for every other construct you use.