Featured Content Slider v2.4 - Positioning the pagination

[Raigen]

1) Script Title: Featured Content Slider v2.4

2) Script URL (on DD): Featured Content Slider v2.4

3) Describe problem:

Well, for the moment, I'm using position:absolute to position my pagination links above the content inside the content slider. The problem is that that not everyone got a 1080p res monitor so they will see the pagination at a different spot on the page, which is not really that great.

I wonder if there is any other way to get the pagination above the content without the use of position:absolute?!

EDIT: Well, i tried it another way. I've set all the content divs to z-index:0 and the pagination to z-index:9999 which put it above the content. Also I set the pagination-div before the content divs. My problem is now that the pagination fades away as soon as you visit the page. Any work around for that problem?!

Any help would be great!

Thanks in advance,
Raigen

PS: I hope you can understand what I'm trying to say, my English is not the best!

[Nile]

Please post a link to the page on your site that contains the problematic script so we can check it out.

Please include your code so that we can take a look at it, we can't do much without it. When you do post your code remember to use [code] tags. That includes [ html ], [ code ], and [ php ].

[Raigen]

That's the page. You can see the pagination fade away as soon as you refresh the site!

Index.php:

       	  <div id="slider1" class="sliderwrapper">
          	
            <div id="paginate-slider1" class="pagination" style="z-index:9999;">
			</div> 
          
			<div class="contentdiv" style="z-index:0;">
			<img src="images/highlights/highlight_1.png" />
			</div>

			<div class="contentdiv" style="z-index:0;">
			<img src="images/highlights/highlight_2.png" />
			</div>

			<div class="contentdiv" style="z-index:0;">
			<img src="images/highlights/highlight_3.png" />
			</div>

			</div>


			<script type="text/javascript">

			featuredcontentslider.init({
			id: "slider1", //id of main slider DIV
			contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
			toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
			nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
			enablefade: [true, 0.1], //[true/false, fadedegree]
			autorotate: [true, 6000], //[true/false, pausetime]
			onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
			//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
			//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
			}
			})

			</script>
        </div>

contentslider.css

.sliderwrapper{
	position: relative; /*leave as is*/
	overflow: hidden; /*leave as is*/
	width: 600px; /*width of featured content slider*/
	height: 300px;
	z-index:0;
}



.sliderwrapper .contentdiv{
	visibility: hidden; /*leave as is*/
	position: absolute; /*leave as is*/
	left: 0;  /*leave as is*/
	top: 0;  /*leave as is*/
	width: 600px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
	height: 100%;
	filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
	z-index:0;
}

.pagination{
	z-index:9999;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:15px;
	padding-left:505px;
	padding-top:222px;
	width: 200px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
}

.pagination a{
	padding: 0 10px;
	text-decoration: none; 
	color: white;
	background: black;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
	z-index:9999;
}

.pagination a:hover, .pagination a.selected{
	color:#ffb14b;
	z-index:9999;
}

Sorry that I didn't put it in the first post, might be the time. *g*

Hope that helps you more with my problem!

[Nile]

Did you want it to look like this?:

Restore your code to how it was originally, and just move the pagination div above the content div. If you want it to appear like it actually is inside the content div, change the background color of the pagination div to white.

Good luck!

[Raigen]

Did you want it to look like this?:

Restore your code to how it was originally, and just move the pagination div above the content div. If you want it to appear like it actually is inside the content div, change the background color of the pagination div to white.

Good luck!

Thanks for the help but it's exactly the same like before!

The pagination just disappears as soon as you refresh the site! You can only see it pop-up for a second.

Changed the complete code back to the normal standart code. Only changed the size of the content slider. The background of the pagination is set to white and the pagination div is above the content divs.

Also I don't want the pagination to be above the content, it has to be on top of my content. Will make a little screenshot how it should look like!

SCREENSHOT LINK

[Nile]

Are you putting the pagination inside the content div, or outside? It should be outside on top, for example:

<div id="paginate-slider1" class="pagination">

</div>

<div id="slider1" class="sliderwrapper">

<div class="contentdiv">
Content 1 Here. <br />
<p></p><a href="javascript:featuredcontentslider.jumpTo('slider1', 3)">Go to 3rd slide</a></p>
</div>

<div class="contentdiv">
Content 2 Here.
</div>

<div class="contentdiv">
Content 3 Here.
</div>

</div>

Are you doing it like this?

What browser are you viewing this in?

[jscheuer1]

Looking at the raigen.square7.ch/exilist/ page, it looks like if you just add the highlighted in the contentslider.css file:

.pagination{
	z-index:9999;
	position:relative;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:15px;
	padding-left:505px;
	padding-top:222px;
	width: 200px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
}

That should do it.

[Raigen]

Are you putting the pagination inside the content div, or outside? It should be outside on top, for example:

Well that way, the content slider is above the content and I can't get it on top of the content slider since the div box is above the slider1 div.

[Nile]

Sorry I misunderstood in the first place on what you were trying to achieve :/. (I thought you just wanted the pagination in the content at the top).

Please follow jscheuer's instructions above. Post back with results.

[Raigen]

Well if the pagination div is above the content divs, the pagination will show up above the content aswell, like the way Nile posted it.

<div id="slider1" class="sliderwrapper">
        
<div id="paginate-slider1" class="pagination"></div>

<div class="contentdiv">
<img src="images/highlights/highlight_1.png" />
</div>

<div class="contentdiv">
<img src="images/highlights/highlight_2.png" />
</div>

<div class="contentdiv">
<img src="images/highlights/highlight_3.png" />
</div>
		
</div>

If I place the pagination div beneath the content divs, the pagination is behind the content and won't show up. It only pop-ups for a second and fades away again.

<div id="slider1" class="sliderwrapper">

<div class="contentdiv">
<img src="images/highlights/highlight_1.png" />
</div>

<div class="contentdiv">
<img src="images/highlights/highlight_2.png" />
</div>

<div class="contentdiv">
<img src="images/highlights/highlight_3.png" />
</div>
		
<div id="paginate-slider1" class="pagination"></div>

</div>

position:relative isn't helping. It's still the same!