Develop Reference

How do I align Label and Input on the same line to the right?

I'm struggling while trying to locate 2 buttons on the left of an input field.
I already tried several suggestions on the internet but I couldn't make it the way I want.
<div class="col-xs-6" >
<div class="row">
<div class="col-xs-12">
<div class="pull-right">
<div class="search" style="height: 18px" ng-if="vm.showSearch()">
<form style="margin:0px" name="filter_actions" novalidate>
<div>
<input id="freeTextSearch" type="text" class="form-control input-sm" autofocus ng-change="vm.filterTable(Search)" ng-model="Search"
style="text-indent: 5px;" minlength="1" ng-model-options="{debounce:100}" id="Search" name="Search" placeholder="Search fields">
<a ng-show="Search" ng-click="localSearch = ''; vm.filterTable(localSearch)"><i style="vertical-align: middle; top:4px; right:35px; position: absolute" class="glyphicon glyphicon-remove"></i></a>
</div>
</form>
</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">
<label class="btn btn-default" role="button" ng-click="vm.popUp()"><i class="fa fa-expand" style="color:darkgreen;"></i></label>
</div>
</div>
</div>
</div>
</div>
This is how it looks like :

Keep in mind, that label is an inline element similar to span, so you need to set its css to display: inline-block to behave like a div
once you have done this, the easiest way to have them in the same line is to use display:flex and flex-wrap: nowrap on the parent div.
here is my favorite flex-cheat-sheet
I have simplified your example and you can see how this works clicking below on Run code snippet.
.pull-right {
display: flex;
flex-wrap: nowrap;
}
.pull-right input{ border: 1px solid green;}
.pull-right label{ border: 1px solid red; display: inline-block;}
<div class="pull-right">
<div class="search" style="height: 18px" ng-if="vm.showSearch()">
<form style="margin:0px" name="filter_actions" novalidate>
<div>
<input id="freeTextSearch" type="text"
class="form-control input-sm" autofocus ng-change="vm.filterTable(Search)"
ng-model="Search"
style="text-indent: 5px;" minlength="1"
ng-model-options="{debounce:100}" id="Search" name="Search" placeholder="Search fields">
<a ng-show="Search"
ng-click="localSearch = ''; vm.filterTable(localSearch)">
<i style="vertical-align: middle; top:4px; right:35px; position: absolute"
class="glyphicon glyphicon-remove"> </i></a>
</div>
</form>
</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">
<label class="btn btn-default" role="button" ng-click="vm.popUp()"><i class="fa fa-expand" style="color:darkgreen;">your icons</i></label>
</div>
</div>

How to set radio button as hidden for the div

I am working on simple feedback form where I have 3 fields Name,rating(Poor, fair, good) and feedback comment.
In my form I want user to select a single rating at a time and submit the form with selected rating & feedback comments.
I have created the <div> elements for each rating and make them as radio type.
I don't want to show the radio button on the form, but I want my Div to behave as radio button.
Also how to fix the border of Divs?
I am attaching the screenshots.
First one, how I want it to appear and second one is how my current code is appearing on UI.
Below is my form code & CSS
<div id="modal_wrapper">
<div id="modal_window">
<div style="text-align: right;"><a id="modal_close" href="#">close <b>X</b></a></div>
<p><Strong>We'd love your feedback.</Strong><br></p>
<p>Your feedback will help us improve your experience. To protect your privacy, please do not enter personal or account information.</p>
<form id="modal_feedback" method="POST" action="#" accept-charset="UTF-8">
Your Name :<br>
<input type="text" name="name" value=""><span></span><br>
<div class="feedbackCl" >
<input id="overall_0" name="overall" type="radio" value="1" tabindex="0" aria-describedby="o1-l">
<label for="overall_0" class="labelClass">— —</label>
<span class="screen_reader" id="o1-l">Poor</span>
</div>
<div class="feedbackCl">
<input id="overall_1" name="overall" type="radio" value="2" tabindex="0" aria-describedby="o2-l">
<label for="overall_1" class="labelClass">—</label>
<span class="screen_reader" id="o2-l">Fair</span>
</div>
<div class="feedbackCl">
<input id="overall_2" name="overall" type="radio" value="3" tabindex="0" aria-describedby="o3-l">
<label for="overall_2" class="labelClass">+ —</label>
<span class="screen_reader" id="o3-l">Good</span>
</div>
<br>
<span><br></span><br>
<textarea style="overflow-x: hidden;" id="gBann" name="message" maxlength="1000" rows="4" cols="85" placeholder="How can we improve our site? Please share your suggestions." onKeyUp="toCount('gBann','uBann','{CHAR} characters left',1000);" >
</textarea><br>
<span id="uBann" class="minitext" style="text-align: right;">1000 characters left</span><br>
<input type="submit" name="feedbackForm" value="Submit">
</form>
</div>
</div>
CSS Code
.feedbackCl {
float: left;
box-sizing: border-box;
padding-top: 5px;
width: 9%;
text-align: center;
height: 40px;
}
input[type="radio" i] {
-webkit-appearance: radio;
box-sizing: border-box;
}
.labelClass{
margin-right: 0 !important;
height: 28px;
background-color: #fff !important;
color: #0511ac;
box-sizing: border-box;
}

