How To Toggle A Div From Right To Left In Jquery
I have this fiddle where I am trying to create a floating div which should toggle from right to left . I am very new to UI so my code is bit messy here is my code and FIddle So i
Solution 1:
you can use float values in jquery.
$(".widget-toggle-btn").click(function() {
alert('ss');
// Set the effect typevar effect = 'slide';
// Set the options for the effect type chosen//var options = { direction: $('.mySelect').val() };// Set the duration (default: 400 milliseconds)var duration = 500;
/* $('.widget').animate({
width: 'toggle'
}, 400);*/
$('.widget').css('float','left');
$('.widget-toggle-btn').css('float','right');
});
Here is your update code. https://jsfiddle.net/KFmLv/6753/
Solution 2:
You can do it like this also. refer the working demo
<!DOCTYPE html><html><head><title></title><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></head><styletype="text/css">div.mydiv{
width: 0px;
height: 100px;
position: absolute;
left: 70px;
top: 20px;
background-color: orange;
overflow: hidden;
text-align: center;
color: white;
}
#mybutton{
width: 70px;
height: 100px;
color: white;
position: absolute;
top:20px;
left:0px;
background-color: black;
color: orange;
}
</style><body><divclass="mydiv">Hello StackOverflow ......</div><buttonid="mybutton">Click on me</button><scripttype="text/javascript">var theNum = 0;
$("#mybutton").click(function(){
theNum = theNum +1;
if(theNum%2 != 0)
{
$("div.mydiv").animate({width:500},1000);
}
else
{
$("div.mydiv").animate({width:0},1000);
}
});
</script></body></html>NOTE : This answer is for your request. refer the below working demo.click on the button to see. hope this will help to you. change the positions and sizes as your need.
<!DOCTYPE html><html><head><title></title><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></head><styletype="text/css">div.holder{
width: 400px;
height: 600px;
position: absolute;
right: 0;
}
div.holderdiv.formholder{
width: 0px;
height: 600px;
background-color: orange;
position: absolute;
right: 0;
}
#mybutton{
width: 50px;
height: auto;
position: absolute;
right: 0px;
}
</style><body><divclass="holder"><divclass="formholder"></div><buttonid="mybutton">C<br>L<br>I<br>C<br>K<br><br> O<br>N<br><br>M<br>E</button></div><scripttype="text/javascript">var my_val = 0;
$("#mybutton").click(function(){
my_val = my_val+1;
if (my_val%2 != 0)
{
$("div.formholder").animate({width:300},1000);
$("#mybutton").animate({right:300},1000);
}
else
{
$("div.formholder").animate({width:0},1000);
$("#mybutton").animate({right:0},1000);
}
});
</script></body></html>Solution 3:
You need to download the jquery ui plugin. all the effects are binding in a single file.
Solution 4:
Sorry I can't add a comment, but the button is fixed because it does not have class .widget
Solution 5:
you missed the jQuery ui library. And in your https://jsfiddle.net/KFmLv/6752/ fiddle you called multiple time jquery, jquery ui library.
$(".widget-toggle-btn").click(function() {
alert('ss');
// Set the effect typevar effect = 'slide';
// Set the options for the effect type chosen//var options = { direction: $('.mySelect').val() };// Set the duration (default: 400 milliseconds)var duration = 500;
/* $('.widget').animate({
width: 'toggle'
}, 400);*/
$('.widget').toggle(effect,'left', duration);
});.widget {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 0px4px4px4px;
padding: 1.0005rem;
-moz-box-shadow: 1px2px2pxrgba(0, 0, 0, 0.1);
-webkit-box-shadow: 1px2px2pxrgba(0, 0, 0, 0.1);
box-shadow: 1px2px2pxrgba(0, 0, 0, 0.1);
float: right;
width: 87%;
}
.home-bodyaside {
padding: 1.3125rem0;
padding-left: 1.3125rem;
padding-right: 1.3125rem;
float: left;
}
.find-out-more {
background: #16a085;
color: #fff;
}
.widget-toggle-btn {
width: 46px;
height: 84px;
float: left;
border-radius: 4px1px1px4px;
padding-left: 4px;
margin-left: 19px;
}<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><asideclass="col-md-4"><divid="popup-x"><divclass="widget-toggle-btn find-out-more ">
Click me to toggle him!
</div><divclass="widget find-out-more "><formaction=""name="learn-more"id="learn-more"method="POST"><h5id="head-element"name="head-element">For Admissions, Enroll Now!</h5><inputtype="email"name="emailId"id="emailId2"placeholder="Email address"><divid="emailError2"style="margin-top:-15px;font-size:12px;display:none"></div><inputtype="text"id="name2"name="name"placeholder="Full Name"title="Full Name"><divid="nameError2"style="margin-top:-15px;font-size:12px;display:none"></div><inputtype="tel"id="phoneNumber2"name="phoneNumber"placeholder="Phone Number"maxlength="13"onkeypress="return isNumberKey(event)"><divid="phoneError2"style="margin-top:-15px;font-size:12px;display:none"></div><divid="image-load"></div><inputid="courseSelection"name="courseSelection"title="Course"type="hidden"value="" /><inputid='redirectionUrl'type='text'style='display:none;'name='redirectionUrl'value='/' /><inputtype='hidden'style='display:none;'name='leadGroup'value='pondi' /><inputtype="submit"class="button"onclick="return validatePhone()"value="SUBMIT" /></form><pclass="disclaimer-popup">*Please note that by filling the form, you are agreeing to our terms & conditions in the <ahref="disclaimer"class="disclaimer-popup-link"target="_blank">disclaimer section</a>.</p></div></div><br></aside>Updated
$(".widget-toggle-btn").click(function() {
var effect = 'slide';
var options = { direction: 'right' };
var duration = 500;
$('.widget').toggle(effect, options, duration);
});.widget {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 0px4px4px4px;
padding: 1.0005rem;
-moz-box-shadow: 1px2px2pxrgba(0, 0, 0, 0.1);
-webkit-box-shadow: 1px2px2pxrgba(0, 0, 0, 0.1);
box-shadow: 1px2px2pxrgba(0, 0, 0, 0.1);
float: right;
width: 87%;
display: none;
}
.home-bodyaside {
padding: 1.3125rem0;
padding-left: 1.3125rem;
padding-right: 1.3125rem;
float: left;
}
.find-out-more {
background: #16a085;
color: #fff;
}
.widget-toggle-btn {
width: 46px;
height: 84px;
float: left;
border-radius: 4px1px1px4px;
padding-left: 4px;
margin-left: 19px;
}
#popup-x{
position: absolute;
right: 0;
}<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><asideclass="col-md-4"><divid="popup-x"><divclass="widget-toggle-btn find-out-more ">
Click me to toggle him!
</div><divclass="widget find-out-more "><formaction=""name="learn-more"id="learn-more"method="POST"><h5id="head-element"name="head-element">For Admissions, Enroll Now!</h5><inputtype="email"name="emailId"id="emailId2"placeholder="Email address"><divid="emailError2"style="margin-top:-15px;font-size:12px;display:none"></div><inputtype="text"id="name2"name="name"placeholder="Full Name"title="Full Name"><divid="nameError2"style="margin-top:-15px;font-size:12px;display:none"></div><inputtype="tel"id="phoneNumber2"name="phoneNumber"placeholder="Phone Number"maxlength="13"onkeypress="return isNumberKey(event)"><divid="phoneError2"style="margin-top:-15px;font-size:12px;display:none"></div><divid="image-load"></div><inputid="courseSelection"name="courseSelection"title="Course"type="hidden"value="" /><inputid='redirectionUrl'type='text'style='display:none;'name='redirectionUrl'value='/' /><inputtype='hidden'style='display:none;'name='leadGroup'value='pondi' /><inputtype="submit"class="button"onclick="return validatePhone()"value="SUBMIT" /></form><pclass="disclaimer-popup">*Please note that by filling the form, you are agreeing to our terms & conditions in the <ahref="disclaimer"class="disclaimer-popup-link"target="_blank">disclaimer section</a>.</p></div></div><br></aside>
Post a Comment for "How To Toggle A Div From Right To Left In Jquery"