Grow your CSS skills. Land your dream job.

Hiding Blank Space

  • # April 25, 2013 at 7:01 pm

    http://codepen.io/anon/pen/xcutF

    I am attempting to use the above code to hide broken images within an image slider.

    It works perfectly, but there is still blank space where the images *should* be. I believe it is because the images are within a list..what can I add to the JS code that will hide everything rather than just the images?

    http://codepen.io/anon/pen/ngujp

    Thank you in advance for your help!

    # April 26, 2013 at 5:27 am

    Dude…the HTML in your second Codepen is fubar.

    You have closing `` without corresponding `

  • `. Unclosed `img` tags, a closing `` without an opening `
    ` and, in any case, that ‘element’ has been discontinued.

    And there is no CSS so we can’t see the styling.

    Try correcting all of that and make one SINGLE Codepen with HTML/CSS & JS.

# April 26, 2013 at 5:58 pm

Is this better?

http://codepen.io/anon/pen/rDuwJ

I forgot to clarify that it is mainly the thumbnails I am trying to correct.. we are using template tags to pull in the image location, yet they are not all used in every application. I am hoping to find a solution that would hide the broken/unused images & re-align the thumbnails if possible.

Hopefully this is a much better message than the one I originally posted..

# May 1, 2013 at 5:35 pm

…bump?

# May 1, 2013 at 5:39 pm

I’m a bit confused – why are you attempting to hide broken images rather than just remove them?

# May 3, 2013 at 5:44 pm

> we are using template tags to pull in the image location, yet they are not all used in every application.

This is going to be used for thousands of different “pages” where specific information can be populated using template tags. The images are just one of the many things that can be pulled in using the tags, as they are different each time this gallery will be used.

Unless someone knows a good way to do this, even if JS isn’t required that’s fine, then I won’t be using the image gallery..

# May 4, 2013 at 5:31 am

To hide broken image, I guess the easiest way would be to run a curl request to check the header. Depending on the amount of images you got, it can become very heavy.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".