PDA

View Full Version : Sliding Panel using JQuery


WotNow
11-13-2009, 07:47 AM
Hi everyone, I have used a free jquery program called: http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/. I found this extremely easy to implement and it looks fantastic in all other browsers.

I am using this in: http://www.kimberleywebdesign.com.au/CoolChange/index.html

I have written away to the developer and he suggested the following fixes:

- When you export the Flash file in SWF format, there should be a setting called 'windowless', setting this to opaque should ensure the SWF movie goes underneath the sliding panel
- You could also try changing the param value to opaque in the HTML of the page, like this: <param name="wmode" value="opaque">
- You could maybe even try applying a z-index property to the Flash movie and another z-index of greater value to the sliding panel so it should sit on top of the SWF.

I have implemented these fixes but the problem remains. The sliding panel instead of overlaying the slideshow goes underneath it and cuts off the text. This of course is an IE problem but my client uses IE so I need to fix it or get rid of it.

If anyone knows how to fix this or knows of an alternative I would really appreciate it, thanks.


http://i605.photobucket.com/albums/tt133/WhatNowThe2nd/HomePageAboutUs.jpg

gentleone
11-13-2009, 08:37 AM
If the developer used CSS3 then there might be some issues with IE. IE has a bad support for CSS3.
Did he say that it shouldn't give you problems in IE?

gentleone
11-13-2009, 10:39 AM
I did have a look at your stylesheet and I saw that you have the z-index: 2; on the a.trigger class. This z-index should be (or also) on the .panel class. Did you try this already?

WotNow
11-13-2009, 12:25 PM
No I didnt but I have commented out the z-index: 2 on the a.trigger class and copied it into the .panel class and have uploaded and emailed client. I will be forever grateful if this works. Thanks for your support.

gentleone
11-13-2009, 01:10 PM
Hi Kimberly, I did check it in IE7, but now if you click on the button and the panel slides in, it slides ontop of the button. So you can't click the panel back now. I also noticed that the panel slides still behind the flash object. So better to put the z-index: 2; back at the a.trigger class? I will investigate some more for you.

gentleone
11-13-2009, 01:30 PM
Okay... did some little research and you might find the solution on the following page. There are several, so pick one and see what works for your site.

http://geekswithblogs.net/steveclements/archive/2007/03/03/107839.aspx

If you want me to test something I have IE6, IE7 and IE8 here. Just let me know!

domedia
11-13-2009, 03:22 PM
wmode="transparent"
-and-
<param name="wmode" value="transparent">

no z-index or anything else needed. It's a very quick fix.

WotNow
11-15-2009, 11:50 PM
Hi everyone, thanks for your responses. Domedia can you please elaborate on your answer, it doesnt make sense to me as it is. I would like to complete this site and was thinking of taking the whole sliding panel function out and trying something else if I cant get this fixed by tommorrow.

Gentleone, thanks so much .. am going to look over the link you sent .. sooo appreciate your help.

domedia
11-16-2009, 12:29 AM
the issue of istems falling behind a flash movie is a common one. You'll find it all over the web.
Th3e solution is quite simple, all you have to do is edit/add something to your video embed codes.

If the embed tag has a wmode attribute, just change it to 'transparent'. If it doesn't have that attribute, just add it.

Also you need to look for a param tag like I outlined above.

If that does not make sense, just let me know where you are stuck in this.

WotNow
11-16-2009, 03:29 AM
Hi Domedia param tag is already set to transparent. Would you mind checking the code?

http://www.kimberleywebdesign.com.au/CoolChange/index.html

Thanks!

gentleone
11-16-2009, 06:12 AM
I've checked your code and I saw that the parameter is not there.

I've added them both for you. See the last param name and look after embed scr="slideshow/slideshow.swf" I've added wmode="transparent"

This should work!

<div id="slideshow">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','502','heigh t','352','title','Cool Change Gallery of Stockists','src','slideshow/slideshow','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','base ','.','movie','slideshow/slideshow' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="502" height="352" title="Cool Change Gallery of Stockists">
<param name="movie" value="slideshow/slideshow.swf" />
<param name="quality" value="high" />
<param name="base" value="." />
<param name="wmode" value="transparent" />
<embed src="slideshow/slideshow.swf" wmode="transparent" width="502" height="352" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" base="."></embed>
</object>
</noscript>
</div>
<!--end of slideshow-->

WotNow
11-17-2009, 12:28 AM
Hi Gentleone,

Thanks for that, I have made a bit of balls up and have not been uploading the amended file. All done now and will email client to see if your amendments have fixed the problem. Thanks once again.

gentleone
11-18-2009, 07:16 AM
I've looked at the source of your page, but I still don't see any changes made to the code of the flash object. I followed the url in your first post on this thread... did you made another page?

WotNow
11-18-2009, 09:12 AM
Oh woops!! My apologies. Yes at first post I had inadvertently uploaded the unchanged file.

http://kimberleywebdesign.com/CoolChange/index.html

Thanks for your time.

gentleone
11-18-2009, 09:33 AM
okay, I would like tot test if for you in IE, but still the old code in this link

domedia
11-18-2009, 02:30 PM
WotNow, you can just 'view source' on that page to verify that you have not uploaded any changes.

WotNow
11-19-2009, 11:48 PM
Hi thanks for your interest in my problem. I have uploaded changes. http://www.kimberleywebdesign.com.au/CoolChange/index.html

Gentleone - I copied the code you gave me. I have finally heard back from the developer and this is what he said:

