javascript not working in IE (8)

Forum Moderators: open

Message Too Old, No Replies

javascript not working in IE (8)

javascript, IE

sydneycraig

12:38 am on Feb 22, 2011 (gmt 0)

following code having issues in IE. works OK in firefox. bsically a jquery based, navigation and a content slider.this code is down the bottom of the <body>

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="js/query.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true
});
});
</script>

<script type="text/javascript">
$(function() {
$("#1").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {

}
});
});
</script>

</body>
</html>

Fotiman

1:58 am on Feb 22, 2011 (gmt 0)

Welcome to WebmasterWorld. Can you elaborate on what the issue is that you are seeing with IE?

sydneycraig

4:08 am on Feb 22, 2011 (gmt 0)

hey, sorry i realised i had not posted enough info then got distracted!

issue is that the lavalamp on the navigation is not functioning on this one page that also has the easyslider added. lavalamp working on other pages fine just the addidion of the easyslider breaks it...no movement on the navigation

sydneycraig

9:53 am on Feb 22, 2011 (gmt 0)

actually not an IE problem but browser wide...

Fotiman

1:06 pm on Feb 22, 2011 (gmt 0)

The first thing I notice is that you're trying to include 2 different versions of jQuery, so I wonder if that is causing part of the problem. Is one or the other of these dependent on jQuery 1.2.3? If not, I would start by removing this line:

<script type="text/javascript" src="js/jquery-1.2.3.min.js"></script>

sydneycraig

10:29 pm on Feb 22, 2011 (gmt 0)

yes, i already removed that but no joy.

daveVk

11:20 am on Feb 23, 2011 (gmt 0)

sydneycraig

12:01 pm on Feb 23, 2011 (gmt 0)

that seems to break both scripts!

Fotiman

2:00 pm on Feb 23, 2011 (gmt 0)

Fotiman

2:43 pm on Feb 23, 2011 (gmt 0)

I put together a quick test case which seems to work for me:



<!DOCTYPE html>
<html>
<head>
<style>
/* LavaLamp */
#menu {
  list-style: none;
  margin: 5px;
  border: 1px solid #333;
  padding: 10px;
  overflow: auto;
}
#menu li {
  margin: 3px 5px;
  padding: 5px 10px 4px;
  float: left;
  background-color: #aaa;
}
#menu span {
  position: relative;
  z-index: 5;
}
#menu li.backLava {
  position: absolute;
  z-index: 3;
  background-color: #fc0;
  border: 2px solid brown;
}
/* Easy Slider */
#slider ul,
#slider li {
  margin:0;
  padding:0;
  list-style:none;
}
#slider li {
  width: 696px;
  height: 241px;
  overflow:hidden;
}
/* numeric controls */
#controls{
  margin: 1em 0;
  padding: 0;
  height: 28px;
}
#controls li{
  margin: 0 10px 0 0; 
  padding: 0;
  float: left;
  list-style: none;
  height: 28px;
  line-height: 28px;
}
#controls li a{
  float: left;
  height: 28px;
  line-height: 28px;
  border: 1px solid #ccc;
  background: #DAF3F8;
  color: #555;
  padding: 0 10px;
  text-decoration: none;
}
#controls li.current a {
  background:#5DC9E1;
  color:#fff;
}
#controls li a:focus {
  outline:none;
}
/* // Easy Slider */
</style>
<title>jQuery LavaLamp Samples</title>
</head>
<body>
<div id="slider">
  <ul>
    <li><a href="#"><img src="images/01.jpg" alt="Alt Text 1" /></a></li>
    <li><a href="#"><img src="images/02.jpg" alt="Alt Text 2" /></a></li>
    <li><a href="#"><img src="images/03.jpg" alt="Alt Text 3" /></a></li>
  </ul>
</div>
<ul id="menu">
  <li><span>Fun</span></li>
  <li><span>with</span></li>
  <li><span>jQuery</span></li>
  <li><span>LavaLamp</span></li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/js/jquery.lavalamp-1.3.5.js"></script>
<script type="text/javascript" src="/js/easySlider1.7.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("#slider").easySlider({ 
    auto: true, 
    continuous: true, 
    numeric: true 
  }); 
});
</script> 
<script type="text/javascript">
$(function() {
  $('ul#menu').lavaLamp();
});
</script>
</body>
</html>

sydneycraig

10:45 pm on Feb 23, 2011 (gmt 0)

doh!
thanks so much..wasnt even looking for a typo there.

cheers