HTML File :)
<!DOCTYPE html>
<html>
<head>
<title>MaHii : CSS with JS</title>
<link type="text/css" href="style.css" rel="stylesheet">
<script type="text/javascript" src="animate.js"></script>
</head>
<body>
<div id="container">
<div class="buttons">
<h1><a href="#" onClick="return false" onMouseDown="expand('first')">Expand Box</a></h1>
<h1><a href="#" onClick="return false" onMouseDown="retract('first')">Retract Box</a></h1>
</div>
<div class="box" id="first">
<p>JavaScript is a dynamic computer programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed. It is also being used in server-side network programming (with Node.js), game development and the creation of desktop and mobile applications.</p>
</div>
</div>
</body>
</html>
CSS File :) style.css :)
#container{
width:350px;
padding:5px;
}
h1{
font-family: montserrat;
font-size:16px;
width:150px;
background:#33b5e5;
padding:6px;
border-radius:3px;
float:left;
margin:5px;
text-align:center;
}
h1 a{
text-decoration:none;
color: white;
}
h1 a:hover{
color: #e1e2e3;
}
.box{
background:#33b5e5;
width:342px;
height:0px;
overflow:hidden;
border-radius:5px;
color: white;
font-family: montserrat;
font-size:13px;
}
.box p{
padding:10px;
}
JavaScript File :) animate.js :)
function expand(el){
var target = document.getElementById(el);
var height = target.offsetHeight;
var sh = target.scrollHeight;
var loopTimer = setTimeout('expand(\''+el+'\')',10);
if(height < sh){
height += 5;
} else {
clearTimeout(loopTimer);
}
target.style.height = height+"px";
}
function retract(el){
var target = document.getElementById(el);
var height = target.offsetHeight;
var loopTimer = setTimeout('retract(\''+el+'\')',10);
if(height > 0){
height -= 5;
} else {
target.style.height = "0px";
clearTimeout(loopTimer);
}
target.style.height = height+"px";
}
Output :)
1)
2)
3)
<!DOCTYPE html>
<html>
<head>
<title>MaHii : CSS with JS</title>
<link type="text/css" href="style.css" rel="stylesheet">
<script type="text/javascript" src="animate.js"></script>
</head>
<body>
<div id="container">
<div class="buttons">
<h1><a href="#" onClick="return false" onMouseDown="expand('first')">Expand Box</a></h1>
<h1><a href="#" onClick="return false" onMouseDown="retract('first')">Retract Box</a></h1>
</div>
<div class="box" id="first">
<p>JavaScript is a dynamic computer programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed. It is also being used in server-side network programming (with Node.js), game development and the creation of desktop and mobile applications.</p>
</div>
</div>
</body>
</html>
CSS File :) style.css :)
#container{
width:350px;
padding:5px;
}
h1{
font-family: montserrat;
font-size:16px;
width:150px;
background:#33b5e5;
padding:6px;
border-radius:3px;
float:left;
margin:5px;
text-align:center;
}
h1 a{
text-decoration:none;
color: white;
}
h1 a:hover{
color: #e1e2e3;
}
.box{
background:#33b5e5;
width:342px;
height:0px;
overflow:hidden;
border-radius:5px;
color: white;
font-family: montserrat;
font-size:13px;
}
.box p{
padding:10px;
}
JavaScript File :) animate.js :)
function expand(el){
var target = document.getElementById(el);
var height = target.offsetHeight;
var sh = target.scrollHeight;
var loopTimer = setTimeout('expand(\''+el+'\')',10);
if(height < sh){
height += 5;
} else {
clearTimeout(loopTimer);
}
target.style.height = height+"px";
}
function retract(el){
var target = document.getElementById(el);
var height = target.offsetHeight;
var loopTimer = setTimeout('retract(\''+el+'\')',10);
if(height > 0){
height -= 5;
} else {
target.style.height = "0px";
clearTimeout(loopTimer);
}
target.style.height = height+"px";
}
Output :)
1)
2)
3)
No comments:
Post a Comment