PDA

View Full Version : Ultimate Fade In Slideshow v2.0 Firefox and Internet Explorer Problems



zm15
09-28-2009, 01:41 PM
1) Script Title: Ultimate Fade In Slideshow v2.0

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: This script seems to work fine for me in IE 7, but not in firefox. If you open the link in both, and mouse over the large changing pictures - not the menus on the left, you will notice the small black line on the bottom of the pictures with a text description - This only works in IE, and not in firefox. I'm trying to figure out why, any thoughts?

The link: http://landmarkmg.com/beta/homepage/goal/WORKING_EXAMPLE.html

MultimediaGuy
09-28-2009, 02:23 PM
The problem is the CSS tag you have - it seems to be conflicting -


#fadeshow1{
position:relative;
left:90px;
z-index: -1;
border: 1px solid;
}


When I comment this out - it works in FF

jscheuer1
09-28-2009, 02:38 PM
That's right. Particularly the z-index. With a z-index less than 0, there is no hover registered when the mouse moves over the images. Just get rid of it:


#fadeshow1{
position:relative;
left:90px;
z-index: -1;
border: 1px solid;
}

so you'd have:


#fadeshow1{
position:relative;
left:90px;
border: 1px solid;
}

zm15
09-28-2009, 02:42 PM
yea, hmm i discovered that too, but then the menu's go behind the pictures, when i delete the z-index (in firefox).
Any thoughts on how to remedy that?

jscheuer1
09-28-2009, 02:54 PM
Instead of lowering the z-index of the slideshow, which effectively puts it underneath the the body element, raise the z-indexes of the menus, ex:


#main, #main * {
position: relative;
z-index: 10000;
}

Notes: This is in addition to your other existing styles for #main. You may not need to use as intense a style as this, but it certainly takes care of the issue. As long as it doesn't cause any other problems, it's fine. If there is a problem let me know.

zm15
09-28-2009, 02:59 PM
Instead of lowering the z-index of the slideshow, which effectively puts it underneath the the body element, raise the z-indexes of the menus, ex:


#main, #main * {
position: relative;
z-index: 10000;
}



BAM! it worked! Thanks a million!

zm15
09-28-2009, 03:06 PM
#main, #main * {
position: relative;
z-index: 10000;
}



so real quick, i'm kind of a noob here, what is going on in this code?
looks like anything inside the 'main' div is affected, but why not put this insude the original 'main' div css?

jscheuer1
09-28-2009, 07:39 PM
I placed it separate, because you are correct - it affects the div with id 'main' and all its children. We probably don't want the children to be assigned other properties of main like float:left; and width: 90px;.

Now as to what it does - it positions them all relatively - absolute, fixed, or relative position is required for a z-index to take effect, but fixed and absolute would probably have undesirable effects. I chose to set the container and all its children because this is required by some browsers, or at least the child and its parent if you catch my drift, this ensures that, though if you wanted to write out more styles you might be able to be more precise/selective - this is only required if the approach I've used causes a problem, usually it doesn't. 10000 is a very high z-index but may be required to overcome some of the z-indexes of the images in the show which can go at least as high as 1001, perhaps higher. In case you don't know, z-index governs where an element appears in relation to others when they are both in the same spot - its z axis 'stacking'.

zm15
09-28-2009, 08:58 PM
Thanks for the great explanation!

Now for a fun question - i've been pulling my hair out all day trying to get this one to work. How can i make the menu boxes and the picture box have rounded corners?

I've updated the page:
http://landmarkmg.com/beta/homepage/goal/WORKING_EXAMPLE.html

I've been trying to use jQuery Rounded Corners, but it is conflicting with the mootools driven menus.

jscheuer1
09-28-2009, 09:19 PM
This is really a separate issue. I will point you in what I consider to be the right direction (a css only solution), but if you want more help, please open a new thread in either the css or javascript forums. Feel free to post here with a link to your new thread so I will know to at least have a look at it, though there certainly are others who can help in such matters. However, if you choose to use javascript for this - even if you don't - it would be a good idea to pick one and only one script library for scripts on your site.

That said, I would Google:

rounded corners css

I have used:

http://www.spiffycorners.com/

and one other one I cannot seem to locate at the moment. But the techniques for these (they are so popular) keep proliferating. So it is always a good idea when implementing this to have a look at whatever the latest techniques may be.

mafa
05-27-2010, 02:13 AM
The problem is the CSS tag you have - it seems to be conflicting -


#fadeshow1{
position:relative;
left:90px;
z-index: -1;
border: 1px solid;
}


When I comment this out - it works in FF

Greetings

