Preventing child click event from triggering its parent event - javascript

I have a video tag which is placed inside an asp.net LinkButton control. The button fires some event when clicked. If the user clicks the video, both the video event (playing the video) and the button event fire. I only want the video to play.
I found different solutions on the web, but they didn't work.
Here is my javascript code:
<script type="text/javascript">
function play(e)
{
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}
/*$(".pVideo").click(function (event) {
if (event.target == this) {
event.stopPropagation();
}
});*/
</script>
This is the video tag which is placed inside a LinkButton (it's placed inside a label, but I think that's not a problem because a label has no onclick event):
<asp:Label runat="server" Visible="false" ID="videoHolder">
<video controls="true" id="pVideo" onclick="play()">
<source src='<%# !String.IsNullOrEmpty(Eval("postVideo2").ToString()) ? "/uploadedVideos/" + Eval("postVideo2"): "" %>' type="video/mp4"/>
</video>
</asp:Label>
When calling play function I get this error in JS: "no element found", but I couldn't figure out the reason. Please notice that I also tried the commented JQuery function after adding the required resources, but I kept getting error saying that $ is not defined.
Edit: This is how I did it for JQuery, but still not working:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/script.js">
$("#pVideo").click(function () {
if (event.target == this) {
event.stopPropagation();
}
});
</script>
Video tag:
<asp:Label runat="server" Visible="false" ID="videoHolder">
<video controls="true" id="pVideo">
<source src='<%# !String.IsNullOrEmpty(Eval("postVideo2").ToString()) ? "/uploadedVideos/" + Eval("postVideo2"): "" %>' type="video/mp4"/>
</video>
I'm getting "no element found" error.
Can anyone please tell me how to play the video without firing the parent LinkButton event?
Thanks.

Related

Why Safari won't stopPropagate click event on video tag?

Hi I need help wit this small issue. I have my video in html with onClick function. In this function I am catching event and I am doing stopPropagation on it. This behaviour is good in chrome, opera, firefox etc. But in safari this event.stopPopagation is ignored or what.
I have this function on my video and when i click on video it should run just my own function. When I turn off controls everything works as I except so it is becouse that e.stopPropagation thing. How to make it work please right in safari too please?
Js
function playVideo(e, fullscreen = false){
e.preventDefault();
e.stopPropagation();
//Vyber videa tagu
let activeSlide = (document.getElementsByClassName("carousel-item active")[0]);
let video = activeSlide.getElementsByTagName("video")[0];
video.addEventListener('ended', function(e) {
video.webkitExitFullscreen();
}, false);
if(video.paused ){
console.log("pause");
video.play();
toggleVideoElement(false);
video.setAttribute("controls","controls")
if(fullscreen === true){
openFullscreen(video);
}
}
else{
video.pause();
toggleVideoElement(true);
video.removeAttribute("controls")
}
return false;
}
Html
<div class="right order-1 order-xl-2 mb-3 mb-xl-0">
<div class="video-container position-relative">
<i id="play-icon" class="fas fa-play-circle fa-4x position-absolute <?php echo($page->playButtonClass) ?>" onClick=" playVideo(event)"></i>
<video preload="false" onClick=" playVideo(event)" poster="assets/images/foto/<?php echo($page->getVideoPreview()) ?>">
<source src="assets/videos/<?php echo($page->getVideoName())?>" type="video/mp4" >
Your browser does not support the video tag.
</video>
</div>
</div>
Link on my live server for see what the problem is: http://dod.stud.spsknm.sk
Edit:
I tried to add this to my .js and removed onClick from my video tag
document.addEventListener('DOMContentLoaded', function () {
let d = document.getElementsByTagName("video")[0];
console.log(d);
d.addEventListener("click", (event) => {
event.preventDefault();
playVideo()
});
});
Nothing changed same unwanted behaviour :/

Unable to select video

I am trying to mute / unmute my video. But to start with, it looks like I am not able to select my video. Tried tutorial examples and answers to similar questions but they all point to the same way of selecting the video. Please advice what is wrong here. Thank you.
<!-- HTML -->
<button id="enableMute" onclick="enableMute()" type="button">Mute</button>
<button id="disableMute" type="button">Enable</button>
<button id="checkMute" type="button">Status</button><br>
<video id="myVideo" width="320" height="176" autoplay loop muted>
<source src="video/trailer.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<!-- JS -->
$(function() {
// seems not being selected. Tried without hash and same result.
var vid = $("#myVideo");
//alert works but clearly nothing happening with mute controls
$("#enableMute").click(function(){
alert("enableMute");
vid.muted = true;
vid.volume = 1.0;
});
//alert works but clearly nothing happening with mute controls
$("#disableMute").click(function(){
alert("disableMute");
vid.muted = false;
vid.volume = 1.0;
});
//if i click this button first, the alert is "alert undefined"
$("#checkMute").click(function(){
alert('alert: ' + vid.muted);
});
});
The video is being selected and put into the variable. Using .muted won't work and you need to use jQuery's .prop() function as I found out in this question.
This should work:
HTML
<button id="enableMute" onclick="enableMute()" type="button">Mute</button>
<button id="disableMute" type="button">Enable</button>
<button id="checkMute" type="button">Status</button><br>
<video id="myVideo" width="320" height="176" autoplay loop muted>
<source src="video/trailer.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
JavaScript
$(function() {
// Video is being selected
var vid = $("#myVideo");
$("#enableMute").click(function() {
alert("enableMute");
vid.prop('muted', true);
vid.prop('volume', 1.0);
});
$("#disableMute").click(function() {
alert("disableMute");
vid.prop('muted', false);
vid.prop('volume', 1.0);
});
$("#checkMute").click(function() {
alert('alert: ' + vid.prop('muted'));
});
});
To see it in action with a sample video, go to this link.

