Jquery - Open .next - javascript

I am trying to create a script that only opens the next div called .video-overlay.
I do not want to use ID's as there could be up to 30 videos per page.
JS Fiddle: https://jsfiddle.net/w2fqrzbw/
At the moment the script is affecting both... is there a way of targetting the next div named .video-overlay?
HTML:
<span class="video-trigger">Button 1 </span>
<!-- Close video trigger-->
<div class="video-overlay">
<div class="overlay-close">Close</div>
<div class="container">
Popup 1
</div>
</div>
<!-- Close video popup-->
<br><br/>
<br><br/>
<br><br/>
<span class="video-trigger">Button 2</span>
<!-- Close video trigger-->
<div class="video-overlay">
<div class="overlay-close">Close</div>
<div class="container">
Popup 2
</div>
</div>
<!-- Close video popup-->
JS:
//Video popup
$(document).ready(function() {
$('.video-trigger').click(function() {
$('.video-overlay').fadeIn(300);
$('.video-overlay video').get(0).play();
});
$('.video-overlay .overlay-close').click(function() {
$('.video-overlay').fadeOut(300);
$('.video-overlay video').get(0).pause();
});
});
This is how it is laid out in my actual web document:
<div class="col span_6_of_12 ripple-me">
<div class="video-thumbnail" style="background-image: url(<?php echo $video_thumbnail; ?>);">
<span class="video-trigger">
</span>
</div>
<!--Close Video box cta -->
<div class="video-overlay">
<div class="overlay-close">Close</div>
<div class="container">
<iframe allowFullScreen='allowFullScreen' src="<?php echo $video_link; ?>" width="960" height="370" allowtransparency="true" style='position:absolute;top:0;left:0;width:100%;height:100%;' frameborder="0"></iframe>
</div>
</div>
<!-- Close video popup-->
</div>

The issue with your current logic is that it's affecting all .video-overlay elements on click. To fix this you can use DOM traversal to find only the one related to the clicked .video-trigger using next() and closest(). Try this:
$(document).ready(function() {
$('.video-trigger').click(function() {
$(this).next('.video-overlay').fadeIn(300).find('video').get(0).play();
});
$('.video-overlay .overlay-close').click(function() {
$(this).closest('.video-overlay').fadeOut(300).find('video').get(0).pause();
});
});

Try using JQuery Next Function :
//Video popup
$(document).ready(function() {
$('.video-trigger').click(function() {
var $videoOverlay = $(this).next('.video-overlay');
videoOverlay.fadeIn(300);
videoOverlay.find('video').get(0).play();
});
});

jQuery provides powerful DOM traversal tools. Be sure to use them
//Video popup
$(document).ready(function() {
$('.video-trigger').click(function() {
$(this).parent().next('.video-overlay').fadeIn(300);
$('.video-overlay video').get(0).play();
});
$('.video-overlay .overlay-close').click(function() {
$(this).parent().fadeOut(300);
$('.video-overlay video').get(0).pause();
});
});

Related

JQuery onclick function error within post loop

