Member Avatar for jackparsana

Hi guys,

I need one hide and show div with fade effect.

please help me to find.

i have one button when user mouse click that button , it show one div block with fade effect. and i want to stay on the open div.

in div tag i have one form so must stay open div. and when i mouse out from button and that div, it automatically hide div.

one reference site : http://jsfiddle.net/pborreli/pJgyu/


in this site, click on share button.

i need same like that.
Please help me t find this

jack

  • 3 Contributors
  • 3 Replies
  • 211 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by jackparsana

Dani AI

Generated

Below is a compact, accessible vanilla‑JS approach that matches the described behavior: fade the panel in, keep it open while the pointer is on the button or the panel (or while a form control inside has focus), and auto‑hide after a short delay when both are left. This complements ’s and ’s suggestions to use libraries — those are fine — but this example avoids extra dependencies and gives explicit control over focus/keyboard interactions.

<button id="shareBtn" type="button" aria-expanded="false" aria-controls="sharePanel">Share</button>

<div id="sharePanel" class="panel" role="dialog" aria-hidden="true">
  <form>
    <input name="email" placeholder="Email">
    <button type="submit">Send</button>
    <button type="button" id="closePanel">Close</button>
  </form>
</div>

<style>
.panel { opacity:0; visibility:hidden; pointer-events:none;
        transition:opacity 180ms ease, transform 180ms ease;
        transform:translateY(-6px); }
.panel.visible { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
</style>

<script>
const btn = document.getElementById('shareBtn');
const panel = document.getElementById('sharePanel');
const close = document.getElementById('closePanel');
let hideTimer = null, pinned = false;

function setVisible(show) {
  panel.classList.toggle('visible', show);
  btn.setAttribute('aria-expanded', show);
  panel.setAttribute('aria-hidden', !show);
}
function show() { if (hideTimer) { clearTimeout(hideTimer); hideTimer = null; } setVisible(true); }
function maybeHideDelay(ms = 250) {
  if (hideTimer) clearTimeout(hideTimer);
  hideTimer = setTimeout(() => {
    const hovered = btn.matches(':hover') || panel.matches(':hover');
    const focused = panel.matches(':focus-within');
    if (!hovered && !focused && !pinned) setVisible(false);
  }, ms);
}

btn.addEventListener('click', () => { pinned = true; show(); });
btn.addEventListener('mouseenter', show);
btn.addEventListener('mouseleave', maybeHideDelay);

panel.addEventListener('mouseenter', show);
panel.addEventListener('mouseleave', maybeHideDelay);
panel.addEventListener('focusin', show);
panel.addEventListener('focusout', maybeHideDelay);

close.addEventListener('click', () => { pinned = false; setVisible(false); });
document.addEventListener('keydown', e => { if (e.key === 'Escape') { pinned = false; setVisible(false); }});
</script>

Key points and troubleshooting: animate with opacity/visibility (not display:none) so fade works and form elements remain focusable; use a short hide delay to allow pointer transitions between button and panel; keep the panel open while :focus-within or focusin is true so form interaction doesn’t accidentally close it; provide an explicit close control and ESC handling for keyboard users. On touch devices replace hover behavior with a click/toggle flow or use pointer events; if jQuery is preferred, swap class toggles for fadeIn/fadeOut and manage the same timers and focus checks.

Recommended Answers

All 3 Replies

Member Avatar for Arkinder

Use .

Regards
Arkinder

Member Avatar for Coyx

jGrowl is a nice little pop-up displayer. It's normally used for pop-up messages, but you can easily use it to fade in a huge div layer.

It comes complete and all you have to do is put the content within the div. You can embed HTML inside the 'popup' and alter the CSS to suit your design easily. :)

Member Avatar for jackparsana

Thanks for replay.

i hope it will usefull.


thanks again.


jack

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.