Hide footer with css when slide is active

JavaScript
1

Hi all

Wondering how I can turn the display of my footer to none when i have a certain active container:

Example:
How would I turn the css of footer to none, when the second and third items are selected with active?

<div class="owl-stage">
  <div class="owl-item"></div>
  <div class="owl-item active"></div>
  <div class="owl-item"></div>
</div>
<footer>
  <select id="select" style="display:block"></select>
</footer>

I thought maybe css, though don’t think this is possible?

.owl-stage:nth-of-type(2).owl-item.active footer select,
.owl-stage:nth-of-type(3).owl-item.active footer select {
      display: none;
    }

I thought something like:

$(".owl-stage:nth-of-type(2) .owl-item.active").?????('footer #select').css("display", "none");

Any ideas how I could make this work with some js?

Thanks, Barry

2

Correct. Not possible. CSS doesn’t have a parent selector :slight_smile: .

Untested, but perhaps…

$(".owl-stage:nth-of-type(2) .owl-item.active").parents(".owl-stage").siblings("footer").find("#select").css("display","none");
3

Or something like this assuming you are looking for a uique element.

if ($('.owl-item').eq(1).hasClass('active') || $('.owl-item').eq(2).hasClass('active') ){
	$('#select').hide();	
}
4

Thanks Ryan, thanks Paul.
Both good examples and I have tried something very similar:

if( $('.owl-item:nth-child(2)').hasClass('active')) $('footer').find('#select').hide()

The only problem I have is that, the class isn’t active on page load or dom ready, the active classes are added when certain slides are active, when certain carousel items have been clicked. Unless I’ve missed something here?

Is there a way of using any of these techniques, so the code will still fire when the active class is active on child(2) etc ?

Hope that makes sense thanks.

And thanks Paul, I like .eq(1) just googled it, better than nth-child :sunglasses:

Barry

5

So if the class gets it added, you want to fire an event?

I’m pretty sure you’ll need to bind an event to that action, as a workaround, since I think that’s the only way to watch for a class change.

6

Yes, I think thats what we need. How to set this up? More complex?

Something like below, not sure what to add?

$('.owl-stage.eq(4).owl-item').bind('', function () {
    $('footer > select').css("display", "none");
  });

Barry

7

Anybody?

Thanks.

8

I believe its more advanced than that (we need an expert in here) .:slight_smile:

This works for modern browsers only.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<p>
		<button>Click to add Class</button>
</p>
<div class="owl-stage">
		<div class="owl-item"></div>
		<div class="owl-item"></div>
		<div class="owl-item"></div>
</div>
<footer>
		<select id="select">
				<option>test</option>
		</select>
</footer>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
$( 'button').click(function() {
  $('.owl-item').eq(1).addClass('active')
});

var mut = new MutationObserver(function(mutations, mut){
	if ($('.owl-item').eq(1).hasClass('active') || $('.owl-item').eq(2).hasClass('active') ){
	$('#select').hide();	
	}
});
var config = { attributes: true,subtree:true};
mut.observe(document.querySelector(".owl-stage"),config);
</script>
</body>
</html>

Are you sure you can’t add the routine to the carousel and avoid the issue altogether?

9

Ha I know, trying to convince myself I’m a JS expert.

This works for modern browsers only

This is fine, for web app so all mobile browsers generally up to date.

Thats a good question, if I new, I doubt I’d be here :smile:

Anyhow, thanks for your input Paul, starting to look a little more complex now, getting slightly over my head. I’ll have to do more searching and see if I can come up with a simpler fix.

Thanks, Barry

10

I think this is what we need Owl Events API
Can anybody suggest how this can be used, snippets of code maybe?

Much appreciated andy assistance here.

Barry

11

I think this is now possible.
I’ve managed to hide the footer using an owl event (linked above) on.change, though, I now need a way to hide only, when a certain items are shown. As discussed previous.

$("#cases").on('changed.owl.carousel',function () {
  $('footer').find('#select').css("display", "none"); 
});

Taken from the linked page, I think we need to use the below in some way or another?
> var items = event.item.count; // Number of items

var item      = event.item.index;     // Position of the current item

Any suggestions @PaulOB, anybody?

example here: jsfiddle

Thanks, barry

12

Fixed it! :smile:

Here is the code. Not sure if a better way is possible, or if I need a closing else statment, things work good either way. If this can help anybody else trying to perform certain events on their own carousel.

$("#cases").on('changed.owl.carousel',function(event) {
    if( event.item.index === 1 || event.item.index === 2 || event.item.index === 5 ) {
      $('footer').find('#select').css("display", "none");
    }
    else if( event.item.index === 0 || event.item.index === 3 || event.item.index === 4 ) {
      $('footer').find('#select').css("display", "block");
    }
  });

Thanks to an example I found which made things a little clearer reference

Updated: jsfiddle

Barry

13

Well done:)

It’s always better to tackle these things from the inside so to speak.

Note that as you can only have one id in the page you only need.

 $('#select').css("display", "block");

Or

 $('#select').show();

and

 $('#select').hide();
14

Cool, good call! Thanks Paul.
I’ve update my code so:

$('footer').find('#select').css("display", "none");

becomes

$('#select').css("display", "block");

Still works good, thanks again, was a long night :grin: ha.

Barry

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.