Limit spacebar trigger to button

I don't know how to approach this. If I have two divs div id 1 and div id 2. Div id 2 contains a video but is hidden. Div id1 has a button.
If I use the enter key to activate the button div id 1 is hidden and div id 2 is shown with the video paused. However, if I use the spacebar to activate the button, div id 1 is hidden and div id 2 is shown — except the video is playing because the play button is activated when I used the spacebar on the button.
How do I have it so the div id 1 button only is triggered by pressing the spacebar?
HTML
`<div id="container" role="region" aria-label="Introduction to ...">
<div id="box_01">
<h2> Intro</h2>
<p>Intro content</p>
<button id="button_01" aria-label="Show video">OK</button>
</div>
<div id="box_02" aria-hidden="true">
<video id="video1" preload="auto" width="480" height="360" poster="" data-able-player>
<source type="video/webm" src=""/>
<source type="video/mp4" src=""/>
<track kind="captions" src=""/>
</video>
</div>
</div>`
Basic CSS
.box_02 {
display:none;
}
JQuery
<script>
$('#button_01').on('click', function(e) {
$('#box_01').hide().attr('aria-hidden','true');
$('#box_02').fadeIn(300).attr('aria-hidden','false');
});
</script>
I don't know if this will help - don't do much with videos, sorry. This event handler simply just prevents Enter and Spacebar being handled by the video player element. You could of course do more than this - but hopefully this is enough to get you some progress
$(document).on('keydown', '#video1', function(e) {
if (e.keyCode == 32 || e.keyCode == 13) {
e.preventDefault();
}
});

How to enable/disable a button on parent modal popup from child in the IFrame using javascript

I am trying to disable/enable a button of the parent window from the child window.
The following is a snippet from the parent page.
<ajaxToolkit:ModalPopupExtender ID="mpeTest" runat="server"
CancelControlID="btnClose" PopupControlID="pnl1" TargetControlID="showMpe"/>
<asp:Panel ID="pnl1" runat="server" >
<ContentTemplate>
<iframe id="ContentIframe" runat="server">
<p>Your browser does not support iframes.</p>
</iframe>
</ContentTemplate>
<p class="submitButton">
<asp:Button ID="btnClose" runat="server" Text="Close" />
<asp:Button ID="btnTest" runat="server" Text="EnableDisable" />
</p>
</asp:Panel>
In the child page that is loaded in the iframe, I have a grid view with LinkButtons. I am attempting to get one of these LinkButtons to disable/enable the btnTest from the parent window.
I have tried many things but I can't seem to figure this out...
for example:
<script type="text/javascript" >
$(document).ready(function() {
jQuery('[id$="linkButtonDisable"]').click(function() {
window.parent.opener.document.getElementById("btnTest").disabled = true;
});
});
</script>
Can anyone please help me out. I am fairly new to this
Maybe you should try something like this...
$("#<%=linkButtonDisable.ClientID %>").click(function() {
//Option N#1 HTML Attribute
$("#<%=btnTest.ClientID %>").attr("disabled","disabled");
//Option 2 With jQueryMobile integration, the same it supposed to work if your using bootstrap, but I ignore the css class for disabling an element
$("#<%=btnTest.ClientID %>").addClass("ui-disabled");
//Also if you want to toggle states between disable/enable maybe this could work either...
var id = $("#<%=btnTest.ClientID %>");
var state = id.attr("disabled");
//Dunno if it's needed to catch if disabled attr it isn't set
if(state == "disabled") {
id.removeAttr("disabled");
} else {
id.attr("disabled","disabled");
}
});
Hope this help!...

hide and display a div using javascript in ASP.NET

I want display an audio player, after click a button. here my code
<script type="text/javascript">
function viewAudio() {
document.getElementById('myAudio').style.display = ""
}
document.getElementById('myAudio').style.display = "none"
</script>
<button value="#Html.DisplayFor(modelItem => item.SampleURL)" id="audioViewer" onclick="viewAudio()">
<img src="../../Content/images/audio.png"></button>
<div id="myAudio">
<audio controls preload="none">
<source src="#" type="audio/mp3">
</audio>
</div>
But, when i run in browser it still display the audio player.
any solution for this?
First of all, to have the player hidden by default you don't need to use JavaScript. Add such style to the container instead:
<div id="myAudio" style="display: none;">
And to show it back upon clicking the button:
function viewAudio() {
document.getElementById('myAudio').style.display = "block";
}
If this is an ASP page then that button click might be doing a postback. This will reset the state. You should have either return false; at the end of the onclick.
Alternatively, if the problem is that the div is never hidden, you can set the style directly on the div element in the html markup.
Make sure that you are using your browser's development tools to check the css styling currently on the element you're looking at. You can also set breakpoints and step through your javascript code, right in your browser.
<asp:Button ID="ButtonShowPanel" CausesValidation="false" CssClass="btn btn-primary pull-right" runat="server" Text="Add Contact" OnClientClick="javascript:SetVisiblityPanels(false); return false;" />
function SetVisiblityPanels(check) {
if (check) {
$('.SearchPanel').show(1000);
$('.DescriptionPanel').hide(1000);
}
else {
$('.SearchPanel').hide(1000);
$('.DescriptionPanel').show(1000);
}
}
<script type="text/javascript">
function CheckVisiblityPanels(check) {
if (check) {
{
document.getElementById('<%=myAudio.ClientID%>').style.display = "block";
}
else
{
document.getElementById('<%=myAudio.ClientID%>').style.display = "none";
}
return false;
}
};
</script>

Categories