WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > SOCIAL CHAT > Chat Lounge > I need help with a small CSS problem

Reply
  Thread Tools Display Modes
Old 5th June 15, 05:22 AM   #1
davesh
WLC Member
 
Join Date: Jun 2015
Posts: 2
Default I need help with a small CSS problem

how do i display a slideDown list to be on top of my slide show?
the code functions but half of the list is hiding behind my slideshow.

Can it be that the slideshow is always on top?

does anybody know CSS or jQuery to correct it.
davesh is offline   Reply With Quote
Old 6th June 15, 06:00 AM   #2
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,709
Default Re: I need help with a small CSS problem

I'm assuming we're talking a flash slideshow? If so, look into flash wmode="transparent"
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 6th June 15, 07:52 AM   #3
davesh
WLC Member
 
Join Date: Jun 2015
Posts: 2
Default Re: I need help with a small CSS problem

Thanks for responding! it is not a flash player, it is just images manipulated with JQuery and it is always "on top" of the screen.
any info you can give me would be greatly appreciated. Thanks a bunch, Dave.

HERE IS THE HTML:
<td class="Hideslide" colspan="3">
<div id="cycler">
<img class="basesrc="https://encryptedtbn1.gstatic.com
/images? q=tbn:ANd9GcQgfgIawr-
jlvdg4Mkt9r7qPzLhz2ZX TCrMzk67qw8ShjGgDDdf"
alt="Surfer" title="A surfer catching waves"/>

<img src="https://encryptedtbn2.gstatic.
com /images?q=tbn:ANd9GcTOFNnhJuNdpWGD
Ft8qcpSVu-SV1Myope0diUO5dm0K 3Mj01Yjsig"
alt="Bright trees" title="Bright trees"/>

<img src="https://encrypted-tbn0.gstatic.
com/images?q=tbn:ANd9GcQaquhvSqdsrjImEfyiIzCtj
IFdHHG-ftAAD3bvWPK5KyC12PQa" alt="Little
girl" title="Little girl sitting"/>

<img src="https://encrypted-tbn2.gstatic.com /images?q
=tbn:ANd9GcQGA42a6HTHN8Pww9LF0jwFtcTXaH0GyYU
5duely17YWE9qW6A" alt="Eye" title="A
woman's eye"/>
</div>
</td>


HERE IS THE CSS:
#cycler{
display: none;
padding: none;
Margin: none;
}


#cycler{
position:relative;
width:1000px;
height: 300px;
}

#cycler img{
position:absolute;
z-index:1;
background-color:white;
width:100%;height:100%;
left:0;top:0;
display:none
}

#cycler img.active{
z-index:3
}

#cycler img.base{
z-index:-1;
position:static;
display:block
}

HERE IS THE JQUERY:
function cycleImages(){
var $active = $('#cycler .active');
var $next = ($active.next().not('.base').length > 0) ? $active.next().not('.base') : $('#cycler img').not('.base').first();
$next.css('z-index',2);//move the next image up the pile
$active.fadeOut(1500,function(){//fade out the top image
$active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
$next.css('z-index',3).addClass('active');//make the next image the top one
});
}

$(document).ready(function(){
$('#cycler img.base').clone().prependTo('#cycler');
$('#cycler img.base').last().removeClass('base').addClass('ac tive');
$('#cycler img').show();
setInterval('cycleImages()', 4100);
})
davesh is offline   Reply With Quote
Old 6th June 15, 08:00 AM   #4
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,709
Default Re: I need help with a small CSS problem

So, if your menu doesn't already have a position attribute in the CSS, give it position:relative, and then give it a higher z-index than the slider.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 11:18 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.