/    Sign up×
Community /Pin to ProfileBookmark

Jquery conflict with superfish and cycle- help

I wonder if anyone can spot the problem I have. I am not an expert when it comes to javascript.

I have 2 scripts running on the same page and these are conflicting in IE6 and IE7, but the page works in IE8. I am using cubecart and making my own skin up, so need to fix this issue as the drop down menu just will not work.

I am not sure why it is not working, hopefully someone can spot the obvious.

Here is the header of my page with the cubecart information added:

[code]

<!– BEGIN: body –>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset={VAL_ISO}” />
<title>{META_TITLE}</title>
<meta name=”description” content=”{META_DESC}” />
<meta name=”keywords” content=”{META_KEYWORDS}” />

<link href=”skins/{VAL_SKIN}/styleSheets/layout.css” rel=”stylesheet” type=”text/css” />
<link href=”skins/{VAL_SKIN}/styleSheets/style.css” rel=”stylesheet” type=”text/css” />
<link href=”skins/{VAL_SKIN}/styleSheets/superfish.css” rel=”stylesheet” type=”text/css” />
<!–[if IE]>
<link href=”skins/{VAL_SKIN}/styleSheets/ie.css” rel=”stylesheet” type=”text/css” />
<![endif]–>
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/superfish.js”></script>
<script type=”text/javascript” src=”js/jquery.cycle.all.min.js”></script>
<script type=”text/javascript”>
// initialise plugins
jQuery(function(){
jQuery(‘ul.sf-menu’).superfish();
});
</script>
<script type=”text/javascript”>
$(document).ready(function() {
$(‘.slideshow’).cycle({
fx:’fade’,
speed:1000
});
});
</script>
<script type=”text/javascript”>
var RecaptchaOptions = {
theme : ‘custom’
}
</script>
</head>
[/code]

What happens in IE6 and 7 is when you scroll over the list where the drop down should appear, it does not appear correct, the slideshow images seem to be blocking it, you can just see a faint menu that then disappears. In IE8 it works fine, so not sure what it is?

to post a comment
JavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@zimmoauthorApr 20.2011 — Can anyone help? I think this is to do with a jquery conflict, but dont know how to fix this!
Copy linkTweet thisAlerts:
@aj_nscApr 20.2011 — Sounds like a CSS z-index issue. Makes sense because <IE7 renders z-indicies different from other browsers. Easiest way to fix it is if you had a link. Code doesn't help too much unless you provide all CSS, HTML, (and JS) to be safe. But that's a huge pain in the ass and nobody will likely help you if you just post a crapload of code....sad but true.
Copy linkTweet thisAlerts:
@zimmoauthorApr 20.2011 — Hi there. If you visit this site: http://www.pole-angling.com

You can see the problem there on ie6 and ie7. I have no z-indexes at all, I did look at this yesterday and tried, but I may be doing it wrong. Site still in development.
Copy linkTweet thisAlerts:
@aj_nscApr 20.2011 — I'd say this should take care of it:

<i>
</i>#topnavcontainer { position: relative; z-index: 2; }
#slideshowhomecontainer { position: relative; z-index: 1; }


z-indicies are being applied to the photos in the jquery slider which is what's causing the problem. As long as the #topnavcontainer has a greater z-index than the #slideshowhomecontainer then the issue should be resolved in IE.
Copy linkTweet thisAlerts:
@zimmoauthorApr 20.2011 — Thanks for that. It has fixed the issue. Cant wait until nobody is using these old browsers.
×

Success!

Help @zimmo spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...