Develop Reference

How to get button inserted through CSS/Javascript via chrome extension to always display on top of other content?

I have a chrome extension where I insert an element (button) through some javascript/css. I want the button to always be visible at specific points but I'm finding that sometimes the button is hidden or only partially visible on some websites.
// Place div in upper right
var div = document.createElement('button');
// Positioning
div.style.position = 'fixed';
div.style.boxSizing = 'border-box';
div.style.display = 'block';
div.style.zIndex = 100000000000000000000000000000000000;
div.style.top = '140px';
div.style.right = '20px';
In the CSS above, I made the zIndex very high thinking that it would force the button to always appear on top but I'm finding that this isn't happening (the picture attached in an example where this doesn't happen).
How do I get the button to always appear on top?

Prevent javascript from running when screen width is less or more than

I have 2 menus that are contained on the same page but in different locations. One appears when I have screen width > 555px and the parent div is set as display:none when under this size. The other is display:none when 555px or over and shows when less than 555px. Its the same menu but one is on a different section of the page for mobile/smaller screens.
I have javascript on some of the drop down options on the menu and it works for the first menu but not the second, I believe because the js is still attempting to run for the display:none so on the second attempt (on the small screens) it doesn't work.
I'm probably over-complicating what needs to be done but I've attempted to create some code that uses js to create the div that contains the menu code for desktop and mobile and removes them when it shouldn't... so a media query version controlled by js rather than css that rather than hide the div and content will actually make it not be present.
I'm a complete novice at javascript and have just attempted to adapt other code I've seen, basically all I want to do is when >555px browser width add and when it moves under remove then I can use the same code down the page to add/remove div id="y"...
function DynamicDiv() {
var dynDiv = document.createElement("div");
dynDiv.id = "search-holder1";
dynDiv.innerHTML = "Created using JavaScript";
document.body.appendChild(dynDiv);
}
var elem = document.getElementById("search-holder1");
function myFunction(x) {
if (x.matches) { // If media query matches
DynamicDiv();
} else {
elem.parentNode.removeChild(elem);
}
}
var x = window.matchMedia("(max-width: 555px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes

Here is my way:
function chooseMenu() {
var width = window.innerWidth;
if (width > 555) {
//Add your div
else {
//If div is in document then remove, and add mobile div
}
}
window.onresize = chooseMenu;
You should probably do the same function at the beggining with an anonymous function too.

js code to dynamically set the width and height of the image before using/loading in other areas of the application

I am displaying the below div content which has tables,images and some more html elements on the webpage(I'm getting the div content from the data base which i am showing on the webpage).
<div class="appDiv">
<div> <h1><font color="red"> Title here</font></h1> </div>
<table><tr><th>Header1</th><th>Header2</th></tr><tr><td>one</td><td>two</td></tr></table>
<img src="data:image/png;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/2w..............Z0auj5MNqRUIfYT7C/cEhSmGlRdn6/wDrACwSw+eV/u/bvuN0D/TZZTeE8Sdtooj7/wB5Q6C/DTrP/9k=" data-filename='image.png' style='width: 1081.05px; height: 512.635px;'>
</div>
I want to use the above mentioned content in other areas of my application, but issue is i need to reduce the width and height of the image due to place restriction.I want to change the width and height of the image dynamically before i use the above code in other parts of my application.
js code:
Below code is called when user is exporting the above div content to other parts, here i need to change the width and height of any of the image shown in the div
function($scope) {
$scope.loadWebContentInOtherArea= function() {
}
}
The <img> tag shown above doesn't have the class name or the id to set the width and height before loading on other parts of the web page.How can i set dynamically the width and height of the image when it doesn't have any class name or ID assigned to it.
Please see the <img> tag, it has defined style='width: 1081.05px; height: 512.635px;'

How can i set dynamically the width and height of the image when it
doesn't have any class name or ID assigned to it.
Since you are...
displaying the below div content
and your div has a class, you can call each div element and find each img element and set the dimensions.
var imgEl = document.querySelector('.appDiv img');
imgEl.width = 100;
imgEl.height = 100;

The Javascript Code below should do what you are asking for.
var appDiv = document.getElementsByClassName("appDiv");
var img = appDiv[0].getElementsByTagName("img");
img[0].style.width = "100px";
img[0].style.height = "50px";
I could have written it in a more condensed way, but I wanted to break it down for you so here it goes.
The first line is selecting that Div with the class "appDiv". If you have more than 1 div with this class it will select them all and save them to an array.
The second line is selecting the img inside of the first instance of a div with the class "appDiv".
If you have multiple instances of this div you can change which div to target by changing the [0] after "appDiv[0]" on the second line.
Remember Javascript Arrays start at 0, so 0 is actually the first instance of your div. 1 would be the second instance and so on.
Now that you have your img saved in the "img" variable the 3rd and 4th lines set the width and height of your image programmatically.
Please let me know if this helps!
Edit, Just to show it this is my code wrapped in for loop to cycle through all the images in the document.
var appDiv = document.getElementsByClassName("appDiv");
for(i=0;i<document.getElementsByClassName("appDiv").length;i++){
var img = appDiv[i].getElementsByTagName("img");
img[0].style.width = "100px";
img[0].style.height = "50px";
}
The key here is using the "document.getElementsByClassName("appDiv").length" snippet on the second line. This makes the loop go on as many times as a div with this class is found in the document. Hope this helps!
Seeing that the source code of the project has each image contain the class "image-responsive" you could also use this code below.
var imagesToResize = document.getElementsByClassName("image-responsive");
for(i=0;i<imagesToResize.length;i++){
imagesToResize[i].style.width = "100px";
imagesToResize[i].style.height = "100px";
}

How to add multiple custom control button leaflet js?

I found the code to add a single button on the leaftlet map to the topleft corner. But now I want to add multiple buttons one after another.
Is it possible to insert multiple buttons inside the following code?
I also have tried to use checkbox/radio buttons. But I dont know how to add labels to the checkbox and button.
And add checked/unchecked properties for them.
Thanks.
My Code here:
var customControl = L.Control.extend({ options: {position: 'topleft'},onAdd: function (map) {
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
onAdd: function (map) {
var container = L.DomUtil.create('input','my-button btn');
container.type="button";
container.title="x";
container.value = "x";
container.label = "x";
container.style.backgroundColor = 'white';
container.style.backgroundSize = "30px 30px";
container.style.width = '40px';
container.style.height = '40px';
container.style.borderRadius = "25px";
container.style.padding = "0";
container.style.margin = "10px";
container.onclick = function(){
console.log('buttonClicked');
}
return container;}});

You can create as many Leaflet "controls" as you wish. You can insert them at any corner, and they will simply "stack up" (with a 10px margin if I remember correctly) in a vertical column in the given corner.
As for the content of each control, it is purely HTML and CSS. In your code you are using Leaflet's utility L.DomUtil.create(), but you could have also simply used the native document.createElement() (but would have to add the class in a separate line) or even jQuery DOM utility (with which you can directly write an HTML string).
Then you can build complex content (with inputs, associated labels, etc.). Just look for HTML tutorials / JavaScript that build DOM nodes.

javascript image overlay over a specified div

i am new at javascript. very new actually, this ought to be my first script.
can anyone explain to me how to make a transparent overlay over any specified fixed width region, say 700x300px.

You can define the overlay such as
<div id="myoverlay" class="myoverlay">...contents...</div>
and define the dimensions and position and z-index etc... in CSS
.myoverlay {
position: absolute;
display: none;
...
}
I don't quite see the need for JavaScript just yet, but I guess you will want to use JS to toggle the overlay's display attribute on/off.
<script type="text/javascript">
function showOverlay(){
document.getElementById("myoverlay").style.display = "block";
}
</script>
Is this roughly what you're after? Sorry for unintentional syntax mistakes, for this is untested code purely off the top of my head. Just to give you an idea.

You can create a div with transparency and absolutely position it over the specified region.
var shimDiv = document.createElement('div');
shimDiv.id = 'shim';
shimDiv.style.position = 'absolute';
shimDiv.style.top = 0;
shimDiv.style.left = 0;
shimDiv.style.width = "700px";
shimDiv.style.height = "300px";
shimDiv.style.backgroundColor = '#000';
shimDiv.style.zIndex = 3;
For non IE browsers set opacity:
shimDiv.style.opacity = '0.75';
As IE doesn't natively support transparency you should use the filter like this:
shimDiv.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=75)';
And add this new div to the end of the document body:
document.body.appendChild(shimDiv);
To support older IE versions you will have to put IFrame element under your transparent DIV.
To create IFrame dynamically from JavaScript try the following code:
var iframe = document.createElement('iframe');
iframe.setAttribute("src", "javascript:false");
Don't forget to set IFrame src attribute with useless 'javascript:false' statement to prevent IFrame from trying to load the page (which you won't notice it doing, but it will be the cause for tripping the "Unsecured Items" message if you use it on a HTTPS page).
Position this IFrame under the div by giving it a lower z-index property value.
iframe.style.zIndex = 2;
All the styling can be done with CSS. I just wanted to show how it done with JavaScript.