I have embedded Fire Pad on my website. Initially I had problems with textbox being hidden but based on this post, I was able to make it work.
Everything seems to be working but one part. I need to click on the text area for text to be loaded for the first time. Ie. when page loads, the text area is visible but empty. I click in that text area and the document appears.
DOM View
I can see text is available in the DOM it is just hidden until I focus on that area. I assume it is still related to my DOM structure and CSS.
I tried to fire focus and click events.. No luck. Any help is appreciated.
Try adding init(); to your
$(document).ready(function(){
}
Ok, here us what worked for me:
codeMirror.focus();
codeMirror.setCursor(codeMirror.lineCount(), 0)
Related
I want to have a button, text link or whatever works in my text which triggers the show jQuery function. This function sets two divs to display:block. You can try the show more button below. With this one it is working.
At the moment I am facing the problem that if someone clicks on the link, the page slides up. I just want to get triggered the jQuery function. How can I do this?
I am talking about the Click here link on this webpage.
try
Click Here
I am trying to put a few text inputs on the same web page as where I have a d3.js svg element. I append the svg to a div within the html, and then have the form in the <body> before this div. The text input appears, but I am not able to edit it on either Firefox or Chrome. As soon as I don't include the d3.js script on the page, the form element works fine. What could be happening to cause this? I already have some standard html buttons, and they are working fine.
Here's what I've tried.
Renaming the text input and making sure neither its name nor its id clash with anything existing.
Explicitly setting the readonly property to false in javascript
What else can I try? I don't see anything all that on point in SO but apologies if I missed something.
Make sure no part of the content that D3 creates overlaps your textbox. If you can get to the textbox by tab:ing, it could just be stuck behind some invisible content. Try positioning stuff differently to overcome this if it seems to be the issue.
I wanted to highlight text inside iframe if the user clicks the same text outside iframe in the webpage.
I could search for the contents using the below code.
$("#iframe").contents().text().search("text_to_be_searched");
But how to highlight the text?
ASSUMING that your code for finding the text is going to work (and it is going to be a little complicated to get that to work), then all you have to do is this:
$("#iframe").contents().text().search("text_to_be_searched").
wrap("<span class='highlight-me'>");
And then use CSS to highlight anything with a class of 'highlight-me'.
If that doesn't work, we'd have to see how you are finding the text, you need to get into the form of a node that jQuery can work with.
I am using blocksit.js to get Dynamic Grid Layout in my web-app.
It works perfect. The problem comes when I have to dynamically hide and unhide a textbox on button click, the boxes below are not shifting down so the textbox is going under the box below. See the image below.
I have tried whole day, but without luck.
If you are not creating your div dynamically then you should, in your markup, place the textbox above your buttons :)
What to do:
Let's say this is your HTML:
--BUTTON--++--BUTTON--++--BUTTON--
--------------TEXTBOX-------------
Make it like this:
--------------TEXTBOX-------------
--BUTTON--++--BUTTON--++--BUTTON--
I want to be able to have default text like "Enter content here..." appear when the editor first loads, but I want this text to disappear when the user clicks/focuses on the content area. Then, if they "blur" (move out) of the content area without inputting anything, I want the "default text" to re-appear in the editor.
After Googling and looking through TinyMCE's wiki, it looks like there are onActivate and onDeactivate events that should partially do this; however, the wiki page for onDeactivate has a disclaimer stating that it is not a true "blur" method, plus I was not able to get the onActivate events to work (using FF 3.5 at least).
Has anyone else found a solution to this? I'm using a stock TinyMCE install and have jQuery loaded for my other JS tasks for the site I'm building, so I'm open to some jQuery wizardry to make this happen if there's nothing available in the TinyMCE API.
Thanks,
Seth
the onNodeChange tinyMCE event will fire if the user tabs into the editor. use tinyMCE's onMouseDown to detect a click. between these two events you should be able to determine when the user has activated the editor. use $(body).click() in the main page to determine when the user clicks out of the editor and blurs it.
i would also shy away from putting the default text as the actual value of the editor. instead, i would make the iframe/body of the editor be transparent and put the default value behind it in an absolutely positioned div. using the above triggers, just show()/hide() that div when you want the default value to [dis]appear.
Hmmm, tricky one...
here's an idea you might like to try:
We have established the onActivate works fine, so hook up the code for that... now, for onDeactivate...
tinyMCE stores it's content in the original (now hidden) textarea it replaces. That's how the content gets sent to the server when the form is posted.
Now, to blur away from the editor, a user has to click on something else on the page. using jQuery you can attach a $("body").click() function that checks the content of the hidden textarea (using $(id_of_hidden_textarea).val()). If the content is empty, set the content to "Enter content here..." in both the textarea (using val()) and the MCE instance (using tinyMCE.setContent()).
The $("body").click() function would not fire when clicking on the editor because it's in an iframe.