Bootstrap, Jquery

Create a full screen slider

No Comments

Create a full-page bootstrap carousel

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


/* full page carousel */
jQuery(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

Change the background color of odd and even row of accordions

No Comments

Change the background color for odd and event panel of accordion

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

Script:


  $(function(){
    $('.panel-group > .panel-default:even').addClass('even');
    $('.panel-group > .panel-default:odd').addClass('odd');
});

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

Continue Reading