jquery .hide() bug in safari
- by phil crowe
ive been having issues with this hide bug thats only affecting safari. This is a simple vertical scroller that hides the first element in the list then shows the last. and works in everything apart from safari. the problem seems to be that the divs im working with here share the same class but have unique ids like #mycollectioncomment1, #mycollectioncomment2, #mycollectioncomment3 etc... however hiding just one of these divs hides all the other divs that share the same class. Ive tried .fadeOut(0) that everyone suggests as the work around but it just doesnt work here.
var commentListCount = $(".myCollectionLatest").size();
var mycollclickCount = 0;
var showingcomments = 5;
if ($('.licomment').size() > 0) {
showingcomments = 4;
//alert("this");
}
if ($('.lookInSeasonList').size() > 0) {
showingcomments = 5;
}
if ($('.lookDescMiddle').size() > 0) {
showingcomments = 8;
}
if ($('.MyCollectionsCollectionHolder').size() > 0) {
showingcomments = 5;
}
// if (commentListCount > 5) {
$(".myCollectionLatest").hide();
for (i = 0; i < showingcomments; i++) {
$("#mycollectioncomment" + i).show();
}
$('#mycolldown').click(function () {
var element1, element2;
if (showingcomments <= commentListCount) {
mycollclickCount++;
element1 = $("#mycollectioncomment" + mycollclickCount.toString());
element2 = $("#mycollectioncomment" + showingcomments.toString());
element1.closest('.licomment').hide();
element2.closest('.licomment').show();
showingcomments++;
}
});
$('#mycollup').click(function () {
if (showingcomments <= 5) {
} else {
$("#mycollectioncomment" + mycollclickCount.toString()).show();
$("#mycollectioncomment" + mycollclickCount.toString()).closest('.licomment').show();
mycollclickCount--;
showingcomments--;
$("#mycollectioncomment" + showingcomments.toString()).hide();
$("#mycollectioncomment" + showingcomments.toString()).closest('.licomment').show();
}
});
---html markup ---
<div style="width:260px;
height:975px;
float:left;
border-right:solid 1px #e70079;
border-bottom:solid 1px #e70079;
border-left:solid 1px #e70079;
margin-top:180px;">
<h2 align="center">
<br />
COLLECTION LATEST
</h2>
<img src="/images/my-collection/black-up.jpg" id="mycollup" /><ul><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment1"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=6855"><img src="/media/6855/makeuo_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=6855" class="usernamelinkdiv">CHARLOTTE</a> SAID ABOUT
<span class="pinkTxt"><br /><a href="/products/face/powder/pressed-powder.aspx">PRESSED POWDER</a></span></b><p>put this on after foundation. its the best cover powder + re...
</p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=6855">
See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment2"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=6331"><img src="/media/6331/26462_1267423081357_1103204986_2592317_7875205_n_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=6331" class="usernamelinkdiv">ANN</a> SAID ABOUT
<span class="pinkTxt"><br /><a href="/products/eyes/eyeshadow/brilliant-shimmer-duo-eye-wands.aspx">BRILLIANT SHIMMER DUO EYE WANDS</a></span></b><p>Likewise Natasha, i thought it would be a great product as i...
</p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=6331">
See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment3"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=5168"><img src="/media/5168/P03-09-09_11.36_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=5168">SINYEE</a> SAID
</b><p>i used to use this.
but now it doesnt seem to go on my skin...
</p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=5168">
See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment4"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=6941"><img src="/media/6941/purple 2_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=6941">MARIA</a> SAID
</b><p>I love this product, not used creme blush for years so just ...
</p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=6941">
See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment5"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=6329"><img src="/media/6329/snapshot_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=6329" class="usernamelinkdiv">ALICE</a> SAID ABOUT
<span class="pinkTxt"><br /><a href="/products/eyes/mascara/collagen-curl-mascara.aspx">COLLAGEN CURL MASCARA</a></span></b><p>
if you put a few drops of water in it,
you will be stunne...
</p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=6329">
See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment6"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=4466"><img src="/media/4466/DSC00260_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=4466" class="usernamelinkdiv">KATE</a> SAID ABOUT
<span class="pinkTxt"><br /><a href="/products/eyes/eyeshadow/eye-palettes.aspx">EYE PALETTES</a></span></b><p>Went to Superdrug and saw these, i bought the pop-tastic pal...
</p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=4466">
See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment7"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=4756"><img src="/media/4756/dfgdf_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=4756">JULIE</a> SAID
</b><p>They are great and look amazing on thier own with some masca...
</p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=4756">
See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment8"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=7006"><img src="/media/7006/IMG_1441_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=7006" class="usernamelinkdiv">ABIR</a> SAID ABOUT
<span class="pinkTxt"><br /><a href="/products/eyes/mascara/big-fake-false-lash-effect-mascara.aspx">BIG FAKE FALSE LASH EFFECT MASCARA</a></span></b><p>It's no good. since the time i started using it i have had m...
</p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=7006">
See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment9"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=5242"><img src="/media/5242/me_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=5242" class="usernamelinkdiv">REIKO</a> SAID ABOUT
<span class="pinkTxt"><br /><a href="/products/eyes/eyeshadow/dazzle-me!-eye-dust.aspx">DAZZLE ME! EYE DUST</a></span></b><p>Brilliant Pigment Eye shadow dusts, stop wasting your money ...
</p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=5242">
See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment10"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=5048"><img src="/media/5048/Melissa x_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=5048">MELISSA</a> SAID
</b><p>I have the whole collection and wear it everyday :D I absolu...
</p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=5048">
See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li></ul><img src="/images/my-collection/black-down.jpg" id="mycolldown" /><script>
if (BrowserDetect.browser == "Safari") {
if ($('#myCollectionFeaturedCollection').size() == 1) {
$('#mycolldown').css({ "margin-top": "580px !important" });
} else {
$('#mycolldown').css({ "margin-top": "380px !important" });
}
}
</script>
<!--<img src="/images/my-collection/black-up.jpg" id="mycollup" /><ul /><img src="/images/my-collection/black-down.jpg" id="mycolldown" /> -->
</div>
