Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Sep 2006
    Location
    Colorado
    Posts
    132
    Thanks
    7
    Thanked 1 Time in 1 Post

    Yahoo API AJAX Script Help

    I have a script:

    http://www.reactor.net.pl/clients/slideshow/

    I tried to add it to this page:

    http://interiordesignbusiness.net/ho...ony/index.html

    And I can't seem to get it to work.

    In IE I can get it to slide half, firefox can slide one image out, but it doesnt work like the first link. I can't figure out why, the code looks good to me.

    index.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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>House In Harmony</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">td img {display: block;}</style>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/yahoo/yahoo-min.js"></script> 
    <script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/event/event-min.js"></script> 
    <script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/dom/dom-min.js"></script> 
    <script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/animation/animation-min.js"></script>
    </head>
    <body>
    <div align="center">
    <table width="770" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
    <tr>
    <td colspan="3"><div id="header"><div align="left"><a href="index.html"><img src="images/logo.gif" border="0" /></a></div></div></td>
    </tr>
    <tr>
    <td valign="top" bgcolor="#000000">
    <table border="0" cellpadding="0" cellspacing="0" width="185" bgcolor="#000000">
    <!-- fwtable fwsrc="navbarpng.png" fwbase="navbarpng.png" fwstyle="Dreamweaver" fwdocid = "1773638727" fwnested="0" -->
      <tr>
       <td><img src="images/spacer.gif" width="185" height="1" border="0" alt="" /></td>
       <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
      </tr>
    
      <tr>
       <td><a href="javascript:next();"><img name="navbarpng_r1_c1" src="images/navbarpng_r1_c1.gif" width="185" height="55" border="0" id="navbarpng_r1_c1" alt="" /></a></td>
       <td><img src="images/spacer.gif" width="1" height="55" border="0" alt="" /></td>
      </tr>
      <tr>
       <td><img name="navbarpng_r2_c1" src="images/navbarpng_r2_c1.gif" width="185" height="3" border="0" id="navbarpng_r2_c1" alt="" /></td>
       <td><img src="images/spacer.gif" width="1" height="3" border="0" alt="" /></td>
      </tr>
      <tr>
       <td><a href="javascript:next();"><img name="navbarpng_r3_c1" src="images/navbarpng_r3_c1.gif" width="185" height="55" border="0" id="navbarpng_r3_c1" alt="" /></a></td>
       <td><img src="images/spacer.gif" width="1" height="55" border="0" alt="" /></td>
      </tr>
      <tr>
       <td><img name="navbarpng_r4_c1" src="images/navbarpng_r4_c1.gif" width="185" height="2" border="0" id="navbarpng_r4_c1" alt="" /></td>
       <td><img src="images/spacer.gif" width="1" height="2" border="0" alt="" /></td>
      </tr>
      <tr>
       <td><a href="javascript:next();"><img name="navbarpng_r5_c1" src="images/navbarpng_r5_c1.gif" width="185" height="55" border="0" id="navbarpng_r5_c1" alt="" /></a></td>
       <td><img src="images/spacer.gif" width="1" height="55" border="0" alt="" /></td>
      </tr>
      <tr>
       <td><img name="navbarpng_r6_c1" src="images/navbarpng_r6_c1.gif" width="185" height="2" border="0" id="navbarpng_r6_c1" alt="" /></td>
       <td><img src="images/spacer.gif" width="1" height="2" border="0" alt="" /></td>
      </tr>
      <tr>
       <td><a href="javascript:next();"><img name="navbarpng_r7_c1" src="images/navbarpng_r7_c1.gif" width="185" height="55" border="0" id="navbarpng_r7_c1" alt="" /></a></td>
       <td><img src="images/spacer.gif" width="1" height="55" border="0" alt="" /></td>
      </tr>
      <tr>
       <td><img name="navbarpng_r8_c1" src="images/navbarpng_r8_c1.gif" width="185" height="2" border="0" id="navbarpng_r8_c1" alt="" /></td>
       <td><img src="images/spacer.gif" width="1" height="2" border="0" alt="" /></td>
      </tr>
      <tr>
       <td><a href="javascript:next();"><img name="navbarpng_r9_c1" src="images/navbarpng_r9_c1.gif" width="185" height="55" border="0" id="navbarpng_r9_c1" alt="" /></a></td>
       <td><img src="images/spacer.gif" width="1" height="55" border="0" alt="" /></td>
      </tr>
      <tr>
       <td><img name="navbarpng_r10_c1" src="images/navbarpng_r10_c1.gif" width="185" height="2" border="0" id="navbarpng_r10_c1" alt="" /></td>
       <td><img src="images/spacer.gif" width="1" height="2" border="0" alt="" /></td>
      </tr>
      <tr>
       <td><a href="javascript:next();"><img name="navbarpng_r11_c1" src="images/navbarpng_r11_c1.gif" width="185" height="54" border="0" id="navbarpng_r11_c1" alt="" /></a></td>
       <td><img src="images/spacer.gif" width="1" height="54" border="0" alt="" /></td>
      </tr>
    </table>
    </td>
    <td valign="top" bgcolor="#FFFFFF">
    <div style="width: 280px;height: 187px; overflow: hidden">
    <div id="slider">
    <img src="images/slideshow1.jpg" /><img src="images/slideshow2.jpg" /><img src="images/slideshow3.jpg" /><img src="images/slideshow4.jpg" />
    </div>
    </div>
    <script type="text/javascript">
    var images = document.getElementById('slider').getElementsByTagName('img');
    var totalWidth=0;
    for(var i=0;i<images.length;i++){
    	totalWidth=280+totalWidth;
    }
    document.getElementById('slider').style.width=totalWidth+'px';
    var hPosition = 0;
    next = function (){
    if(-1*(hPosition-280)<totalWidth){
    	hPosition = hPosition-280;
    	var goRight = new YAHOO.util.Anim('slider', {marginLeft: { to: hPosition}}, 0.7);
    	goRight.animate();
    }
    }
    prev = function (){
    if(hPosition<0){
    	hPosition = hPosition+280;
    	var goRight = new YAHOO.util.Anim('slider', {marginLeft: { to: hPosition}}, 0.7);
    	goRight.animate();
    }
    }
    
    </script>
    <br /><br />
    Maecenas vitae mi. Aliquam consequat lobortis mauris. Proin sagittis sagittis velit. Curabitur interdum faucibus enim. Nulla vitae massa a eros mollis pretium. Quisque dictum velit a est. Aenean tempus luctus sem. Pellentesque in lorem sed lorem bibendum pellentesque. Nam a justo at lacus laoreet blandit. Curabitur sit amet leo. Nulla sapien. Donec fermentum sollicitudin sem.
    </td>
    <td valign="top" bgcolor="#FFFFFF">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam feugiat, ligula id rutrum convallis, diam mi convallis ante, id vestibulum turpis felis eget nibh. Curabitur mattis, erat ac interdum tristique, lectus enim porttitor odio, a auctor sapien turpis eu arcu. Aenean molestie nulla sit amet quam. Suspendisse et tortor ac nunc ullamcorper accumsan. Nullam sit amet erat sit amet felis volutpat ullamcorper. Fusce blandit, metus in tincidunt sagittis, purus lacus pellentesque mauris, nec mattis sem quam et tortor. Aenean ornare nunc vitae neque. Duis ut eros. Aliquam elementum tempor lacus. Etiam porta, enim eget placerat laoreet, risus velit iaculis sapien, vel porttitor urna nisi vel velit. Morbi lobortis nisi sit amet risus aliquam accumsan. In ligula magna, gravida sit amet, fringilla ac, aliquam volutpat, sapien. Donec quis felis. Cras tempus.
    <br /><br />
    Maecenas vitae mi. Aliquam consequat lobortis mauris. Proin sagittis sagittis velit. Curabitur interdum faucibus enim. Nulla vitae massa a eros mollis pretium. Quisque dictum velit a est. Aenean tempus luctus sem. Pellentesque in lorem sed lorem bibendum pellentesque. Nam a justo at lacus laoreet blandit. Curabitur sit amet leo. Nulla sapien. Donec fermentum sollicitudin sem.
    </td>
    </tr>
    <tr>
    <td colspan="3"><div id="footer">&copy; House In Harmony 2007</div></td>
    </tr>
    </table>
    </div>
    </body>
    </html>
    Any idea why its not working?
    -bubbles

  • #2
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    The link you gave works perfectly for me in IE7 and FF2

  • #3
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I suspect your other css is somehow messing it up. I think the images are stacked instead of side to side which suggests they are display: block.

    I see in your code

    td img {display: block;}

    which I'd guess is the problem. I'm still working on my CSS skills but I'd try this first.

    <style type="text/css">
    td img {display: block;}
    div#slider img { display: inline; }
    </style>

    To override the display to inline for imgs. That's some place to start at least.

    david_kw

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Adirondacks
    Posts
    516
    Thanks
    4
    Thanked 4 Times in 4 Posts
    You're not supposed to link to yahoo yui directly and should download the js files and install them on your own site.

    Overflow hidden, show that for now.

    I believe this is rooted from an old script from Peter Gehrig at 24fun.com if you want to just go get the original.
    I recommend checking out Jack Slocum's work with yahoo yui.

  • #5
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It was my understanding that now you can directly link to yahoo for the yui JS files. I haven't looked in to it enough yet so I could be wrong, but that's what I heard.

    david_kw

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Adirondacks
    Posts
    516
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by david_kw View Post
    It was my understanding that now you can directly link to yahoo for the yui JS files. I haven't looked in to it enough yet so I could be wrong, but that's what I heard.

    david_kw
    I saw that but despite what I read, the bandwidth limit is small.
    Getting my site going again, my traffic isn't very high at all and within a day or so I get a javascript error Access Denied. I would figure the average site owner would get this in a few hours.
    If I upload the exact same script to another server with no changes it works for a short time too then gets access denied again.
    Yahoo may have increased the bandwidth somehow in the last few weeks but....I just felt like I didn't need the headache


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •