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 HTML5 popup with minimize etc

    How can I use CSS to vertically center the text in an anchor, within a LI?

    How to refer css style from another?

    How to add an icon to bottom right of textareas via CSS?

    How to keep a floating div centered on window resize (jQuery/CSS)

    CSS: How to define spacing between responsive columns

    I have a simple image picture slider with JQuery, but I do not know how to animate up or down

    How to put things in divs with true border

    how to CSS center a div, which is the child of a form element?

    How to make the page load scrolled down to
    when loaded?

    how to align an 'a' element in html/css

    How do I align two non-fixed width divs in the center of the browser screen?

    How to draw error icon with css only,exactly like in the image

    How do URL fragment (the #stuff) interacts with CSS?

    jQuery how to rapidly change color on divs with click

    How do I add CSS styles to an ASP.NET UserControl from the code-behind?

    jQuery hide() and show() not working as expected

    How to get css property of a DOM element server-side?

    How to add styling to active input's previous sibling using CSS only [duplicate]

    How to indent text in a select drop down menu using CSS

    How to dynamically add .css to a custom Javafx LineChart Node?

    How to keep footer at the bottom even with dynamic height website

    How to test browser performance of specific CSS property?

    how to avoid extra blank page at end while printing?

    CSS How to make element in the middle to shrink before its sibling jumps down

    javascript/jquery - how to get the width of an element / css class that hasn't been added to dom yet

    ASP.NET MVC: How do other people apply conditional CSS classes?

    Creating a javascript notification plugin: How to align absolutely positioned divs on top of each other

    How can I add spaces between two lines using CSS?

    How to use metro ui css sidebar and compact classes