What is the best way to conceal a specific class of DIV within a container, and how can I also hide another DIV within the same container by

Question

What is the best way to conceal a specific class of DIV within a container, and how can I also hide another DIV within the same container by

I have a DIV class containing around 10 elements within a container. I am looking to implement a feature where these elements are hidden and shown one by one every 15 seconds using jQuery with a smooth fadeOut() effect. Your assistance in achieving this would be greatly appreciated.

Here is an example of my HTML code structure:

<h1 class="advert"> Sponsored Links </h1>
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>

</div> <!--end of div class "ADVERTCONT"-->

(Repeat above block for each element of class 'advertcont')

</div><!--end of div class "CONTAINER"-->

javascript jquery html css

Answer 1

Answer №1

To display multiple divs with a counter incrementing in a function and utilizing setTimeout for continuous calling, you can initialize a counter set to 0 and then increment it within the function. The function will show the div elements by fading them in sequentially.

var ctr = 0; 

$(document).ready(function(){
  showElem();
});

function showElem() {
  var length = $('.advertcont').length;
  $('.advertcont').hide();
  $('.advertcont').eq(ctr).fadeIn(900);
  (ctr >= (length-1)) ? ctr = 0: ctr++;   
  setTimeout(showElem, 1000);   //make it 15000. Have used 1000 for the demo
}

.advertcont {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="advert"> Sponsored Links</h1>
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>

</div> <!--end of div class "ADVERTCONT"-->
...
... Additional advertisement divs follow ...
...

</div><!--end of div class "CONTAINER"-->

Answer 2

To display multiple divs with a counter incrementing in a function and utilizing setTimeout for continuous calling, you can initialize a counter set to 0 and then increment it within the function. The function will show the div elements by fading them in sequentially.

var ctr = 0; 

$(document).ready(function(){
  showElem();
});

function showElem() {
  var length = $('.advertcont').length;
  $('.advertcont').hide();
  $('.advertcont').eq(ctr).fadeIn(900);
  (ctr >= (length-1)) ? ctr = 0: ctr++;   
  setTimeout(showElem, 1000);   //make it 15000. Have used 1000 for the demo
}

.advertcont {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="advert"> Sponsored Links</h1>
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>

</div> <!--end of div class "ADVERTCONT"-->
...
... Additional advertisement divs follow ...
...

</div><!--end of div class "CONTAINER"-->

Answer 3

Answer №2

Check out this easy fix below

setInterval(function(){ 
    jQuery('.advertcont:visible:eq(0)').fadeOut();
}, 15000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="advert"> Sponsored Links </h1>
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Grab the Finest Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>

</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Grab the Finest Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>

</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Grab the Finest Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>

</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Grab the Finest Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>

</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Grab the Finest Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>

</div> <!--end of div clas "ADVERTCONT"-->

</div><!--end of div clas "CONTAINER"-->

Answer 4

Check out this easy fix below

setInterval(function(){ 
    jQuery('.advertcont:visible:eq(0)').fadeOut();
}, 15000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="advert"> Sponsored Links </h1>
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Grab the Finest Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>

</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Grab the Finest Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>

</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Grab the Finest Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>

</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Grab the Finest Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>

</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Grab the Finest Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>

</div> <!--end of div clas "ADVERTCONT"-->

</div><!--end of div clas "CONTAINER"-->

Answer 5

Answer №3

Include some CSS styling.

.advertcont{
    display:none;
}

Next, add the following HTML code:

<h1 class="advert"> Sponsored Links </h1>
        <div class="advertcont">
            <img src="http://placehold.it/350x150" class="advertimg">
            <p class="adverttext">Get the Best Shoes at 30GHS.</p>
            <a class="advertlink" href="#">www.shoes.com</a>

        </div>
        <!--end of div class "ADVERTCONT"-->
        (repeat the above 'div' content as needed)
    </div>
    <!--end of div class "CONTAINER"-->

Then, implement the following jQuery script:

$(function() {
            $(".advertcont").each(function(index, element) {
                setTimeout(function() {
                    // fade previous element if any existed
                    if ($(element).prev().hasClass('advertcont')) {
                        $(element).prev().fadeOut(1000, function() {
                            $(element).show(1000);
                        });
                    } else {
                        $(element).show(1000);
                    }
                    // set timer to index (current iteration of the loop (current element)) * 15 seconds:
                }, index * 15000);

            });
        });

You can view and interact with this code on https://jsfiddle.net/njueukavi/3exn83ct/

Answer 6

Include some CSS styling.

.advertcont{
    display:none;
}

Next, add the following HTML code:

<h1 class="advert"> Sponsored Links </h1>
        <div class="advertcont">
            <img src="http://placehold.it/350x150" class="advertimg">
            <p class="adverttext">Get the Best Shoes at 30GHS.</p>
            <a class="advertlink" href="#">www.shoes.com</a>

        </div>
        <!--end of div class "ADVERTCONT"-->
        (repeat the above 'div' content as needed)
    </div>
    <!--end of div class "CONTAINER"-->

Then, implement the following jQuery script:

$(function() {
            $(".advertcont").each(function(index, element) {
                setTimeout(function() {
                    // fade previous element if any existed
                    if ($(element).prev().hasClass('advertcont')) {
                        $(element).prev().fadeOut(1000, function() {
                            $(element).show(1000);
                        });
                    } else {
                        $(element).show(1000);
                    }
                    // set timer to index (current iteration of the loop (current element)) * 15 seconds:
                }, index * 15000);

            });
        });

You can view and interact with this code on https://jsfiddle.net/njueukavi/3exn83ct/

What is the best way to conceal a specific class of DIV within a container, and how can I also hide another DIV within the same container by

Answer №1

Answer №2

Answer №3

Similar questions

Step-by-step guide on applying a universal CSS class to every component within an application

executing ajax request to call a function, encountering partial success and encountering partial failure

Discovering the identical element within the ajax response

To activate two separate click events, one for an absolute element and another for the element positioned behind it, simply click on the desired absolute element to trigger both actions

Looping through a single object with an Ajax call

The jQuery AJAX request returned a JSON result that was labeled as 'undefined'

Find the location where the function is declared

Exciting features of Fancybox 2 with dynamic content

Leverage JQuery to dynamically inject form input data directly onto the page

What is the process of creating a Listbox that is initially empty and allowing options to be passed without automatically selecting

"PHP script for submitting a form with a post button

Is Dealing with Multiple AJAX Requests a Pain?

Warning on React component listing due to key issue originating from the parent component

JQuery's addClass function is not functioning properly

What is the counterpart of the JavaScript transport.responseText in jQuery's Ajax requests?

Exploring a JSON Object with Nested Data

Changing webpage content without using asynchronous methods once authentication has been completed using Google Firebase

Comparing two tables in jQuery/Javascript for matching data

An issue arises in Node.js and MongoDB where data is being returned from the previous update instead of the most

Exploring the Variance between 'npm run serve' and 'npm run dev' Commands in Vue.js Development