Want to make an HTML button within a Popup widget darken when it is hovered over, and have it emulate the appearance of being physically pressed down.

andrewc213 — Fri, 26 Jul 2024 17:35:03 GMT

I have a FeatureLayer in my web app that contains tiles representing land units. When clicking on one, this Popup shows up:

The "Get Parcel Detail" button is a recreation of this original button from a previous version of my web app:

The original button darkens like this when the cursor hovers over it:

The original button has a sort of 3D appearance of being physically pressed down when the mouse button is held down on it:

I'm trying to recreate this behavior for my new button in my Popup; however, nothing has worked so far. I added the Popup's text and button like so:

export function formatContent(event: { graphic: { attributes: any; }; }) {

const attributes = event.graphic.attributes;

let text = "";

// Only display the attributes if they exist

text += attributes.UseType ? `Use: ${attributes.UseType}` : "";

text += attributes.UseDescription ? `; ${attributes.UseDescription} ` : " ";

text += attributes.SitusAddress ? ` Address: ${attributes.SitusAddress} ` : ` Located in: ${attributes.TaxRateCity}`;

text += attributes.SitusCity ? `${attributes.SitusCity}` : "";

text += attributes.SitusZIP ? ` ${attributes.SitusZIP.substring(0, 5)} ` : " ";

text += ` <a

role="button"

button id="navigate-button"

class="btn btn-default"

href="https://portal.assessor.lacounty.gov/parceldetail/${attributes.AIN}"

style="

display: inline-block;

padding: 5px 10px;

text-align: center;

text-decoration: none;

color: #000;

background-color: #f8f9fa;

border: 1px solid #343a40;

border-radius: 4px;

transition: background-color 0.3s ease;

onmouseover="this.style.backgroundColor='#e2e6ea';"

onmouseout="this.style.backgroundColor='#f8f9fa';"

onmousedown="this.style.backgroundColor='#ced4da';"

onmouseup="this.style.backgroundColor='#e2e6ea';"

>Get Parcel Detail</a>`;

const textContent = new TextContent({

text: textElement.innerHTML

});

return [textContent];

}

I tried using the onmouse* events to at least emulate the darkening effect, but it seems like my program is not responding to those events, or any of the CSS styling code that I've tried to use, whether I add the CSS code to a separate .css file which I import, or inject directly into the HTML code. I've tried the following code between "Get Parcel Detail</a>" and "const textContent":

const textElement = document.createElement('div');

textElement.innerHTML = text;

const navigateButton = textElement.querySelector('#navigate-button');

if (navigateButton) {

navigateButton.addEventListener('mouseover', function(this: HTMLAnchorElement) {

this.style.backgroundColor = '#e2e6ea';

});

navigateButton.addEventListener('mouseout', function(this: HTMLAnchorElement) {

this.style.backgroundColor = '#f8f9fa';

});

navigateButton.addEventListener('mousedown', function(this: HTMLAnchorElement) {

this.style.backgroundColor = '#ced4da';

});

navigateButton.addEventListener('mouseup', function(this: HTMLAnchorElement) {

this.style.backgroundColor = '#e2e6ea';

});

}

but that does not work either.

Re: Want to make an HTML button within a Popup widget darken when it is hovered over, and have it emulate the appearance of being physically pressed d

Paco — Fri, 26 Jul 2024 18:57:54 GMT

Hm. i have a very simple but similar popup with an html button that changes color on hover.

this is my js/html for a button than says "Geology"-

`<a href="{NGMDB_URL}"

target="blank" type="button" id="btn_geology" class="btn_geology" style="color:white;width:112px;padding:12px">Geology</a> `

and here is some of my css for that button to change color(using 'hover')-

.btn_geology:hover {

background-color: gray;

}

Re: Want to make an HTML button within a Popup widget darken when it is hovered over, and have it emulate the appearance of being physically pressed d

JoelBennett — Fri, 26 Jul 2024 19:44:23 GMT

The root cause of why event handlers within your HTML tags are ignored is discussed in this thread, along with some suggested workarounds.

Re: Want to make an HTML button within a Popup widget darken when it is hovered over, and have it emulate the appearance of being physically pressed d

andrewc213 — Thu, 08 Aug 2024 16:13:07 GMT

Thanks! This post in the thread that you linked helped a lot.

Re: Want to make an HTML button within a Popup widget darken when it is hovered over, and have it emulate the appearance of being physically pressed d

andrewc213 — Thu, 08 Aug 2024 16:14:39 GMT

I used CSS code very similar to yours for my button! Thanks!

topic Re: Want to make an HTML button within a Popup widget darken when it is hovered over, and have it emulate the appearance of being physically pressed d in ArcGIS JavaScript Maps SDK Questions

Want to make an HTML button within a Popup widget darken when it is hovered over, and have it emulate the appearance of being physically pressed down.

Re: Want to make an HTML button within a Popup widget darken when it is hovered over, and have it emulate the appearance of being physically pressed d

Re: Want to make an HTML button within a Popup widget darken when it is hovered over, and have it emulate the appearance of being physically pressed d

Re: Want to make an HTML button within a Popup widget darken when it is hovered over, and have it emulate the appearance of being physically pressed d

Re: Want to make an HTML button within a Popup widget darken when it is hovered over, and have it emulate the appearance of being physically pressed d