PDA

View Full Version : slideshows overriding/displaying on top of other actions on the page



WebDizzy777
03-17-2013, 10:57 PM
1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: I am having a problem with the slideshows overriding/displaying on top of other actions on the page. I had a similar problem in the past with Flash videos overriding things and I was able to fix that with wmode="transparent" and adding <param name="wmode" value="transparent">. I am wondering if there is a similar fix for my problem.

Here is my site http://tinyurl.com/bw6jydl

If you open one of the navigation links you will see they open in the ajax iframe in the same window. If you scroll down on the original page (not the opened iframe) the slide shows will override/be on top of the opened ajax iframe window. Thank you for any suggestions.

jscheuer1
03-18-2013, 04:48 AM
Using a text only editor like NotePad, in the ddajaxsidepanel.css file, add the highlighted:


.ddajaxsidepanel{ /* Main Panel Container */
position: fixed; /* keep this value as is */
top: 0; /* keep this value as is */
visibility: hidden; /* keep this value as is */
background: lightyellow;
border-color: white;
border-left: 1px ridge #eee;
-moz-box-shadow: -10px 0 10px rgba(137,137,137, 0.8); /* CSS 3 box shadow */
-webkit-box-shadow: -10px 0 10px rgba(137,137,137, 0.8);
box-shadow: -10px 0 10px rgba(137,137,137, 0.8);
-webkit-box-sizing: border-box; /* Set .ddajaxsidepanel width so that any padding or borders are added inside this width, not in addition to */
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 2100;
}

.ddajaxsidepanel .panelhandle{ /* CSS for Panel Handle DIV */
width: 24px;
height: 100%;
position: absolute;
left: -14px;
top: 0;
cursor: pointer;
background: transparent url(/images/handle.gif) center left no-repeat; /* path to "handle" gif */
}

.ddajaxsidepanel .contentarea{ /* CSS for main content area DIV */
height: 100%;
padding: 10px;
overflow: scroll;
}

Save and use that version.

The browser cache may need to be cleared and/or the page refreshed to see changes.