Stop JWPlayer when hidden the div with the player - javascript

I have a site where I'm using a JavaScript to add or remove a css class. Using this method I hide a div or show a div, as I need it. It works great.
The problem is one div opens a Video with a JWplayer, when I hide the "window" or better say, the div. The sound is still playing, so I need a code to put stop on the video when someone clicks the "hide" button or close button.
How do you do that? I have no idea.
Thanks
HTML
<div class="videoquon">
<div class='my-video-close'></div>
<div id='my-video'></div>
<script type='text/javascript'>
jwplayer('my-video').setup({
file: 'qvideo.f4v',
width: '600',
height: '337'
});
</script>
</div>
JavaScript
$('div.vidreveal a').click(
function(event) {
event.stopPropagation();
$('div.videoquon').slideToggle(300);
}
);
$('div.my-video-close').click(
function(event) {
event.stopPropagation();
$('div.videoquon').slideToggle(300);
}
);

I don't know JW Player, but judging by their docs, I'm going to go with
$( 'div.my-video-close' ).click( function( event ) {
event.stopPropagation();
jwplayer( 'my-video' ).stop();
$( 'div.videoquon' ).slideToggle( 300 );
});
...or jwplayer( 'my-video' ).pause(); depending on the desired effect.

Related

What Event to Delegate by Javascript function when I jump to my bookmarked id using link?

