Thursday, May 5, 2011

display none when no images in jquery

I'm using jquery get the src of images to display:none when src="". It looks like that,

<div class="parent">
  <img src="images_path/or nothing" class="Images"/>
  <div class="content">
  </div>
</div>

class content float left to fit with images width in parent div. Now I want detect image source when it empty I changed class content.width to fit with parent div by its selft. My jquery code like that

 var CustomizeImage = $(".CategoryNews-left").find(".Images").attr("src");
    alert(CustomizeImage);
    if(CustomizeImage == "")
    { alert("ko co gi");
     $(".CategoryNews-left").find(".Images").css("display","none");
     $(".CategoryNews-left").find(".news").css("width","320px");
     $(".CategoryNews-left").find(".Content").css("width","320px");
    }

But class content does not get new width even src=empty, someone help me to fix this truoble, thank alot of read my note!!!

From stackoverflow
  • Try lowercasing “.Content” (change to “.content”) in the script. Cause in HTML you have just class="content".

  • Since class names are case-sensitive in CSS, .Content doesn't match class="content"

    Either change the class to class="Content" in the HTML (which seems to be your naming convention anyway), or the selector to .content.

  • thanks Tobias and Birman alot, I've just check out my class name in css file is Content. and I mean I have s list of parent div. But my code just alert the first one when I code like that:

    var CustomizeImage = $(".CategoryNews-left").find(".Images").attr("src");
    alert(CustomizeImage);
    if(CustomizeImage == "")
    {   alert("ko co gi");
        $(".CategoryNews-left").find(".Images").css("display","none");
        $(".CategoryNews-left").find(".news").css("width","320px");
        $(".CategoryNews-left").find(".Content").css("width","320px");
    }
    else
    {
            if(CustomizeImage.indexOf('src=""') > 0)
        { alert("co nhung rong");
         $(".CategoryNews-left").find(".Images").css("display","none");
         $(".CategoryNews-left").find(".news").css("width","320px");
         $(".CategoryNews-left").find(".Content").css("width","320px");
        }
    }
    

    and my html code look like that

    <div class="CategoryNews-left">
    <div class="Images">
    <img src="images/Anhto_listtin_trai.gif" alt="anh tin" />
    </div>
    <div class="news">
    <h3>blahblahblahblahblah</h3>
    <p>blahblah- blahblahblah</p>
    </div>
    <div class="Content">
    blahblahblahblahblahblah
    </div>
    <div class="relateNews">
    <ul>
    <li><a href="">blahblahblahblahblahblahblahblahblahblah</a> <font>VnExpress</font></li>
    </ul>
    

    duckyflip : I don't think you should be doing this: if(CustomizeImage.indexOf('src=""') > 0) It will never actually contain the string "src=.." so just try removing this if statement all together
  • Not exactly sure what you're trying to do, but your first selection is wrong.

    $(".CategoryNews-left").find(".Images").attr("src");
    

    Finds the div "images", and looks for its src. The div has no src. You should try

    $(".CategoryNews-left .Images img").attr("src");
    

    Also, keep in mind attr("src") will only return the src of the first img, even if you have many.

  • thanks Kobi and the other alot! Now I know if I want to have their attributes I must get the loop throught all element. And now it run. Thanks a lot again!

    Kobi : No problem, welcome. Feel free to mark any of the answers as your solution.

0 comments:

Post a Comment