I'd like to hide my page's navigation when video is playing, just like the play button does.
Here's the script that succesfully hides the play button:
<script>
$('.vid').parent().click(function () {
if($(this).children(".vid").get(0).paused){
$(this).children(".vid").get(0).play();
$(this).children(".playpause").fadeOut();
}else{
$(this).children(".vid").get(0).pause();
$(this).children(".playpause").fadeIn();
}
});
</script>
And this script I tried to hide my navigation bar with:
<script>
function vidplay() {
var video = document.getElementById(".vid");
var button = document.getElementById(".playpause");
if (video.paused) {
video.play();
$(".navbar").hide();
</script>
Here's link to my site
Try using the jQuery .toggle() function;
$('.vid').parent().click(function () {
$(".navbar").toggle();
});
You didn't close your function and if statement
<script>
function vidplay() {
var video = document.getElementById(".vid");
var button = document.getElementById(".playpause");
if (video.paused) {
video.play();
$(".navbar").hide();
}
}
</script>
Related
I wish to host some HTML5 videos in a HTML app. On opening the video they currently just open up within a page and play by default with the controls available with the option to open fullscreen, is there any way to get playing full screen as soon as you open the page?
<div class="video-container" data-tap-disable="true">
<div class="videotitle">{{product.title}}</div>
<div class="videoduration">Duration: {{product.duration}}</div>
<video id="myVideo" controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline" class="videoPlayer"><source src="{{product.video}}" type="video/mp4"/></video>
Here is my Angular controller, I assume the JS code will fit in here somewhere as opposed to my product.html
.controller('ProductCtrl', function (Products, $rootScope, $scope, $stateParams, $state, $timeout) {
$scope.product = Products[$stateParams.productId];
var video = document.getElementById("myVideo");
// Stop video playing when we go to another page
$rootScope.$on('$stateChangeStart', function () {
stopVideo();
});
// Go to list of other videos when individual HTML5 video has finished playing
angular.element(video).bind('ended', function () {
$state.go('app.products');
});
function stopVideo() {
video.pause();
video.currentTime = 0;
}
});
const elem = document.getElementById("myVideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
var video = $("#myVideo");
video.on('click', function(e){
var vid = video[0];
vid.play();
if (vid.requestFullscreen) {
vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen();
}
});
Is it possible to disable middle mouse click paste in an iframe
<iframe id="ck_id"></iframe>
I have disabled the context menu using:
document.getElementById("ck_id").contentWindow.document.oncontextmenu = function(){alert("Disabled context menu"); return false;};
Use jquery 'mousedown':
$(document).ready(function () {
$("#ck_id").contents().find("body").on('mousedown', function (e) {
if (e.which == 2) {
e.preventDefault();
//Do your work
}
});
});
I am having HTML page where i ll have link as "SHOW" while clicking on that I need to show div area. where DIV has iframe.
Normally while loading HTML page that div should be in hidden state while clicking only it should be shown.
I need close button inside that link..While clicking on that I need to close the dive that is hide.
a
function toggleDisplay(id)
{
if (!document.getElementById) { return; }
var el = document.getElementById('straddle');
if (el.style.display == ''){
el.style.display = 'none';
}else {
el.style.display = '';
}
}
I don't want this toggle function
Please help me.
Your javascript
<script type="text/javascript">
<!--
var whatever = document.getElementById('mydiv');
whatever.style.display = 'none';
function show(){
whatever.style.display = 'block';
}
function hide(){
whatever.style.display = 'none';
}
//-->
</script>
and then the HTML
Click here to show element
<br/>
<div id="mydiv">
This will disappear and reappear and
Click here remove element</div>`
You may want this (Iframe may take a while to load, so let it load)
HTML:
Show
<div id="straddle">
<div id="close">Close</div>
<iframe width='100%' src="http://heera.it"></iframe>
</div>
JS: (Put it before closong </body> tag between <scripe type="text/javascript"></scripe>)
window.onload = function() {
var show = document.getElementById('show'),
el = document.getElementById('straddle'),
close = document.getElementById('close');
show.onclick = function() {
el.style.display = 'block';
return false;
};
close.onclick = function(){
el.style.display = 'none';
};
};
Update : Added relevant css
#straddle{ display:none; }
#close{
float:right;
cursor:pointer;
display:inline-block;
}
Use jQuery:
$(document).ready(function() {
$('#link1').click(function() { $('#div').css({ display:'none' }) })
$('#link2').click(function() { $('#div').css({ display:'block' }) })
})
I've been absolutely everywhere (I think) and can't seem to find a way to call a stop event in an html5 audio controller. My audio controller has a playlist where each track will play when selected or cycle through each track to the next. There's also a next button which works.
My play/pause button looks like this:
function playPause() {
var audioPlayer = document.getElementsByTagName('audio')[0];
if(audioPlayer!=undefined) {
if (audioPlayer.paused) {
audioPlayer.play();
} else {
audioPlayer.pause();
}
} else {
loadPlayer();
}
}
I need a "Stop" button that stops the audio and goes back to the beginning of the track currently being played. I thought about using the current playback postion somehow, but can't get my head around that.
I've also tried this (adapted by advice here in another question), to no avail:
function stop() {
var audioPlayer = document.getElementsByTagName('audio');
addEventListener('loadedmetadata', function() {
this.currentTime = 0;
}, false);
}
Any ideas?
If your play/pause is working, this should work for stop:
function stop() {
var audioPlayer = document.getElementsByTagName('audio')[0];
audioPlayer.pause();
audioPlayer.currentTime = 0;
}
Here is a small demo code, where you can play, pause and stop an audio.
Live Demo
HTML
<input type="button" value="play" id="playBtn" />
<input type="button" value="pause" id="pauseBtn" />
<input type="button" value="stop" id="stopBtn" />
Jquery
var source = "http://www.giorgiosardo.com/HTML5/audio/audio/sample.mp3"
var audio = document.createElement("audio");
audio.src = source;
$("#playBtn").click(function () {
audio.play();
});
$("#pauseBtn").click(function () {
audio.pause();
});
$("#stopBtn").click(function () {
audio.pause();
audio.currentTime = 0;
});
Source
If you want to stop the music and abort the downloading operation you can use this code:
<button id="btnStop" onclick="player.src = ''; player.src = 'song.mp3';">Stop</button>
We are using java here to change the song src and then put it back there! Tricky but worky
I've got a jQuery code, which
$("a.reply").click(function() {
//code
});
When I click the link with .reply class the first time, nothing happens. The second time I click, the code inside the click function works.
The link is being inserted on the page using PHP from a mysql database. so it's not being inserted dynamically.
Why is this happening? Any solution?
The BadASS Code:
$(function(){
//TextArea Max Width
var textmaxwidth = $('#wrapper').css('width');
//Initialize Focus ids To Different Initially
var oldcommentid = -1;
var newcommentid = -2;
//End Of initialization
$("a.reply").click(function() {
newcommentid = $(this).attr('id');
if (newcommentid == oldcommentid)
{
oldcommentid=newcommentid;
$("#comment_body").focus();
}
else
{
$('#comment_form').fadeOut(0, function(){$(this).remove()});
var commetformcode = $('<form id="comment_form" action="post_comment.php" method="post"><textarea name="comment_body" id="comment_body" class="added_comment_body" rows="2"></textarea> <input type="hidden" name="parent_id" id="parent_id" value="0"/> <div id="submit_button"> <input type="submit" value="Share"/><input type="button" id="cancelbutton" value="Cancel"/></div></form>');
commetformcode.hide().insertAfter($(this)).fadeIn(300);
//
var id = $(this).attr("id");
$("#parent_id").attr("value", id);
oldcommentid=newcommentid;
//dynamicformcreation function
dynarun();
//
}
return false;
});
dynarun();
function dynarun()
{
//Form Re-Run Functions
$('#comment_body').elastic();
texthover();
$("#comment_form input, select, button").uniform();
textareasizer();
$("#comment_body").focus();
$("abbr.timestamp").timeago();
return false;
}
//TextArea Resizer Function
function textareasizer(){$("#comment_body").css('max-width', textmaxwidth);return false;}
//Other Miscellaneous Functions
$('.comment-holder').hover(
function(event) {
$(this).addClass('highlight');
},
function(event) {
$('.comment-holder').removeClass('highlight');
}
);
function texthover()
{
$('.added_comment_body').hover(
function(event) {
$(this).parent().parent().addClass('highlight');
},
function(event) {
$('.comment-holder').removeClass('highlight');
}
);
return false;
}
});
This is a longshot, but are you running some sort of tracking script? Like webtrends or coremetrics (or even some of your own script, that's globally looking for all clicks)? I ran into a similar problem a while ago, where the initial-click was being captured by coremetrics. Just a thought.
Does it still happen if you comment out all your code and simply have an alert("hi") inside the click function?
Update
I think Sarfaz has the right idea, but I would use the document ready function like so
$(document).ready(function(){
$("a.reply").click(function() {
//code
});
});
I just ran into same problem and I resolved my problem by removing:
<script src="bootstrap.js"></script>
you can use bootstrap.min.js
Use Inline CSS for hiding div and use JS/jQuery to show . This way Jquery Click Event will Fire On First Click
<div class="about-block">
<div class="title">About us</div>
<div class="" id="content-text" style="display:none;">
<p>Show me.</p>
</div>
</div>
<script>
var x = document.getElementById("content-text");
jQuery( '.about-block' ).click(function() {
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
});
</script>