I have a link , which has a href of "#myid", which is h1 (let say). I want some javascript function to get run when my h1 is focused i.e. 'jumped to' by link. I tried onfocus() but its not working. I am more a middle & data tier developer, so finding a bit weird working in deep with front end languages :)
There is a hashchange event you can listen for on window:
window.addEventListener('hashchange', (e) => {
console.log(e.newURL);
});
.padding {
height: 1000px;
}
click
<div class="padding"></div>
<div id="myid">myid<br>myid</div>
you can run javascript function while hover or focus by using jquery. Please refer the code below.
$( "h1" ).hover(function() {
alert( "Handler for .focus() called." );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>This is a sample H1</h1>
Focus function is used for input field.you can only handle focus for h1 using tab index.
$( "h1" ).focus(function() {
alert( "Handler for .focus() called." );
});

Jquery to show and hide on button click and also move the button on the same click

I'm a beginner with Jquery, I've managed to get a button to show the div and the button to move to the right when the div is shown. I've seen similar questions for toggling visibility, etc but I also need to move the button on click but I have tried to follow their logic to get it to work with no success.
But when I do the opposite for when it's clicked again (hide the div and move the button back) I can't get it to work.
Can someone tell me where I'm going wrong?
Html
<button id="myfilterFunction">Show/Hide</button>
<div id="filterview">
<?php echo $column_right; ?></div>
</div>
Javascript
<script>
$( "#myfilterFunction" ).click(function() {
if ($( "#filterview" ).css('display', 'none')) {
$('#filterview').show();
$( "#myfilterFunction" ).css('margin-left', '300px');
}
if ($( "#filterview" ).css('display', 'block')) {
$('#filterview').hide();
$( "#myfilterFunction" ).css('margin-left', '0');
}
});
</script>
You are not checking the visibility of the element correctly. You should use .is(":visible") to check an element's visibility (using jQuery) and process the code accordingly:
$("#myfilterFunction").click(function () {
// If the element is visible
if ($("#filterview").is(":visible")) {
// Code to process
$('#filterview').hide();
$("#myfilterFunction").css('margin-left', '0');
} else {
// If the element is not visible
$('#filterview').show();
$("#myfilterFunction").css('margin-left', '300px');
}
});
$("#filterview").css('display', 'none') is used to actually SET the css display attribute of the element.

Jquery slideToggle, slideUp & stopPropagation in Firefox

I am using jquery slidetoggle & slideup so that, when a user clicks on #link, #div (which is by default hidden) slides open. Additionally, any click anywhere should slideUp and hide #div. So my script is like this:
$( document ).ready(function() {
$('#link').click(function(){
$('#div').slideToggle('fast');
event.stopPropagation();
});
$(window).click(function() {
$('#div').slideUp('fast');
});
});
This works fine in Chrome, but in Firefox the initial click to open the div also triggers the slideUp, so the div slides down and then immediately slides back up. What am I doing wrong here? Is there a better way to accomplish what I'm trying to do?
Seems like you have missed to pass event object to the listener.Correct your code to this and try..
$( document ).ready(function() {
$('#link').click(function(event){ //note here
$('#div').slideToggle('fast');
event.stopPropagation();
});
$(window).click(function() {
$('#div').slideUp('fast');
});
});
for more details refer here event.stopPropogation
hope this helps!

Dynamically applying a class to a button unable to do click event

I have two div of width 100% absolutely positioned side by side. On clicking a button I want to slide it to left. Then on clicking on same button I want it to come back to its normal position.
Here is my JsFiddle
The first part works fine, but I am not able to slide it back. The 2nd part of the jQuery code does not work. Can anyone please tell me the reason why its not working and how to make it work
<div class="about-deals">
<span class="view-tomorrow-deal">View Tomorrow Deals</span>
</div>
<div class="deals-image-wrapper">
<div class="deal-container">
<div class="today-deals">
</div>
<div class="tomorrow-deals">
</div>
</div>
</div>
try this JSFiddle
$(document).on('click', '.view-tomorrow-deal', function(event) {
$(this).removeClass('view-tomorrow-deal');
$(this).addClass('view-today-deal');
$(this).text('View Today Deals');
$('.deal-container').animate({left: '-100%'}, 1000);
});
$(document).on('click', '.view-today-deal', function(event) {
event.preventDefault();
$(this).removeClass('view-today-deal');
$(this).addClass('view-tomorrow-deal');
$(this).text('View Tomorrow Deals');
$('.deal-container').animate({left: '0%'}, 1000);
});
That's not really the way to create toggle functionality.
When you attach an event handler, that event handler is attached to any element matching the given selector at that time, changing the class later does not remove the event handler or make event handlers executed on pageload magically start working, unless they are delegated, but that makes very little sense here.
Just toggle the functionality in the same click handler, if needed use a flag etc.
$('.view-tomorrow-deal').click(function (event) {
$(this).text(function(_,txt) {
return txt == 'View Tomorrow Deals' ? 'View Today Deals' : 'View Tomorrow Deals';
});
$('.deal-container').animate({
left: $('.deal-container').position().left === 0 ? '-100%' : '0%'
}, 1000);
});
FIDDLE
Try jQuery toggle
$( "#clickme" ).click(function() {
$( "#book" ).slideToggle( "slow", function() {
// Animation complete.
});
});
or
$("#book").toggle("slide");
Link : https://api.jquery.com/slideToggle/
for slide effect
Stack link : slideToggle JQuery right to left

Fancybox won't close when click spans

I want the fancybox to close when either of the spans are clicked, currently it seems to be reopening the window after they are clicked and clicking anywhere else closes it like it should.
<div class="fancybox" style="display: none;">
<span class="ChooseEnglish">English</span>
<span class="ChooseCymraeg">Cymraeg</span>
</div>
$(".fancybox").fancybox({
closeClick: true
});
$( ".fancybox" ).trigger( "click" );
$( ".ChooseEnglish" ).click(function() {
$.fancybox.close();
});
$( ".ChooseCymraeg" ).click(function() {
$.fancybox.close();
});
http://jsfiddle.net/K8NDm/
Thanks
Alex
The issue is that the selector .fancybox is bound to fancybox but it's also the content of fancybox. In other words, that selector is both the trigger and the target of fancybox.
Of course, any click on the selector and/or its contents (your <span>) will trigger fancybox over an over again.
You need another selector to fire fancybox (that can be hidden if you prefer so) like :
<a href="#fancybox" class="fancybox" style="display: none;"><a>
Then change the div selector from class to ID so it can be targeted by the link like :
<div id="fancybox" style="display: none;">
<span class="ChooseEnglish">English</span>
<span class="ChooseCymraeg">Cymraeg</span>
</div>
and finally the simplified script :
$(".fancybox").fancybox({
closeClick: true
}).trigger("click"); // you can chain fancybox and trigger methods
$(".ChooseEnglish, .ChooseCymraeg").click(function () {
$.fancybox.close();
}); // bind the same click event to both selectors at once
See JSFIDDLE
NOTE: if you want to prevent the visitor from closing fancybox without choosing any of your (<span>) options, then you can add modal:true instead like :
$(".fancybox").fancybox({
// force to close clicking on any span only
modal: true
}).trigger("click");
See forked JSFIDDLE
The click event is bubbling from the span to the div, so the fancybox gets reopened. You can use .stopPropagation to prevent bubbling:
$( ".ChooseEnglish" ).click(function(e) {
e.stopPropagation();
$.fancybox.close();
});
$( ".ChooseCymraeg" ).click(function(e) {
e.stopPropagation();
$.fancybox.close();
});

Categories