The related products can't remove left/right ?

**runeveryday** · Jun 10, 2012 18:18

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.

**paul_wilkins** · Jun 10, 2012 19:06

Originally Posted by runeveryday

the image can't remove.but ok under firefox and chrome.

Can you elaborate? What is meant with "image can't remove" ?

**runeveryday** · Jun 10, 2012 19:13

when i click the left/right arrow. the product in the ul can't remove from the left/right to the right/left.

**paul_wilkins** · Jun 10, 2012 19:24

Originally Posted by runeveryday

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.

**runeveryday** · Jun 10, 2012 19:27

yeah. but under IE8. it can't work fine. i don't know why? thank you

**paul_wilkins** · Jun 10, 2012 19:42

Originally Posted by runeveryday

yeah. but under IE8. it can't work fine. i don't know why? thank you

Ahh, now we're getting some details. Thanks.

**runeveryday** · Jun 10, 2012 19:53

do you know how to solve it? i guess there is a js conflict. but i don't which.

**paul_wilkins** · Jun 10, 2012 19:53

Originally Posted by runeveryday

do you know how to solve it? i guess there is a js conflict. but i don't which.

Patience - investigations continue

**paul_wilkins** · Jun 10, 2012 20:18

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?

**runeveryday** · Jun 10, 2012 20:46

yes. your code works fine when under IE8.

**paul_wilkins** · Jun 10, 2012 20:47

Originally Posted by runeveryday

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.

**runeveryday** · Jun 10, 2012 22:03

Originally Posted by paul_wilkins

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

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"

**paul_wilkins** · Jun 10, 2012 23:00

Originally Posted by runeveryday

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.

User Tag List

Thread: The related products can't remove left/right ?

Thread Tools

Display

The related products can't remove left/right ?

Bookmarks

Bookmarks

Posting Permissions