I have a loop of posts in wordpress and I am trying to call a jquery on click show event which will show a contact form for that post when clicked.
The onclick show works only for the first post in the loop where it will display the contact form for that post no problem - but, it does not work for any of the other posts in the loop. Anyone know why this may be? The page with the post loop is https://www.salusa.co.uk/specialist-training-courses/.
The code is roughly:
<div class="archive-posts-loop">
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(
function(){
$(".show-form").click(function () {
$("#contact-form-wrapper").show("fast");
});
$("#close").click(function () {
$("#contact-form-wrapper").hide("fast");
});
});
</script>
</div><!--post-->
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(
function(){
$(".show-form").click(function () {
$("#contact-form-wrapper").show("fast");
});
$("#close").click(function () {
$("#contact-form-wrapper").hide("fast");
});
});
</script>
</div><!--post-->
</div><!--archive-post-loop-->
As you have a new form for each post you need to target the correct form for the post. You can listen for delegated click events and show/hide the nested form accordingly. Note that you do not need (nor should have) the script repeated for each form as shown in your example.
$(function(){
$(".post")
.on("click", ".show-form", function() {
$(this).parents(".post").find(".contact-form-wrapper").show("fast");
})
.on("click", ".close", function() {
$(this).parent().hide("fast");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
[Form here] close
</div>
</div>
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
[Form here] close
</div>
</div>
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
[Form here] close
</div>
</div>
You are using multiple elements with the same id of contact-form-wrapper. Instead you need to make each element have a unique id, and then select that id in the respective jquery calls. Jquery will return the first matching element given a selector, which is why it only selects the first post each time.
Here is a codepen that does what you want.
https://codepen.io/abidhasan/pen/wpdoyO?editors=1111
This is the jQuery that you can use - basically look for the sibling and change its style
$(".post .show-form").on("click", function() {
$(this).parent().siblings()[0].style.display= "block";
});
$(".post .hide-form").on("click", function() {
$(this).parent().siblings()[0].style.display= "none";
});

How to addClass & addRemove class or change property using .css?

I have tried many ways but still not working...
click the submit button & expand button(tab) to display the chatbot and hide the tab
click the minimize button(chatbot) to hide the chatbot and display the tab
1) addClass/RemoveClass
default.htm
<!-- ------- button ------- -->
<div class="ask-button-container">
<button id="submit" class="btnSubmit">Ask</button>
</div>
<!-- ------- tab ------- -->
<div id="tab{{__SELF__.id}}" name="{{__SELF__.id}}" class="my-tab">
<div id="tab-minimize">
<div id="tab-label"></div>
<div id="tab-expand{{__SELF__.id}}" class="tab-expand tab-btn"></div>
<div id="tab-close{{__SELF__.id}}" class="tab-close tab-btn"></div>
</div>
</div>
<!-- ------- chatbot ------- -->
<div id="chatbot-window-wrapper{{__SELF__.id}}" class="cb-window hidden" style="position: fixed;">
<div id="control-bar">
<div id="chatbot-minimize{{__SELF__.id}}" class="minus pull-right chatbot-btn"><span class="glyphicon glyphicon-minus-sign"></div>
</div>
<iframe id="chatbot-window" name="chatbot-window" scroll="" width="100%" height="100%" frameborder="2" src="{{ 'page1'|page }}"></iframe>
</div>
JS
$(function(){
$(".tab-close").click(function() {
$(this).closest(".my-tab").addClass("hidden"); //working
});
$(".tab-expand").click(function() {
var chatbot = $(this).closest(".cb-window");
chatbot.removeClass("hidden");
$(this).closest(".my-tab").addClass("hidden"); //working
});
$(".btnSubmit").click(function() {
var chatbot = $(this).closest(".cb-window");
chatbot.removeClass("hidden");
$(this).closest(".my-tab").addClass("hidden");
});
$(".minus").click(function() {
var chatbot = $(this).closest(".cb-window");
chatbot.addClass("hidden");
$(this).closest(".my-tab").removeClass("hidden");
});
});
2) .css
$(this).closest(".cb-window").css("visibility", "visible");
Can someone please show me how to do it? Thank you.
or any other ways using jquery? .show/.hide , .toggle?
The problem was with your way of reaching the proper element and your understanding on closest option of jquery.
As per definition - The closest() method returns the first ancestor of the selected element. An ancestor is a parent, grandparent,
great-grandparent, and so on.
When you say closest on btnSubmit click event, the .cb-window was never its ancestor so $(this).closest('.cb-window') would basically fail. You need to traverse back to btnSubmit's parent who will be sibling of .cb-window and then you can easily get that element. Below is how you can achieve it. Also, you do not need multiple $(function(){ which is equivalent to $(document).ready and only one is sufficient.
$(function() {
$(".btnSubmit").click(function() {
$(this).closest(".ask-button-container").siblings('.cb-window').removeClass("hidden");
//closest ancestor would be .ask-button-container and its sibling is .cb-window
$(this).closest(".my-tab").addClass("hidden");
//did not find .my-tab element in your `html`
});
$(".minus").click(function() {
$(this).closest('.cb-window').addClass("hidden");
$(this).closest(".my-tab").removeClass("hidden");
});
});
.hidden {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="ask-button-container">
<button id="submit" class="btnSubmit">Ask</button>
</div>
<div id="chatbot-window-wrapper{{__SELF__.id}}" class="cb-window hidden" style="position: fixed;">
<div id="control-bar">
<div id="chatbot-minimize{{__SELF__.id}}" class="minus pull-right chatbot-btn"><span class="glyphicon glyphicon-minus-sign"></div>
</div>
<iframe id="chatbot-window" name="chatbot-window" scroll="" width="100%" height="100%" frameborder="2" src="{{ 'page1'|page }}"></iframe>
</div>
When we click or do operation on an element we can add or remove class and you can try like this.
$('#elm').hover(
function(){ $(this).addClass('hover') },
function(){ $(this).removeClass('hover') }
)
the problem that you don't target the element you want in a right way .. you need to use
$(function(){
$(".tab-close").click(function() {
$(this).closest(".my-tab").addClass("hidden"); //working
});
$(".tab-expand").click(function() {
var chatbot = $(this).closest('.my-tab').next(".cb-window");
chatbot.removeClass("hidden");
$(this).closest(".my-tab").addClass("hidden"); //working
});
$(".btnSubmit").click(function() {
var chatbot = $(this).closest('div').next().next(".cb-window");
chatbot.removeClass("hidden");
$(this).closest('div').next(".my-tab").addClass("hidden");
});
$(".minus").click(function() {
var chatbot = $(this).closest(".cb-window");
chatbot.addClass("hidden");
chatbot.prev(".my-tab").removeClass("hidden");
});
});
.hidden{
display : none;
}
.minus{
padding : 5px;
background : red;
color: #fff;
text-align : center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- ------- button ------- -->
<div class="ask-button-container">
<button id="submit" class="btnSubmit">Ask</button>
</div>
<!-- ------- tab ------- -->
<div id="tab{{__SELF__.id}}" name="{{__SELF__.id}}" class="my-tab">
<div id="tab-minimize">
<div id="tab-label"></div>
<div id="tab-expand{{__SELF__.id}}" class="tab-expand tab-btn"></div>
<div id="tab-close{{__SELF__.id}}" class="tab-close tab-btn"></div>
</div>
</div>
<!-- ------- chatbot ------- -->
<div id="chatbot-window-wrapper{{__SELF__.id}}" class="cb-window hidden" style="position: fixed;">
<div id="control-bar">
<div id="chatbot-minimize{{__SELF__.id}}" class="minus pull-right chatbot-btn"><span class="glyphicon glyphicon-minus-sign">-</span></div>
</div>
<iframe id="chatbot-window" name="chatbot-window" scroll="" width="100%" height="100%" frameborder="2" src="{{ 'page1'|page }}"></iframe>
</div>

Stop iframe video from playing when exiting modal window

I am having trouble figuring out how to stop a iframe video from playing when I close the modal window. I have seen a lot of answers mention YouTube and using their API but these videos are not from YouTube. I have seen some questions already asked on this subject, ex: Stop all playing iframe videos on click a link javascript. I just don't really understand how to incorporate this into my code.
Question
How can I stop a iframe video from playing when the user closes the modal window. To close each modal window, I use <div class=close-animatedModal>.
If it matters, I am using Wordpress.
Test Page - http://johnmartinagency.com/test-page-2/
HTML
<a id=demo01 href=#animatedModal> <!-- This targets the specific modal -->
<div class=play-container><div class=play-button></div>
</div>
</a>
<div class="mdl-card__title auto-insurance"> <!-- Google Material Design Lite Card -->
<h2 class=mdl-card__title-text>Auto Insurance Made Easy</h2>
</div>
<div class="mdl-card__actions mdl-card--border"> <a id=demo01-a href=#animatedModal class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Watch Video</a> <!-- The play button -->
</div>
<div class=video-length>(5:21)</div>
</div>
<div id=animatedModal> <!-- The Modal Container -->
<div class=modal__box>
<div class=close-animatedModal> <!-- Close modal ->>
<i class="fa fa-times fa-2x close-icon"></i>
</div>
<div class=h_iframe> <!-- The iframe -->
<img class=ratio src=http://placehold.it/16x9>
<iframe src="//fast.wistia.net/embed/iframe/rnx2undr9h?videoFoam=true" allowtransparency=true frameborder=0 scrolling=no class=wistia_embed name=wistia_embed allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen align=center></iframe>
<script src=//fast.wistia.net/assets/external/E-v1.js></script>
</div>
</div>
</div>
</div>
Javascript
I am using animate.modal.js for the modal animation
<script src=//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js> </script>
<script src="http://sogomarketingagency.com/wp-content/themes/Avada-Child-Theme/js/animatedModal.min.js?ver=4.1.1"></script>
<script>
$("#demo01, #demo01-a").animatedModal ({
modalTarget:"animatedModal",
animatedIn:"zoomIn",
animatedOut:"bounceOut",
color:"rgba(0, 0, 0, 0.95)",
overflow:"scroll"})
</script>
Add this to your script, in the document ready function:
jQuery(function () {
jQuery().on("click", function () {
jQuery('iframe').contents().find('video').each(function () {
this.currentTime = 0;
this.pause();
});
});
});
This solution seems to be working.
Add this JS after you have loaded the above script (just before the closing body tag)
<script type="text/javascript">
$('#myModal').on('hidden.bs.modal', function () {
var videos = $('#video');
video.pause()
});
</script>
Accepted Answer is here

.slideToggle() is being triggered many times?

I'm trying to create a Tumblr theme in which the links and post information slide in when you click a + sign. (My test blog is at http://noitsnotitsnotokay.tumblr.com/)
I'm quite the begginner at JavaScript, but I was able to work it out for a links menu with the following code:
<span class="btn">+</span>
<ul class="lks">
<!-- various links are here -->
</ul>
<script>
$("ul.lks").hide();
$("span.btn").click(function () {
$("ul.lks").slideToggle("slow");
});
</script>
But I also have a piece of code that applies to all posts, for the post information. I used nearly the same code, but, as you can probably see, it slides in and out various times.
<div class="pstinfo">
<!-- info is here -->
</div>
<span class="plsign">+</span>
<script>
$("div.pstinfo").hide();
$("span.plsign").click(function () {
$("div.pstinfo").slideToggle("slow");
});
</script>
It seems that the button's order and the way I name the classes in the JavaScript isn't changing much...any tips?
If you you don't want to open all the '.pstinfo' elements when you click on '.plsign', just the related one, try this code:
HTML:
<div class='parentContainer'> <!--put your elements in a parent Container -->
<div class='info'>
Info 1
</div>
<div class='plsign'>
+ Open
</div>
</div>
<div class='parentContainer'>
<div class='info'>
Info 2
</div>
<div class='plsign'>
+ Open
</div>
</div>
<div class='parentContainer'>
<div class='info'>
Info 3
</div>
<div class='plsign'>
+ Open
</div>
</div>
JS:
$(".plsign").on('click',function ()
{
$(this).parent().find('.info').slideToggle("slow");
});
Link to jsFiddle
code block 01
<span class="btn">+</span>
<ul class="lks">
<!-- various links are here -->
</ul>
<script>
$("ul.lks").hide();
$("span.btn").click(function () {
$("ul.lks").stop().slideToggle("slow");
});
</script>
Code block 02
<div class="pstinfo">
<!-- info is here -->
</div>
<span class="plsign">+</span>
<script>
$("div.pstinfo").hide();
$("span.plsign").click(function () {
$("div.pstinfo").stop().slideToggle("slow");
});
</script>
Try this code and Update the result :)

Javascript - jquery,accordion

<div id="wrapper">
<div class="accordionButton">Personal Information</div>
<div class="accordionContent">
Personal text
</div>
<div class="accordionButton">Experience</div>
<div class="accordionContent">
Experience information
</div>
<div class="accordionButton">Training</div>
<div class="accordionContent">
No skills
<div class="accordionButton">Career</div>
<div class="accordionContent">
Never had a job
</div>
<div class="accordionButton">Referers</div>
<div class="accordionContent">
None.
</div>
</div>
This code works how i want it to. It is a horizontal accordion. However, when it is loaded on my webpage, they content divs have to be hidden for my jquery to work.
Jquery:
$(document).ready(function() {
// When div is clicked, hidden content divs will slide out
$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
// Close all divs on load page
$("div.accordionContent").hide();
});
If i don't hide the divs, all the divs display. Is there any way to display the 1st page without changing too much of my jquery or would i have to set different class names for the button and the content so that when a specified button is clicked, the affiliated content will slide out for that button div?
You can use jquery selector for first div and set it as show(). Something like :
$('div.accordionContent:first').show();
I think you have to try this:-
<script type="text/javascript">
$.fn.accordion = function(settings) {
accordion = $(this);
}
$(document).ready(function($) {
$('div.accordionContent').click(function() {
if($(this).next().is(":visible")) {
$(this).next().slideDown();
}
$('div.accordionContent').filter(':visible').slideUp();
$(this).next().slideDown();
return false;
});
});
</script>
Why not use slideToggle() instead of IF statements....
Try this very simple solution
HTML
<div class="accordion-container">
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
</div>
jQuery
$('.accordion-content .accordion-title').on('click', function(){
$(this).toggleClass('active');
$('.accordion-title').not($(this)).removeClass('active');
$(this).next().slideToggle();
$(".accordion-toggle").not($(this).next()).slideUp();
});

Categories