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.

  • I would suggest you re-organize your post and re-phrase your question, as this is a bit messy. – Tiago Duarte Jun 27 '14 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 '14 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 '14 at 16:52
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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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