Joomla Templates Club 406,261 posts

[maldown Friend maldownJoin date: May 2009Posts: 23Downloads:0Uploads:4 Thanks: 5]

#141818

Hi, I am using JA Helio on a new website that i’m putting together for my wifes food business.

We have modified the template so it auto-scales to the width of the users screen and has a small padding/border around the edge.

We are using JASlideShow to cycle through a small number of images on the home page, but these images are of a fixed width – eg 690x250px.

If a user with a widescreen monitor views the site there is a lot of white space between the slideshow picture and the right modules.

What we would like to be able to do is to create images which are say 1000px wide, but have them slide in behind the right modules as if they were on a lower layer. Currently if you resize the window, and make it really small, the current 690x250px images sit on top of the right modules.

Is there a way to make the JASlideShow images sit behind the right modules?

The test site is at: http://125.214.75.140/ if you want to see what I mean.

Thanks in advance.

[cjmicro Friend cjmicroJoin date: June 2008Posts: 501Downloads:3Uploads:0 Thanks: 198 Thanked: 81 times in 10 posts]

#307513

I have to figure this one out too. I wonder if changing the z-index of the slideshow would help?

Cheryl

[cjmicro Friend cjmicroJoin date: June 2008Posts: 501Downloads:3Uploads:0 Thanks: 198 Thanked: 81 times in 10 posts]

#307517

I changed my menu (which was getting hidden behind my gallery) to z-index 9999 and it seems to help in firefox, chrome, but NOT IE7… I hate IE anymore and don’t even want to see what my site looks like in IE8. UGH.

Cheryl

[maldown Friend maldownJoin date: May 2009Posts: 23Downloads:0Uploads:4 Thanks: 5]

#307630

Ok, so I did some digging using Firebug. The Z index is definitely what we want to alter. Default value for Z index is 0, and lower (eg -1) means image will sit lower down the order. Checking what JASlideShow is doing you see the following from a FireBug inspect….

<img title=”JA slide show” alt=”JA slide show” src=”http://125.214.75.140/images/slideshow/slide2.jpg” style=”display: block; position: absolute; left: auto; top: auto; z-index: 30; height: auto; visibility: visible; opacity: 1; width: auto; right: auto; bottom: auto;”/>
<img title=”JA slide show” alt=”JA slide show” src=”http://125.214.75.140/images/slideshow/slide1.jpg” style=”display: block; position: absolute; left: auto; top: auto; z-index: 29; visibility: visible; opacity: 1; height: auto; width: auto; right: auto; bottom: auto;”/>

Basically the javascript seems to load the current and next image. Each time it changes to the next image in your list of revolving images it increments the Z index so the next image in effect sits on top of the previous one.

Because of this it looks like the Z index is continually increasing when you have a browser session open to this page.

What I cant seem to find though is the CSS or JScript that this comes from. Have looked in template.css and couldnt find it there. Is this somehow set in the JavaScript that JASlideShow uses?

I was wondering if we can find this, whether we can always set the Z index starting value to be say -1000, so it would take 1000 transitions before the index is back to zero and hence up until this point the JASlideShow images would always be behind the other modules.

Any ideas?

Thanks
-Mal

[cjmicro Friend cjmicroJoin date: June 2008Posts: 501Downloads:3Uploads:0 Thanks: 198 Thanked: 81 times in 10 posts]

#307636

I was attacking it from the other end, changing the z-index of what was getting covered (in my case it’s my drop down menu). It did seem to help in FF, but I will do more investigating too and see if I can find something else.

Cheryl

[cjmicro Friend cjmicroJoin date: June 2008Posts: 501Downloads:3Uploads:0 Thanks: 198 Thanked: 81 times in 10 posts]

#307638

I wonder if this thread will help us

http://www.joomlart.com/forums/topic/moo-menu-with-flash-in-user5/

Cheryl

[Author]

Posts