CODEWITHSUNDEEP
javascriptjquerycss
purplecracka
purplecracka

Reputation: 25

Hiding a text when a sections width is set to 0

so I've had a bit of a problem with trying to make a section's width to 0 and have everything inside the object do the same thing. Essentially hide the section and everything inside it. Thing is, the section will change to a width of 0px but the text inside still displays and also sort of pushes off to the side. Is there any way that I can use either css or javascript to hide the text and bring it back when the sections width changes back over?

Code pasted into jsfiddle: http://jsfiddle.net/t6ck9ajb/

$(document).ready(function(){
        $("#about").click(function(){
        if ($("#about-me").css("width") <= "0vw") {
            $("#introduction").animate({width:"0vw"}, 500);
            /*$("#intro").css("display","none");
            $("#port").css("display","none");
            $("#about").css("display","none"); */
        }
        else {
            $("#introduction").animate({width:"0vw"});
        }
        });
        });

This is what I have to attempt at hiding the text, but this didn't really hide it.

Upvotes: 1

Views: 224

Answers (4)

Daryl
Daryl

Reputation: 610

If you're wanting to hide the content when the '#about' selector is clicked, why not just use $('#introduction').toggle()?

Upvotes: 1

Michelangelo
Michelangelo

Reputation: 5958

Here a working fiddle with the intended animation: fiddle

CSS:

#introduction {
    z-index: 1;
    visibility:"visible";
    overflow:hidden;
}

jQuery

$(document).ready(function () {
    $("#about").click(function () {
        if ($("#about-me").css("width") <= "0px") {
            $("#introduction").animate({
                width: "0px"
            }, 500, function () {
                $("#introduction").css("visibility", "hidden");
            })
        } else {
            $("#introduction").animate({
                width: "0px"
            });
        }
    });

});

Upvotes: 0

Mike Timmerman
Mike Timmerman

Reputation: 131

Here is a different approach:

$(function(){
  $('#about').on('click', homeAboutToggle);
  $('#home').on('click', homeAboutToggle);
});

function homeAboutToggle(){
  $('#introduction').toggleClass('active');
  $('#about-me').toggleClass('active');
}
* {
	margin: 0px 0px;
	padding: 0px 0px;
	font-family: "Open Sans";
}

#container{
    width: 100vw;
	height: 100vh;
    overflow:hidden;
    position:relative;
}

.full-page {
	width: 100vw;
	height: 100vh;
	background-color: #5085aa;
	position: absolute;
	float: left;
            transition:all ease-in-out 400ms;
    -webkit-transition:all ease-in-out 400ms;    
}

.full-page.right{
            transform: translateX(100vw);
    -webkit-transform: translateX(100vw);
}

.full-page.left{

            transform: translateX(-100vw);
    -webkit-transform: translateX(-100vw);
}

.full-page.active{
            transition:all ease-in-out 400ms;
    -webkit-transition:all ease-in-out 400ms;    
            transform: translateX(0);
    -webkit-transform: translateX(0);
}

#introduction {
	z-index: 1;
}

#about-me {

	z-index: 0;
}

#information {
	text-align: center;
}

#intro {
	font-size: 4vw;
	color: white;
	text-align: center;
	padding-top: 30vh;
	
}

#port{
	position: absolute;
	right: 3vw;
	bottom: 5vh;
	color: white;
	font-size: 1.5vw;
	text-decoration: none;
	font-weight: bold;
}

#home,
#about{
	position: absolute;
	left: 3vw;
	bottom: 5vh;
	color: white;
	font-size: 1.5vw;
	text-decoration: none;
	font-weight: bold;
}

#about:active  #about-me {
	width: 100vw;
}

.big {
	font-size: 8vw;
	color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div id="container">
	<section class="full-page right" id="about-me">
		<h1 id="information">About Me</h1>
		<a id="home">Back home</a>		
	</section>
	<section class="full-page left active" id="introduction">
		<h1 id="intro">Hello, my name is<br/><span class="big">Michael!</span>  </h1>
		<a id="port">Portfolio</a>
		<a id="about">About Me</a>
	</section>
    </div>
</body>

Upvotes: 1

George Kormaris
George Kormaris

Reputation: 795

This a CSS issue. You need to add overflow: hidden; to whatever you want to be hidden with a change of width, in this case #intro.

Upvotes: 0

Related Questions