Member Avatar for _mike_

Hi, i'm trying to achieve the exact same effect as the 4 bottom tabs of this page :

http://uk.virginmoney.com/virgin/

Most Jquery I have seen 'pushes' the content above or below it up or down the page as it reveals the hidden content, the above example reveals the content over the top without pushing out any other content which is what I am looking for

I was hoping somebody has a link to another site that does the same effect or if anyone can help??

Thanks in advance

Mike

  • 2 Contributors
  • 3 Replies
  • 200 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by pritaeas

Dani AI

Generated

@mike: the simplest, reliable way to get that “reveal over the top” effect is to place the artwork as the container background and keep each reveal panel absolutely positioned inside that container. Panels are moved off-screen with a CSS transform and brought back with a class toggle so nothing else on the page is pushed. pointed toward inspecting assets — that helps, but two practical tips below usually close the gap.

Example (minimal pattern):

/* CSS */
.hero { position: relative; width: 960px; height: 320px; background: url(hero-bg.jpg) no-repeat; }
.panel { position: absolute; left: 0; bottom: 0; width: 100%; transform: translateY(110%); transition: transform .35s ease; z-index: 10; will-change: transform; }
.panel.open { transform: translateY(0); }

/* JS (jQuery) */
jQuery(function($){
  $('.tab').on('mouseenter focus', function(){
    $(this).closest('.hero').find('.panel').addClass('open').attr('aria-hidden','false');
  }).on('mouseleave blur', function(){
    $(this).closest('.hero').find('.panel').removeClass('open').attr('aria-hidden','true');
  });

  $('.tab').on('click touchstart', function(e){
    e.preventDefault();
    $(this).closest('.hero').find('.panel').toggleClass('open');
  });
});

Practical troubleshooting notes for @mike: if copied assets don’t behave the same, check script order and missing initialization code (some sites call an init on window.onload), console errors, and relative paths. If the original used Prototype/scriptaculous, remember Prototype and jQuery both use $ — use jQuery.noConflict() or an alternate alias. Also verify z-index and overflow on parent containers; an overflow:hidden on the wrong element can clip the slide.

Performance and accessibility: animate transforms (translate) rather than height/top for smoother GPU-accelerated motion. Add keyboard focus handlers and toggle aria-hidden/aria-expanded so panels are reachable by assistive tech.

Recommended Answers

All 3 Replies

Member Avatar for pritaeas

All the .js and .css files can be viewed on that site. So, using firebug or any other tool, you should be able to determine what it does.

Aside, it uses a carousel plugin for scriptaculous or prototype apparantly.

Member Avatar for _mike_

I've tried that and can get everything to work asides from those tabs!
I think the scriptaculous code it uses is for the top navigation, ive grabbed all the .js files and css and images, still wont work, the hide reveal below them does and so does the top nav!!??

Member Avatar for pritaeas

Appears that the large image is a background image and the sliders are just images that slide up on hover, using absolute positioning. The rest of the image in idle state is hidden under a div.

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.