siddparkar siddparkar - 2 months ago 10
SQL Question

Hide DIV when content displayed is has NULL value in database

I have a font awesome div which floats on top on my image, to give the image details, which are extracted from the mysql database.

When I hover over this (info) font awesome icon, a tiny inline opens up with the content from mysql.

Now when the content is NULL, I don't want the font awesome to show up at all.

the following is my code.

<div id="hotspot1" class="hotspot" style = "position: fixed;">
<i class="fa fa-info-circle" style="font-size:48px;color:cyan"></i>
<div class="hover-popup well">
<?php
if ($details == null) {
echo "class='display-none';";
}
else {
echo $details;
}
?>
</div>
</div>


The CSS for this hover pop up is

#hotspot1 {
right:93%;
top:3%;
}

.hotspot {
line-height:20px;
text-align:center;
position:absolute;
cursor: pointer;
}

.hotspot .text {
width:80px;
height:20px;
}

.hover-popup {
display:none;
z-index:auto;
}

.hotspot:hover .hover-popup {
display:inline;
position:absolute;
left:100%;
top:0;
width:300px;
height: auto;
border:2px solid #000;
margin: 20px;
padding: 20px;
font-size: 16px;
background: #FBF0D9;
font-style: oblique;

.display-none {
display:none;
}


Now when there is a null value, it literally displays "class = 'display-none'"

What can I do to vanish the icon totally during null values?

Should I use JS or JQuery?

Answer

The class attribute needs to be inside the element it applies to, you are currently echoing outside of any elements, which is why you're seeing it on the page.

I can't work out exactly what it is you're trying to achieve but it seems that you want to show some particular HTML when $details is not null.

This should at least give you some clues,

<div id="hotspot1" class="hotspot" style="position: fixed;">

   <?php if ($details != null): ?>

      <i class="fa fa-info-circle" style="font-size:48px;color:cyan"></i>

      <div class="hover-popup well">
         <?= $details; ?>
      </div>

   <?php endif; ?>

</div>   

In the above code, if $details is not null then the HTML between the PHP blocks will be output, otherwise not. You may want to put all the HTML between the PHP blocks.