Creating a basic Bootstrap 3 site, I've set up a full-width header with a Bootstrap Carousel showcasing three images. To handle different viewport widths, I added a media query to switch between image sets based on width. Here's the code snippet for HTML and CSS:
<!-- Full Page Image Background Carousel Header -->
<header id="carousel-intro" class="carousel slide page-scroll ">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-intro" data-slide-to="0" class="active"></li>
<li data-target="#carousel-intro" data-slide-to="1"></li>
<li data-target="#carousel-intro" data-slide-to="2"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner wow bounceIn" data-wow-duration="2s">
<div class="item active">
<div id="carousel-intro-img-1" class="fill"></div>
</div>
<div class="item">
<div id="carousel-intro-img-2" class="fill"></div>
</div>
<div class="item">
<div id="carousel-intro-img-3" class="fill"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-intro" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-intro" data-slide="next">
<span class="icon-next"></span>
</a>
<a id="scroll-link" class="page-scroll " href="#chi">
<i class="fa fa-angle-double-down white animated infinite pulse"></i>
</a>
</header>
/*Header section*/
.carousel,
.item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
.carousel-indicators{
visibility: hidden;
}
.icon-prev,.icon-next{
visibility: hidden;
}
/*Setting carousel image*/
@media screen and (max-width: 991px){
#carousel-intro-img-1{
background-image:url(../img/intro-tablet/intro1g.jpg);
background-repeat: no-repeat;
}
#carousel-intro-img-2{
background-image:url(../img/intro-tablet/intro2g.jpg);
background-repeat: no-repeat;
}
#carousel-intro-img-3{
background-image:url(../img/intro-tablet/intro3g.jpg);
background-repeat: no-repeat;
}
}
@media screen and (min-width: 992px){
#carousel-intro-img-1{
background-image:url(../img/intro-desktop/intro1g.jpg);
background-repeat: no-repeat;
}
#carousel-intro-img-2{
background-image:url(../img/intro-desktop/intro2g.jpg);
background-repeat: no-repeat;
}
#carousel-intro-img-3{
background-image:url(../img/intro-desktop/intro3g.jpg);
background-repeat: no-repeat;
}
}
.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}To update the images when switching to landscape view, jQuery mobile was included:
script src="js/jquery.mobile.custom.min.js"></script>
The following script was then implemented:
$(window).bind('orientationchange resize', function(event){
if(event.orientation) {
if(event.orientation == 'portrait') {
$('#carousel-intro-img-1'),css('background-image', 'url(../img/intro-tablet/intro1g.jpg)');
$('#carousel-intro-img-2'),css('background-image', 'url(../img/intro-tablet/intro2g.jpg)');
$('#carousel-intro-img-3'),css('background-image', 'url(../img/intro-tablet/intro3g.jpg)');
} else
if (event.orientation == 'landscape') {
$('#carousel-intro-img-1'),css('background-image', 'url(../img/intro-tablet-landscape/intro1g.jpg)');
$('#carousel-intro-img-2'),css('background-image', 'url(../img/intro-tablet-landscape/intro2g.jpg)');
$('#carousel-intro-img-3'),css('background-image', 'url(../img/intro-tablet-landscape/intro3g.jpg)');
}
} //event orientation
else {}
});
However, an error occurs specifically for dimensions below 768px, indicated as Uncaught ReferenceError: css is not defined. This issue does not affect larger dimensions where everything functions correctly.
Why is this happening?
Upon inspecting the Chrome log console, it is evident that the 'css' attribute is causing the error message. This problem seems isolated to smaller viewport sizes.