PDA

View Full Version : Featured Content Slider v2.4 - Positioning the pagination



Raigen
11-23-2010, 12:00 AM
1) Script Title: Featured Content Slider v2.4

2) Script URL (on DD): Featured Content Slider v2.4 (http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm)

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
11-23-2010, 01:23 AM
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
11-23-2010, 02:21 AM
That's the page. You can see the pagination fade away as soon as you refresh the site! (http://raigen.square7.ch/exilist/)

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
11-23-2010, 03:03 AM
Did you want it to look like this?:
http://localhostr.com/files/GUDAbwB/featured.png
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
11-23-2010, 03:29 AM
Did you want it to look like this?:
http://localhostr.com/files/GUDAbwB/featured.png
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 (http://i56.tinypic.com/25ixcno.png)

Nile
11-23-2010, 03:43 AM
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
11-23-2010, 04:02 AM
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
11-23-2010, 04:11 AM
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
11-23-2010, 04:38 AM
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
11-23-2010, 11:58 AM
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!

jscheuer1
11-23-2010, 12:15 PM
Funny, works fine in a mock up demo (click to see it):

[hotlink removed]

Raigen
11-23-2010, 01:07 PM
Funny, works fine in this mock up demo (click to see it):

http://home.comcast.net/~jscheuer1/side/exilist_h.htm

*sigh* It should exactly look like that. I dunno why my pagination always gets moved behind the content and just dissapears.

Could you upload your .css file for me and the index.php code aswell? Would be much appreciated! Mabye, I just missed something!

EDIT: I got your index.php script code and the contentslider.css and it works perfectly in the dreamweaver live preview. But as soon as I upload it the buttons still fade away as they were behind the content. :(

Greets,
Raigen

jscheuer1
11-24-2010, 01:17 AM
I tried earlier and there was some problem with the server. Now, looking at the live page at the location raigen.square7.ch/exilist/ I see no attempt to implement my suggestion from post #7 (http://www.dynamicdrive.com/forums/showpost.php?p=242038&postcount=7). Further, there's no reference at all to the .pagination class in any of that page's internal or external styles.

Perhaps while the server was having difficulties things got truncated. I'd try again.

Raigen
11-25-2010, 11:39 PM
Sorry, I haven't had time to post in a while.

I played around a bit, and it seems like that z-index controls the time the pagination will stay on top of the content.

For example:

z-index: 1 == dissapears instantly
z-index: 10 == stays on for about 10 secs
z-index: 9999 == will stay for a pretty long time ie. 9999 secs

Gonna try it again with your settings jscheuer1 and will play a bit more around with z-index and will keep you up-to-date about my progress!


Greets,
Raigen

jscheuer1
11-26-2010, 11:18 AM
Yeah I see in the contentslider.js it uses escalating z-index to achieve its fade in. So, the higher you set the z-index of the .pagination element, the longer it will work. Try 999999. That should be long enough for most folks.