You can do something like the following:
$('.radio-group .feedbackCl').click(function(){
$(this).parent().find('.feedbackCl').removeClass('selected');
$(this).addClass('selected');
var val = $(this).attr('data-value');
$(this).parent().find('input').val(val);
console.log('You have selected: '+val);
});
.feedbackCl {
display: inline-block;
width: 70px;
height: 30px;
border: 2px solid lightblue;
cursor: pointer;
margin: 2px 0;
text-align: center;
line-height: 30px;
}
.radio-group{
position: relative;
}
.feedbackCl.selected{
border-color: blue;
background-color: orange;
}
span{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modal_wrapper">
<div id="modal_window">
<div style="text-align: right;"><a id="modal_close" href="#">close <b>X</b></a></div>
<p><Strong>We'd love your feedback.</Strong><br></p>
<p>Your feedback will help us improve your experience. To protect your privacy, please do not enter personal or account information.</p>
<form id="modal_feedback" method="POST" action="#" accept-charset="UTF-8">
Your Name :<br>
<input type="text" name="name" value=""><span></span><br>
<div class="radio-group">
<div class="feedbackCl" data-value="1">— —
<span>Poor</span>
</div>
<div class="feedbackCl" data-value="2">-
<span>Fair</span>
</div>
<div class="feedbackCl" data-value="3">+ —
<span>Good</span>
</div>
<div class="feedbackCl" data-value="4">+
<span>Very good</span>
</div>
</div>
<br>
<span><br></span><br>
<textarea style="overflow-x: hidden;" id="gBann" name="message" maxlength="1000" rows="4" cols="85" placeholder="How can we improve our site? Please share your suggestions." onKeyUp="toCount('gBann','uBann','{CHAR} characters left',1000);" >
</textarea><br>
<span id="uBann" class="minitext" style="text-align: right;">1000 characters left</span><br>
</form>
</div>
</div>

Try my snippet! I dont use any js code, just html and css! hope this can help you!
.feedback{float:left;width:100%;margin-top:10px}
.feedbackCl{float:left;width:15%}
.feedbackCl>input[type="radio"]{display:none}
.feedbackCl>input[type="radio"]:checked+label>.sight{border:solid 2px #00f;background:orange}
.feedbackCl>label{width:100%;height:100%;display:inline-block;text-align:center}
.feedbackCl>label>.sight{width:100%;float:left;border:solid 1px #ccc;padding:10px 0;color:#00f;margin-left:1px}
.feedbackCl>label>.screen_reader{width:100%;float:left;padding-top:10px}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="modal_wrapper">
<div id="modal_window">
<div style="text-align: right;"><a id="modal_close" href="#">close <b>X</b></a></div>
<p><Strong>We'd love your feedback.</Strong><br></p>
<p>Your feedback will help us improve your experience. To protect your privacy, please do not enter personal or account information.</p>
<form id="modal_feedback" method="POST" action="#" accept-charset="UTF-8">
Your Name :<br>
<input type="text" name="name" value=""><span></span><br>
<div class="feedback">
<div class="feedbackCl" >
<input id="overall_0" name="overall" type="radio" value="1" tabindex="0" aria-describedby="o1-l">
<label for="overall_0" class="labelClass">
<span class="sight">— —</span>
<span class="screen_reader" id="o1-l">Poor</span>
</label>
</div>
<div class="feedbackCl">
<input id="overall_1" name="overall" type="radio" value="2" tabindex="0" aria-describedby="o2-l">
<label for="overall_1" class="labelClass">
<span class="sight">—</span>
<span class="screen_reader" id="o2-l">Fair</span>
</label>
</div>
<div class="feedbackCl">
<input id="overall_2" name="overall" type="radio" value="3" tabindex="0" aria-describedby="o3-l">
<label for="overall_2" class="labelClass">
<span class="sight">+—</span>
<span class="screen_reader" id="o3-l">Good</span>
</label>
</div>
<div class="feedbackCl">
<input id="overall_3" name="overall" type="radio" value="3" tabindex="0" aria-describedby="o3-l">
<label for="overall_3" class="labelClass">
<span class="sight">+</span>
<span class="screen_reader" id="o3-l">Very Good</span>
</label>
</div>
</div>
<br>
<span><br></span><br>
<textarea style="overflow-x: hidden;" id="gBann" name="message" maxlength="1000" rows="4" cols="85" placeholder="How can we improve our site? Please share your suggestions." onKeyUp="toCount('gBann','uBann','{CHAR} characters left',1000);" >
</textarea><br>
<span id="uBann" class="minitext" style="text-align: right;">1000 characters left</span><br>
<input type="submit" name="feedbackForm" value="Submit">
</form>
</div>
</div>
</body>
</html>

Rather than using radio buttons, you can add an onClick event to each div which will populate a hidden input.
<input type="text" name="name" value=""><span></span><br>
<div class="feedbackCl" onclick="setRating(1)">
<label for="overall_0" class="labelClass">- -</label>
<span class="screen_reader" id="o1-l">Poor</span>
</div>
<div class="feedbackCl" onclick="setRating(2)">
<label for="overall_1" class="labelClass">-</label>
<span class="screen_reader" id="o2-l">Fair</span>
</div>
Javascript
<script>
function setRating(v) {
document.getElementById('overall').value = v;
}
</script>

I think you wish to use the radio inputs, because you don't know another way to get only one form field to track on submit.
Here, I use a hidden input field to store which div (poor - fair - good) has been selected.
And divs are easy to style like you want.
;)
$(".feedbackCl").on("click",function(){
$(".feedbackCl").removeClass("selected").css({"opacity":1});;
$(this).addClass("selected");
$(".feedbackCl").not(".selected").css({"opacity":0.6});
console.log("Value stored in the hidden input of the form: "+$(this).attr("id"));
$("#feedbackResult").val( $(this).index() );
});
.feedbackCl {
float: left;
box-sizing: border-box;
padding-top: 5px;
width: 9%;
text-align: center;
height: 40px;
border:1px solid grey;
display:block;
}
.feedbackCl.selected{
border:2px solid blue;
}
#poor{
background-color:red;
}
#fair{
background-color:yellow;
}
#good{
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modal_wrapper">
<div id="modal_window">
<div style="text-align: right;">
<a id="modal_close" href="#">close <b>X</b></a>
</div>
<p><Strong>We'd love your feedback.</Strong><br></p>
<p>Your feedback will help us improve your experience. To protect your privacy, please do not enter personal or account information.</p>
<form id="modal_feedback" method="POST" action="#" accept-charset="UTF-8">
Your Name :<br>
<input type="text" name="name" value=""><span></span><br>
<br>
<div class="feedbackCl" id="poor">
Poor
</div>
<div class="feedbackCl" id="fair">
Fair
</div>
<div class="feedbackCl" id="good">
Good
</div>
<input type="hidden" id="feedbackResult" name="feedbackResult">
<br>
<br>
<br>
<textarea id="gBann" name="message" maxlength="1000" rows="4" cols="85" placeholder="How can we improve our site? Please share your suggestions." onKeyUp="toCount('gBann','uBann','{CHAR} characters left',1000);" ></textarea><br>
<span id="uBann" class="minitext" style="text-align: right;">1000 characters left</span><br>
<br>
<input type="submit" name="feedbackForm" value="Submit">
</form>
<br>
</div>
</div>

