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...}
Related
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
I want to know if it's possible to print a label of HTML into a content of my popover of JavaScript
I have a span that floats over a button showing the number of tools that I have in the area, but I have a popover that display a message.
I want to display the message with the number that have the label
something like this
You can use any popover library I suggest you use the webui-popover library, you can add any html elements inside it.
https://github.com/sandywalker/webui-popover
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 working with android web-view and inside web-view i am displaying the webpage which is having CSS, JavaScript so I want that whenever I will select the check-box and try to zoom the page so it should wrap otherwise it should not. for that i tried to set the property of CSS-
w.loadUrl("javascript:(function() {" + "document.getElementByTagName('html')[0].style.whiteSpace='nowrap';})");
but I am changing these properties by programming but it is not affecting the text content so please tell me how can I make the webpage text as wrapped if the check-box is selected and it should not wrap if the check-box is not selected, please provide me any suggestion? Thanks in advance.