I have a scrolling timeline with images:
<div class="roadmap">
<h1 class="title">Roadmap</h1>
<div class="timeline">
<div class="swiper-roadmap">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image: url('https://unsplash.it/1920/500?image=15');" data-month="February">
<div class="swiper-slide-content"><span class="timeline-year">By House ULTIMA</span>
<h4 class="timeline-title">Live, Love and Prosper</h4>
</div>
</div>
<div class="swiper-slide" style="background-image: url('https://unsplash.it/1920/500?image=16');" data-month="March">
<div class="swiper-slide-content"><span class="timeline-year">By House TITAN</span>
<h4 class="timeline-title">International Women's Day</h4>
</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
All divs should be hidden except the active one. But the problem is that all divs are visible on the page. Here is an example
Instead of showing two images it should actually show one and then another one when i select month. How can I achieve it?
Please try with this:
.timeline {
overflow: hidden;
}
check this Fiddle
You have to made some CSS changes. I have added two CSS Class at the end of your CSS :
.swiper-slide{
display:none;
}
.swiper-slide-active{
display:block;
}
Here is an updated code : https://codepen.io/anon/pen/BeyvKz
Did you try adding overflow: hidden; to .roadmap;
The simplest solution is to give the two div of class "swiper-slide" distinct ids, then write javascript to toggle between the two.
var isFebruary = (month == "February");
document.getElementById("slide1").style.display = isFebruary ? 'block' : 'none';
document.getElementById("slide2").style.display = isFebruary ? 'none' : 'block';
(You may also use attribute "hidden" of HTML5 using setAttribute() and removeAttribute())
Because you have the additional attribute data-month in the div's, you can get a bit fancier by using querySelectorAll() on the class "swiper-slide" to get the list of all div's of the class, traverse the list and hide all div's except the one matching the month. The code will then work even if you add more months to the page.
Related
I have some cards who are supposed to be inline, but I have to use a display none on them. When I click on a specific button, I want to display these cards; but when I do that, each cards appears to take a row when I want to have them on the same row
<div class="row" id="menu_lv2r">
<div class="col-lg-2">
<div class="card card-chart">
<div class="card-header">Character 1</div>
<div class="card-body card-body-top">
<img class="card-img" alt="character_image" src="./images/char1.jpg"/>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="card card-chart">
<div class="card-header">Character 2</div>
<div class="card-body card-body-top">
<img class="card-img" alt="character_image" src="./images/char2.jpg"/>
</div>
</div>
</div>
</div>
Theses were my 2 cards examples
If I let the code like that, they are all inline which is what I want
Now If I add some css to hide them
#menu_lv2r{
display: none;
}
The row with the 2 cards disapeared which is still fine.
But now, when I use some Js to print them again, they appear in one row each.
var elt = document.getElementById('menu_lv2r');
elt.style.display = "inline";
Thanks for your help
You should use display: flex for parent element.
elt.style.display = "flex";
It's the default value for bootstrap class .row.
Just use flex instead of inline. Everything works fine
My guess is what I want to achieve should be easy, but due to my lack of knowledge of front-end development, I cannot manage to solve issue. Have a page that works with AJAX-filters that users can select. Filters that are currently applied show up within <div> with id=current-filters.
HTML looks like this:
<div id="current-filters-box">
<div style="margin-bottom: 15px">
<strong>Current filters:</strong>
<div id="current-filters">
<!-- here every single applied filter is displayed -->
</div>
</div>
</div>
Need to hide the the entire DIV current-filters-box in case no filter is applied.
The page uses a Javascript file, bundle.js which is massive, but contains the following line:
s=document.getElementById("current-filters")
Therefore tried the following if-statement to hide the DIV:
if(s.length<1)$('#current-filters-box').hide()
and
if(s=0)$('#current-filters-box').hide()
But this does not seem to have any effect. Can someone tell, what I did wrong?
Demo of page can be found here
EDIT: this is what the HTML looks like when filters are applied:
<div id="current-filters-box">
<div style="margin-bottom: 15px">
<strong>Current filters:</strong>
<div id="current-filters">
<div class="badge-search-public">
<strong>Humanities & Languages</strong> <span class="x" data-property="disciplines" data-value="4" onclick="filter.removeFilter(this)">×</span>
</div>
<div class="badge-search-public">
<strong>January</strong> <span class="x" data-property="months" data-value="1" onclick="filter.removeFilter(this)">×</span>
</div>
</div>
</div>
Both of your conditions are incorrect or I would say they are not doing what you think they do.
s.length will always prints undefined so instead of s.length<1 you could use s.children.length
and the second one is not a condition rather it is an assignment
s==0 // condition
s=0 //assignment
the correct condition for your requirement would be
if(s.children.length<1){
I have assigned snippets for illustration.
Without filters
s = document.getElementById("current-filters")
console.log(s.children.length);
if (s.children.length < 1) {
$('#current-filters-box').hide(1000)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="current-filters-box">
filter box
<div style="margin-bottom: 15px">
<strong>Current filters:</strong>
<div id="current-filters">
<!-- here every single applied filter is displayed -->
</div>
</div>
</div>
Without filters
s = document.getElementById("current-filters")
console.log(s.children.length);
if (s.children.length < 1) {
$('#current-filters-box').hide(1000)
}
<div id="current-filters-box">
<div style="margin-bottom: 15px">
<strong>Current filters:</strong>
<div id="current-filters">
<div class="badge-search-public">
<strong>Humanities & Languages</strong> <span class="x" data-property="disciplines" data-value="4" onclick="filter.removeFilter(this)">×</span>
</div>
<div class="badge-search-public">
<strong>January</strong> <span class="x" data-property="months" data-value="1" onclick="filter.removeFilter(this)">×</span>
</div>
</div>
</div>
Try this .
if( $('#current-filters').is(':empty') ) {
$('#current-filters-box').hide()// or $('#current-filters-box').css("display","none")
}
You are performing an assignment, try..
if (s.children.length)
Using vanilla JavaScript, you can check if the current-filters div is empty or not and toggle the parent div current-filters-box like this:
s= document.getElementById("current-filters");
t= document.getElementById("current-filters-box");
if(s.children.length<1) {
t.style.display = 'none';
// t.style.visibility= 'hidden'; <<-- use this if you want the div to be hidden but maintain space
}
else {
t.style.display = 'block';
// t.style.visibility= 'visible'; <<-- use this if you used visibility in the if statement above
}
You can achieve this by adding your own variable which counts or maintains your applied filters, e.g.
var applied_filter_count = 0;
at every time filter is applied
applied_filter_count++;
if(applied_filter_count) {
$('#current-filters-box').show()
}
and at every time filter is removed
applied_filter_count--;
if(!applied_filter_count) {
$('#current-filters-box').hide()
}
and by default current-filters-box should be display:none
I use the following script for my galleries:
<div class="photogallery">
<div class="Spacer"></div>
<div style="padding:10px 15px 0;">
<div class="LuauPackages">
<div class="GreenLrg" style=" display:inline-
block;vertical-align:top;">Gallery</div>
<div class="arrow arrow-down"></div>
<div class="arrow arrow-right"></div>
</div>
<div class="LuauPackCont">
<asp:Literal id="litPhotos" Runat="server"></asp:Literal>
</div>
</div>
</div>
Scroll down the page where it says "Gallery"
https://www.hawaiidiscount.com/oahu/luaus/hilton-waikiki-starlight.htm
Since this is a dynamically generated script it appears on all pages including the ones that don't have galleries such as - https://www.hawaiidiscount.com/activities/oahu/surfing/north-shore-tour.htm
My question is how can I dynamically set .photogallery {display: none} for all pages that don't have galleries?
One common thing that all pages with galleries have is the class name of each photo - bottomphotos, so is it possible to write a script that says if you don't find class called bottomphotos on the page, make .photogallery {display: none}
I believe this is roughly what you want:
$(function() {
// Handler for .ready() called.
if($('.bottomphotos').length === 0) { // if you cannot find any elements with class name of bottomphotos
$('.photogallery').hide(); // then hide the photogallery element
}
});
Hope this helps!
Is it possible at all to hide a parent div if there is a child div missing?
In the example below I would like to hide the parent div of "#live-sessions" if some of the divs are missing such as .views-content and .views-row.
This is what it looks like when the divs are there:
<div id="live-sessions">
<div class="container">
<div class="row">
<div class="col-sm-3">
<h3 class="session-title">Sessions Live Now</h3>
<div class="col-sm-9">
<div class-"view-display-id-live_sessions">
<div class="views-content">
<div class="views-row">
</div>
<div class="views-row">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is what it looks like when the divs are missing:
<div id="live-sessions">
<div class="container">
<div class="row">
<div class="col-sm-3">
<h3 class="session-title">Sessions Live Now</h3>
<div class="col-sm-9">
<div class-"view-display-id-live_sessions">
</div>
</div>
</div>
</div>
</div>
I tried using the :empty selector with the parent method, but my child div contains some blank lines so it doesn't think it's empty. Also I would like to hide the parent of the parent of the empty div.
$(".view-display-id-live_sessions:empty").parent().hide();
You have a typo in your html:
class-"view-display-id-live_sessions"
should be
class="view-display-id-live_sessions"
you can try the following jQuery code:
if ($(".view-display-id-live_sessions").html().trim() == '') {
$(".view-display-id-live_sessions").parent().parent().hide();
}
jqVersion demo
Use jQuery has() in a negative if test - http://api.jquery.com/has/
if(!$('#parent').has('.child')){
$('#parent').hide();
}
There isn't a one-line-query for this. Following code would do the trick:
$('#live-sessions .row').each(function(idx, row) {
if ($(row).find('.views-content').length == 0) {
$(row).hide();
}
});
If you want to keep using jQuery, you could instead do:
if ( ! $(".view-display-id-live_sessions").children().length ) { /* your logic */ }
Note that there's a syntax error in your code:
<div class-"view-display-id-live_sessions">
Should be
<div class="view-display-id-live_sessions">
If you understand your question:
First you need to check the number of .views-row divs. If the length is zero hide the parent div.
Ex:
if ($('.views-row').length < 1)
$('#live-sessions').hide();
Good Luck.
You need to trim the blank spaces, correct a typo and test for the text within the div -
class="view-display-id-live_sessions" // note the equals sign after class
The code to do the hiding (EDIT re-read problem again):
var liveSessionsText = $.trim( $('.view-display-id-live_sessions').text() );
if(0 == liveSessionsText.length) {
$('.view-display-id-live_sessions').closest('.row').hide();
}
The div with class="row" is the parent of the parent of view-display-id-live_sessions.
I has some div as follows
<div id="span1"></div>
<div id="span3"></div>
<div id="span5"></div>
<div id="span7"></div>
.....
There is "span" in the id, How to show or hide them by jquery ?
you can put the selectors of the ones to hide in an array and join then with a comma:
var tohide = [
"#span1",
"#span3",
"#span5",
"#span7"
];
$(tohide.join(',')).hide();
or, add a common class to each:
<div class="tohide" id="span1"></div>
<div class="tohide" id="span3"></div>
<div class="tohide" id="span5"></div>
<div class="tohide" id="span7"></div>
$('.tohide').hide();
This should do the trick, if I understand the question correctly.
$('[id*="span"]').hide();
That said, a much BETTER approach would be to put a class on all the elements you want to manipulate with the same code then use the class to hide the elements as a group.
<div id="span1" class"span"></div>
<div id="span3" class"span"></div>
<div id="span5" class"span"></div>
<div id="span7" class"span"></div>
$('div.span').hide();
This is much cleaner.