Link to home
Start Free TrialLog in
Avatar of 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" "">
<html xmlns="">
    <script type="text/javascript" src="style/jquery-1.4.3.min.js"></script>
    <script type="text/javascript">
		$(function() {
			var slider_one = $("#slider");
			$("#slider").animate({ left: slider_one.css('left') }, 500, "swing");
			setInterval("rotate()", 3000);

		function rotate() {				
			var slider_current = $("#slider div.current");
			var slider_next =;
			if (slider_next.length == 0)
				slider_next = $("#slider div:first");							
			$("#slider").animate({ left: slider_current.css('left') }, 500, "swing",
				function() {				
	<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;	

    <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>            

Open in new window

Avatar of wdfdo1986
Flag of Sri Lanka image

try using the function setAttribute
Avatar of mydropz

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