Im having the same problem on running this script to work on firefox, im new with javascripts and ive followed the instructions correctly with no progress...i would like to know where to change the above code within the site...is it changed on the fadeslideshow.js file? and ive tried looking for the above code within the js file but i cant find it.
My site is http://www.nafcoc.org.za the slideshow works fine on ie but with firefox it doesnt work.
DD url: http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

can anyone please kindly help.

Regards
Mafa

jscheuer1
05-27-2010, 06:54 AM
You are not having the same problem. Your menu doesn't conflict spatially with the the slide show, rather there appears to be a script conflict of some kind on the page.

I suspect one of your other scripts is in jQuery extreme noConflict mode, and that is preventing the slide show script from working. No matter, we can get it working by opening fadeslideshow.js in a plain text only editor like NotePad. Do a global search and replace on:


$(

replacing all instances of it with:


jQuery(

That will fix it. Works here in Firefox in a local mock up of your page.

mafa
05-27-2010, 08:54 PM
Thank you very much jscheuer1's.....May god bless you and give u more wisdom!

mafa
06-28-2010, 11:00 PM
You are not having the same problem. Your menu doesn't conflict spatially with the the slide show, rather there appears to be a script conflict of some kind on the page.

I suspect one of your other scripts is in jQuery extreme noConflict mode, and that is preventing the slide show script from working. No matter, we can get it working by opening fadeslideshow.js in a plain text only editor like NotePad. Do a global search and replace on:


$(

replacing all instances of it with:


jQuery(

That will fix it. Works here in Firefox in a local mock up of your page.
Hi jscheuer1
i don't see what am i really missing here, with my first website the script worked fine by following your instructions but im working on another website and it still does the same thing not showing on Firefox but works fine on IE, my site is www.vplay.co.za can you please help out. THANKS

mafa
06-29-2010, 07:07 AM
Greetings

i'm working on the ultimate fadeinslideshow
i don't see what am i really missing here, with my first website the script worked fine by following your instructions but im working on another website and it still does the same thing not showing on Firefox but works fine on IE, my site is www.vplay.co.za can you please help out. THANKS

jscheuer1
06-29-2010, 08:20 AM
The main problem with both of the pages (the one we already fixed, and this one) is that there are so many scripts.

On the current page, you have two choices I can see. The first may have unintended consequences upon your other scripts. But it is the better of the two if it works out OK with those other scripts. To try it out, get rid of:


<script type="text/javascript" src="/misc/jquery.js"></script>

And move:


<script type="text/javascript" src="http://www.vplay.co.za/jquery.min.js"></script>

up to take its place, so you will have:


. . . xt/css" media="all">@import "/modules/system/defaults.css";</style>
<style type="text/css" media="all">@import "/modules/system/system.css";</style>
<style type="text/css" media="all">@import "/modules/user/user.css";</style>
<style type="text/css" media="all">@import "/themes/drupal_pwc016_business/style.css";</style>
<script type="text/javascript" src="http://www.vplay.co.za/jquery.min.js"></script>
<script type="text/javascript" src="/misc/drupal.js"></script>
<script type="text/javascript" src="/themes/drupal_pwc016_business/script.js"></script>
<noscript><a href="http://hostermonster.com" title="Unlimited Web Hosting" rel="follow">Unlimited Web Hosting</a><a href="http://prowebcreative.com" title="Free Drupal Themes" rel="follow">Free Drupal Themes</a><a href="http://bulanpoker.com" title="Deposit Poker" rel="follow">Deposit Poker</a><a href="http://freethemesdrupal.com" title="Free Drupal Themes" rel="follow">Free Drupal Themes</a></noscript>

<!--[if IE 6]><link rel="stylesheet" href="/themes/drupal_pwc016_business/style.ie6.css" type="text/css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="/themes/drupal_pwc016_business/style.ie7.css" type="text/css" media="screen" /><![endif]-->

<script type="text/javascript" src="http://www.vplay.co.za/fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay int . . .

If that doesn't work out (it will fix the slide show) for your other scripts, put it back the way it was and edit the on page portion of the slide show script to look like so:


<script type="text/javascript">
jQuery(window).load(function(){
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [890, 225], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://vplay.co.za/Header.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://vplay.co.za/Header2.jpg", "http://#", "_new", "Some day I'd like to explore these caves!"],
["http://vplay.co.za/Header3.jpg"],
["http://vplay.co.za/Header4.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
});
});
</script>

mafa
06-29-2010, 08:56 AM
:) God Bless

mafa
08-01-2010, 10:41 PM
Greetings
Can you please help me out on my project, ever since ive inserted the Fade slideshow script on my site, collapsible menus are not working any more, what could be the problem? www.nafcoc.org.za