0 Replies Latest reply on Jun 3, 2010 1:29 PM by cfsetNewbie

    Ajax / Java script error, conflict in my page.

    cfsetNewbie Level 1

      Hello;

      I'm writting a simple slideshow for my web site. I'm trying to use dynamic html / ajax to accomplish this but I am getting an error in my code, and it seems to be conflicting with my navigation as well. The navigation is written in Java as well. So what I'm going to do is post my pages code from my java in the head to the java page that runs the slideshow and the css file. Maybe someone else can see where my problem is. It will work once this problem is figured out...

       

      Here is my code:

       

      Main page:

       

      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

      <head>

      <link href="../style.css" rel="stylesheet" type="text/css">
      <link href="slideStyles.css" rel="stylesheet" type="text/css" media="screen" />
      <script src="slideControls.js" type="text/javascript"></script>
      <script type="text/javascript">
      <!--

      function newImage(arg) {
      if (document.images) {
        rslt = new Image();
        rslt.src = arg;
        return rslt;
      }
      }

      function changeImages() {
      if (document.images && (preloadFlag == true)) {
        for (var i=0; i<changeImages.arguments.length; i+=2) {
         document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
        }
      }
      }

      var preloadFlag = false;
      function preloadImages() {
      if (document.images) {
        home_over = newImage("images/home-over.jpg");
        about_over = newImage("images/about-over.jpg");
        services_over = newImage("images/services-over.jpg");
        projects_over = newImage("images/projects-over.jpg");
        contact_over = newImage("images/contact-over.jpg");
        preloadFlag = true;
      }
      }

      // -->
      </script>
      </head>
      <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="preloadImages();" class="mainBody">
      <center>
      <div id="wrapper">
      <div id="mainHeader">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="50%" align="left" valign="top"><img src="../images/logo.jpg" alt="" width="296" height="120" /></td>
          <td width="50%" align="right" valign="top"><img src="../images/projectHead.gif" alt="" width="393" height="120" /></td>
        </tr>
        </table>
      </div>
      <div id="mainSpacer"></div>
      <div id="navBar" align="center">
      <a href="../index.html"
          onmouseover="window.status='home'; changeImages('home', 'images/home-over.jpg'); return true;"
          onmouseout="window.status=''; changeImages('home', 'images/home.jpg'); return true;"
          onmousedown="changeImages('home', 'images/home-over.jpg'); return true;"
          onmouseup="changeImages('home', 'images/home-over.jpg'); return true;" style="margin-right:15px;">
          <img name="home" src="../images/home.jpg" width="68" height="26" border="0" alt="Home"></a>
      <a href="../about.html"
          onmouseover="window.status='about'; changeImages('about', 'images/about-over.jpg'); return true;"
          onmouseout="window.status=''; changeImages('about', 'images/about.jpg'); return true;"
          onmousedown="changeImages('about', 'images/about-over.jpg'); return true;"
          onmouseup="changeImages('about', 'images/about-over.jpg'); return true;" style="margin-right:9px;">
          <img name="about" src="../images/about.jpg" width="87" height="26" border="0" alt="About Us"></a> 
                     
      <a href="../project.html"
          onmouseover="window.status='projects'; changeImages('projects', 'images/projects.jpg'); return true;"
          onmouseout="window.status=''; changeImages('projects', 'images/projects-over.jpg'); return true;"
          onmousedown="changeImages('projects', 'images/projects.jpg'); return true;"
          onmouseup="changeImages('projects', 'images/projects.jpg'); return true;" style="margin-right:15px;">
          <img name="projects" src="../images/projects-over.jpg" width="83" height="26" border="0" alt="projects"></a>
                     
      <a href="../service.html"
          onmouseover="window.status='services'; changeImages('services', 'images/services-over.jpg'); return true;"
          onmouseout="window.status=''; changeImages('services', 'images/services.jpg'); return true;"
          onmousedown="changeImages('services', 'images/services-over.jpg'); return true;"
          onmouseup="changeImages('services', 'images/services-over.jpg'); return true;" style="margin-right:10px;">
          <img name="services" src="../images/services.jpg" width="84" height="26" border="0" alt="Services"></a>
                     
                 <a href="../contact.asp"
                      onmouseover="window.status='contact us'; changeImages('contact_us', 'images/contact-over.jpg'); return true;"
          onmouseout="window.status=''; changeImages('contact_us', 'images/contact.jpg'); return true;"
          onmousedown="changeImages('contact_us', 'images/contact-over.jpg'); return true;"
          onmouseup="changeImages('contact_us', 'images/contact-over.jpg'); return true;">
          <img name="contact_us" src="../images/contact.jpg" width="101" height="26" border="0" alt="contact us"></a>

      </div>
      <div id="mainBody">
      <div id="cover"> </div>
      <div id="slide" onclick="hideSlide()">
      <span class="slideControl">Click To Close&otimes;</span>
      <div id="photoSlide">Loading</div>
      </div>
      <div id="photoAlbum">
      <img src="lighting/photo0.jpg" alt="Testing" onclick="showSlide(this);"/>
      <img src="lighting/photo1.jpg" alt="" onclick="showSlide(this);"/>
      <img src="lighting/photo2.jpg" alt="" border="0" onclick="showSlide(this);"/>
      <img src="lighting/photo3.jpg" alt="" border="0" onclick="showSlide(this);"/>
      <img src="lighting/photo4.jpg" alt="" border="0" onclick="showSlide(this);"/>
      <img src="lighting/photo5.jpg" alt="" border="0" onclick="showSlide(this);"/>
      <img src="lighting/photo6.jpg" alt="" border="0" onclick="showSlide(this);"/>
      <img src="lighting/photo7.jpg" alt="" border="0" onclick="showSlide(this);"/>
      <img src="lighting/photo8.jpg" alt="" border="0" onclick="showSlide(this);"/>
      <img src="lighting/photo9.jpg" alt="" border="0" onclick="showSlide(this);"/>
      <img src="lighting/photo10.jpg" alt="" border="0" onclick="showSlide(this);"/>
      <img src="lighting/photo11.jpg" alt="" border="0" onclick="showSlide(this);"/>
      <img src="lighting/photo12.jpg" alt="" border="0" onclick="showSlide(this);"/>
      <img src="lighting/photo13.jpg" alt="" border="0" onclick="showSlide(this);"/>
      </div>  
      </div>
      <div id="footerSpace"></div>
      <div id="mainFooter">
      <div id="footerLeft">&copy; 2010 Conway Brothers</div>
      <div id="mainFooterRight"><a href="../index.html">Home</a> | <a href="../about.html">About Us</a> | <a href="../project.html">Projects</a> | <a href="../service.html">Services</a> | <a href="../contact.asp">Contact Us</a></div>
      </div>
      </div><br />
      <br />
      <br />

      </center>
      </body>
      </html>

       

      This is the slideControls.js file:

      function findLivePageWidth() {
      if (window.innerWidth)
         return window.innerWidth;
      if (document.body.clientWidth)
         return document.body.clientWidth;
      return (null); }
      function initSlides() {
      objectSlide=document.getElementById('slide');
      objectCover=document.getElementById('cover');
      objectPhotoSlide=document.getElementById('photoSlide'); }
      function showSlide(evt) {
      objectPhotoSlide.innerHTML='<img src="'+ evt.src +'" id="largePhoto" alt="Large Photo" border="0"/>';
      objectPhotoSlide.innerHTML+='<p>' + evt.alt +'</p>';
      objectLargePhoto=document.getElementById('largePhoto');
      livePageWidth = findLivePageWidth();
      newLeft = ((livePageWidth/2)-8) - (200);
      objectSlide.style.left = newLeft + 'px';
      objectSlide.style.display = 'block';
      objectCover.style.display = 'block'; }
      function hideSlide() {
      objectSlide.style.display = 'none';
      objectCover.style.display = 'none'; }

      window.onload=initSlides;

       

      this is the css file:

       

      #slide {
      position:absolute;
      z-index: 1000;
      display: none;
      top: 100px;
      text-align:right;
      padding:0px 8px 8px 8px;
      background-color:#fff;
      cursor: pointer;
      font:"Arial Black", Gadget, sans-serif;
      font-weight:bold;
      font-size:10px;
      }
      #cover {
      position:absolute;
      width:100%;
      height:100%;
      z-index:100;
      display: none;
      background-color:#000;
      opacity: .75;
      filter:progid:DXImageTransform.
        Microsoft.BasicImage(opacity=.75);
        top:0px;
        left:0px;
      }
      #photoAlbum {
      position:relative;
      z-index:0;
      width: 400px;
      }
      #photoAlbum img {
      width: 20%;
      border: 2px solid red;
      margin:8px;
      vertical-align: top;
      }
      .slideControl {
      color: red;
      }

       

      the error is in the slideControl.js file on line 13.
      the error:
      objectPhotoSlide is undefined line 13

       

      that would be this code:

      objectPhotoSlide.innerHTML+='<p>' + evt.alt +'</p>';

       

      then there is the issue of interfearing with the operation of my nav.
      Can anyone help me out.. I think I've been looking at this to long.

       

      Thank you.