PDA

View Full Version : Automatic scrolling layers?



lowmarklow
03-17-2010, 09:22 AM
Hi Guys,

Basically if you go to https://xmedia.ex.ac.uk/ you will see a box that slowly flicks through 4 topics.

I was just wondering if you can take the buttons away and still have it slowly going through the different layers?

I've got my own version which I have yet to upload but when I took the buttons away it didn't automatically scroll through the different layers.

Can anyone help me with this?

Thanks people!

Mark

lowmarklow
03-17-2010, 09:41 AM
Hi Guys,

Here is the link...

http://www.british-certification.com/

Thanks!

jscheuer1
03-17-2010, 10:29 AM
There are other scripts that do that sort of thing that don't rely on the tabs. But even this one will still work if you leave the tabs in the markup but set, in your stylesheet:


#promo_tabs {display: none;}

That way, they will not be seen and will take up no space, but the script will still work.

lowmarklow
03-17-2010, 10:39 AM
Hello mate,

That still doesn't work :-(

Mark

jscheuer1
03-17-2010, 11:04 AM
Probably won't work even without:


#promo_tabs {display: none;}

then. First make sure it works when you can see the tabs.

lowmarklow
03-17-2010, 11:18 AM
Right well I made the tabs visible and have just noticed that when you hover over, say...tab 4, it will fade into tab 1, but it shouldn't do that. Instead it should fade into the next tab which would be tab 5.

I'll have to look at why it's automatically going straight back to tab1 and then fading into itself. Thus looking like it's not working at all.

Thanks by the way,

Hopefully I can sort this out now.

Mark

jscheuer1
03-17-2010, 11:35 AM
Well, I did say there were other scripts, here's one:

http://home.comcast.net/~jscheuer1/side/vfs/jsjq_5.htm

lowmarklow
03-17-2010, 11:59 AM
I've just checked that link out.

Will that work with the div layers I have got which fade...

Thanks,

Mark

jscheuer1
03-17-2010, 02:18 PM
No, it only works with images. The descriptions are separate and don't fade in, they just appear as the image they are associated with begins to fade in. See the source code of the demo page to see how these are organized.

However, this (the treatment of the descriptions) is preferable for IE which would otherwise lose clear type on the text (which it does on the example page you linked to, though it's restored after fade in). Also, the script linked to in my previous post is highly configurable as to fade in rates and interval between images, to name only two of the options. And the markup it keys off of can include many things that would allow the images and/or text to react to events (like clicks or mouseover) from other scripts or ordinary HTML like links. So, if there is something else that you need it to do, let me know, there's a chance it can.

But I tried out the page you linked to as the example in Firefox and set the display of the promo_tabs to none and it still worked fine. So my original suggestion as regards that script should still work.

lowmarklow
03-17-2010, 03:36 PM
Ok,

Thing is, in the CSS sheet which contains the div 'promo_tabs' , it's linked with another div called 'promo_box'.

When I split them up and assign display: none to the promo_tabs it still doesn't work...

Mark

jscheuer1
03-17-2010, 06:20 PM
Your page (currently), with the tabs visible isn't auto cycling. I'm not sure why, it looks like you've copied all the code from the other site.

In any case, if you cannot get it auto cycling with the tabs, my idea will not help. If you can get it auto cycling with the tabs, you may always use the !important keyword in the stylesheet to enforce the display property:


#promo_tabs {display: none!important;}

lowmarklow
03-18-2010, 09:24 AM
Ohright, I think I've seen that !important keyword before.

I'll give that a go!

Thanks

lowmarklow
03-19-2010, 03:23 PM
Nope, still isn't working properly.

Thing is it was working before and for some reason it doesn't work now. I have no idea...

:(

jscheuer1
03-20-2010, 03:19 AM
Thing is it was working before and for some reason it doesn't work now. I have no idea...

That has sort of been my point all along. If you can get it working with the tabs, it will still work without the tabs being seen, as long as they are still there.

What I haven't said though is that since it is unclear to me whether or not all of the code you are lifting from the other site is truly in the public domain (obviously some of it is, other parts are not well documented in this regard), I choose not to help you with implementing the code. However, I'm more than happy to help you hide the tabs. That's all I've been doing here. Making the code you've lifted work is your problem.

On the other hand, if you are willing to work with the other script I suggested, then I would help you to get it working.

lowmarklow
03-22-2010, 11:24 AM
Hello mate,

I've just had a go at your version which you showed me, and it does work.

What I'd just like to know is can you have a div layer on top of the images which fade in? Basically, a duplicate of the 'side' layer which can go on top of the image.

Thanks for your help so far, much appreciated.

Mark

jscheuer1
03-22-2010, 03:38 PM
Fading text is a bad idea, as I noted. In IE it loses its cleartype anti-aliasing quality. That may be restored when it finishes fading in, but that still looks tacky.

Now, I'm not really sure what you mean by on "top". The descriptions may appear just about wherever you like. It depends upon the layout. They could go above the images instead of to the side:

descriptions
images

or they could be superimposed on the images like here:

http://home.comcast.net/~jscheuer1/side/vfs/jsjq_2.htm

Those get superimposed at the bottom, but could be at the top, those are the two options for that sort of description display. Also, when doing it either of those two ways, the descriptions may be shown on hover, or always. The thumbnails used in that example are not required.

lowmarklow
03-23-2010, 09:53 AM
Well I suppose I'd have to you the z-index property so the Div layers will be in front of the images?

Mark

jscheuer1
03-24-2010, 01:19 AM
The z-index style property is only required if the elements don't already 'stack' the way that you want them to. In the example I referred to:

http://home.comcast.net/~jscheuer1/side/vfs/jsjq_2.htm

they already do, so no z-index is used. But you can set things up however you like, if when you do so the natural stacking is other than what you want, then z-index will need to be employed.