1 reply [Last post]
kasbolt
kasbolt's picture
Offline
newbie
Last seen: 9 years 37 weeks ago
Timezone: GMT+10
Joined: 2011-08-31
Posts: 4
Points: 6

Hi

I am using a combination of jquery and css to hover over a button and have it expand out to reveal text and then close again when the mouse is moved away. In Firefox it works perfectly but in safari, the button appears 3/4 quarters down in the div. I can put a style top of -568px but would rather use one rule that fits all browsers instead of putting in a rule just for safari. I have tried the position: relative too in the #content-holder ul li and/or #content-holder ul li a style but that hasn't work either. Any suggestions would be most appreciated!

<!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=UTF-8" />
<title>Untitled Document</title>
 
<script type="text/javascript" src="includes/mousewheel/jquery-1.2.1.js"></script>
<script type="text/javascript" src="includes/mousewheel/jquery.dimensions.js"></script>
<script type="text/javascript" src="includes/mousewheel/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="includes/mousewheel/jScrollHorizontalPane.js"></script>
<script type="text/javascript">
 
$(function() {
	var originalSizes = new Array();
	$('#content-holder').jScrollHorizontalPane({showArrows:false});
 
	$('.scroll-to').bind('click',function(){
		$('#content-holder')[0].scrollTo(75);
		return false;
	});
});
 
</script>
 
<script type="text/javascript">
var currheight = document.documentElement.clientHeight;
window.onresize = function(){
    if(currheight != document.documentElement.clientHeight) {
        location.replace(location.href);
    }    
}
</script>
 
 
<script src="includes/easing/jquery.easing.1.3.js"></script>
<script src="includes/easing/jquery.easing.compatibility.js"></script>
 
 
<script>
$(function(){
 
    $("#content-holder ul li a").each(function(){
	$(this).hover(function(){
		$(this).animate({width: "150px"}, {queue:false, duration:450});
	$("#content-holder ul li a.expand").css("background-image","url(images/Text_Expander_off.jpg)");
 
      },function() {
		  $(this).animate({width: "15px"}, {queue:false, duration:450});
		  	$("#content-holder ul li a.expand").css("background-image","url(images/Text_Expander_on.jpg)");
	  });
    });
});
 
</script>
 
 <style>
 
 #container {
	position: relative;
	margin-left: 0px;
	margin-top: 8%;
	overflow: visible;
	height: 640px;
	z-index: 1;
	width: 100%;
}
 
 
 .jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	  height: 650px; 
	  width: 100%;
      z-index: 1;
}
 
.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	left: 0;
	bottom: 0;
	width: 100%;
    height: 40px;
	border-top: 1px dashed #b3b3b3;}
 
.jScrollIntervalTrack { 
	position: absolute;
}
 
 
.jScrollPaneDrag {
	position: absolute;
	cursor: pointer;
	background-image:url(images/move_me.gif);
	background-repeat: none;
	height: 40px;
	width: 80px;
	border: 0px;
	top: -12px;
	background-color:#FFF;
}
 
 
 .scroll-pane {
	width: 100%;
	float: left;
	padding: 0;
}
 
   #content-holder {
     width: 9660px;
     height: 600px;
    }
 
 
 #content-holder ul{
	list-style: none;
	padding: 0px;
}
 
 #content-holder ul li{
	list-style:none;
	display:inline;
	white-space: nowrap;
	padding: 0px;
}
 #content-holder ul li a{
	position:relative;
    display: inline-block!important;
	overflow: hidden;
	height: 600px;
	width: 15px;
}
 #content-holder ul li a p {
	font-family: Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	line-height: 13pt;
	padding: 20px;
}
 
 #content-holder ul li a.expand {
	background-image: url(images/Text_Expander_on.jpg);
	background-repeat: no-repeat;
	border: 0px;
}
 </style>
 
</head>
 
<body>
 
<div id="container">
 
<div class="jScrollPaneContainer">
  <div id="content-holder" class="scroll-pane">
<ul>
<li><img src="images/brand/098_EagleImage.jpg" width="690" height="600" alt="Eagle" /></li><li><img src="images/brand/109_ChannelDash.jpg" width="690" height="600" alt="ChannelDash" /></li><li><a href="#" title="" class="expand"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum lacinia sollicitudin. Curabitur at quam sem. Donec porta varius erat.</p></a></li><li><img src="images/brand/113_Laccam.jpg" width="690" height="600" alt="Laccam" /></li><li><img src="images/brand/105_Mohini.jpg" width="690" height="600" alt="Mohini" /></li><li><a href="#" title="" class="expand"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum lacinia sollicitudin. Curabitur at quam sem. Donec porta varius erat.</p></a></li><li><img src="images/brand/MurrayLandsSigns.jpg" width="690" height="600" alt="MurrayLandsSigns" /></li><li><img src="images/brand/TarastarLogo_FA_RGB.jpg" width="690" height="600" alt="TarastarLogo_FA_RGB" /></li><li><img src="images/brand/TCM_Logo.jpg" width="690" height="600" alt="TCM_Logo"/></li><li><a href="#" title="" class="expand"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum lacinia sollicitudin. Curabitur at quam sem. Donec porta varius erat.</p></a></li><li><img src="images/brand/WEL_LogoRGB.jpg" width="690" height="600" alt="WEL_LogoRGB" /></li><li><a href="#" title="" class="expand"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum lacinia sollicitudin. Curabitur at quam sem. Donec porta varius erat.</p></a></li><li><img src="images/brand/YesItsFresh_212007_012_RGB.jpg" width="690" height="600" alt="YesItsFresh" /></li>
 
</ul>
</div>
<div class="jScrollPaneTrack"><div class="jScrollPaneDrag"></div></div></div></div>
 
</body>
</html>

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

?

Which element is the button?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference