d3.js interferes with form element? - javascript

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.

Related

Firepad text not shown until first click

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)

Tinymce view mode switches after init

My editor is tinymce4+.
It works greatly in most parts.
But no matter what I do, there's something I just can't do.
- switching editor mode instantly. -
I have a page that users can select a data and edit it and view the content. Users click on a button named " viewmode ", the other flipside is " editmode "
I achieved this by putting two DIVs in a same container, making one of them invisible by the start-look-settings users have choosen. One DIV has tinymce editor, the iframe tag, and another one has just a bunch of html values that the editor is holding. But the side effect of this is that the content style could look different, depending on its style attributes.
This web application I'm talking about now is an existing system that has its own CSSs.
It's so complicated that once you get to look at it, you might want to run away from it.
So I would like to avoid this CSS discrepancy by making editor dynamically switchable to both ways.
Loading multiple tinymce objects is the last thing I need here.
I can make editor disable by setting up an attribute - contenteditable = false -
But then the toolbar elements become bad boys here. because they still work. I hide the toolbar itself to complete this mission.
But you know, my client hated it and insisted me that the editor should provide a print button in its viewmode. This is frustrating.
So, if you could just give me an idea of how to manipulate the elements of toolbar, then I think I can manage to solve this issue.
If it's too difficult, attaching the print event listener to an external element could be also the second best option for me. Because from that moment on, I just throw the toolbar away and make a print icon on the top of the editor and attach the event to it.
Sorry for typing all the plain texts. But issue like this requires no codes I think.
Hope some tinymce guru stop by and help me out.
Finally, I made my editor switchable.
First step is to hide all the elements in the toolbar of tinyMCE.
tinyMCE toolbars have a specific class name so they are selectable with jQuery class selector. But selecting with class name alone causes getting unwanted toolbars as well, so you have to be careful with this.
FYI .eq() API might help you.
after hiding all the elements in the toolbar, ( don't hide toolbar by the way. ) do this.
tinymce.ui.Factory.create({
type: 'button',
cmd: 'mcePrint',
icon: 'print',
shortcut: 'Ctrl+P',
class : 'temp'
}).renderTo(appendTarget);
This is going to add a button element into the toolbar.
But somehow it doesn't invoke the command I defined in cmd's value.
So attaching this event to the button manually will be required.
tinymce.activeEditor.execCommand('mcePrint');
So far I created a custom-toolbar for view-mode editor. Now it's time to freeze the edior's actual content field.
It's very easy after getting iframe contents as jQuery object.
.contents() API should help you.
after that, you can select <BODY> element on your side, so the last thing left to do is to give 'contenteditable=false' attribute and value to the body tag.
Then your editor freezes.
Going back to the edit mode is easy too. Just do the backwards.
Invoke these events when you click on your own "switch" button. Then you can toggle your editor from view-mode to edit-mode ( and the oppsite way as well ).

How to change size of texbox of webpage?

I am trying to make a chrome extension. I am having 2-3 problems which I would like to discuss.
I want to change the size of textbox of facebook chatbox shown in right bottom corner.
So I am using javascript(not jquery). I did inspect element in chrome browser and got "_552h" classname for its div element.
Afterthis, I wrote alert(document.getElementsByClassName("_552h")); in content_scripts which runs for facebook page. This showed me [objectHTMLcollection] in alert box. This was just for testing so to see if I was accessing the element.
Then how should I access the textbox inside this div and access its css change height of textbox? Please show me through code, as I am beginner.
Also after this I would like to add one horizontal list of suggestion words for this textbox. So I tried to use jquery autcomplete which shows autocomplete but in vertical dropdown. So what kind of css would I require?
Also tell me if I can get english dictionary words list for this autocomplete source.
For CSS I might be able to help
for Textarea, you can style as below
._552h textarea{ some style here...}
For input text you can style as
._552h input[type='text']{ some style here...}

Highlight text inside iframe while clicking same text on the document using jquery

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.

Facebook like login form

I've already asked question similar to this some time ago, I thought I solved my problem but now it appears I didn't. Dealing with this problem for some time now and I have absolutely no idea how to do it.
The answer I got from previous question works but when I resize the window the password label drifts away when you re-size the window. And it doesn't position all the same in the FF(3.0.5) but it does in FF(3.5.6) and IE7, but again all have the same problems when window is re-sized.
What I'm trying to do is to put label behind input and by doing so it appears that input has 'Password' value. Does anybody know how did the facebook solve that problem?
www.facebook.com look at the login form, the password field .. when you click on it the password disappears and you type your password in.
Another useful link I got for this is http://dorward.me.uk/tmp/label-work/example.html from David Dorward, but he uses jquery and I'm allowed to use either only prototype or pure javascript. Can I get any help/comments/hints/tricks I've been dealing with this for some time now I'm just out of ideas.
Thank you
That technique is called watermark and on the internet there are some plugins for the js frameworks and tutorials to do it with pure javascript.
I think that Facebook is using a little workaround to show a watermark with clear text on a password field: the real password field is hidden and you're showed a text field with the password hint. When you click on the field the placeholder element is removed from the dom and the real password field is showed.
The problem here is not the JavaScript (so the use of a library in the example doesn't matter).
It is basic CSS positioning.
You need to establish a containing block to position the label and the input inside. That way, all the positioning is with respect to that block, and it doesn't matter about the position of everything else on the page.
Set position: relative on an element to establish this. The example does there here:
body.js .slim-control {
position: relative;
height: 1em;
}
Consider using CSS background images for this. Create two (transparent) background images with the desired text and define it in a class. Display it by default on empty fields. Use the JS focus event to remove the class associated with the image and use the JS blur event to check if there is no value and add the class associated with the image.

Categories

Resources