CODEWITHSUNDEEP
javascriptjquerycssimageslideshow
Ivan Slaughter
Ivan Slaughter

Reputation: 767

Layering an Image slideshow

I have a div containing jQuery image slideshow, i want to put another div/layer on top of the slideshow. Is it possible? Is it as simple as setting both div z-index css property?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#SlideShow { display: none; width: 868px; height: 296px; }
-->
</style>
<script type="text/javascript" src="includes/jquery-1.4.1.js"></script>
<script type="text/javascript" src="includes/jquery.cj-simple-slideshow.js"></script>
<script type="text/javascript">
<!--
$(function() {
   $(document).ready(function() {

      //initialize the first slideshow container
      $("#SlideShow").cjSimpleSlideShow();

   });

});
//-->
</script>
</head>

<body>

  <table width="100%" align="center" cellpadding="0" cellspacing="0" class="main">
  <tr>
    <td width="50%">&nbsp;</td>
    <td><div class="header_top"><div class="header_logo"><img src="images/logo.png" alt="Logo" width="120" height="148" border="0" /></div>
      <div class="header_text"><img src="images/header_text.png" alt="" width="573" height="84" border="0" /></div>
        </div>
      <div class="header_image" style="z-index:0;"><div id="SlideShow" style="display:none;">
         <img src="images/header_image.jpg" width="868" height="296" alt="This is caption 1." /><br />
         <img src="images/header_image1.jpg" width="868" height="296" alt="This is caption 2." /><br />
         <img src="images/header_image2.jpg" width="868" height="296" alt="This is caption 3." /><br />
      </div>
      </div><div class="content">
      <div class="content_inner"><div><img src="images/heading_2.png" alt="Content" /></div>
        <p>Content.</p>
        <p>Content.</p>
        <p>Content.</p></div>
<div class="content_right">
  <div><img src="images/heading_1.png" alt="Content" /></div>
  <p><br />
Content.</p>
  <p>Content.</p>
  <p>Content. </p>
  <p>Content.</p>
  <p>Content<br />
    <br />
  </p>
  </div><br />
<div class="content_service"><div><img src="images/heading_3.png" alt="Content" /></div> 
  </div>
      </div>
</td>
    <td width="50%">&nbsp;</td>
  </tr>
</table>
</body>
</html>

I want half of 'content_right' div lay on top of slideshow div

Upvotes: 0

Views: 965

Answers (2)

jeroen
jeroen

Reputation: 91744

I have actually put a div on top of a self-baked jquery slide-show and it works normally in all browsers except for IE6 - IE8.

IE has some kind of weird bug where you have to give a background color to the div on top in order for it to have dimensions. And make it transparent afterward to get rid of the background color...

Also see my question about that problem.

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

You might be able to use the z-index property, or you could perhaps use position: absolute; on the div you want to appear above the slide-show.

#top_most_element
{
z-index: 99; /* or whatever, just so long as it's higher than those elements 'below' it */
}

Or, to use the position: absolute; alternative:

#container_element
{
position: relative; /* in order to position the child-element relative to this element, not the window or other parent element */
}

#top_most_element
{
position: absolute;
}

<div id="container_element">

  <div class="slide">...</div>
  <div class="slide">...</div>

  <div id="top_most_element">
    <!-- content to show -->
 </div>

</div>

This may, or may not, work though, it depends on what javascript solution you're using to create the slideshow and how it works. If you could post that (the js/jQuery/etc, and the relevant (x)html and css) then we might be able to help you more effectively.

Upvotes: 1

Related Questions