Bootstrap, CSS / CSS3

How to Prevent bootstrap modal closing when clicking outside?

No Comments

Prevent Bootstrap Modal from Closing when Clicking Outside by using CSS

By expanding the .modal-dialog class dimensions to full window, we can avoid the outside click closing issue.

CSS


.modal {
    background-color: rgba(0,0,0,0.5);
}
.modal-dialog{
    width: 100%;
    height: 100vh;
    margin: 0 !important;
}
.modal-content {
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: auto;
    top: 15%;
}
@media (min-width: 600px){
.modal-content {
    width: 700px;
}
}

Demo

See the Pen Prevent the Bootstrap Modal Closing when Clicking Outside the modal by Vinothkumar Rajendran (@fedtutorial) on CodePen.0

Continue Reading

Bootstrap, Jquery

Full screen bootstrap carousel slider using Jquery

No Comments

Create a full page bootstrap carousel

We can develop a full screen bootstrap carousel or slider by using below scripts.

Demo

See the Pen Full screen bootstrap carousel slider by Vinothkumar Rajendran (@fedtutorial) on CodePen.0

Include bootstrap library files and jquery library. After that use the below script to achieve full page carousel.


/* full page carousel */
$(document).ready(function () {
$('.carousel').carousel({
	pause: "false"
});
$('.carousel').css({ 'margin': 0, 'width': $(window).outerWidth(), 'height': $(window).outerHeight() });
//$('.carousel-inner').css({'z-index': 0});
$('.carousel .item').css({ 'position': 'fixed', 'width': '100%', 'height': '100%' });
$('.carousel-inner div.itemimg').each(function () {
	varimgSrc = $(this).attr('src');
	$(this).parent().css({ 'background': 'url(' + imgSrc + ') center center no-repeat', '-webkit-background-size': '100% ', '-moz-background-size': '100%', '-o-background-size': '100%', 'background-size': '100%', '-webkit-background-size': 'cover', '-moz-background-size': 'cover', '-o-background-size': 'cover', 'background-size': 'cover' });
	$(this).remove();
});
$(window).on('resize', function () {
	$('.carousel').css({ 'width': $(window).outerWidth(), 'height': $(window).outerHeight() });
});
});
Continue Reading

Bootstrap, CSS / CSS3, Jquery

How to change the background color of odd and even rows?

No Comments

Change the background color for odd and event rows using Jquery

‘Odd’ and ‘even’ pseudo classes are used to selecting the odd and even number of row.

Script:


  $(function(){
   $('table tr:even').addClass('even');
    $('table tr:odd').addClass('odd');
});

Explanation:

By using odd and even classes we can set the required background color using CSS.

Demo

See the Pen Change the background color of add and event table rows by Vinothkumar Rajendran (@fedtutorial) on CodePen.0

Continue Reading