How to Assign on demand CSS Styles to some div or class?


Tags: css,html5,css3

Problem :

I'm working on a Classifieds/Ads Page for a client using content from a specific Database. I'm close to get the look I'm looking for but now I have a problem. I don't want CSS Styles for the empty boxes to the available spaces.I just want the CSS Styles on the ones that will appear once the information arrive to the database and it's ready to show on the Classifieds/Ads page.

Is there a way to have a CSS style that only is applied when content is present?

This is my test page.

notice how I kind of cheated the CSS style so the blank boxes (spaces) show a text saying: "place your ad here!" but I really don't want those blank boxes there. Any help will be apreciate!

thanks in advance.



Solution :

All you need to do is to find the parent div which does not have content on its header (for instance) using jQuery. Then you can set its display property to none. I have created a working example ****HERE****

HTML:

 class="ad">
  <h2>This is an ad</h2>
  <p>this is the ad which has been added by the database</p>
</div>
<div class="ad">
  <h2></h2>
  <p></p>
</div>

CSS:

* {box-sizing: border-box;}
h2, p {margin:0; padding:0;}

.ad {
  display: block;
  float: left;
  height:300px;
  width:130px;
  background: #999;
  margin: 10px 20px;
  padding: 5px;
}

jQuery:

  $(".ad").each(function() {
     if ($(this).find("h2").text() == "") {
       $(this).css("display","none");
     };
  })

    CSS Howto..

    How to create pentagon shape for avatar image?

    How to add an image to a custom CSS button

    Jquery button click to show div right to left with slide animation

    How to move “+” to right i n css?

    How to switch left and right in a css file?

    How to position a div that already has a float?

    How to get a list of valid values for a CSS property with javascript?

    How to vertically align text to the right of some text using css? [closed]

    How to remove hover effect for some of the cells in angularjs

    How to make links look like tabs using html/css?

    How to place the block on the top of “second” screen using CSS?

    How to prevent exceeding the parent's boundary?

    How to move this button?

    In javascript, jQuery, or css how do I get a div or iframe to expand to fill rest of space

    How to do centered

    with
    on both sides over a background image

    How to adjust CSS to make footer fixed height?

    How to correct CSS formatting problem in Visual Studio

    How To Insert Some Content Before An HTML Element In The Runtime Using CSS

    How to make an entire div clickable with CSS [closed]

    How to lookup the applied font on JavaFX Label?

    How to override a class using jquery

    How did infusion.com skew the elements? The CSS file does not seem to have skewing in it and the menu is also skewed

    How to Troubleshoot CSS?

    How generate width html element to fill rest of width window

    How to hide a div in the Repeater

    How to make a button CSS change only IF form fields are valid

    IE10 has extra margin above an inline header. How do I remove it?

    How to make a font gisha-regular?

    How to get rid of the border bottom from my navigation

    I want to override some CSS that says border:none to have border bottom. How can I do this?