如果Div为空，请将其隐藏并更改另一个div的宽度

Question

I am new to css and php and am trying to find a way to hide my .item-page aside if the Div is empty. And then change the width of item-page to 100%. Right now the aside takes up 85px empty or not. How can do this in my php file?

Here is my CSS:

item-page { 
position:relative;
  width: 100%;

}

.item-page aside {
  float:left;
  position:absolute;
  width:85px;

}
gk-article {
  font-size:14px;
  line-height:26px !important;
  margin:0 0 80px 110px;

}

Here is my php file:

<div id="main">                                
<jdoc:include type="component" />

</div>

Answer 1

You could set up different css class rules for empty vs not empty. These rules would set widths and/or display. Empty element would be zero...or don't even print it. Then run whatever test in your server code that determines status...and apply appropriate calsses to the elements

Answer 2

You've tagged javascript/jquery here, and that's probably what you should use (not PHP).

(in jQuery) you can do something like this - use classes as charlietfl suggested:

if( $('.item-page aside').html() == '') ) { 
    $('.item-page aside').hide();
    $('.item-page').removeClass('isntempty').addClass('isempty');
} else {
    $('.item-page aside').show();
    $('.item-page').removeClass('isempty').addClass('isntempty');
}

CSS:

.isntempty {
    width: 100%;
}

.isempty {
    width: 50%; /* whatever your default width is */
}

Answer 3

check by js in php:

<?php
...
echo "<script>if (document.getElementById('divId').innerText=='')
//or document.getElementById('divId').textContent=='' in firefox//
$('#divId').attr('style','width:100%;');
</script>";
...
?>

Answer 4

You can use Javascript, with the jQuery framework you could do this :

<script type="text/javascript">
$( document ).ready(function() {

//Hide if empty
if( $('.item-page').is(':empty') ) {
    $('.item-page').hide();
}

//Change to width 100%
$('.item-page').css({width:'100%'});

});
</script>

Learn more here :

http://api.jquery.com/empty-selector/

http://learn.jquery.com/using-jquery-core/document-ready/