Develop Reference

How can I apply a fadout effect to a div that have to disappear and a fade in effect to a div that replaces it using JQuery?

I am pretty new in JQuery and I am really not into effects and animation.
Into a page I have the following situation:
<div id="variazioneAnticipoModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title" style="color: #3b5a76;">Variazione Anticipo</h3>
</div>
<div id="modal-body" class="modal-body">
<div id="inserimentoVariazioneAnticipo">
<div class="row">
<div class="col-md-5">
<p style="line-height: 200%;">Inserire la variazione dell'anticipo: </p>
</div>
<div class="col-md-7">
<input id="variazioneAnticipo" class="rightAlligned form-control" style="width:50%" type="number" step="0.01" min="0" />
</div>
</div>
<div id="variazioneAnticpoInvalida" class="alert alert-danger" role="alert" style="display: none; margin-top: 3%;">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Il valore inserito non è valido
</div>
</div>
<!-- Hidden by default: -->
<div id="confermaVariazioneAnticipo" style="display: none;">
<h3>Confermare variazione anticipo ?</h3>
</div>
</div>
<div class="modal-footer">
<button id="chiudiVariaAnticipoButton" type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
<button id="variaAnticipoButton" type="button" class="btn btn-primary">Varia anticipo</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
This code represent a BootStrap modal.
The modal body contain 2 different setion.
The first one is the div having id="inserimentoVariazioneAnticipo" is shown by default. The second one is the div having id="confermaVariazioneAnticipo" and i hidden by default (because have setted the tyle="display: none;").
Ok, when the user click on the Varia anticipo button (having id="variaAnticipoButton"), the following JQuery function is performed:
$("#variaAnticipoButton").click(function() {
alert("Variazione Anticipo");
});
My problem is that when this function is perfromed I want that hide the first div (the one showed by default having id="inserimentoVariazioneAnticipo") and in its place display the second hidden div (the one having id="variazioneAnticpoInvalida").
I know that I can do it using the show() and the hide() JQuery function but I want to it applying some transiction effect like fade out when the first div is hidden and fade in when the second div is shown.
Or some nice other effects. What can I do to obtain this behavior on these 2 divs?

How about using fadeOut and fadeIn?
See this fiddle.
JavaScript
$(function(){
setTimeout(function(){
$("#div1").fadeOut(1000, function(){
$("#div2").fadeIn(1000);
});
}, 500);
});
HTML
<div id="div1">
<h1>
Div 1
</h1>
</div>
<div id="div2">
<h1>
Div 2
</h1>
</div>
CSS
#div1, #div2 {
width: 300px;
height: 200px;
}
#div1{
background: skyblue;
}
#div2{
background: green;
display: none;
}

See this codepen. You can use jQuery fade in/out as previously mentioned but this should get you going. Use stylesheets instead of inline styling too.
$("#variaAnticipoButton").click(function() {
$("#variazioneAnticpoInvalida").css("display", "block");
$("#inserimentoVariazioneAnticipo").css("display", "none");
});

Boostrap modal element offset giving zero

To scroll to an element in my Bootstrap modal, I can check the offset of the element. There are for instance 8 div's, each with their own id (#row-1, #row-2, etc.). If I open the modal and then input the following into the console, I get the correct offset value.
$('#row-6').offset()['top'];
But when I console.log this into the code itself, after opening the modal with .modal('show'), I get 0 back.
How can this difference occur? I tried all the solutions I could find on here, but all solutions gave me the same 0.
My problem would also be solved if I could scroll to the element in any other way with JavaScript.

You must wait for the modal to be shown:
// The modal is shown
$('#yourModal').on('shown.bs.modal', function() {
// Get the right offset
var offset = $("#yourelement").offset();
var offsetTop = offset.top;
var offsetLeft = offset.left;
});

My guess would be that the elements are not done being shown yet in order to give you the correct value? Try using a setTimeout to verify this:
setTimeout(function(){ $('#row-6').offset()['top']; }, 3000);

