I am making a site where I have a slideshow and a menu on the right side.
I will try to explain this in as much detail as possible and will also provide code and pictures(look below).
The slideshow has 4 pictures and a menu with 4 paragrafs that get marked when a particular picture is active on the slideshow.
example:
picture one shown———>paragraf one active
picture two shown———>paragraf 2 active etc.
I alos have a small rectangular backround inside each slideshow which contains a text: picture:
http://imageshack.us/photo/my-images/198/mysiteq.jpg/
As you can see from the picture above I am trying to add an arrow that will point on
a specific paragraf when the slideshow changes. I have added the arrow as you can see but the problem is that it appears behind the menu.
I want half of the arrow to be ontop of the menu but for some reason i can not get this to work.
my html:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ProductsSectionHoverControl.ascx.cs" Inherits="TTLine.Templates.Units.ProductsSectionHoverControl" %>
<script type="text/javascript" src="/Scripts/JquerySlideShowPlugin.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#showcase").awShowcase(
{
content_width: 430,
content_height: 205,
fit_to_parent: false,
auto: true,
interval: 3000,
continuous: true,
loading: true,
tooltip_width: 200,
tooltip_icon_width: 32,
tooltip_icon_height: 32,
tooltip_offsetx: 18,
tooltip_offsety: 0,
arrows: true,
buttons: false,
btn_numbers: true,
keybord_keys: true,
mousetrace: false, /* Trace x and y coordinates for the mouse */
pauseonover: true,
stoponclick: true,
transition: 'vslide', /* hslide/vslide/fade */
transition_delay: 300,
transition_speed: 500,
show_caption: 'onhover', /* onload/onhover/show */
thumbnails: true,
thumbnails_position: 'outside-last', /* outside-last/outside-first/inside-last/inside-first */
thumbnails_direction: 'vertical', /* vertical/horizontal */
thumbnails_slidex: 0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
dynamic_height: false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
speed_change: true, /* Set to true to prevent users from swithing more then one slide at once. */
viewline: false /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
});
});
</script>
<div id="showcase" class="showcase">
<!-- Each child div in #showcase with the class .showcase-slide represents a slide. -->
<div class="showcase-slide">
<!-- Put the slide content in a div with the class .showcase-content. -->
<div class="showcase-content">
<div class ="One">Unna er en kryssning till Travemunde</div>
<div class="ArrowOne"><img src="/images/ArrowUse.png" alt="01" width="100" height="50" /></div>
<img src="/images/TTlineFlying.jpg" alt="01" width="430" height="200" />
</div>
<!-- Put the thumbnail content in a div with the class .showcase-thumbnail -->
<div class="showcase-thumbnail">
<!-- <img src="images/01.jpg" alt="01" width="140px" /> -->
<!-- The div below with the class .showcase-thumbnail-caption contains the thumbnail caption. -->
<p class="showcase-thumbnail-content">Kortresor</p>
<!-- The div below with the class .showcase-thumbnail-cover is used for the thumbnails active state. -->
<!-- <div class="showcase-thumbnail-cover"></div> -->
</div>
<!-- Put the caption content in a div with the class .showcase-caption -->
<%--<div class="showcase-caption">
<h2>Be creative. Get Noticed!</h2>
</div>--%>
</div>
<div class="showcase-slide">
<div class="showcase-content">
<!-- white image with low opacity-->
<div class ="Two">Unna er en kryssning till Travemunde</div>
<img src="/images/TTLineTest2.gif" alt="02" width="430" height="200" />
</div>
<div class="showcase-thumbnail">
<p class="showcase-thumbnail-content">Kryssningar</p>
<!-- <div class="showcase-thumbnail-cover"></div> -->
</div>
<!-- Put the tooltips in a div with the class .showcase-tooltips. -->
<div class="showcase-tooltips">
<!-- Each anchor in .showcase-tooltips represents a tooltip. The coords attribute represents the position of the tooltip. -->
<a href="http://www.awkward.se" coords="634,130">
<!-- The content of the anchor-tag is displayed in the tooltip. -->
This is a tooltip that displays the anchor html in a nice way.
</a>
<a href="http://www.awkward.se" coords="200,440">
This is a tooltip that displays the anchor html in a nice way.
</a>
<a href="http://www.awkward.se" coords="600,440">
This is a tooltip that displays the anchor html in a nice way.
</a>
<a href="http://www.awkward.se" coords="356, 172">
<!-- You can add multiple elements to the anchor-tag which are display in the tooltip. -->
<img src="images/glasses.png" />
<span style="display: block; font-weight: bold; padding: 3px 0 3px 0; text-align: center;">
White Glasses: 500$
</span>
</a>
</div>
</div>
<div class="showcase-slide">
<div class="showcase-content">
<div class ="Three">Boka konferens här!</div>
<img src="/images/TTlineTest3.jpg" alt="03" width="430" height="200" />
</div>
<div class="showcase-thumbnail">
<p class="showcase-thumbnail-content">Konferens</p>
<!-- <div class="showcase-thumbnail-cover"></div> -->
</div>
</div>
<div class="showcase-slide">
<div class="showcase-content">
<div class ="Four">Unna er en kryssning till Travemunde</div>
<img src="/images/TTLineTest4.jpg" alt="04" width="430" height="200" />
</div>
<div class="showcase-thumbnail">
<p class="showcase-thumbnail-content">Shopping</p>
<!-- <div class="showcase-thumbnail-content">Just some text<br/> I'm not <b>bold</b></div>
<div class="showcase-thumbnail-cover"></div> -->
</div>
</div>
</div>
my css:
.showcase-thumbnail
{
width: 170px;
height: 50px;
/* cursor: pointer;
border: solid 1px #333; */
position: relative;
bottom:10px;
right: 11px;
background: url(/Images/Button.png);
}
.One
{
position: absolute;
top: 0px;
left: 0;
padding: 14px 0 0 0 !important;
font-size: 135% !important;
font: bold 0.8em arial;
width: 430px;
height: 35px;
background-color: White;
opacity:0.85;
}
.Two
{
position: absolute;
top: 50px;
left: 0;
padding: 14px 0 0 0 !important;
font-size: 135% !important;
font: bold 0.8em arial;
width: 430px;
height: 35px;
background-color: White;
}
.Three
{
position: absolute;
top: 100px;
left: 0;
padding: 14px 50px 0 0 !important;
font-size: 135% !important;
font: bold 0.8em arial;
width: 430px;
height: 35px;
background-color: White;
}
.Four
{
position: absolute;
top: 150px;
left: 0;
padding: 14px 0 0 0 !important;
font-size: 135% !important;
font: bold 0.8em arial;
width: 430px;
height: 36px;
background-color: White;
}
.ArrowOne
{
border:1px black solid;
position: absolute;
/*background: url("/images/ArrowUse.png");
background-repeat: no-repeat;
width: 100px;
height: 100px;*/
left: 400px;
top: 0px;
opacity:100;
z-index: 10000;
}
.showcase-thumbnail p
{
text-align: left;
padding: 5px 0 0 30px;
}
.showcase-thumbnail-caption
{
/*position: absolute;
bottom: 2px;
padding-left: 10px;
padding-bottom: 5px;*/
}
.showcase-thumbnail-content
{
/* padding: 10px;
text-align: center;
padding-top: 25px; */
padding: 0px 0px;
/*border: 1px solid #dcdcdc;
border-radius: 6px;*/
color: #FBF8F8;
text-decoration: none;
font: bold 0.8em arial, sans-serif;
width: 120px;
font-size: 140%;
cursor: hand; cursor: pointer;
}
There is more css and an entire jquery plugin but for this problem it is not relevant.
I originaly took the demo 2 from this link: http://showcase.awkwardgroup.com/index2.html and changed it to what you see in the picture.
I have tried adding the z-index: 1 to ".showcase-thumbnail" but it did not work, I tried adding z-index: 10000 to showcase-content with no result, I also tried on the “showcase-thumbnail p” (not shown in the current css) but it did not give me the result that I seek.
if more info is needed just ask and I will do my best to provide.
Thanks!
This took me a while but i finaly solved it.
If you have the overflow attribute in the css you need to make it visible or this will not work.
Apperently i had code in the jquery plugin that set the overflow attribute to hidden.
I simply set the show-case coontent overflow attribute to visible and made some changes on the
showcase-thumbnail so that the menu did not fall down when i enlarged the container and this worked.
thanks for the help guys!