Member Avatar for agr8lemon

Hello everyone,

This one has got me stumped so I figured I'd see if all the smart people that hang out here have any suggestions.

Here is what I am trying to do:

I have php site that pulls data from a SQL DB. based on results from the DB it creates a list of applications that a user has access to. So if they have access to the internet, there will be a field called Internet with a graphic of a checkmark.

I would like to have that checkmark be a dropdown list where someone could click on it and say see a selection for a minus symbol to denote that access needs to be removed.

I know this can be done in ASP, but I don't really know ASP, nor do I feel like converting the whole project to a different language.

Does anyone know if this can be done with CSS or possibly Javascript?

Thanks!

  • 2 Contributors
  • 1 Reply
  • 125 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by sourcebits

Dani AI

Generated

Short answer for : yes — no ASP conversion needed. Use CSS background images (or a sprite) for the check/minus icons and a tiny JavaScript dropdown to switch state and call your server (PHP endpoint) to update the DB. is right that a dropdown widget is appropriate; below is a minimal, accessible pattern you can drop into your server-generated list and progressively enhance.

Example markup (server renders one block per app):

<div class="app-item" data-appid="123">
  <button class="access-toggle" aria-haspopup="true" aria-expanded="false">
    <span class="visually-hidden">Internet access: allowed</span>
  </button>

  <ul class="access-menu" role="menu" aria-hidden="true">
    <li role="menuitem"><button data-action="revoke">Remove access</button></li>
  </ul>
</div>

Minimal CSS ideas (use a sprite or two images so switching is just a class change):

.access-toggle { width:24px; height:24px; border:0; background:url(/images/icons.png) 0 0 no-repeat; }
.access-toggle.revoked { background-position: -24px 0; }
.access-menu { display:none; position:absolute; }
.app-item.open .access-menu { display:block; }
.visually-hidden { position:absolute; left:-9999px; }

Essential JS behavior:

  • Toggle the menu and set aria-expanded/aria-hidden.
  • Close on outside click and Escape.
  • When user picks "Remove access", optimistically update the button class, then POST via fetch to your server (include a CSRF token). Roll back on error and show a message.
  • Provide a non-JS fallback: server-render a link or small form that performs the same action so users without JS can still change state.

Accessibility and security notes: use a real button, keep a visible text alternative (visually hidden is fine), support keyboard navigation (Escape to close, Enter to select), and validate CSRF and permissions on the server. If you want, a lightweight vanilla JS solution is enough; jQuery/plugins are optional but not required.

Member Avatar for sourcebits

Hello everyone,

This one has got me stumped so I figured I'd see if all the smart people that hang out here have any suggestions.

Here is what I am trying to do:

I have php site that pulls data from a SQL DB. based on results from the DB it creates a list of applications that a user has access to. So if they have access to the internet, there will be a field called Internet with a graphic of a checkmark.

I would like to have that checkmark be a dropdown list where someone could click on it and say see a selection for a minus symbol to denote that access needs to be removed.

I know this can be done in ASP, but I don't really know ASP, nor do I feel like converting the whole project to a different language.

Does anyone know if this can be done with CSS or possibly Javascript?

Thanks!

It's better to use jQuery based dropdown menus. a simple Google search will do. Following are some links to help:


http://javascript-array.com/scripts/jquery_simple_drop_down_menu/

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.