I have created an html page to display in the Page Viewer Webpart in SP which contains a bit of jQuery. For whatever reason, it will not render in an IE Browser - it just shows a blank white page if I access it directly from the library it is hosted in (however, if I go to edit said HTML page all components display in SP Designer). I also tested the coding in a jFiddle, and it works fine in that as well. The codes are below (CSS, HTML, & jQuery) without specific links for security reasons.
Thanks for any suggestions; I'm sure it's some small detail I am overlooking.
CSS stylesheet
/* SLIDER CSS */
.slider {
margin: 10px 0;
width: 1100px;
height: 419px;
position: relative;
overflow: hidden;
background-image:url(/img/back.png);
background-repeat: repeat-x;
background:#fff;
padding: 20px;
}
.slider li {
display: none;
position: absolute;
top: 20;
}
/* PAGE STYLES */
.body {
font-family: arial;
background: #fff;
font-size: 12px;
color: dark gray;
text-align:left;
}
jQuery
jQuery(function($) {
// settings
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 4000; // 4 seconds
function slides(){
return $slider.find($slide);
}
slides().fadeOut();
// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);
// auto scroll
$interval = setInterval(
function(){
var $i = $slider.find($slide + '.active').index();
slides().eq($i).removeClass('active');
slides().eq($i).fadeOut($transition_time);
if (slides().length == $i + 1) $i = -1; // loop to start
slides().eq($i + 1).fadeIn($transition_time);
slides().eq($i + 1).addClass('active');
}
, $transition_time + $time_between_slides
);
});
HTML
<!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>
<script type="text/javascript" src="/js/jquery-1.9.1.min.js" />
<script type="text/javascript" src="/js/slider.js" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
</head>
<body>
<ul class="slider">
<li> BLAH BLAH WORDS <img src="/img/courselvls_graph.png" align="right"/> </li>
<li> Deediii daaa dummm </li>
</ul>
All the files are hosted in the site assets doc library on the site.
Thanks for any suggestions; I'm sure it's some small detail I am overlooking.