Hiding div using css and javascript

Question

hey I'm currently having a problem on manipulating my div's, see i have this code here that displays a div search result like the ones in google. inside it is another div "overlay" hidden with a "position:fixed;" style and it only displays when the user clicks on the hyperlink Abstract then it will be hidden again once they clicked the overlay div

Problem : once i click on the abstract div, it will return to the state hidden

<div class="SearchResults">';
echo "      <span class='top'>";
echo "          <a href='#'>";
echo "              <h3>". $title ."</h3>";
echo "          </a>";
echo "          <br />";
echo "          <h5 class='sub'>";
echo                $abstract;
echo "          </h5>";
echo "      </span>";
echo "      <span class='bottom'>";
echo "          <span class='bottomLeft'>";
echo "              <a href='#' class='options' onclick='showOverlay(". $run['id'] .")'>";
echo "                  Abstract";
echo "              </a>";
echo "              <span style='margin:0px 5px;'>|</span>";
echo "              <a target='_blank' href='view.php?filename=NKTI  Proceedings  vol. 1 no. 1 Feb.  1996' class='options'>";
echo "                  Full Article";
echo "              </a>";  
echo "          </span>";
echo "          <div class='overlay' id='". $run['id'] ."' onclick='hideOverlay(". $run['id'] .")'> ";
echo "              <div class='abstract'>";
echo "                      <h1>".$title."</h1><br /><br /><br />";
echo                        $run['abstract'];
echo "              </div>";
echo "          </div>";
echo "          <span class='bottomRight'>";
echo "              <p class='label'>volume 1, January - April 2015</p>";
echo "          </span>";
echo "      </span>";
echo "      <br style='clear:both;'/>";
echo "</div>";

here's my css code

.abstract
{
z-index:300;
box-shadow:0px 0px 20px rgba(0,0,0,0.5);
padding:20px;
margin:5% auto;
height:500px;
width:80%;
background:white;
overflow:auto;
overflow-wrap:break-word;
text-align:justify;
-webkit-transition:1s;
line-height:1.5;
}
.overlay
{
-webkit-transition:1s;
display:none;
opacity:0;
width:100%;
height:100vh;
background:rgba(0,0,0,0.7);
position:fixed;
top:0px;
left:0px;
z-index:200;
}

and also my javascript code

    function showOverlay(id)
    {
        document.getElementById(id).style['display'] = "block";
        document.getElementById(id).style['opacity'] = "1";
    }

    function hideOverlay(id)
    {

        document.getElementById(id).style['opacity'] = "0";
        document.getElementById(id).style['display'] = "none";

    }

note: i just want to achieve the effect like facebook makes when you click an image on the news feed.

If you are asking about a client–side problem, better to post the client–side code. — RobG
– RobG, Commented Apr 14, 2015 at 6:35
no actually i'm just asking if i could modify the code so that when i click on the abstract the overlay won't disappear — Thamus
– Thamus, Commented Apr 14, 2015 at 6:38
If that's all, then remove the onclick listener that does that (i.e. onclick='hideOverlay(...)'). PS you can do onclick='showOverlay(this)' then in the function function hideOverlay(element) and element will reference the element so you can then do element.style.opacity = ... and so on. No passing ID. ;-) — RobG
– RobG, Commented Apr 14, 2015 at 6:40
i can't really do that i want the users to click on the black background of the div "overlay" but when they click on the child div of "overlay" which is "abstract" the div won't disappear — Thamus
– Thamus, Commented Apr 14, 2015 at 6:44

RobG · Accepted Answer · 2015-04-14 14:39:43Z

1

If I understand correctly, you want the listener to run when the click comes from the div, but not from a child element. If that's correct, you can check where the click came from and only do the action if it came from an element you want to respond to.

I've done it by passing this and event to the function, but there are other ways to do the same thing:

<div id="foo" onclick="hideOverlay(this, event)" style="border: 1px solid #dddddd">
  <p  style="background-color: #aaccff">Some content</p>
</div>
<button onclick="showOverlay('foo')">Show overlay</button>

<script>

function hideOverlay(el, evt) {
  if (el && evt) {
    el.style.display = evt.target == el ? 'none' : '';
  }
}

function showOverlay(id) {
  var el = document.getElementById(id);
  if (el) el.style.display = '';
}

</script>

Clicking on the P doesn't hide the div because the click it gets bubbles up from another element, you have to click on the div to hide it. Once it's hidden, clicking the button shows it again.

Note that when showing an element, it's preferred to set display to '' (empty string) so it returns to the default or whatever the element has inherited, you don't need to set the correct value for the various types of element.

answered Apr 14, 2015 at 14:39

RobG

148k32 gold badges180 silver badges216 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thamus Over a year ago

thanks dude i've been having this problem since yesterday, but i just tried your code you nailed it man. I almost gave up on this. thanks again

Collectives™ on Stack Overflow

Hiding div using css and javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related