AngularJS - Button next in multiple step form submit directly in first step

I've created a dynamic multiple step form (With ng-show) but I have this issue :
When I put the button next outside of form, the user can navigate in step without filling the form.
And when I put the button into every DIV (therefore in the form), the button next submit all of form (but blank) in my data base ...
If you have a suggest for me, I take it with pleasure !
This is my HTML :
<form ng-submit="submitEvent(event)">
<div ng-show="data.step == 1">
<div style="border-bottom:none !important; background : transparent; text-align:center;">
<i class="fa fa-edit fa-4x" id="iconstep-ajust"></i>
<h4 class="text stable" style="font-size: 25px; position: relative; top: 50px; font-family: lobster;">Post</h4>
</div>
<img id="separation-step" src="img/line.png"></img>
<div class="list" style="top:80px;">
<label class="item item-input item-floating-label" style="border:none;">
<input type="text" style="color:#FFF;font-size: 22px;text-align:center;" placeholder="Post name" ng-model="event.nameid">
</label>
<label class="item item-input item-floating-label" style="border:none;">
<textarea style="color:#FFF;font-size: 14px;text-align:center;background-color:rgba(255, 255, 255, 0);" placeholder="Description de l'événement" ng-model="event.descriptionid"></textarea>
</label>
</div>
</div>
<div ng-show="data.step == 2">
<div style="border-bottom:none !important; background : transparent; text-align:center;">
<i class="fa fa-clock-o fa-4x" id="iconstep-ajust"></i>
<h4 class="text stable" style="font-size: 25px; position: relative; top: 50px; font-family: lobster;">hour</h4>
</div>
<img id="separation-step" src="img/line.png"></img>
<div class="list" style="top:80px;">
<label class="item item-input item-floating-label" style="border:none;">
<input type="date" style="color:#FFF;font-size: 22px;text-align:center;" placeholder="EEE - MMM - yyyy" ng-model-options="{timezone: 'UTC'}" ng-model="event.dateid" placeholder="Date">
</label>
<label class="item item-input item-floating-label" style="border:none;">
<input type="time" style="color:#FFF;font-size: 22px;text-align:center;" placeholder="HH:mm:ss" ng-model-options="{timezone: 'UTC'}" ng-model="event.hourid" placeholder="Heure">
</label>
</div>
</div>
<div ng-show="data.step == 3">
<div style="border-bottom:none !important; background : transparent; text-align:center;">
<i class="fa fa-users fa-4x" id="iconstep-ajust"></i>
<h4 class="text stable" style="font-size: 25px; position: relative; top: 50px; font-family: lobster;">Users</h4>
</div>
<img id="separation-step" src="img/line.png"></img>
<div class="list" style="top:80px;">
<label class="item item-input item-floating-label" style="border:none;">
<input type="number" style="color:#FFF;font-size: 18px;text-align:center;" placeholder="Users" ng-model="usersid">
</label>
<label class="item item-input item-floating-label" style="border:none;">
<input type="number" style="color:#FFF;font-size: 16px;text-align:center;" placeholder="Age" ng-model="event.ageid">
</label>
</div>
</div>
<div ng-show="data.step == 4">
<div style="border-bottom:none !important; background : transparent; text-align:center;">
<i class="fa fa-map-marker fa-4x" id="iconstep-ajust"></i>
<h4 class="text stable" style="font-size: 25px; position: relative; top: 50px; font-family: lobster;">Localisation</h4>
</div>
<img id="separation-step" src="img/line.png"></img>
<div class="list" style="top:80px;">
<label class="item item-input item-floating-label" style="border:none;">
<input type="text" style="color:#FFF;font-size: 18px;text-align:center;" ng-model="event.addressid" placeholder="Adresse (Sans le n° de rue)">
</label>
<label class="item item-input item-floating-label" style="border:none;">
<input type="text" style="color:#FFF;font-size: 22px;text-align:center;" placeholder="Ville" ng-model="event.townid">
</label>
</div>
<button class="button button-icon icon ion-checkmark-round" style="position: absolute; top: 2px; right: 5px; color:#FFF; z-index:1000;" type="submit" value="Add Event" ng-click="stepsuccess()"></button>
</div>
</form>
<button class="button button-icon icon ion-ios-arrow-forward" style="position: absolute; top: 2px; right: 5px; color:#FFF; z-index:1000;" ng-hide="data.step == 4" ng-click="nextStep()"></button>
</ion-content>
My controller JS :
$scope.nextStep = function() {
$scope.data.step += 1;
}
$scope.data = {
step: 1,
}
Thanks for your time !

