SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    The related products can't remove left/right ?

    Code:
    http://www.scarvesonsale.com/index.php/sunflower-square-pure-silk-scarf.html
    The related products part.when i click the left/right arrow which locates at the product introduction of the page. the image can't remove.but ok under firefox and chrome. how to correct it. thank you.
    Last edited by paul_wilkins; Jun 10, 2012 at 19:01.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,701
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by runeveryday View Post
    the image can't remove.but ok under firefox and chrome.
    Can you elaborate? What is meant with "image can't remove" ?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    when i click the left/right arrow. the product in the ul can't remove from the left/right to the right/left.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,701
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by runeveryday View Post
    when i click the left/right arrow. the product in the ul can't remove from the left/right to the right/left.
    When I try it in IE9 and Opera 11, the related products section seems to move just fine.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    yeah. but under IE8. it can't work fine. i don't know why? thank you

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,701
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by runeveryday View Post
    yeah. but under IE8. it can't work fine. i don't know why? thank you
    Ahh, now we're getting some details. Thanks.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    do you know how to solve it? i guess there is a js conflict. but i don't which.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,701
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by runeveryday View Post
    do you know how to solve it? i guess there is a js conflict. but i don't which.
    Patience - investigations continue
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,701
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    That's interesting, IE8 is showing three alerts saying "window.external.InPrivateFilteringEnabled method called"

    First step - remove everything that doesn't relate to the problem at hand.

    Here, we only have the related products list, and the styles and scripts necessary for it to work properly.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
      <base href="http://www.scarvesonsale.com/index.php/sunflower-square-pure-silk-scarf.html" />
      <title>Sunflower square pure silk scarf</title>
      <link rel="stylesheet" type="text/css" href="http://www.scarvesonsale.com/skin/frontend/em0024/default/css/styles.css" media="all" />
      <script type="text/javascript" src="http://www.scarvesonsale.com/js/prototype/prototype.js"></script>
      <script type="text/javascript" src="http://www.scarvesonsale.com/js/scriptaculous/effects.js"></script>
      <script type="text/javascript" src="http://www.scarvesonsale.com/skin/frontend/em0024/default/js/em0024.js"></script>
    </head>
    
    <body>
      <div class="main">
        <!--for related  product-->
        <div class="related_products box-lr block block-related">
          <h2>Related Products</h2>
    
          <div class="block-content" id="slideshow">
            <a href="javascript:void(0);" id="left1" class="smallImgUp" name="left1"><img src=
            "http://www.scarvesonsale.com/skin/frontend/em0024/default/images/smallImgUp_h02.png" alt="" title="" /></a> <a href="javascript:void(0);"
            id="right1" class="smallImgDown" name="right1"><img src=
            "http://www.scarvesonsale.com/skin/frontend/em0024/default/images/smallImgDown_h01.png" alt="" title="" /></a>
    
            <div class="related_products_box">
              <ul class="mini-products-list" id="related_list">
                <li class="item">
                  <div class="product">
                    <a href="http://www.scarvesonsale.com/index.php/small-square-pure-silk-scarf-2.html" title="Small square Pure silk scarf"><img src=
                    "http://www.scarvesonsale.com/media/catalog/product/cache/1/small_image/160x/9df78eab33525d08d6e5fb8d27136e95/a/1/a17c7dd819667e0ddb5ba49fa2a02f83.JPEG"
                    width="160" height="160" alt="Small square Pure silk scarf" /></a>
    
                    <div class="product-details">
                      <p class="product-name"><a href="">Small square Pure silk scarf</a></p>
    
                      <div class="price-box price-box">
                        <p class="old-price"><span class="price-label">Regular Price:</span> <span class="price" id="old-price-1876">$76.20</span></p>
    
                        <p class="special-price"><span class="price-label">Special Price:</span> <span class="price" id=
                        "product-price-1876">$38.10</span></p>
                      </div>
                    </div>
                  </div>
                </li>
    
                <li class="item">
                  <div class="product">
                    <a href="http://www.scarvesonsale.com/index.php/cashew-flower-pattern-long-pure-silk-scarf.html" title=
                    "Cashew flower Pattern long pure silk scarf"><img src=
                    "http://www.scarvesonsale.com/media/catalog/product/cache/1/small_image/160x/9df78eab33525d08d6e5fb8d27136e95/4/0/40c44fa6c036d8f407afa31cdad49bbf.JPEG"
                    width="160" height="160" alt="Cashew flower Pattern long pure silk scarf" /></a>
    
                    <div class="product-details">
                      <p class="product-name"><a href="">Cashew flower Pattern long pure silk scarf</a></p>
    
                      <div class="price-box price-box">
                        <p class="old-price"><span class="price-label">Regular Price:</span> <span class="price" id="old-price-1932">$93.90</span></p>
    
                        <p class="special-price"><span class="price-label">Special Price:</span> <span class="price" id=
                        "product-price-1932">$47.00</span></p>
                      </div>
                    </div>
                  </div>
                </li>
    
                <li class="item">
                  <div class="product">
                    <a href="http://www.scarvesonsale.com/index.php/polka-dot-stripe-square-pure-silk-scarf.html" title=
                    "Polka dot&amp;stripe square pure silk scarf "><img src=
                    "http://www.scarvesonsale.com/media/catalog/product/cache/1/small_image/160x/9df78eab33525d08d6e5fb8d27136e95/4/4/44f13cbea5ccb8661e8aadd5b2cb4519.JPEG"
                    width="160" height="160" alt="Polka dot&amp;stripe square pure silk scarf " /></a>
    
                    <div class="product-details">
                      <p class="product-name"><a href="">Polka dot&amp;stripe square pure silk scarf</a></p>
    
                      <div class="price-box price-box">
                        <p class="old-price"><span class="price-label">Regular Price:</span> <span class="price" id="old-price-1767">$76.20</span></p>
    
                        <p class="special-price"><span class="price-label">Special Price:</span> <span class="price" id=
                        "product-price-1767">$38.10</span></p>
                      </div>
                    </div>
                  </div>
                </li>
    
                <li class="item">
                  <div class="product">
                    <a href="http://www.scarvesonsale.com/index.php/hand-crimping-painting-square-pure-silk-scarf.html" title=
                    "hand-crimping painting square Pure silk scarf"><img src=
                    "http://www.scarvesonsale.com/media/catalog/product/cache/1/small_image/160x/9df78eab33525d08d6e5fb8d27136e95/d/1/d11a573871977dfb6f58a9e97dd1c02b.JPEG"
                    width="160" height="160" alt="hand-crimping painting square Pure silk scarf" /></a>
    
                    <div class="product-details">
                      <p class="product-name"><a href="">hand-crimping painting square Pure silk scarf</a></p>
    
                      <div class="price-box price-box">
                        <p class="old-price"><span class="price-label">Regular Price:</span> <span class="price" id="old-price-1877">$86.40</span></p>
    
                        <p class="special-price"><span class="price-label">Special Price:</span> <span class="price" id=
                        "product-price-1877">$43.20</span></p>
                      </div>
                    </div>
                  </div>
                </li>
    
                <li class="item">
                  <div class="product">
                    <a href="http://www.scarvesonsale.com/index.php/long-thin-silk-scarf.html" title="Long thin silk scarf"><img src=
                    "http://www.scarvesonsale.com/media/catalog/product/cache/1/small_image/160x/9df78eab33525d08d6e5fb8d27136e95/1/2/12c2538c2317c908edab6d8fca6e39d4.JPEG"
                    width="160" height="160" alt="Long thin silk scarf" /></a>
    
                    <div class="product-details">
                      <p class="product-name"><a href="">Long thin silk scarf</a></p>
    
                      <div class="price-box price-box">
                        <p class="old-price"><span class="price-label">Regular Price:</span> <span class="price" id="old-price-1901">$109.80</span></p>
    
                        <p class="special-price"><span class="price-label">Special Price:</span> <span class="price" id=
                        "product-price-1901">$54.90</span></p>
                      </div>
                    </div>
                  </div>
                </li>
    
                <li class="item">
                  <div class="product">
                    <a href="http://www.scarvesonsale.com/index.php/large-abstract-square-pure-silk-scarf.html" title=
                    "large abstract square Pure silk Scarf"><img src=
                    "http://www.scarvesonsale.com/media/catalog/product/cache/1/small_image/160x/9df78eab33525d08d6e5fb8d27136e95/6/8/682c605ff61c22371e9dd4ec6a934e79.JPEG"
                    width="160" height="160" alt="large abstract square Pure silk Scarf" /></a>
    
                    <div class="product-details">
                      <p class="product-name"><a href="">large abstract square Pure silk Scarf</a></p>
    
                      <div class="price-box price-box">
                        <p class="old-price"><span class="price-label">Regular Price:</span> <span class="price" id="old-price-1830">$101.20</span></p>
    
                        <p class="special-price"><span class="price-label">Special Price:</span> <span class="price" id=
                        "product-price-1830">$50.60</span></p>
                      </div>
                    </div>
                  </div>
                </li>
    
                <li class="item">
                  <div class="product">
                    <a href="http://www.scarvesonsale.com/index.php/long-pure-silk-scarf-5.html" title="Long pure silk scarf"><img src=
                    "http://www.scarvesonsale.com/media/catalog/product/cache/1/small_image/160x/9df78eab33525d08d6e5fb8d27136e95/b/a/bac782929444dbeee574964b7ea243c2.JPEG"
                    width="160" height="160" alt="Long pure silk scarf" /></a>
    
                    <div class="product-details">
                      <p class="product-name"><a href="">Long pure silk scarf</a></p>
    
                      <div class="price-box price-box">
                        <p class="old-price"><span class="price-label">Regular Price:</span> <span class="price" id="old-price-1835">$101.20</span></p>
    
                        <p class="special-price"><span class="price-label">Special Price:</span> <span class="price" id=
                        "product-price-1835">$50.60</span></p>
                      </div>
                    </div>
                  </div>
                </li>
    
                <li class="item">
                  <div class="product">
                    <a href="http://www.scarvesonsale.com/index.php/fresh-hand-painted-pure-wool-loose-panicle-scarf.html" title=
                    "Fresh hand-painted pure wool loose panicle Scarf"><img src=
                    "http://www.scarvesonsale.com/media/catalog/product/cache/1/small_image/160x/9df78eab33525d08d6e5fb8d27136e95/d/1/d167d926c8f7d480b52e80c804e1e8df.JPEG"
                    width="160" height="160" alt="Fresh hand-painted pure wool loose panicle Scarf" /></a>
    
                    <div class="product-details">
                      <p class="product-name"><a href="">Fresh hand-painted pure wool loose panicle Scarf</a></p>
    
                      <div class="price-box price-box">
                        <p class="old-price"><span class="price-label">Regular Price:</span> <span class="price" id="old-price-1650">$88.60</span></p>
    
                        <p class="special-price"><span class="price-label">Special Price:</span> <span class="price" id=
                        "product-price-1650">$44.30</span></p>
                      </div>
                    </div>
                  </div>
                </li>
    
                <li class="item">
                  <div class="product">
                    <a href="http://www.scarvesonsale.com/index.php/check-oversized-shawl-scarf.html" title="Check oversized shawl scarf"><img src=
                    "http://www.scarvesonsale.com/media/catalog/product/cache/1/small_image/160x/9df78eab33525d08d6e5fb8d27136e95/7/b/7b1e16b9a92985e050179a2de1095854.JPEG"
                    width="160" height="160" alt="Check oversized shawl scarf" /></a>
    
                    <div class="product-details">
                      <p class="product-name"><a href="">Check oversized shawl scarf</a></p>
    
                      <div class="price-box price-box">
                        <p class="old-price"><span class="price-label">Regular Price:</span> <span class="price" id="old-price-1655">$79.80</span></p>
    
                        <p class="special-price"><span class="price-label">Special Price:</span> <span class="price" id=
                        "product-price-1655">$39.90</span></p>
                      </div>
                    </div>
                  </div>
                </li>
    
                <li class="item">
                  <div class="product">
                    <a href="http://www.scarvesonsale.com/index.php/gorgeous-pure-silk-gradient-scarf.html" title="Gradient pure silk Scarf"><img src=
                    "http://www.scarvesonsale.com/media/catalog/product/cache/1/small_image/160x/9df78eab33525d08d6e5fb8d27136e95/6/b/6b2510b0632440a9b7948e342352ce2c_9.JPEG"
                    width="160" height="160" alt="Gradient pure silk Scarf" /></a>
    
                    <div class="product-details">
                      <p class="product-name"><a href="">Gradient pure silk Scarf</a></p>
    
                      <div class="price-box price-box">
                        <p class="old-price"><span class="price-label">Regular Price:</span> <span class="price" id="old-price-1666">$76.20</span></p>
    
                        <p class="special-price"><span class="price-label">Special Price:</span> <span class="price" id=
                        "product-price-1666">$38.10</span></p>
                      </div>
                    </div>
                  </div>
                </li>
    
                <li class="item">
                  <div class="product">
                    <a href="http://www.scarvesonsale.com/index.php/square-pure-mulberry-silk-scarf-1.html" title=
                    "square Pure mulberry silk scarf"><img src=
                    "http://www.scarvesonsale.com/media/catalog/product/cache/1/small_image/160x/9df78eab33525d08d6e5fb8d27136e95/9/e/9e3633325f11fc16ef06ba25c05332b1.JPEG"
                    width="160" height="160" alt="square Pure mulberry silk scarf" /></a>
    
                    <div class="product-details">
                      <p class="product-name"><a href="">square Pure mulberry silk scarf</a></p>
    
                      <div class="price-box price-box">
                        <p class="old-price"><span class="price-label">Regular Price:</span> <span class="price" id="old-price-1707">$76.20</span></p>
    
                        <p class="special-price"><span class="price-label">Special Price:</span> <span class="price" id=
                        "product-price-1707">$38.10</span></p>
                      </div>
                    </div>
                  </div>
                </li>
    
                <li class="item">
                  <div class="product">
                    <a href="http://www.scarvesonsale.com/index.php/sunflower-square-pure-silk-scarf.html" title=
                    "Sunflower square pure silk scarf"><img src=
                    "http://www.scarvesonsale.com/media/catalog/product/cache/1/small_image/160x/9df78eab33525d08d6e5fb8d27136e95/4/5/450137c27cdca5e319e7c526adb3d2ed.JPEG"
                    width="160" height="160" alt="Sunflower square pure silk scarf" /></a>
    
                    <div class="product-details">
                      <p class="product-name"><a href="">Sunflower square pure silk scarf</a></p>
    
                      <div class="price-box price-box">
                        <p class="old-price"><span class="price-label">Regular Price:</span> <span class="price" id="old-price-1756">$88.60</span></p>
    
                        <p class="special-price"><span class="price-label">Special Price:</span> <span class="price" id=
                        "product-price-1756">$44.30</span></p>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!--for related product-->
      </div>
    </body>
    </html>
    With what we have there now, it seems to work in IE8. Can you confirm?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    yes. your code works fine when under IE8.

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,701
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by runeveryday View Post
    yes. you code works fine when under IE8.
    Good. Now all you have to do is to gradually add pieces from your original page back in, until things stop working. You will then know what is causing the problem.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Good. Now all you have to do is to gradually add pieces from your original page back in, until things stop working. You will then know what is causing the problem.
    Got it. i find the reason that causes the products can't move. it's

    <script src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4fb22f8975ebfe83" type="text/javascript"></script>
    when i delete the code, it works fine under IE8. if i don't want to delete it, do you know how to correct it when under IE8. thank you.


    how did you see under IE8 it showing three alerts saying "window.external.InPrivateFilteringEnabled method called"

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,701
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by runeveryday View Post
    how did you see under IE8 it showing three alerts saying "window.external.InPrivateFilteringEnabled method called"
    I was using IETester to view the page as IE8.

    It's interesting that you found addThis to be the issue, because that is also what causes those alerts to occur.
    AddThis Community Forum InPrivateFilteringEnabled

    I'll be able to take a look at that later on.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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