Skip navigation
Currently Being Moderated

Spry Widget Wont Load JS to Browser?!?

Jan 15, 2013 11:09 PM

Tags: #spry #loading #widget

I have a Spry slide show widget on my website. I have it linked to the root folder and also in a folder for orginazaion reasons. When the page loads I get a lot of JS errors. If I open the file offline it works fine but when uploaded to the server it wont load the JS. I have checked all the links and they are okay. I can even follow the links and they open up the script. Dreamweaver added the JS files so im asuming that the JS codes are correct. The 2 links are http://tylerdickersondesign.com/classic/classic.html & http://tylerdickersondesign.com/classic.html. This is so frustrating!

 

Here is the my HTML code:

 

<!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>

<link rel="icon" type="image/ico" href="http://www.tylerdickersondesign.com/images/favicon.ico">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Tyler Dickerson Design</title>

<link href="classic.css" rel="stylesheet" type="text/css" />

<link href="Spry-UI-1.7/css/ImageSlideShow/basicFS/basic_fs.css" rel="stylesheet" type="text/css" />

<script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>

<script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>

<script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>

<script src="Spry-UI-1.7/includes/SpryPanelSelector.js" type="text/javascript"></script>

<script src="Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>

<script src="Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>

<script src="Spry-UI-1.7/includes/SprySliderPanels.js" type="text/javascript"></script>

<script src="Spry-UI-1.7/includes/SpryFilmStrip.js" type="text/javascript"></script>

<script src="Spry-UI-1.7/includes/SpryImageLoader.js" type="text/javascript"></script>

<script src="Spry-UI-1.7/includes/SpryImageSlideShow.js" type="text/javascript"></script>

<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryThumbnailFilmStr ipPlugin.js" type="text/javascript"></script>

<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryTitleSliderPlugi n.js" type="text/javascript"></script>

<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin .js" type="text/javascript"></script>

<style type="text/css">

/* BeginOAWidget_Instance_2141543: #Tyler */

 

#Tyler {

    width: 650px;

    margin: 24px 0px 0px 0px;

    border: solid 1px #000000;

    background-color: #717c96;

    padding-top: 10px;

}

 

#Tyler .ISSName {

    top: -24px;

    font-family: Arial, Helvetica, sans-serif;

    font-weight: normal;

    font-size: 18px;

    text-transform: none;

    color: #000000;

}

 

#Tyler .ISSSlideTitle {

    top: -18px;

    font-family: Arial, Helvetica, sans-serif;

    font-weight: bold;

    font-size: 12px;

    overflow: hidden;

    color: #000000;

    text-transform: none;

}

 

#Tyler .ISSClip {

    height: 400px;

    margin: 0 10px 10px 10px;

    border: solid 1px #333333;

    background-color: #ffffff;

}

 

#Tyler .ISSControls {

    top: 11px;

    height: 400px;

}

 

#Tyler .FilmStrip {

    height: 80px;

    background-color: #2a3a5b;

}

 

#Tyler .FilmStripPreviousButton, #Tyler .FilmStripNextButton {

    width: 25px;

    height: 80px;

}

 

#Tyler .FilmStripTrack {

    height: 80px;

}

 

#Tyler .FilmStripContainer {

    height: 80px;

}

 

#Tyler .FilmStripPanel {

    height: 80px;

    padding-left: 10px;

    margin-right: 0px;

}

 

#Tyler .FilmStripPanel .ISSSlideLink {

    margin-top: 10px;

    border: solid 1px #2a3a5b;

    background-color: #2a3a5b;

}

 

#Tyler .FilmStripPanel .ISSSlideLinkRight {

    border: solid 1px #404f6b;

    width: 126px;

    height: 50px;

    margin: 4px 4px 4px 4px;

}

 

#Tyler .FilmStripCurrentPanel .ISSSlideLink {

    background-color: #59647d;

    border-color: #59647d;

}

 

#Tyler .FilmStripCurrentPanel .ISSSlideLinkRight {

    border-color: #404f6b;

}

 

/* EndOAWidget_Instance_2141543 */

</style>

<script type="text/xml">

<!--

<oa:widgets>

  <oa:widget wid="2141543" binding="#Tyler" />

</oa:widgets>

-->

</script>

</head>

 

<body>

 

<div class="container">

  <div class="header"><a href="http://tylerdickersondesign.com"><img src="images2/l2.png" alt="logo" /></a>

    <!-- end .header --></div>

    <float>

    <a href="http://www.facebook.com/TylerDickersonDesign"><img src="images2/ft.png"/></a>

    </float>

 

  <div class="sidebar1">

    <ul class="nav">

      <li></li>

      <li></li>

      <li><a href="http://tylerdickersondesign.com/">Home</a></li>

      <li><a href="#">About</a></li>

      <li><a href="#">Services</a></li>

      <li><a href="http://tylerdickersondesign.com/contact.html">Contact</a></li>

    </ul>

 

 

  <!-- end .sidebar1 --></div>

  <div class="content">

    <table width="90%" border="1" cellspacing="0" cellpadding="5">

      <tr>

        <th scope="col"><center>

          <ul id="Tyler" title="">

            <li><a href="images2/1.jpg"><img src="images2/1t.jpg" alt="photos-1.jpg" /></a></li>

            <li><a href="images2/2.jpg"><img src="images2/2t.jpg" alt="photos-10.jpg" /></a></li>

            <li><a href="images2/3.jpg"><img src="images2/3t.jpg" alt="photos-11.jpg" /></a></li>

            <li><a href="images2/4.jpg"><img src="images2/4t.jpg" alt="photos-12.jpg" /></a>

          </ul>

          <script type="text/javascript">

// BeginOAWidget_Instance_2141543: #Tyler

 

var Tyler = new Spry.Widget.ImageSlideShow("#Tyler", {

    widgetID: "Tyler",

    widgetClass: "BasicSlideShowFS",

    injectionType: "replace",

    autoPlay: true,

    displayInterval: 3000,

    transitionDuration: 2000,

    componentOrder: ["name", "title", "view", "controls", "links"],

    sliceMap: { BasicSlideShowFS: "3slice", ISSSlideLink: "3slice" },

    plugIns: [ Spry.Widget.ImageSlideShow.ThumbnailFilmStripPlugin, Spry.Widget.ImageSlideShow.PanAndZoomPlugin ],

    TFSP: { pageIncrement: 4, wraparound: true }

});

// EndOAWidget_Instance_2141543

          </script>

        </center>

<p><br />

          </p>

          <h1>Graphic Design</h1>

          <p>Welcome to Tyler Dickerson Design. We take pride in our commitment to the highest degree of excellence in graphic design, web design, and photography. Our goal is to provide each and every client with more than they imagined in terms of design and more than they have experienced in regard to customer service, while at the same time staying within each individual budget we are working with. We offer the highest quality of design that will take your company and clients to the next level. We are committed to achieving excellence. When you hire us as your creative designer, you have taken the first important step to a new way of doing business. Tyler Dickerson Design is a proud, experienced artist of Graphic Design, Web Design, and Photography. Our expertise-based knowledge of marketing, advertising, promotion, logo development, print production processes, and photography are unmatched. Select Tyler Dickerson Design to receive the highest level of personal attention and dedication to detail. We are the creative designers that stand for quality, uniqueness and value. We are quick, flexible, and great listeners.</p>

          <h2>Web Design</h2>

          <p>As your web designer it is our goal to develop elegant and affordable web solutions that enable small to large businesses to establish visibility online, increase sales, and improve productivity. Tyler Dickerson Design provides high-quality, professional web design and online marketing services to small businesses and non-profits at prices that fit their budgets. We work extremely hard to keep prices affordable for our clients, while giving them access to the same web site and marketing services that have always been available to large companies with big budgets.</p>

          <h3>Photography</h3>

          <p>Tyler Dickerson Design explores the connection between the eye, the camera, and the soul by raising the growth of artistic vision and technical knowledge. We strive to capture and deliver the highest quality photographs for our clients, while focusing on the genuine moments of life that are often fleeting and quickly forgotten. We promise to give the maximum level of service to each client, while respecting individual needs. Our hope is to develop a personal connection that supports an ongoing and long-lasting working relationship. </p>

          <p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>

          <p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>

          <h4>Marketing Materials</h4>

          <p>Tyler Dickerson Design uses the highest quality materials. We take pride in our work and want our clients to be 100% satisfied with their experience with us. Give us a chance to astonish you. </p></th>

      </tr>

 

 

    </table>

    <h1> </h1>

  <!-- end .content --></div><br />

</wrap>

  <div class="footer">

    <p><center><small>© 2013 Tyler Dickerson Design. All Rights Reserved.</center></p>

    <!-- end .footer --></div>

  <!-- end .container --></div>

</body>

</html>

 

 

 

Thanks guys!

 
Replies

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points