when i click the link the the div is resized to 100px .. but again if i click i want to the the div to be same as before (800px) using the same sliding animation ..how can i do that
#ee{
border:1px solid #00F;
height:100px;
width:800px;
position: absolute;
}
------------
<a href="#" class="mm">jajf</a>
<div id="ee">
</div>
--------------
<script type="text/javascript">
$(".mm").click(function(){
$("#ee").animate({
'width':'200px'
})
});
</script>Try asking your question on a HTML or CSS or javascript forum.
Java is different.
Moving to Javascript.
try this ... hope this u wanted ...
<script type="text/javascript">
$(".mm").click(function(){
if ($("#ee").css('width') == '800px'){
$("#ee").animate({
'width':'200px'
})
}
else{
$("#ee").animate({
'width':'800px'
})
}
});
</script>i have done it in two ways for you
first
<html>
<head>
</head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#testing").click(function(){
if($("#testing").css('width') == ('800px'))
{
$("#testing").animate({'width':'100px'});
var resize = null;
}
else
if(resize == null)
{
$("#testing").animate({'width':'800px'});
}
});
});
</script>
<style type="text/css">
#testing{
border:1px solid #00F;
cursor: pointer;
height:100px;
width:800px;
position: absolute;
}
</style>
<body>
<div id="testing"></div>
</body>
</html>In Second Method i have done styling within the JQ.
<html>
<head>
</head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#testing").css('border','1px solid #f00');
$("#testing").css('cursor','pointer');
$("#testing").css('height','100px');
$("#testing").css('width','800px');
$(this).click(function(){
if($("#testing").css('width') == ('800px'))
{
$(this).css('border','1px solid #f00');
$(this).css('cursor','pointer');
$(this).css('height','100px');
$(this).css('height','100px');
$("#testing").animate({'width':'100px'});
var resize = null;
}
else
if(resize == null)
{
$(this).css('border','1px solid #f00');
$(this).css('cursor','pointer');
$(this).css('height','100px');
$("#testing").animate({'width':'800px'});
}
});
});
</script>
<body>
<div id="testing"></div>
</body>
</html>Hope this works for you.
if you have query you can ask
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.