You said:
My problem would also be solved if I could scroll to the element in
any other way with javascript.
So, here is my suggestion to your problem:
html:
<button id="modal_show" class="btn btn-warning">Show modal</button>
<div id="myModal" class="modal modal-flex fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top:60px;">
<div class="modal-dialog">
<div class="modal-content" style="padding:5px;">
<div class="modal-body">
<div class="row" id="row1">
<div class="col-xs-12">
<p>
This is row 1
</p>
</div>
</div>
<div class="row" id="row2">
<div class="col-xs-12">
<p>
This is row 2
</p>
</div>
</div>
<div class="row" id="row3">
<div class="col-xs-12">
<p>
This is row 3
</p>
</div>
</div>
<div class="row" id="row4">
<div class="col-xs-12">
<p>
This is row 4
</p>
</div>
</div>
<div class="row" id="row5">
<div class="col-xs-12">
<p>
This is row 5
</p>
</div>
</div>
<div class="row" id="row6">
<div class="col-xs-12">
<p>
This is row 6
</p>
</div>
</div>
<div class="row" id="row7">
<div class="col-xs-6">
<p>
This is row 7
</p>
</div>
<div class="col-xs-6">
<p class="pull-right">
<span class="scroller" data-to="3">Go To 3</span>
</p>
</div>
</div>
<div class="row" id="row8">
<div class="col-xs-6">
<p>
This is row 8
</p>
</div>
<div class="col-xs-6">
<p class="pull-right">
<span class="scroller" data-to="2">Go To 2</span>
</p>
</div>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-xs-12 pull-right">
<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
Jquery:
$('#modal_show').on('click', function(){
$('#myModal').modal({show: true});
});
$('.scroller').click(function(){
var targetId = $(this).attr("data-to");
$('#myModal').animate({
scrollTop: $("#row"+targetId).position().top
}, 1000);
});
and some css:
.row {
min-height:100px;
}
.scroller {
cursor:pointer;
text-decoration:underline;
}
When you scroll down to div's 7 and 8, you will notice links that scroll you up to div #3 and #2 respectively.
working fiddle: http://jsfiddle.net/xL9at8sc/
Hope that helps you and others...

horizontally center align the 'No file chosen' message of File Upload control

I have a file upload control as shown below,
Code:
<div class="row">
<div class="col-md-12">
<div class="alert alert-warning normal-text hide" role="alert" id="ImportErrorMessage"></div>
<div class="panel panel-default">
<div class="panel-body">
<form id="FileImportForm" method="POST" action="api/FileUpload/Upload" enctype="multipart/form-data">
<div class="col-md-1">
<span class="glyphicon glyphicon-download-alt"></span>&nbspGet Template
</div>
<div class="col-md-3">
<select id="ItemDdl" class="col-md-12 item-list" title="Items"></select>
</div>
<div class="col-md-3">
<input type="file" id="ImportFile" name="ImportFile" accept="*.xlsx" class="col-md-12" />
</div>
<div class="col-md-1">
<button class="btn btn-danger btn-xs" id="ImportFileBtn" type="Submit" title="Import and Validate"><span class="glyphicon glyphicon-import"></span>Validate</button>
</div>
</form>
</div>
</div>
</div>
</div>
Expectation:
I want to show the 'No file chosen' message in the center as shown in the image. The reason is, to reduce the empty space between the 'Validate' button and the 'Choose file' button.
Options Tried:
I tried to modify this via css property and jquery but could not locate the text in UI.
Any help is appreciated.

Sorry, there is no simple way to do it. The only way to do it is to hide that input, put an image where that input is and some text with margin-left. With javascript you can easily position it and make sure that the click works cross-browser.

Modal pop up backdrop fade in still appearing after closing the popup

I have a 2 popup on myscreen which is linking one to another. when i click the 2nd popup it appears and when i close the pop up, the popup content goes off, but the backdrop still remains and disables the whole page.
html:
<div id="license-temp" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="get-license-popup">
<div class="license-heading">Get License</div>
<br>
<div class="row">
<div class="col-md-5 col-sm-4 col-xs-8">
<div class="license-description reg">What is the duration of the usage?</div>
<div class="duration">
<select id="usage-time">
<option>1 Week - $0.9</option>
<option>1 Weeks - $2.0</option>
<option>1 Month - $5.0</option>
<option>2 Months - $10.0</option>
</select>
</div>
</div>
<div class="col-md-5 col-sm-4 col-xs-8"><div class="license-description reg">What is the preferred return method?</div>
<div class="return-method">
<div><input type="radio" value="auto"> Automatic Return</div>
<div><input type="radio" value="manual"> Manual Return</div>
</div>
</div>
</div>
<table class="get-license-confirm">
<tr>
<td><!--<a href="" class="btn btn-warning confirm-my-license">GET LICENSE</button>-->
GET LICENSE</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="license" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<!--<img class="modal-cont" src="images/license-popup.png">-->
<div class="purchase-license">
<div class="license-heading">Get License</div>
<table class="get-license-confirm">
<tr>
<td><!--<a href="" class="btn btn-warning confirm-my-license">GET LICENSE</button>-->
GET LICENSE</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="confirm-license" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="purchase-license">
<div class="license-heading">Confirm</div>
<table class="get-license-confirm">
<tr>
<td>Confirm</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
code:
$(".get-me-license").click(function(){
$("#license").modal('show');
});
$(".get-me-license-tmp").click(function(){
$("#license-temp").modal('show');
});
$(".buy").click(function(){
$(".buy").modal('hide');
});
$(".confirm-my-license").click(function(){
$("#confirm-license").modal('show');
$('#license').modal('hide')
});
After closing all popups it looks like below image...the backdrop still remains.

When you open modal then there is some style add in body and append div to body so you need to remove that style and that div.
Hi have solution for that.
$(".get-me-license").click(function(){
$("#license").modal('show');
});
$(".get-me-license-tmp").click(function(){
$("#license-temp").modal('show');
});
$(".buy").click(function(){
$(".buy").modal('hide');
$('body').removeClass().removeAttr('style');$('.modal-backdrop').remove(); // added by me
});
$(".confirm-my-license").click(function(){
$("#confirm-license").modal('show');
$('#license').modal('hide');
$('body').removeClass().removeAttr('style');$('.modal-backdrop').remove(); // added by me
});

Use This Code
$('body').removeClass().removeAttr('style');$('.modal-backdrop').remove();

Create spaces between grid spans in Twitter Bootstrap

how can I create some space between grid spans in Twitter bootstrap? I am using margin or padding, but both of them push the last grid span to a new line and breaks the layout. Here is the jsfiddle:
http://jsfiddle.net/jUQEc/1/
And, some markup:
<div class="container-narrow">
<h4 class="title">Featured Companies</h4>
<div class="row-fluid" id="posts">
<div class="span6 post">
<h4 class="title">Company Details</h4>
<div class="box">
test
</div>
</div>
<div class="span3 post">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>testtest<br>test<br>testtest<br>test<br>testtest<br>test<br>test
</div>
</div>
<div class="span3 post">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>testtest<br>test<br>testtest<br>test<br>testtest<br>test<br>test
</div>
</div>
<div class="span4 post">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>test
</div>
</div>
</div>
</div>

Two things:
You need to add the container-fluid class to the container. This will keep the left/right margins in tact when you bring the screen in.
Add a box-sizing:border-box to the .box class to tell the browser to keep all padding and margins inside the width defined by the span classes.
Lastly, you have a header tag inside the container but not in a row/span. You will probably get more consistent rendering if you wrap it up.
Here is a fiddle: http://jsfiddle.net/8RVx6/