0

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.

Improve this question
3
  • I would suggest you re-organize your post and re-phrase your question, as this is a bit messy.
    – Tiago Duarte
    Jun 27, 2014 at 16:12
  • it's better! I think firebug and fiddler are your friends. you are probably having some 404s due to wrong paths, which would expain the blank page. if there is a script error, firebug or IE dev toolbar will tell you exactly where it is.
    – Tiago Duarte
    Jun 27, 2014 at 16:49
  • Ahh, I see.. I'll try playing with the links. I'm not entirely sure if that's the reason - as there is no 404 error, just a blank page. And the images and things still render in Designer, which is why I'm scratching my head.
    – Bryant
    Jun 27, 2014 at 16:52

1 Answer 1

Reset to default
0

I tried to generate same scenario, With following piece of code change I can see the text now

<!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 src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="jquery.slides.min.js"></script>
</head>

<body>
<ul class="slider">
<li> BLAH BLAH WORDS <img src="/img/courselvls_graph.png" align="right"/> </li>
<li> Deediii daaa dummm </li>
</ul>
</body>
</html>

Issue is there in your script reference, by changing it started working.. hope this hint will help!

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.