Link to home
Start Free TrialLog in
Avatar of mrjljohnson
mrjljohnson

asked on

css/jquery browser compatibility

The following approach works fine in firefox and opera, but the blue bar fails to animate in safari and chrome.  It appears that safari nor chrome like getting a javascript value from
left: slider.css('left')

Open in new window

.  If you could suggest an approach that works cross browser, I would appreciate it.

<!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>
    <title>Home</title>
    <script type="text/javascript" src="style/jquery-1.4.3.min.js"></script>
    <script type="text/javascript">
		$(function() {
			var slider_one = $("#slider div.one");
			$("#slider").animate({ left: slider_one.css('left') }, 500, "swing");
			setInterval("rotate()", 3000);
		});

		function rotate() {				
			var slider_current = $("#slider div.current");
			var slider_next = slider_current.next();
			if (slider_next.length == 0)
				slider_next = $("#slider div:first");							
			
			$("#slider").animate({ left: slider_current.css('left') }, 500, "swing",
				function() {				
					slider_current.removeClass('current')
					slider_next.addClass('current')			
				});				
		}
	
	</script>
	    
	<style type="text/css">
        div#outer {
            position: relative;
            width: 980px;
            height: 500px;
            margin: auto;
            background-color: #FFF;
			border: solid 1px black;
        }
		
		#slider {
			position: absolute;
			width: 42px;
			height: 500px;
			left: 934px;
            border-left:  solid 2px white;
            border-right: solid 2px white;			
			background: #B7D7FF;	
        }				
    </style>
</head>

<body>
    <div id="outer">   
        <div id="slider">
            <div style="left: 900px" class="one"></div>
            <div style="left: 100px" class="current"></div>
            <div style="left: 850px"></div> 
            <div style="left: 200px"></div> 
            <div style="left: 800px"></div> 
            <div style="left: 300px"></div> 
            <div style="left: 750px"></div> 
            <div style="left: 400px"></div> 
            <div style="left: 700px"></div> 
            <div style="left: 500px"></div>
            <div style="left: 600px"></div>            
        </div>    
    </div> 
</body>
</html>

Open in new window

Avatar of wdfdo1986
wdfdo1986
Flag of Sri Lanka image

try using the function setAttribute
ASKER CERTIFIED SOLUTION
Avatar of mydropz
mydropz

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial