Flot, UI Slider, Renders in Chrome and Safari, but not in FF 3.6.2

Hi All,

I am being slowly driven mad by this problem. The page renders fine in Chrome and Safari, and it renders fine in Firefox when I have Firebug on. But if I turn off Firebug, the Flot plot will not render in Firefox. I had it in a simpler HTML file also, and was able to solve it by adding the $(document).ready() function. But it has not solved the problem for the present file. I'm pretty sure that it's got to do with the loop which populates the data array, but I'm not getting any error messages from any browser... Is there something I should be looking for? Is there something about Firefox's handling of the queue that would cause this?

Thanks for any help,

brokenindex

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<title>
Mouseover Plot, see x and y values, plot line equation which changes as sliders are dragged
</title>
<link type="text/css" href="css/generic.css" rel="stylesheet" />
<link type="text/css" href="css/custom-theme/jquery-ui.custom.css" rel="stylesheet" />
<link href="flot/layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js">
</script>
<script language="javascript" type="text/javascript" src="flot/jquery.flot.min.js">
</script>
<script type="text/javascript" src="js/jquery-ui.custom.min.js">
</script>
<style type="text/css">
p, h3 {
position: relative;
padding-bottom: 20px;
text-align:justify;
margin-left: auto;
margin: auto;
}
#placeholder {
position: relative;
width:350px;
height:350px;
margin-left: 10%;
margin-right: auto;
}
#slopeDiv{
position: relative;
top: -350px;
margin-left: 60%;
}
#yintDiv{
position: relative;
top: -690px;
margin-left: 70%;
}
#startForm {
position: relative;
margin-left: 20%;
margin-bottom: 20px;
width: 60%;
border-style:solid;
border-width:1px;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
</style>
</head>
<body>
<h3>
What's your <i>f(x)</i>?
</h3>
<div id="startForm">
<i>y</i> = <i>x</i>3 + 2
</div>
<p>The formula above is your starting point. Drag the sliders below to adjust the slope and y-intercept to adjust the line. Mouse over the plot to see the exact <i>x</i> and <i>y</i> coordinates of the cursor.
</p>
<div id="placeholder"></div>
<div id="formElements">
<div id="xTxt">
<p>
<i>x</i> =
</p>
</div>
<div id="yTxt">
<p>
<i>y</i> =
</p>
</div>
</div>
<div id="slopeDiv">
<p>
<label for="slope">Slope:</label>
<input type="text" id="slope" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider-slope" style="height:300px;"></div>
</div>
<div id="yintDiv">
<p>
<label for="yint"><i>y</i>-Intercept:</label>
<input type="text" id="yint" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider-yint" style="height:300px;"></div>
</div>
<script id="source" language="javascript" type="text/javascript">
/* <![CDATA[ */
alert('in script');
var j = jQuery.noConflict();
var mySlope;
var myYint;
j(document).ready(function() {
alert('document ready');
function resetPlot() {
d1 = [];
console.log('reset plot');
for (var i = -20; i < 20; i++) {
//var mySlope = j('#slope').val();
//var myYint = j('#yint').val();
mySlope = j("#slider-slope").slider('value'); //j('#slope').val();
myYint = j("#slider-yint").slider('value'); //j('#yint').val();
var myY = (i * mySlope) + myYint;
d1.push([i, myY]);
};
plotThis();
}
function placeTxt() {
var pOff = j('#placeholder').offset();
//console.log(pOff);
j('#formElements').css({
position: 'absolute',
left: pOff.left + 365,
top: pOff.top + 10
});
}
placeTxt();
// Reposition the click target any time the window is resized.
j(window).resize(function() {
placeTxt();
});
j('#placeholder').bind("plothover",
function(event, pos, item) {
j('#xTxt').html('<p><i>x</i> = ' + pos.x.toFixed(2) + '</p>');
j('#yTxt').html('<p><i>y</i> = ' + pos.y.toFixed(2) + '</p>');
j('#placeholder').mouseleave(
function() {
j('#xTxt').html('<p><i>x</i> = </p>');
j('#yTxt').html('<p><i>y</i> = </p>');
}
);
});
function plotThis() {
//console.log('plotThis()');
//alert('plotThis()');
j.plot(j("#placeholder"), [
{
data: d1,
points: {
show: false,
hoverable: false
},
lines: {
show: true,
fill: false,
hoverable: false
},
color: "#F88017"
}
], {
xaxis: {
ticks: 15,
min: -15,
max: 15
},
yaxis: {
ticks: 15,
min: -15,
max: 15
},
grid: {
backgroundColor: {
colors: ["#fff", "#eee"]
},
markings: [{
xaxis: {
from: 0,
to: 0
},
yaxis: {
from: -14,
to: 14
},
color: "#C0C0C0"
},
{
xaxis: {
from: -14,
to: 14
},
yaxis: {
from: 0,
to: 0
},
color: "#C0C0C0"
}],
hoverable: true,
autoHighlight: false
}
});
}
j("#slider-slope").slider({
orientation: "vertical",
range: "min",
min: -15,
max: 15,
value: 3,
step: 0.25,
slide: function(event, ui) {
j("#slope").val(ui.value);
resetPlot();
}
});
j("#slope").val(j("#slider-slope").slider("value"));
j("#slider-yint").slider({
orientation: "vertical",
range: "min",
min: -15,
max: 15,
value: 2,
slide: function(event, ui) {
//alert('slide');
j("#yint").val(ui.value);
resetPlot();
}
});
j("#yint").val(j("#slider-yint").slider("value"));
var d1 = [];
for (var i = -20; i < 20; i++) {
//alert('looping');
mySlope = j("#slider-slope").slider('value'); //j('#slope').val();
myYint = j("#slider-yint").slider('value'); //j('#yint').val();
var myY = (i * mySlope) + myYint;
d1.push([i, myY]);
console.log(d1);
};
plotThis();
});
/* ]]> */
</script>
</body>
</html>

Topic Participants
amygroshek
dominique.vincent

Flot, UI Slider, Renders in Chrome and Safari, but not in FF 3.6.2

Flot, UI Slider, Renders in Chrome and Safari, but not in FF 3.6.2

Topic Participants

amygroshek

dominique.vincent