Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Making a <div> disappear

    Hello,

    I'm quite new to webdesign. I've got a basic knowledge about HTML and CSS, but none whatsoever regarding JS or any other coding language.

    I'm right now trying to get something done, which I think is incredibly simple, but I cannot seem to find a way to do it.

    I have got two DIVs, one (top1) exactly on top of the other (bot1). What I want, is to make the top one disappear when someone clicks on the DIV. I don't even want it to reappear, it just has to disappear once when it's clicked.

    After some internet research, I think it could be done with a tiny bit of script, but I cannot seem to get it right. Or is there maybe even a more simple way to solve this?


    Here is the complete code of my page:

    Code:
    <html>
    <head>
    	<link href="index_v1-1.css" type="text/css" charset="UTF-8" rel="stylesheet"/>
    	<title>test page</title>
    </head>
    
    <body>
    <div id="container">
        <div id="bot1"></div>
    	<div id="top1"></div>
    </div>
    </html>
    Code:
    body{ 
    	margin:0px;
    }
    
    #container {
    	width:100%;
        height:100%;
        position:relative;
    }
    
    #bot1 {
        width:25%;
        height:100%;
        position:absolute;
    	background-color:#000066;
        top:0%;
        left:0%;
    }
    #top1 {
        width:25%;
        height:100%;
        position:absolute;
    	background-color:#660000;
        top:0%;
        left:0%;
    	z-index:10;
    }

    I hope someone can help me out, it would be really appreciated.

    Thank you in advance!
    Last edited by JumperJack; 02-05-2013 at 09:45 PM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,040
    Thanks
    23
    Thanked 589 Times in 588 Posts
    Any time you want to change your page 9 out of ten times it's done with javascript. Advise you to start studying. Js is used below
    Code:
    <body>
    <div id="container">
        <div id="bot1"></div>
    	<div id="top1" onclick="goAway();"></div>
    </div>
    <script type="text/javascript">
    function goAway()
    {
    	document.getElementById("top1").style.display = "none";
    }
    </script>
    </body>
    </html>
    Just replace your code with this from the body tag down.
    Last edited by sunfighter; 02-05-2013 at 09:12 PM.

  • #3
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Sunfighter, didn't I see a post here where this was done via CSS alone? The half hour search didn't find it, but I'm pretty sure it was here.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #4
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ah sunfighter, that worked perfectly, and indeed, it was just such a small bit of code. i'll definitely start learning js!

    also, i have found traces of such thing being possible in css only, but i couldn't make it work myself. obviously that does not mean it's impossible, so if someone knows that would definitely be interesting as well.

    thanks a lot for your fast help!

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,040
    Thanks
    23
    Thanked 589 Times in 588 Posts
    "A css solution"(?) Every time I say yes or no absolutely someone comes along and shows that it's possible. You can use the hover feature of css to do this temporarily, but I don't think that can be changed to a permanent thing.

    css could do this with the :target feature< but we have to change the html and add to the css;
    Added to css:
    Code:
    div #top1:target {
        background-color:#000066;
    }
    And the html looks like this:
    Code:
    <body>
    <div id="container">
        <div id="bot1"></div>
    	<a href="#top1"><div id="top1"></div></a>
    </div>
    </body>
    But that did not bring the bot1 div to the top, it just changed the color of the top1 div. A magic trick.

    BUT now we use z-index. So to the #bot1 css mark up we add:
    Code:
    z-index: 5;
    color: white;
    A z-index and we make text readable.

    To the css :target we CHANGE it to:
    Code:
    div #top1:target {
        z-index:3;
    }
    So it's z-index will change to less then bot1.
    And we change this:
    Code:
    <div id="bot1">Bottom</div>
    So we have something to prove bot1 came to the top.
    The total comes out:
    Code:
    #bot1 {
        width:25%;
        height:100%;
        position:absolute;
    	background-color:#000066;
        top:0%;
        left:0%;
    	z-index: 5;
    	color: white;
    }
    #top1 {
        width:25%;
        height:100%;
        position:absolute;
    	background-color:#660000;
        top:0%;
        left:0%;
    	z-index:10;
    }
    div #top1:target {
        z-index:3;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
        <div id="bot1">Bottom</div>
    	<a href="#top1"><div id="top1"></div></a>
    </div>
    </body>
    And yeah we get css to work on click and bring a div to the top.

    Thanks for making do some research. But the javascript is the fastest way and only 2% of users have it turned off and the heck with them. They're probably paranoid and don't care if they see the whole web.

    Code:
    div #top1:target {
        display:none;
    }
    Also works
    Last edited by sunfighter; 02-06-2013 at 01:35 AM.

  • #6
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    very interesting!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •