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!
Related
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.
I want to write a code that expands and collapses a div with a paragraph, once you click the header text above it.
<div class="container">
<h3><span class="toggler">Text that toggles</span></h3>
<div class="wrapper">
<p>Random text</p>
</div>
</div>
<div class="container">
<h3><span class="toggler2">Text that toggles</span></h3>
<div class="wrapper2">
<p>Random text</p>
</div>
</div>
I am aware that I could write a function like this which would toggle between display: block and display: none.
I could just repeat the same function for different divs with different classes and it would work, but if I have a lot of them I would end up repeating the same function multiple times and I feel like there has to be a much cleaner way to do this.
$(document).ready(function() {
$(".toggler").on("click", function() {
$(".wrapper").toggleClass("active");
});
});
You don't need write single line of code if you use jquery & bootstrap.
Solution 1:
Add reference bnelow:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
your html:
<div class="container">
<h3><span class="toggler" data-toggle="collapse" data-target="#col1">Text that toggles</span></h3>
<div class="wrapper" id="col1">
<p>Random text</p>
</div>
</div>
<div class="container">
<h3><span class="toggler2" data-toggle="collapse" data-target="#col2">Text that toggles</span></h3>
<div class="wrapper2" id="col2">
<p>Random text</p>
</div>
</div>
Solution 2:
Either you can write simple line code
$(document).ready(function() {
$("h3").on("click", function() {
$(this).next().toggleClass("active");
});
});
we can select header with header Tag. After that, we can add toogleClass to just next element that is "DIV".
so, when click header, toggleClass will be added to next element that is DIV
You dont need to repeat it, give both a single class like "toggle-enabled" then instead of using toggler and toggler2 as two function you can put toggle-enabled as one selector and both will run the same function on click.
If you want to only toggle the one selected then use "this" keyword to get current and hide and show that or slide it whatever you want to do but dont need to repeat the code.
Here is your example code working as expected:
$(document).ready(function() {
$(".toggle-enabled").on("click", function() {
var nextdiv = $(this).parent().siblings("div");
nextdiv.is(":visible")?nextdiv.hide():nextdiv.show();
});
});
.togglethis{color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h3><span class="toggler toggle-enabled">Text A that toggles</span></h3>
<div class="wrapper togglethis">
<p>Random text</p>
</div>
</div>
<div class="container">
<h3><span class="toggler2 toggle-enabled">Text B that toggles</span></h3>
<div class="wrapper2 togglethis">
<p>I have left your toggler2 class in there and you can add more classes to separate it</p>
</div>
</div>
This code should work for your html:
$(document).ready(function () {
$('[class^="toggler"]').on('click', function () {
$(this).closest('.container').children('[class^="wrapper"]').toggle();
});
});
The code looks for any element on your html whose class name starts with toggle. It then attaches an on-click handler function. That function then looks for the affected element's closest ancestor with class name of container. Then from that ancestor/parent, it selects children with class name starting with wrapper. It then toggles the visibility of those children (or child)
You could give your togglers class names of toggleN (where N is any valid class name character) or simply toggle (same class name for all). Similarity, you could name the classes for your wrappers as wrapperN or simply wrapper.
I have a list which contains of several items that are hidden.
In my JS i want a function that changes the items of this list so it becomes visible. I want each item to become visible if a certain event has happened. The event is working fine and can be considered as shakeCount= 6, to test it properly.
Here is my list:
<div class="container">
<div class="list-group">
<div id="s1">Shake1</div>
<div id="s2">Shake2</div>
<div id="s3">Shake3</div>
</div>
</div>
What i tried so far and didn't work:
function nR(){
if (shakeCount>5)
document.getElementbyId("s1").style.visibility ="visible";
}
Thanks in advance!
Have you tried using Toggle? I would recommend it but you may need to remove the "hidden" class from your elements and add in the style="display: none;" attribute to each in order to default them to hidden.
<div class="container">
<div class="list-group">
<div id="s1">Shake1</div>
<div id="s2">Shake2</div>
<div id="s3">Shake3</div>
</div>
</div>
function nR(){
if (shakeCount>5)
document.getElementbyId("s1").toggle();
}
First, you're using getElementbyId -- it should be getElementById (missing capital 'B').
Second, you've made the #shake links visibility:hidden, but you are targeting the wrapping div when you run your js.
var shakeCount = 6;
if (shakeCount>5)
document.getElementById("s1").style.visibility ="visible";
.hidden {visibility: hidden;}
<div class="container">
<div class="list-group">
<div id="s1" class="list-group-item hidden"><a href="#shake1" >Shake1</a></div>
<div id="s2" class="list-group-item hidden"><a href="#shake2" >Shake2</a></div>
<div id="s3" class="list-group-item hidden"><a href="#shake3" >Shake3</a></div>
</div>
</div>
The above code hides the wrapping div elements instead of the links so that they are shown when the js runs.
I have an html like this.I am trying to do a jquery trigger on a button click.Basically I just need to close the div when The button is clicked.
I have tried following code in button click using jquery but the div is not closing.Can anyone correct me
JS
$('.tags .alert-success .close').trigger(click);
HTML
<div class="sentiment-text">
<div class="wrapper">
<div class="key"></div>
<div class="text" <div class="tags alert-success">×<span class="noun">#</span><span class="noun">sed/span> <span class="noun">#</span><span class="noun">menshealth</span> </div></div>
<div class="clear-sentiment"></div>
</div>
</div>
This is what you need -- no space between the first two selectors -- .tags.alert-success. Both .tags and .alert-success are on the same element:
$('.tags.alert-success .close').trigger( 'click' );
//or $('.tags.alert-success .close').click();
And close the opening tag of .text div so that you have:
<div class="text"><div class="tags .......
Suppose I have 3 page as below:
page 1:
<div id="content">
<div id="red"></div>
</div>
page 2:
<div id="content">
<div id="blue"></div>
</div>
page 3:
<div id="content">
<div id="green"></div>
</div>
This 3 page are in the same template, so if I add
#content {
margin-top: 10px;
}
All page will apply this style, If I only want to put this style to page 3, how can I do that?
Generally, we use $('#content > #green').css(...) to point to a element, but can we have something like $('#content < #green') to point to a reversed element and give it some style?
You can use:
$('#green').parent().css(...);
If you want to be completely specific, you can do:
$('#green').parent('#content').css(...);
Or you could create a new style class 'contentClass' which holds the styles for elements with id="content" and apply the style class to red, green, and blue. In this way, content becomes an abstract container with no styles, and the actual styling gets moved where it should.
So in your style sheet:
.contentClass {
/* Your content styles here /*
}
And on your pages:
<div id="content">
<div id="red" class="contentClass"></div>
</div>
<div id="content">
<div id="green" class="contentClass"></div>
</div>
<div id="content">
<div id="blue" class="contentClass"></div>
</div>
Have you tried $("#content eq(index of element)") ??