JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4650 x5090
2 Required Classes: English and Digital Media 3rd/Elective Class:  + Animation or Design or Film

Back to list of all examples

Useful Stuff About:

Another example of displaying Bios (or other content)

Click on a button to see the effect

Bio 1 name

Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text Bio 1 text

Name of person 1
Bio 2 name

Bio 2 text

Name of person 2
Bio 3 name

Bio 3 text

Name of person 3

HTML Code 1 - paste where you want the name buttons to be located


<div class="bioBox" id="bioBox1">
<div class="bioName" id="bioName1">Bio 1 name</div>
<div class="bioText" id="bioText1">
<p>Bio 1 text </p>
</div>
<div class="bioPic" id="bioPic1"><img src="project3/images/bio1.png" width="200" height="200" alt="Name of person 1"/>
<audio controls>
<source src="project3/media/bio1Interview.mp3" type="audio/mp3"/>
</audio>
</div>
</div>
<div class="bioBox" id="bioBox2">
<div class="bioName" id="bioName2">Bio 2 name</div>
<div class="bioText" id="bioText2">
<p>Bio 2 text</p>
</div>
<div class="bioPic" id="bioPic2"><img src="project3/images/bio2.png" width="200" height="200" alt="Name of person 2"/>
<audio controls>
<source src="project3/media/bio2Interview.mp3" type="audio/mp3"/>
</audio>
</div>
</div>
<div class="bioBox" id="bioBox3">
<div class="bioName" id="bioName3">Bio 3 name</div>
<div class="bioText" id="bioText3">
<p>Bio 3 text</p>
</div>
<div class="bioPic" id="bioPic3"><img src="project3/images/bio3.png" width="200" height="200" alt="Name of person 3"/>
<audio controls>
<source src="project3/media/bio3Interview.mp3" type="audio/mp3"/>
</audio>
</div>
</div>

CSS - paste this in your CSS file


.bioBox {
width: 250px;
height: auto;
position: relative;
z-index: 8;
clear: both;
margin-left: auto;
margin-right: auto;
padding-bottom: 60px;
}
#bioBox1 {
z-index: 8;
}
#bioBox2 {
z-index: 7;
}
#bioBox3 {
z-index: 6;
}
.bioName {
width: 250px;
height: 30px;
text-align: center;
font-size: 2em;
z-index: 9;
position: absolute;
overflow: hidden;
background-color: rgba(0,0,0,1.00);
top: 0px;
left: 0px;
padding-bottom: 41px;
cursor: pointer;
color: rgba(255,255,255,1.00);
}
.bioText {
width: 200%;
height: 400px;
overflow: auto;
position: absolute;
top: 38px;
left: 0px;
background-color: rgba(0,0,0,1.00);
padding: 5px;
color: rgba(255,255,255,1.00);
z-index: 10;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;
}
.bioPic {
width: 100%;
height: 250px;
position: absolute;
text-align: center;
overflow: hidden;
left: -250px;
top: 41px;
z-index: 10;
}
.bioPic audio {
width: 200px;
margin: 0;
position: relative;
}

Javascript

You'll need these in the head of your HTML - check that you don't already have them. Most likely you have lines #1 through #4 but you DON'T have line #5. If you are only pasting line #5, paste it directly UNDER the similar line #4 in your HTML head code.


<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/minified.js"></script>
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/easing.js"></script>
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/easing.compatibility.js"></script>
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/transit.js"></script>
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/ui.js"></script>

Paste this code below inside your $(document).ready(function() { }); code.


var slideDuration = 250, slideEasing = "easeOutExpo", btnClicked, btnNumber, targetText, targetPic, bioState = "collapsed", bioNameW;
$(".bioText").hide("slide", {direction:"up"} , 0);
$(".bioPic").hide("slide", {direction:"right"} , 0);
bioNameW = $(".bioName").width();
$(".bioName").click( function() {
$(".bioName").not($(this)).animate({
"width":0
},slideDuration, slideEasing);
if(bioState === "collapsed") {
btnClicked = $(this).attr("id");
btnNumber = btnClicked.substr(7,8);
targetText = "#bioText" + btnNumber;
targetPic = "#bioPic" + btnNumber;
$(this).transition({
"border-top-left-radius":"25px",
"border-top-right-radius":"25px"
});
$(targetText).show("slide", {direction:"up"} , slideDuration, slideEasing);
$(targetPic).delay(slideDuration).show("slide", {direction:"right"} , slideDuration, slideEasing);
bioState = "expanded";
} else {
$(".bioName").not($(this)).animate({
"width":bioNameW
}, slideDuration*2, slideEasing );
btnClicked = $(this).attr("id");
btnNumber = btnClicked.substr(7,8);
targetText = "#bioText" + btnNumber;
targetPic = "#bioPic" + btnNumber;
$(this).transition({
"border-top-left-radius":0,
"border-top-right-radius":0
});
$(targetText).delay(slideDuration).hide("slide", {direction:"up"} , slideDuration, slideEasing);
$(targetPic).hide("slide", {direction:"right"} , slideDuration, slideEasing);
bioState = "collapsed";
}
});