Show a label into a popover of js - javascript

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

Related

strange issue in css in react component

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

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

How to customize the position of an alert box

I am using an alert box to alert some messages after some validation.
Now I want to make alert box position over the control where it had a validation
error.
As a default, an alert box pops up in center of page,
Now I want it at some custom position,
for example I have 4 textbox to be validated, textbox-3 has some incorrect data,
I want the alert to be presented just above the textbox-3 instead of center of page.
Is this possible to change the display behavior of alert box?
If there's no other option to go for jquery dialog box.
Since that is a default dialog box, you cannot position that. However, you can design your own custom alert box and position that. Or, you can use 3rd party dialog boxes, jquery ui has a nice one: http://jqueryui.com/dialog/
Jquery dialog box is the best option u get.Follow this:
http://jqueryui.com/dialog/
Is it possible to create a non-centered Javascript alert box?
Not possible. You cannot change the default alerts in the browser.
However, if you want you can create one for yourself with following options.
If You don't want to use 3rd party plugin
go with this
Using HTML, CSS and JS : Click Here or Here
If you want to use a separate library for dialogs with full control? Click Here
If you wish to use 3rd party Plugin then there are many options available :
Using jQuery : Click Here
Using Bootstrap : Click Here or Here
Materialize CSS : Click Here
and Many more UI component libraries like PrimeNG, KendoUI etc

jquery push element down on button click

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

Create server control like panel and linklabel using javascript

I want to add panel control using javascript inside the TD element.
Is it possible to create these control using Document.createElement and appendChild
methods?
I also want to show and hide this panel control onmouseover and onmouseout event.
You can use a div element for panel.
You can use anchor element for linklabel.
Actually asp.net panel is rendered as div and linkbutton rendered as anchor.
You can use the display property to show and hide panel.
set display to none hides the div
set display to block or inline shows the div.
Maybe a bit off-track, but I would recommend having a look at JQuery which makes javascript'ing more intuitive

Categories

Resources