OVERLAYING DIVS INCLUDING DIV SELECTOR

Simons Hood

Total Post:70

Points:494
Posted by  Simons Hood
JQuery 
 1151  View(s)
Ratings:
Rate this:
Hi Mindstickians!

Inside a container div I have four divs that I wish to overlay so that only one is visible at any time. Each of these four divs is the same dimension - lets say 

200x200px. To the right of the overlayed divs I would like to have four vertically aligned smaller divs that are not overlayed lets say they are each 50 px high. 

These four vertically aligned divs will act as a simple menu so that when clicked the associated div of the four overlaid divs to the left is the one to be displayed.

I am trying to find the simplest solution to this ideally using jquery. I have played around with some stuff but my knowledge of jquery just isnt up to the job.

Any hints as to a solution or simply a method to explore further would be much appreciated. This is to be deployed as part of a wordpress theme so if anyone knows of 

a plugin that does exactly this then that would be awesome but I suspect unlikely.

please help me!

Thanks in advance! 
  1. AVADHESH PATEL

    Post:604

    Points:4228
    Re: Overlaying divs including div selector

    Hi Samuel!


    Try as following

    $(function() {
        $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
        $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
      });

    CSS

    .ui-tabs-vertical { width: 55em; }
      .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
      .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
      .ui-tabs-vertical .ui-tabs-nav li a { display:block; }
      .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
      .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}

    I hope it resolve your problem! 

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!