Member Avatar for kshama002
kshama002 0 Newbie Poster

Hey All,

I am new at AJAX. I would like to make expandable popup window. So that when i do mouseover event it will expand and viceversa. But i dont know how to do it. I have one exmple to show you all so that u can get better idea what actually i want. http://www.amazon.com . click on this and when u put mouseover to tab then one expandalbe popup will be shown. so i would like to do the same. i dont know is this possible with .Net also ? Please can anyone help me to do this...??? Please...

My sincere thanks to all u to spend time to read this.

Thanks:

Pz: Help me..

  • 1 Contributor
  • 0 Replies
  • 99 Views

Dani AI

Generated

— You do not need AJAX to create that expandable hover popup. The visual expand/collapse is client-side (CSS + a few lines of JS). ASP.NET can generate the HTML for the trigger and popup, and the same CSS/JS will work in any ASP.NET WebForms or MVC page. Use AJAX only if you want to fetch content on demand when the popup opens.

A reliable pattern:

  • markup: a trigger and a positioned popup inside a wrapper;
  • CSS: hide with max-height and opacity, use transition for the expand effect and :focus-within for keyboard support;
  • JS: use mouseenter/mouseleave (or pointerenter/pointerleave) to add/remove an open class and add a short delay to avoid flicker. On touch, toggle on tap/click.

Example (trimmed) HTML/CSS:

<div class="menu">
  <a class="trigger" href="#" aria-haspopup="true" aria-expanded="false">Tab</a>
  <div class="popup" role="menu">...items...</div>
</div>

.menu { position: relative; display: inline-block; }
.popup {
  position: absolute; top: 100%; left: 0;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 250ms ease, opacity 200ms ease;
}
.menu:hover .popup, .menu:focus-within .popup, .menu.open .popup {
  max-height: 400px; opacity: 1;
}

Tiny JS to guard flicker and touch fallback:

document.querySelectorAll('.menu').forEach(function(menu){
  var t;
  menu.addEventListener('mouseenter', function(){ clearTimeout(t); menu.classList.add('open'); });
  menu.addEventListener('mouseleave', function(){ t = setTimeout(function(){ menu.classList.remove('open'); }, 150); });
  menu.querySelector('.trigger').addEventListener('click', function(e){
    if ('ontouchstart' in window) { e.preventDefault(); menu.classList.toggle('open'); }
  });
});

Notes: prefer mouseenter/mouseleave over mouseover/mouseout to avoid event bubbling. For performance, animate opacity/transform where possible; height is OK for small menus but can be janky. Make it keyboard-accessible with :focus-within and update aria-expanded when toggling. For API docs see the MDN pages on Using CSS transitions, mouseenter event, and CSS :focus-within.

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.