Andrew C. Duarte Andrew C. Duarte -4 years ago 82
Javascript Question

Remove single banner slider on mobile

THE BRIEF:

I have a request from a client to remove a single slider from a rotating banner slider ONLY within mobile view. All other screen sizes such as tablet, laptop and desktop will remain its complete set of banner slides (4 in total).

HOW IT CURRENTLY WORKS:


The banner has a class

active
set by JS to display a banner SLIDE and the remaining banner slides are default to
display: none;
. The
active
class is added to a targeted
id
for a duration of 10sec before targeting the next SLIDE.

THE ISSUE:


@media
queries will not work as the JS will override and when using
!important
it works, however, there is now a blank white space where a banner use to be.

THE DESIRED OUTCOME:


From the total of 4 banners, require the 1st banner to be removed on mobile ONLY so that it appears to be 3 banners only. Rotating banners #2, #3 and #4 and skipping banner #1.

Reference site:

REFER TO THIS SITE FOR FULLY OPERATIONAL CODE:
https://www.workpacgroup.com/

<div id="prefix_banner-container">
<div class="container-flud">
<div class="row">

<!-- STRAPSLIDE -->
<div class="strapslide" id="strapslide">

<!-- PROGRESS BAR -->
<div class="row">
<div class="col-md-12">
<div class="progress progress-striped">
<div class="progress-bar" style="width: 4.4%;"></div>
</div>
</div>
</div>
<!-- /PROGRESS BAR -->

<!-- PRELOADER -->
<div class="preloader text-center" style="display: none;"> <img src="//images.jxt.net.au/workpac-healthcare/images/loader.gif" alt="Loading.." id="loader"> </div>
<!-- /PRELOADER -->

<!-- STRAPSLIDE CONTAINER -->
<div class="strapslide-container" style="height: auto;">

<!-- SLIDE #1-->
<div class="slide" data-animation="fade" id="Slide1" >
<!-- SLIDE CONTENT -->
<div class="slide-content container">
<div class="row" data-top="1%" id="SlideText1" style="position: absolute; top: 1%; margin-left: 0px; margin-top: 0px; transform: rotate(0deg) scale(2, 2); opacity: 0;">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-7 col-xs-12 slide-text background-white">
<h2>Meet Our Nurse Tom <span>When not working with us,<br> he is building his dream home.</span></h2>
<a class="click-here" href="/why-work-for-us" title="Learn More">Learn More</a>
</div>
</div>
</div>
</div>
</div>
<!-- /SLIDE CONTENT -->
<!-- BACKGROUND IMAGE -->
<img src="//images.jxt.net.au/workpac-healthcare/images/banners/mainslider2.png" class="background-image background-fullwidth" alt=" ">
<!-- /BACKGROUND IMAGE -->
</div>
<!-- /SLIDE -->

<!-- SLIDE #2-->
<div class="slide" data-animation="fade" id="Slide2" style="">
<!-- SLIDE CONTENT -->
<div class="slide-content container">
<div class="row" data-top="1%" id="SlideText2" >
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-7 col-xs-12 slide-text background-white">
<h2>Search our latest<br> job vacancies</h2>
<a class="click-here" href="/advancedsearch.aspx?search=1" title="Click Here">Click Here</a>
</div>
</div>
</div>
</div>
</div>
<!-- /SLIDE CONTENT -->
<!-- BACKGROUND IMAGE -->
<img src="//images.jxt.net.au/workpac-healthcare/images/banners/mainslider1.png" class="background-image background-fullwidth" alt=" ">
<!-- /BACKGROUND IMAGE -->
</div>
<!-- /SLIDE -->


<!-- SLIDE #3-->
<div class="slide" data-animation="fade" id="Slide3" >
<!-- SLIDE CONTENT -->
<div class="slide-content container">
<div class="row" data-top="1%" id="SlideText3">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-7 col-xs-12 slide-text background-white">
<h2>Does Our Team Know You?<span>If Yes, Chances Are So Do Australia's Leading Facilities.</span></h2>
<a class="click-here" href="https://m.workpac.com/Registration/Home/Candidate#/" title="Register Now">Register Now</a>
</div>
</div>
</div>
</div>
</div>
<!-- /SLIDE CONTENT -->
<!-- BACKGROUND IMAGE -->
<img src="//images.jxt.net.au/workpac-healthcare/images/banners/main-slider5.png" class="background-image background-fullwidth" alt=" ">
<!-- /BACKGROUND IMAGE -->
</div>
<!-- /SLIDE -->

<!-- SLIDE #4-->
<div class="slide" data-animation="fade" id="Slide4" >
<!-- SLIDE CONTENT -->
<div class="slide-content container">
<div class="row" data-top="1%" id="SlideText4">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-7 col-xs-12 slide-text background-white">
<h2>More The Just A Nursing Agency.<span>See our range of complementary services.</span></h2>
<a class="click-here" href="/our-services" title="Click Here">Click Here</a>
</div>
</div>
</div>
</div>
</div>
<!-- /SLIDE CONTENT -->
<!-- BACKGROUND IMAGE -->
<img src="//images.jxt.net.au/workpac-healthcare/images/banners/main-slider4-1.jpg" class="background-image background-fullwidth" alt=" ">
<!-- /BACKGROUND IMAGE -->
</div>
<!-- /SLIDE -->




<div class="banner-nav">
<ul>
<li><a href="https://m.workpac.com/Registration/Home/Candidate#/" title="REGISTER" target="_blank"><i class="icon-1"></i>REGISTER</a></li>
<li><a href="/advancedsearch.aspx?search=1" title="FIND A JOB"><i class="icon-2"></i>FIND A JOB</a></li>
<li><a href="/why-work-for-us" title="WHY WORKPAC HEALTHCARE"><i class="fa fa-info-circle"></i>WHY WORKPAC HEALTHCARE</a></li>
<li><a href="/member/createjobalert.aspx" title="CREATE A JOB ALERT"><i class="fa fa-bell-o" aria-hidden="true"></i>CREATE A JOB ALERT</a></li>
</ul>
</div>
<!-- /STRAPSLIDE CONTAINER -->

<!-- PAGINATION -->
<div class="row strapslide-pagination">
<div class="container">
<ul>
</ul>
</div>
</div>
<!-- /PAGINATION -->

</div>
<!-- /STRAPSLIDE -->

</div>
</div>
<link rel="stylesheet" href="//images.jxt.net.au/workpac-healthcare/css/strapslide.css">
<!-- JavaScript plugins -->
<script src="//images.jxt.net.au/workpac-healthcare/js/strapslide/jquery.touchSwipe.min.js"></script>
<script src="//images.jxt.net.au/workpac-healthcare/js/strapslide/jquery.transit.min.js"></script>
<!--<script src="//plugins.grozav.com/strapslide/strapslide/js/jquery.transit.min.js"></script>-->
<script src="//images.jxt.net.au/workpac-healthcare/js/strapslide/jquery.mousewheel.js"></script>
<script src="//images.jxt.net.au/workpac-healthcare/js/strapslide/jquery.fitVids.js"></script>
<!-- Slider plugin -->
<script src="//images.jxt.net.au/workpac-healthcare/js/strapslide/strapslide.js"></script>
<!--<script src="//plugins.grozav.com/strapslide/strapslide/js/strapslide.js"></script> -->
<script>
$(document).ready(function () {
$('#strapslide').strapslide({
animation: "fade, top",
speed: 1000,
timeout: 5000,
responsive: 'resize',
autoplay: true,
preload: true,
pauseOnHover: true,
pagination: true,
mousewheel: false,
keyboard: true,
touchscreen: true
}, function () {
if ($('#strapslide .active').attr('id') == 'Slide1') {
$('#SlideText1').fxenter('fade', 500);
} else if ($('#strapslide .active').attr('id') == 'Slide2') {
$('#SlideText2').fxenter('fade', 500);
} else if ($('#strapslide .active').attr('id') == 'Slide3') {
$('#SlideText3').fxenter('fade', 500);
} else if ($('#strapslide .active').attr('id') == 'Slide4') {
$('#SlideText4').fxenter('fade', 500);
}
}, function () {
if ($('#strapslide .active').attr('id') == 'Slide1') {
$('#SlideText1').fxexit('fade', 500);
} else if ($('#strapslide .active').attr('id') == 'Slide2') {
$('#SlideText2').fxexit('fade', 500);
} else if ($('#strapslide .active').attr('id') == 'Slide3') {
$('#SlideText3').fxexit('fade', 500);
} else if ($('#strapslide .active').attr('id') == 'Slide4') {
$('#SlideText4').fxexit('fade', 500);
}
});
})
</script>
</div>



Answer Source

Thanks, all who was involved responding to this question.

A senior developer at my work helped me by adding a few lines of code to the existing JS. So I'm answering my own question in the event someone may need this also. The following if statement right after the $(document).ready(function ().

if ( $(window).width() < 767 ){
   $('#strapslide #Slide1').remove();   
   }

This seemed to have done the trick.

USING IN THE COMPLETE JAVASCRIPT CODE:

<script>
        $(document).ready(function () {
            if ( $(window).width() < 767 ){
                $('#strapslide #Slide1').remove();  
            }
            $('#strapslide').strapslide({
                animation: "fade, top",
                speed: 1000,
                timeout: 5000,
                responsive: 'resize',
                autoplay: true,
                preload: true,
                pauseOnHover: true,
                pagination: true,
                mousewheel: false,
                keyboard: true,
                touchscreen: true
            }, function () {
                if ($('#strapslide .active').attr('id') == 'Slide1') {
                    $('#SlideText1').fxenter('fade', 500);
                } else if ($('#strapslide .active').attr('id') == 'Slide2') {
                    $('#SlideText2').fxenter('fade', 500);
                } else if ($('#strapslide .active').attr('id') == 'Slide3') {
                    $('#SlideText3').fxenter('fade', 500);
                } else if ($('#strapslide .active').attr('id') == 'Slide4') {
                    $('#SlideText4').fxenter('fade', 500);
                } 
            }, function () {
                if ($('#strapslide .active').attr('id') == 'Slide1') {
                    $('#SlideText1').fxexit('fade', 500);
                } else if ($('#strapslide .active').attr('id') == 'Slide2') {
                    $('#SlideText2').fxexit('fade', 500);
                } else if ($('#strapslide .active').attr('id') == 'Slide3') {
                    $('#SlideText3').fxexit('fade', 500);
                } else if ($('#strapslide .active').attr('id') == 'Slide4') {
                    $('#SlideText4').fxexit('fade', 500);
                }
            });
        })
    </script> 
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download