strange issue in css in react component - javascript

I have one div component in react. it is used to display serchable dropdown in react.
if there is extension in the browser it is coming over the component. like you can see icon above the component. when I inspected this component it is coming like below.one image is getting inserted inside the div.
when I am testing in another browser where , there is no extension it is not coming like that. it is proper.
how can I prevent my div tag to insert image automatically?
this icon keeps moving when I type the text.

This is the icon that comes from LastPass extension.
And icon apears on input tag (in your case, react-select has input tag in value container)
If you want to hide from your site for all users, you can add following CSS style
img[id^=__lpform_][id$=_icon]{
display: none;
}
If you want to remove the node from html, you can add following JS snippet.
var lastPassInterval;
lastPassInterval=setInterval(()=>{
document.querySelectorAll("[id^=__lpform_] [id$=_icon]")
.forEach(el=>{ el.remove(); clearInterval(lastPassInterval)})
},500)
Above code snippet will find all these img tags with matching IDs, and remove it from html.
Another way
In react-select on Input Component you need to pass data-lpignore="true", It will prevent LastPass from displaying icons in input. Check below answer for more info.
https://stackoverflow.com/a/53089923/14614051

Related

Tinder textarea element value by JS code direct looks like is different than when you type in it

I have a Tinder script that I run on Tinder web. When I open a match, Tinder shows a textarea element which I can type the message to send to the match, if I type the text in it, the send button will be available to click, like this:
But if I insert the text in this textarea element by using JS code like this:
document.querySelector("#c-582094868").value = 'my message' the button is not available:
My goal with this question is to understand why in the second case the button doesn't get enabled, it should, because the textarea element is filled with a text. What else could I do?
OBS1: #c-582094868 represents the textarea element in the DOM.
OBS2: I have tried already to set a value for the defaultValue, text, innerHTML in the textarea element. None of them worked.
Because the Tinder web app is build using React as its front-end framework.
When you go in and directly edit the text-area the app is not aware of the change, nor does the change matter, due to the way react works.
In an other given js framework, this could have work, say for a vanilla js/jquery app. This is the separation of 1-way bind and 2-way bind frameworks when iit comes to front-ends ( react, knockout, angular, vue etc ) have different ways that they implement what you think of as the "apps inner workings"

How to force document.execCommand to apply to specific element?

I've been working on a WYSIWYG project that utilizes the document.execCommand() method. Currently our toolbar contains a data-target attribute, but it's not being utilized to link the toolbar to it's respective editor. A while back we received a couple of reports from users asking for help with this because they were adding multiple editors on the page. Because the data-target isn't being utilized in our code, when they use the toolbar on for one editor the styling is being applied on both editors.
I've been looking online for resources to figure this out but every example I've been able to find just shows one editor on the page at a time. Any suggestions as to how I might be able to apply the styling created by the document.execCommand to only that editor specified in the data-target attribute?
Get the tool bar parent DOM id which you click in one editor.
Get the selected text DOM parent Id.
Compare if both are same means allow to apply the action other wise reject it.

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...}

Social buttons and changing attributes using EmberJS

I'm trying to have two social buttons (facebook & twitter) on my website using EmberJS. I'm binding the URL of those buttons to an attribute url (for example).
The problem is that the attribute url is changing, and the buttons are not reloading.
I did a spin-off of this article on the EmberJS: http://emberjs.com/guides/cookbook/helpers_and_components/creating_reusable_social_share_buttons/
Updated to the last EmberJS version (1.3.1), and added a "change text" button. Try changing the text for the text button, and you'll see that the button is not reloading.
Link to the jsbin: http://emberjs.jsbin.com/izOtIYi/1/edit (watch the console too)
I think it's because Twitter is messing with the Metamorph system. How can I bypass this? I'm sure someone faced this before.
The strangest thing is that it's working well with facebook like button.
Thanks !
The issue is that when you load the twitter widget it parses the <a> and then replaces it with an <iframe>. So even when you update the text property it doesnt reload the button.
One way to work around it would be to rerender the view when the text changes this would cause the iframe to be removed and a new a tag to be added.
I fixed up the jsbin to update the button when the text changes http://emberjs.jsbin.com/izOtIYi/8/edit
I got put the logic which rerenders the button into the component to make it more reusable.
The button will flash whenever the text is changed because its actually removing the existing button and creating a new button each time the text changes.

Categories

Resources