Again, sorry about the delay.. I did some research, and honestly I'm not sure what's happening and why the Flash slideshow shows up on top of the panel. All I could find while searching was people saying those issues are usually related to the z-index (I checked your CSS and you got that right)... Really, the z-index is what I would've done to fix it... I think it may have something to do the the values you put for the z-index properties though.

You have a z-index: 1 for the slideshow and a z-index: 2 for both the trigger button and the panel. Try changing those values to something greater like:

#slideshow { z-index: 100; }
.panel { z-index: 500; }
a.trigger{ z-index: 1000; }

I have implemented those changes as well. If I embedded the flashplayer as a swf object would that make any difference? I still havent got my head around how to do that yet.

Sorry about all this but it is a bit embarrassing as the client is the only one who is having this issue on her laptop with IE. It looks perfect on my IE, safari and Firefox. I was even thinking that if I changed the width in the .panel in the css, maybe made it narrower and longer?

gentleone
11-20-2009, 05:52 AM
In that link what I send you, there it says that this must work... it's the only solution for this. I saw in your stylesheet indeed that you also have a z-index on #slideshow, but did you try it without that z-index at all?

That the .a.trigger has to be on top of .panel that is right, but try it without the #slideshow z-index.

domedia
11-20-2009, 01:56 PM
Hmm I think I'm repeating myself here :)
All you need to do is add the wmode to transparent, which you have not done yet. You're digging yourself into a hole if you think z-index can fix this for you.

Right now you've added the wmode ONLY inside your NOSCRIPT tags, which is only rendered by browsers without JavaScript. Since the menu layer won't even come out without JavaScript, it really doesn't matter.

ok, I'll round up by summarizing :)
1. Z-index will not let you put stuff on top of flash objects.
2. To do so you need to set wmode to transparent.

gentleone, I do this all the time. I can guarantee it even ;)

gentleone
11-20-2009, 03:27 PM
Domedia, I know exactly what you're talking about. You made that clear earlier in this thread. :) And I found that useful link for her which also explains about wmode=transparent.

Those z-indexes I'm talking about is from the sliding panel which she implemented. The developer put them there, because otherwise the button (.atrigger) would not be on top of the sliding panel (.panel).

When I looked at the source today I saw she made the necessary changes in the flash script, but when I tested it in IE7 the Flash movie was still on top of the panel.

So I looked in her stylesheet and there I saw that she still had a z-index on the div #slideshow which holds the Flash movie. So thats why I recommended her to remove that z-index. That's all! ;)

domedia
11-20-2009, 04:23 PM
When I looked at the source today I saw she made the necessary changes in the flash script, but when I tested it in IE7 the Flash movie was still on top of the panel.
The change is only done in the tags inside the NOSCRIPT tag.
Until the wmode is added to people that read the JS script, this will not work.

gentleone
11-21-2009, 07:37 AM
Alright... I was not aware of that :)
So she has to add it like this too in the AC_FL_RunContent?

'wmode','transparent',

WotNow
11-21-2009, 01:24 PM
Hi thanks to both of you for your help. Domedia I didnt realise you had to put wmode=transparent somewhere else. I thought you were referring to the <param name="wmode" value="transparent" />. I am assuming it goes here:


<div id="slideshow">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','502','heigh t','352','title','Cool Change Gallery of Stockists','src','slideshow/slideshow','quality','wmode','transparent','high', 'pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','base ','.','movie', 'slideshow/slideshow' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="502" height="352" title="Cool Change Gallery of Stockists">
<param name="movie" value="slideshow/slideshow.swf" />
<param name="quality" value="high" />
<param name="base" value="." />
<param name="wmode" value="transparent" />
<embed src="slideshow/slideshow.swf" wmode="transparent" width="502" height="352" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" base="."></embed>
</object>
</noscript>
</div>
<!--end of slideshow-->

WotNow
11-22-2009, 08:32 AM
Hi again to Domedia and Gentle One regarding the above.

My deadline with this is tommorrow morning, so would you mind explaining where the wmode goes, please.

gentleone
11-22-2009, 09:19 AM
Yes, it also goes there where you have it now above in the AC_FL_RunContent.

WotNow
11-22-2009, 09:41 AM
Ok well thats where I put it and client says still not overlaying. Yikes time is running out, such a pity, its a really cool add on. Do you think I should add 'wmode and transparent' after slideshow and before quality?

AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','502','heigh t','352','title','Cool Change Gallery of Stockists','src','wmode','transparent','slideshow/slideshow','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','base ','.','movie','slideshow/slideshow' ); //end AC code

gentleone
11-22-2009, 09:50 AM
I see where you went wrong. You've added it in between 'scr' and 'slideshow/slideshow'. They belong together, so don't break them. Put 'wmode','transparent' after 'slideshow/slideshow'.

Btw... post your code in between the code or html tags. The post doesn't break out of the box then.

WotNow
11-22-2009, 11:40 PM
Thanks, am writing to client now to see if all is well. Sorry about not posting code properly. I think its going to work now, fingers crossed, lol.

gentleone
11-23-2009, 10:08 AM
Checked IE7 & IE8... problem solved!

WotNow
11-28-2009, 01:12 PM
Thanks so much, I cant tell you how much your help has been appreciated. Site is working perfectly and made it by the deadline.

domedia
11-28-2009, 08:02 PM
Site is working perfectly and made it by the deadline. Love when that happens. Not saying it's hard, but sometimes you get stumped, either by something technical, or scope creep/client dragging their feet. 8)