I have a simple HTML5 page that I’m building to figure some things out with sliders. They seem to be fine in the latest versions of Chrome (13+) and Firefox (4+). However, IE9 is giving me the following message:
“Internet Explorer restricted this webpage from running scripts or ActiveX controls.”
Before I hit “Allow Blocked Content”, the sliders do now show up. After I hit allow, they work just fine.
Any idea’s why IE is having problems?
Below is the code for the page:
<!DOCTYPE html>
<html>
<head>
<script src="http://www.frequency-decoder.com/demo/fd-slider/js/fd-slider.js"></script>
<link rel="stylesheet" type="text/css" media="screen, projection" href="http://www.frequency-decoder.com/demo/fd-slider/css/fd-slider.css" />
<link rel="stylesheet" type="text/css" media="screen, projection" href="http://www.frequency-decoder.com/demo/fd-slider/css/demo.css" />
</head>
<body>
<p>
The following slider has the “forceValue” parameter set to TRUE, which
forces the associated text input to show a valid value.
</p>
<label for="inputTest6" id="inputTest6Label">
Range: 1 to 5 in steps of 1
</label>
<p>
<input name="inputTest6" id="inputTest6" type="text" title="Range: 1 to 5 in steps of 1" value="2" maxlength="6" />
</p>
<script>
fdSlider.createSlider({
// Associate an input
inp:document.getElementById("inputTest6"),
// Declare a step
step:1,
// Declare a maxStep
maxStep:1,
// Min value
min:1,
// Max value
max:5,
// Use the "tween to click point" animation
animation:"tween",
// Force the associated input to have a valid value
forceValue:true
});
</script>
<p>
The following slider has been associated with a <code><select></code>.
</p>
<label for="selectTest1" id="selectTest1Label">
Select List with five options
</label>
<p>
<select name="selectTest1" id="selectTest1">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4" selected>Four</option>
<option value="5">Five</option>
</select>
</p>
<script>
fdSlider.createSlider({
// Associate a select list
inp:document.getElementById("selectTest1"),
// Use the tween animation
animation:"tween",
// Keep the form element, in this case a select list, visible
hideInput:false,
// Give it the className "v-s2" which will make the slider 160px in height
classNames:"v-s2"
});
</script>
</body>
</html>
Did you try loading the script from the same domain as the page?