#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Posts
    8
    Rep Power
    0

    Remove Empty DIV/IFRAME via CSS


    Hello,

    I am basically trying to embed a url inside of div:
    <div><iframe src="url/pages/snapshot.cfm"></iframe></div>

    this url pulls in a small text field and looks at the date/time field to determine if it should show now or later. If the text field date is set to before today's date nothing will show which results in a blank white space. What would be the best css option to make the div/iframe space totally disappear and shift everything up if there is no items to display at certain times? This space will be empty most of the time, only used for emergency messages.

    Thanks N Advance,
  2. #2
  3. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    give it an ID or CLASS and use javascript to set a condition to either show it or not

    Code:
    .emergency-message{display:none;} /*default behaviour javascript could do the rest */
    or use php
    PHP Code:
    if($crisps_hit_the_fan){         
    echo 
    '<div class="emergency-message"></div>'

    Last edited by aeternus; February 21st, 2013 at 08:14 PM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Posts
    8
    Rep Power
    0
    Originally Posted by aeternus
    give it an ID or CLASS and use javascript to set a condition to either show it or not

    Code:
    .emergency-message{display:none;} /*default behaviour javascript could do the rest */
    or use php
    PHP Code:
    if($crisps_hit_the_fan){         
    echo 
    '<div class="emergency-message"></div>'

    Thanks for response, if i do the display:none option, it will totally make the div disappear even if there is emergency message to be displayed.
  6. #4
  7. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    i should have printed the word "or" bold.
    the php option doesnt require the css class which is needed for the javascript solution. does this answer answer your question?which option did you choose because it requires either javascript or php
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Posts
    8
    Rep Power
    0
    Originally Posted by aeternus
    i should have printed the word "or" bold.
    the php option doesnt require the css class which is needed for the javascript solution. does this answer answer your question?which option did you choose because it requires either javascript or php
    Which option would be easier you think?? I am not a big progammer at all. Looking for easiest way to make the div not appear if the iframe site has nothing to show?

    THanks much for your help/advice
  10. #6
  11. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Which option would be easier you think?? I am not a big progammer at all. Looking for easiest way to make the div not appear if the iframe site has nothing to show? THanks much for your help/advice
    They are both just as easy. The results depends on the condition. In this case: whether there is an error message or not.

    Is my feeling correct that you didn't made the script you talked about yourself? Because if you did, you would know exactly when an error message should occur. If you didn't write any of the code. You might want to post at least what you have.

    I am tempted to say try javascript. an example could look like this.

    javascript Code:
    <!DOCTYPE html>
    <html>
        <head><meta charset="UTF-8" />       
            <title></title>        
          </head>
     
        <body>
            <div id="error-message">this is an error message. which now is shown because it has some contents inside #error-message. But when you remove this text the whole dive wil not be shown</div>
     
     
            <!-- place this at the bottom of your code in case you have no idea what is going on -->
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
            <script type="text/javascript">
                $.noConflict();
                jQuery(document).ready(function($) {
                    // Let's check if the div with the id of #error-message has any contents
                    // we do this by checking the string length of contents of #error-message
                    var errorLength = jQuery("#error-message").html().length;
     
                    //now lets make a condition that checks if the length is not 0 (in other words if the error message isn't there)
                    if(errorLength === 0){
                          //if the result is "0" we don't want to show the error message (div) because it is empty
                        jQuery('#error-message').css('display','none');
                    }
                });
            </script>
        </body>
    </html>


    an even cleaner way to hide an empty element would be to do this (assuming the jquery library is loaded(see example above)):
    (although it doesn't really explain what is going on)
    javascript Code:
     
    $(document).ready(function() { 
                    $('#error-message:empty').hide(); 
     
                });
    Last edited by aeternus; February 27th, 2013 at 10:35 AM.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Posts
    8
    Rep Power
    0
    Originally Posted by aeternus
    They are both just as easy. The results depends on the condition. In this case: whether there is an error message or not.

    Is my feeling correct that you didn't made the script you talked about yourself? Because if you did, you would know exactly when an error message should occur. If you didn't write any of the code. You might want to post at least what you have.

    I am tempted to say try javascript. an example could look like this.

    javascript Code:
    <!DOCTYPE html>
    <html>
        <head><meta charset="UTF-8" />       
            <title></title>        
          </head>
     
        <body>
            <div id="error-message">this is an error message. which now is shown because it has some contents inside #error-message. But when you remove this text the whole dive wil not be shown</div>
     
     
            <!-- place this at the bottom of your code in case you have no idea what is going on -->
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
            <script type="text/javascript">
                $.noConflict();
                jQuery(document).ready(function($) {
                    // Let's check if the div with the id of #error-message has any contents
                    // we do this by checking the string length of contents of #error-message
                    var errorLength = jQuery("#error-message").html().length;
     
                    //now lets make a condition that checks if the length is not 0 (in other words if the error message isn't there)
                    if(errorLength === 0){
                          //if the result is "0" we don't want to show the error message (div) because it is empty
                        jQuery('#error-message').css('display','none');
                    }
                });
            </script>
        </body>
    </html>


    an even cleaner way to hide an empty element would be to do this (assuming the jquery library is loaded(see example above)):
    (although it doesn't really explain what is going on)
    javascript Code:
     
    $(document).ready(function() { 
                    $('#error-message:empty').hide(); 
     
                });
    I havent dealt with jquery at all yet and not sure where to even start with loading anything. Basically the code that I have is just the <div><iframe></iframe></dive> And if the site the iframe is pulling in from has no tables/items to show I just need the div to just totally disappear and allow site spacing to fill in where the div would be. Thanks again!! Will give that code a try tonight
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Posts
    8
    Rep Power
    0
    I've attached screenshot of exactly what is going on frontend. If there is a message from the iframe site it shows up fine but when no message is active the white space still shows. Wanting this space to totallly go away and everything shift up as if the div does not even exist until a new message is made active from iframe website/page...

    Screenshot:


    Thanks N Advance!
  16. #9
  17. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Did you try the code I gave? Did you look at it, and the comments inside the code? What was the result of it??

    Clearly you didn't...If you did you would have found out that what you want is already given....

    I suggest you try out the code....

    the only thing you have to change is change the selector <-- Yep that's a tutorial!
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Posts
    8
    Rep Power
    0
    Originally Posted by aeternus
    Did you try the code I gave? Did you look at it, and the comments inside the code? What was the result of it??

    Clearly you didn't...If you did you would have found out that what you want is already given....

    I suggest you try out the code....

    the only thing you have to change is change the selector <-- Yep that's a tutorial!
    OK thanks chief!!! I did try out the code but got same results with white square and no data....when you say selector what do you mean?? the actual div id/classs?? sorry for all questions, really new to some of this stuff. Thanks
  20. #11
  21. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Originally Posted by dklbwf
    OK thanks chief!!! I did try out the code but got same results with white square and no data....when you say selector what do you mean?? the actual div id/classs?? sorry for all questions, really new to some of this stuff. Thanks
    Dear Dklbwf,

    I my previous post I linked something. Did you have a look at that???

    I am not sure what you expect from a forum. But If you would do some effort yourself it is much appreciated! You got exactly what you asked for even without any effort from your side, You got a link to a tutorial that explains in the most explicit way what selectors are and how to use them. All that is needed is the code given + that tutorial and you can make it work for your situation!

    I wish you the best! and remember google is your friend!
    Last edited by aeternus; February 28th, 2013 at 11:35 AM.
  22. #12
  23. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Posts
    8
    Rep Power
    0
    Originally Posted by aeternus
    Dear Dklbwf,

    I my previous post I linked something. Did you have a look at that???

    I am not sure what you expect from a forum. But If you would do some effort yourself it is much appreciated! You got exactly what you asked for even without any effort from your side, You got a link to a tutorial that explains in the most explicit way what selectors are and how to use them. All that is needed is the code given + that tutorial and you can make it work for your situation!

    I wish you the best! and remember google is your friend!
    Thanks for all your help

IMN logo majestic logo threadwatch logo seochat tools logo