You can disable the the button until all form elements you need are completed and valid, using the ng-disabled directive, for example:
<button type="submit" class="btn btn-primary btn-lg" ng-disabled="artistSignupForm.$invalid" ng-click="send()">{{t 'artist-signup.submitBtn'}}</button>
In my case, I am using angular's native form validation checker $invalid (which you should use, if you want to), but can bind the ng-disabled directive to any other validation expression you require.

I had a similar issue a while back. I was using ng-disabled on the button until form is valid: ng-disabled="formName.$invalid". The submit effect is because HTML5 spec says that the default behaviour of a button in a form should be submit. You can use this directive to prevent this behaviour.
app.directive('preventDefault', function () {
return {
link: function (scope, element, attributes) {
element.click(function (event) {
event.preventDefault();
event.stopPropagation();
});
}
};
});
As #Mindastic pointed out, adding an attribute type="button" on your button also solves the problem without the necessity of a runtime compile by angular. :)

How to hide one Bootstrap's modal when other appears on screen?

I have two modal menus on the same page: for registration and for login. When appears first, second should be disappeared from the page and not overlap the first one. How could I do this using bootstrap or bootstrap & jQuery?
The first menu:
<div id="dialog-sign-in" class="modal" aria-hidden="true" style="display: none;">
<div class="modal-dialog" style="width: 320px;">
<div class="modal-content">
<div class="modal-body">
<h1 class="text-center" style="margin-bottom: 25px;">Login</h1>
<ul id="socail-media-sign-in" class="social-media social-media-lg social-media-horizontal social-media-save-positions text-center">
<li class="fb">
Facebook
</li>
<li class="vk">
Vkontakte
</li>
<li class="ok last">
Odnoklassniki
</li>
</ul>
<p class="line">or</p>
<form action="https://site.ru/wp-login.php" method="post" data-validate="true" data-ajax="true" data-ajax-callback="checkAjaxLogin" id="form_login" autocomplete="off" novalidate="novalidate">
<input type="hidden" id="sign-in-return" name="sign-in-return" value="%2F">
<div class="form-group">
<input class="form-control needed" type="email" name="log" id="login_user_email" placeholder="E-mail" data-rule-required="true" data-rule-email="true" aria-required="true">
</div>
<div class="form-group">
<input class="form-control needed" type="password" name="pwd" id="login_user_password" placeholder="Password" data-rule-required="true" aria-required="true">
</div>
<div class="form-group">
<input type="submit" value="Войти" name="dd" class="btn btn-primary btn-block">
</div>
</form>
<p class="text-center"><a rel="nofollow" href="#dialog-password-reset-toggler" id="dialog-password-reset-toggler" class="text-muted" title="Сбросить забытый пароль"><small>Забыли пароль?</small></a></p>
<p class="text-center"><a rel="nofollow" href="#dialog-sign-up" class="underline" id="dialog-sign-up-toggler">Зарегистрироваться</a></p>
<p class="text-muted text-center" style="margin-bottom: 0;">Говорят, Усейн Болт регистрируется <br>за 4,5 секунды</p>
</div>
</div>
</div>
</div>
The second one:
<div id="dialog-sign-up" class="modal" aria-hidden="true" style="display: none;">
<div class="modal-dialog" style="width: 320px;">
<div class="modal-content">
<div class="modal-body">
<h1 class="text-center" style="margin-bottom: 25px;">Sign up</h1>
<ul id="socail-media-sign-up" class="social-media social-media-lg social-media-horizontal social-media-save-positions text-center">
<li class="fb">
Facebook
</li>
<li class="vk">
Vkontakte
</li>
<li class="ok last">
Odnoklassniki
</li>
</ul>
<p class="line">or</p>
<form action="/registration" method="post" data-validate="true" data-ajax="true" data-ajax-callback="checkRegistration" id="form_register" novalidate="novalidate">
<div class="form-group">
<input class="form-control" data-rule-required="true" data-rule-email="true" type="email" name="user_login" id="user_email" placeholder="E-mail" aria-required="true">
</div>
<div class="form-group">
<input class="form-control" data-rule-required="true" data-rule-minlength="6" type="password" name="user_password" id="pass1" placeholder="Password" aria-required="true">
</div>
<div class="row">
<div class="col-xs-6" style="padding-right: 5px;">
<div class="form-group">
<input class="form-control" data-rule-required="true" type="text" name="user_firstname" id="first_name" placeholder="First name" aria-required="true">
</div>
</div>
<div class="col-xs-6" style="padding-left: 5px;">
<div class="form-group">
<input class="form-control" data-rule-required="true" type="text" name="user_lastname" id="last_name" placeholder="Last name" aria-required="true">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6" style="padding-right: 5px;">
<div class="form-group">
<input readonly="readonly" class="form-control datetime" data-rule-required="true" data-view-mode="2" type="text" name="user_birthday" id="user_birthday" placeholder="Год рождения" aria-required="true">
</div>
</div>
<div class="col-xs-6" style="padding-left: 5px;">
<div class="form-group">
<div class="select2-container form-control select2" id="s2id_user_sex"> <span class="select2-chosen" id="select2-chosen-1">Sex</span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow" role="presentation"><b role="presentation"></b></span><label for="s2id_autogen1" class="select2-offscreen"></label><input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-1" id="s2id_autogen1"><div class="select2-drop select2-display-none"> <div class="select2-search select2-search-hidden select2-offscreen"> <label for="s2id_autogen1_search" class="select2-offscreen"></label> <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" role="combobox" aria-expanded="true" aria-autocomplete="list" aria-owns="select2-results-1" id="s2id_autogen1_search" placeholder=""> </div> <ul class="select2-results" role="listbox" id="select2-results-1"> </ul></div></div><select class="form-control select2 select2-offscreen" data-rule-required="true" data-rule-min="1" data-placeholder="Пол" name="user_sex" id="user_sex" data-minimum-results-for-search="-1" tabindex="-1" title="" aria-required="true">
<option></option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<input type="submit" name="wp-submit" value="Sign up" class="btn btn-primary btn-block" disabled="">
</div>
<p class="text-center" style="margin-bottom: 0;"><a rel="nofollow" href="#dialog-sign-in" class="underline" id="dialog-sign-in-toggler">Login</a></p>
<div style="color: #ccc; padding-top: 10px;" class="text-center">
By signing up you agree with our Terms&Conditions
</div>
</form>
</div>
</div>
</div>
</div>
Update:
I wrote a jQuery snippet for this but it stopped working correctly (has no reaction on clicking).
URL links:
<div onclick="location.href='#dialog-sign-in';" style="background:url('http://example.com/bitrix/templates/main/assets/images/icons/proj_icon_login.png'); cursor: pointer; margin-top: -8px; float: right; padding-bottom: 10px; border-bottom: 0px solid #b2d109; line-height: 26px; background-position: left; background-repeat: no-repeat; display: inline-block;">
<div style="margin-left: 15px; padding-top: 12px;">
Login
</div>
</div>
<div onclick="location.href='#dialog-sign-up';" style="background:url('http://example.com/bitrix/templates/main/assets/images/icons/proj_icon_reg.png'); cursor: pointer; margin-top: -8px; float: right; padding-bottom: 10px; border-bottom: 0px solid #b2d109; line-height: 26px; background-position: left; margin-right: 20px; background-repeat: no-repeat; display: inline-block;">
<div style="margin-left: 25px; padding-top: 12px;">
Sign up
</div>
</div>
jQuery code:
<script>
jQuery(function( $ ) {
var $dialogSignIn = jQuery('#dialog-sign-in'),
$dialogSignUp = jQuery('#dialog-sign-up'),
$dialogPasswordReset = jQuery('#dialog-password-reset'),
$dialogSignUpToggler = jQuery('#dialog-sign-up-toggler'),
$dialogSignInToggler = jQuery('#dialog-sign-in-toggler'),
$dialogPasswordResetToggler = jQuery('#dialog-password-reset-toggler');
$dialogSignUpToggler.click(function( event ) {
event.preventDefault();
$dialogSignIn.modal('hide');
$dialogSignUp.modal('show');
});
$dialogSignInToggler.click(function( event ) {
event.preventDefault();
$dialogSignUp.modal('hide');
$dialogSignIn.modal('show');
});
});
</script>
Seems that the code is correct. Why it doesn't work?

