Click here to Skip to main content
12,950,272 members (68,700 online)
Rate this:
 
Please Sign up or sign in to vote.
I have a custom dropdown box in jQuery slider as per below image link. This slider contains three div, that auto rotate in vertically one by one. Slider’s and custom dropdown’s javascript and css described below. My problem is that, when I put dropdown into slider div that hide behind slider div as per below image link. According requirement, I can’t changed dropdown position and not increase slider height, then how to display dropdown list items on top off slider. Any suggestion will be appreciated.

Check this link for image

Now you can see above image Per Unit Cost drop down list is hiding behind slider container.

Slider Jquery

http://code.google.com/p/locjoomla/source/browse/trunk/mootool/lofslidernews/js/lofslidernews.mt11.js[^]

http://mootools.net/download/get/mootools-1.2.4.js[^]

http://cnetjavascript.googlecode.com/files/mootools.svn.js[^]

<script type="text/javascript">
    var _lofmain = $('lofslidecontent45');
    var _lofscmain = _lofmain.getElement('.lof-main-wapper');
    var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator');
    var object = new LofFlashContent(_lofscmain,
									  _lofnavigator,
									  _lofmain.getElement('.lof-navigator-outer'),
									   { fxObject: { transition: Fx.Transitions.Quad.easeInOut, duration: 800 },
									       interval: 3000,
									       direction: 'vrdown'
									   });
    object.start(true, _lofmain.getElement('.preload'));
 
    var isCustom = "@(ViewBag.IsCustom)";
    if (isCustom == "True") {
        object.callMyEvent(2, true); // call my custom event 
        object.setNavActive(2);
    }
    				
</script>
 


Slider CSS

/* CSS Document */
.lof-slidecontent
{
    margin-left: 0px;
    position: relative;
    overflow: hidden;
    width: 1200px;
    height: 486px;
}
.lof-slidecontent .preload
{
    height: 100%;
    width: 100%;
    background: #FFF;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    color: #FFF;
    text-align: center;
}
.lof-slidecontent .preload div
{
    height: 100%;
    width: 100%; /*background: transparent url(../Images/MyImages/Icons/load-indicator.gif) no-repeat scroll 50% 50%;*/
}
/* main flash */
.lof-main-wapper
{
    margin-right: auto;
    overflow: hidden; /*background: transparent url(../Images/MyImages/Icons/load-indicator.gif) no-repeat scroll 50% 50%;*/
    padding: 0px;
    height: 488px;
    width: 1014px;
    position: relative;
    overflow: hidden;
}
 
.lof-main-wapper .lof-main-item
{
    padding: 0px;
    margin: 0px;
    height: 488px;
    width: 100%;
    position: absolute;
}
.lof-main-wapper .lof-main-item img
{
    padding: 0px;
    width: 100%;
}
 
.lof-main-item-desc
{
    z-index: 100px;
    position: absolute;
    top: 150px;
    left: 50px;
    width: 400px;
    background: url(../images/transparent_bg.png); /* filter:0.7(opacity:60) */
}
.lof-main-item-desc p
{
    color: #FFF;
    margin: 0 8px;
    padding: 8px 0;
}
.lof-main-item-desc h3 a
{
    color: #FFF;
    margin: 0;
    font-size: 140%;
    padding: 20px 8px 2px;
    font-family: "Trebuchet MS" ,Trebuchet,Arial,Verdana,sans-serif;
}
 

 
/* item navigator */
ul.lof-navigator
{
    top: 0px;
    padding: 0px;
    margin: 0px;
    position: absolute;
    width: 100%;
    overflow: hidden;
}
ul.lof-navigator li
{
    cursor: hand;
    cursor: pointer;
    list-style: none;
    width: 100%;
    padding: 0px;
    margin: 0px;
}
.lof-navigator-outer
{
    position: absolute;
    right: 0;
    top: 0px;
    z-index: 100;
    height: 488px;
    width: 204px;
    padding: 0px;
    margin: 0px;
    float: left;
}
.lof-navigator li.active
{
    background: url(../../Images/MyImages/Icons/arrow-bg2.png) no-repeat;
    background-color: #d21c1c;
    color: #FFF;
}
.lof-navigator li:hover
{
}
 

 
.lof-navigator li div
{
    text-align: center;
    height: 162px;
    position: relative;
    margin-left: 0px;
    padding-left: 0px;
    background-color: #FFFFFF;
}
 
.lof-navigator li.active div
{
}
 

.lof-next
{
    position: absolute;
    top: 0;
    height: 30px;
    background: #F9F9F9;
    display: block;
    width: 100%;
}
.lof-previous
{
    position: absolute;
    bottom: 0;
    height: 30px;
    background: #F9F9F9;
    display: block;
    width: 100%;
}
.lof-navigator-MycontentHeader
{
    font-family: Caecilia LT Std;
    font-size: 26px;
    color: #d21c1c;
}
li.active .lof-navigator-MycontentHeader
{
    color: #FFF;
}
.lof-navigator-MycontentFooter
{
    font-family: TradeGothic, Arial;
    font-style: oblique;
    font-size: 13px;
    color: Black;
}
 
li.active .lof-navigator-MycontentFooter
{
    color: #FFF;
}
 


Drop down

http://www.mindstick.com/Articles/f649279c-dc3a-42cb-ab10-e24ae9a1bb90/?Stylish%20Dropdown%20in%20HTML[^]
Posted 15-Mar-13 22:48pm
Updated 15-Mar-13 22:50pm
v2
Comments
abhijeetgupta1988 17-Mar-13 1:47am
   
have you tried changing the z-index property of your slider and dropdown?
make sure z-index value for dropdown must be greater than slider's.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

    Print Answers RSS
Top Experts
Last 24hrsThis month
OriginalGriff 5,829
CHill60 3,460
Maciej Los 2,953
Jochen Arndt 1,975
ppolymorphe 1,820


Advertise | Privacy | Mobile
Web02 | 2.8.170525.1 | Last Updated 16 Mar 2013
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100