$('#dialog-sign-in').modal('hide');
$('#dialog-sign-up').modal('show');
However you need to write a bit o javascript for it to work properly but it basically goes down to this methods.

Sliding Login Panel with HTML, CSS, Jquery

Working on a sliding login panel using Html, CSS and jquery with some plugins.
http://24.125.42.135/
As you can see, the bar pushes the content downwards when activated (click login at top right). This is great if you are on the first screen. However, if you are on the second screen and then try to press login, the bar is not there.
I'm stumped conceptually on what to do here so that the login button remains fixed at the top like the rest of the menu, but still pushes the content down no matter where you are on the page.
HTML
<!-- Panel -->
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">
<!-- Login Form -->
<form class="clearfix" action="#" method="post">
<h1>Sign In</h1>
<label class="grey" for="log">Username:</label>
<input class="field" type="text" name="log" id="log" value="" size="23" />
<label class="grey" for="pwd">Password:</label>
<input class="field" type="password" name="pwd" id="pwd" size="23" />
<label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>
<div class="clear"></div>
<input type="submit" name="submit" value="Login" class="bt_login" />
<a class="lost-pwd" href="#">Lost your password?</a>
</form>
</div>
<div class="left right">
<!-- Register Form -->
<form action="#" method="post">
<h1>Not a member yet? Sign Up!</h1>
<label class="grey" for="signup">Username:</label>
<input class="field" type="text" name="signup" id="signup" value="" size="23" />
<label class="grey" for="email">Email:</label>
<input class="field" type="text" name="email" id="email" size="23" />
<label>A password will be e-mailed to you.</label>
<input type="submit" name="submit" value="Register" class="bt_register" />
</form>
</div>
</div>
</div> <!-- /login -->
<!-- The tab on top -->
<div class="tab">
<ul class="login">
<li class="left"> </li>
<li id="toggle">
<a id="open" class="open" href="#?signin">Log In | Register</a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</li>
<li class="right"> </li>
</ul>
</div> <!-- / top -->
</div> <!--panel -->
CSS
/* sliding panel */
#toppanel {
position: relative; /*Panel will overlap content */
/*position: relative;*/ /*Panel will "push" the content down */
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Javascript
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});

I suggest making the rest of the content inside a fixed div that you can scroll.
This way you never move your div, unless you toggle the login div.
But it still gives the same effect as now.