I need to set tap trigger on some selectors. I'm using jQuery Mobile and this function, so what is not right?
window.onload = load;
function load() {
$('.togglePlay').trigger('tap');
}
Look into tap and taphold touch event.
// The tap event won't be emitted along with the taphold event
$.event.special.tap.emitTapOnTaphold = false;
$("#fire").on("taphold", function() {
$(this).addClass("colorize");
});
$("#banana").on("tap", function() {
$(this).hide();
});
body {
text-align: center;
}
span {
font-size: 3rem;
}
span:hover {
cursor: pointer;
}
.colorize {
color: transparent;
text-shadow: 0 0 0 red;
}
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<h3>If you tap and hold me for 750 milliseconds, I will fill up with color.</h3>
<span id="fire">🔥🔥🔥</span>
<hr />
<h3>If you tap me quick, I will dispear.</h3>
<span id="banana">🍌🍌🍌</span>
try:
$(document).ready(function(){
$('.togglePlay').trigger('click');
});
Assuming the loading page has a div containing data-role=page and its id is mypage, you could use the pageinit event to fire up the click on '.togglePlay' like this :
$(document).on("pageinit", "#mypage", function () {
$('.togglePlay').trigger('click');
});
References
For reasons why you mustn't use ready event with jQM, see jQuery Mobile: document ready vs page events
Link for page events from jQM API : Events
I use jQuery tap() method.
$('.togglePlay').tap();
http://api.jquerymobile.com/tap/
This works for me :)
you should be able to set autoplay=true or some other setting with...
<video controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
example from: http://www.w3schools.com/tags/att_video_autoplay.asp
without the use of js
Related
Ok so there is this amazing video player called plyr.io
I was so impressed by it and I downloaded it from Github and everything, I barely know code. I am early into the html and css. I know NOTHING about javascript. Anyways after downloading it and everything, I got to this point.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Plyr Demo</title>
<link rel='stylesheet' href='https://cdn.plyr.io/3.4.6/plyr.css'>
<style>
.container {
max-width: 800px;
margin: 0 auto;
}
.plyr {
border-radius: 4px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="container">
<video controls crossorigin playsinline
poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-
HD.jpg" id="player">
<!-- Video files -->
<source
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-
720p.mp4" type="video/mp4" size="720">
<!-- Caption files -->
<track kind="captions" label="English" srclang="en"
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-
HD.en.vtt"
default>
<track kind="captions" label="Français" srclang="fr"
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-
HD.fr.vtt">
<!-- Fallback for browsers that don't support the <video>
element -->
<a
href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-
576p.mp4" download>Download</a>
</video>
<script src='https://cdn.plyr.io/3.4.6/plyr.js'></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
// This is the bare minimum JavaScript. You can opt to pass no arguments
to setup.
const player = new Plyr('#player');
// Expose
window.player = player;
// Bind event listener
function on(selector, type, callback) {
document.querySelector(selector).addEventListener(type, callback,
false);
}
// Play
on('.js-play', 'click', () => {
player.play();
});
// Pause
on('.js-pause', 'click', () => {
player.pause();
});
// Stop
on('.js-stop', 'click', () => {
player.stop();
});
// Rewind
on('.js-rewind', 'click', () => {
player.rewind();
});
// Forward
on('.js-forward', 'click', () => {
player.forward();
});
});
</script>
</body>
</html>
But when I actually try to replace
https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-
720p.mp4
Whenever I replace it with a video link of my own, The video player just doesn't work, I have tried so many things and it just wouldn't work unless its the actual video of plyr.io
its free to use meaning the code doesn't violate copyright, tell me if i am wrong. the website link is (https://plyr.io/#video)
"Whenever I replace it with a video link of my own, The video player
just doesn't work, I have tried so many things..."
Keep your link as one line (eg: Don't break the file name with Enter to put some text on a new line. No new line after "Trailer-" text).
You cannot have empty spaces like (see grey area in below link's wording):
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-
720p.mp4"
The correct link is:
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"
So when you say (not working):
But when I actually try to replace:
https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-
720p.mp4
Correct way should be:
But IT WORKS when I actually try to replace:
https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4
Is there a way I can fire an event if the contents of the body of an IFrame changes.
<iframe name="upload-iframe-1" id="upload-iframe-1" frameBorder="0" style="width: 0px; height: 0px; display: none;">
<head>
</head>
<body>
</body>
</iframe>
Tried this but does not fire
$("#upload-iframe-1").contents().find('body').on("change",function (e) {
alert("changed");
});
Thanks
Have you tried using $(window).unload() This might help you to detect page unload from within iFrame.
$( window ).unload(function() {
return "Handler for .unload() called.";
});
I made a website (not on air yet) and I tested it live with some free hosting.
The website contains a map tag and a big picture within it.
I made it so if someone clicks on a part of the picture a specific audio will be heard, according to where he clicked.
My problem is that there are a lot of audio tags (about 300) and because there are lots of bandwidth-hogging files, it takes about 10 minutes until the website is fully loaded which means most of the audios don't work for several minutes.
I want to know if there is a way, maybe a responsive way with javascript or PHP that will allow me to make those audio tags only if the user clicks on the map. That way it will not use that much bandwidth. Also if anyone can think of a better way it will greatly appreciated.
I'm adding the javascript for the click event so you can see what it is all about -
$('#Swensens_maze').click(function(){
$('audio').each(function(){
this.pause(); // Stop playing
// Reset time
});
$('#Swensens_maze_audio').get(0).play();
return false;
});
This is one example from many. The "#swensens_maze" is the area tag and the "#Swensens_maze_audio" is the audio tag for it.
Your problem happens because browser tries to preload the audio for each audio tag.
So the answer is to set the attribute preload in the audio tag to value none
<audio preload="none">
EDIT The audio now automatically strats
EDIT 2 I have just remembered that an empty src is a bad practice, I will find a solution, the best one is to store the information in some other tag and then create a the audio tag with js
EDIT 3
JS FIDDLE VERSION 2
Better version,doesn't leave an empty src attribute, all the audio information are stored inside the the hidden input, once you click the area the audio tag is provided through JS inside the clicked div.
<html>
<head>
<script src="jq.js"></script>
<style>
.map {width:100%;height:75px;background:#bbb}
.c1 {background:#f2f2f2}
.c2 {background:#000}
.c3 {background:#cc4444}
</style>
</head>
<body>
<div class='map c1'>
<input type='hidden' data-original='1.mp3' data-format="audio/mpeg" />
</div>
<div class='map c2'>
<input type='hidden' data-original='2.mp3' data-format="audio/mpeg" />
</div>
<div class='map c3'>
<input type='hidden' data-original='3.mp3' data-format="audio/mpeg" />
</div>
<script>
$('div.map').click(function () {
$('audio').each(function () {
this.pause();
});
//Check if audio is already present, if true, then exit
if($(this).find('audio').length > 0)
return;
var childInput = $(this).find('input:hidden'), //Find information
audioTag = document.createElement("AUDIO"),// Create AUDIO element
audioSource = document.createElement("SOURCE"), //Create SOURCE element
audioType = childInput.attr('data-format'),//retrieve audio type, then you could checkif the browser supports this format
audioSrc = childInput.attr('data-original'); //retrieve audio src
//Set type and src of the source
audioSource.type= audioType;
audioSource.src= audioSrc;
//Enable controls and append SOURCE to AUDIO
audioTag.controls = true;
audioTag.appendChild(audioSource);
this.appendChild(audioTag);// Append the created audio tag to the clicked div
audioTag.load();//Load the src
audioTag.play();//Play the audio
return false;
});
</script>
</body>
</html>
OLDER ANSWER
Bad for empty src
$('div.map').click(function () {
$('audio').each(function () {
this.pause();
});
var audioTag = $(this).find('audio'),
sourceTag=audioTag.children('source');
if (sourceTag.attr('src')=='') {
sourceTag.attr('src', sourceTag.attr('data-original'));
audioTag.load()
}
audioTag.get(0).play();
return false;
});
Full page FIDDLE DEMO(the player doesn't appear, because there isn't any audio file):
<html>
<head>
<script src="jq.js"></script>
<style>
.map {
width:100%;
height:75px;
background:#bbb
}
.c1 {
background:#f2f2f2
}
.c2 {
background:#000
}
.c3 {
background:#cc4444
}
</style>
</head>
<body>
<div class='map c1'>
<audio controls>
<source data-original='1.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<div class='map c2'>
<audio controls>
<source data-original='2.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<div class='map c3'>
<audio controls>
<source data-original='3.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<script>
$('div.map').click(function () {
$('audio').each(function () {
this.pause();
});
var audioTag = $(this).find('audio'),
sourceTag=audioTag.children('source');
if (sourceTag.attr('src')=='') {
sourceTag.attr('src', sourceTag.attr('data-original'));
audioTag.load()
}
audioTag.play();
return false;
});
</script>
</body>
</html>
<audio src="abc.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc1.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc2.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc3.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc4.mp3"controls class="audioDemo" preload="none"></audio>
Yes don't leave the src attribute empty, but give to src a valid blank and short file.mp3.
Then when user click or whatever replace the src by the good file, like this:
document.getElementById("audio8").src = "song.mp3";
Also, depending of how is made your page, if audio's appear block after block, have a look to lazysize.js for smoothly load your content when scroolling. Easy to use and powerful.
https://github.com/aFarkas/lazysizes
Your browser tries to preload the audio for each audio tag. So the answer is to set the attribute preload in the audio tag to value none
use can use: <audio controls preload="none">
I have an issue with my code, I'm trying to create a function to hide and show a div
and it's working, but it dosnt work at first, It works only on the second click, so i have to click the link first to get it to start working properly, how can i fix it so that it works on first click?
more info:
im trying to have a div appear and then disapear usin the display and hide functions, the catch is i also want it to disapper when im outside of the div, if its visible, its all working but the problem is when i first load the page thn click the link to display the div, it dosnt appear, only when i click it a second time does it appear. this is the problem i want to fix
this is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.foggy.min.js"></script>
<style>
body {
background: black;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: 100%;
color: white;
font-family: 'Segoe UI';
font-size: 24px;
}
.box
{
width: 100%;
margin: auto;
top: 0px;
left: 20%;
right: 0px;
bottom: 0px;
background-color: white;
opacity: 0.4;
position: fixed;
overflow-y: scroll;
overflow-x: scroll;
}
</style>
</head>
<body>
<script lang="en" type="text/javascript">
$(document).ready(function () {
});
$(document).mouseup(function (e) {
var container = $("#boxwrapper");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if (container.is(':visible'))
Hide();
}
});
function Display() {
$("#boxwrapper").show();
$("#boxwrapper").addClass("box");
$("#main").foggy();
}
function Hide() {
$("#boxwrapper").hide();
$("#main").foggy(false);
}
</script>
<div id="main">
Display Div
</div>
<div id="boxwrapper">
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Why don't you use click() method insead of mouseup()?
$('a').click(function (e) {
var container = $("#boxwrapper");
if (container.is(':visible')) {
Hide();
} else {
Display();
}
return false;
});
If you don't want to bind this event to every <a> on your site, add class to your element and bind click to this class. E.g.:
Display Div
and then in your script:
$('a.divToggle').click(function (e) { });
See this working fiddle
JavaScript
function display() {
if ($('#boxwrapper ').css('display') === 'none') {
$('#boxwrapper').show();
} else {
$('#boxwrapper').hide();
}
}
The issue could be a whitespace or anything, since is very hard to reproduce it, but here some advices or things that could be causing the issue:
Organize your code
First of all, you need to organize your code and load the JS libraries at the end of the file or wrap your functions inside the $(document).ready.
If you are using jQuery already, why to use the onClick event on the element itself if you can do it with jQuery.
Instead of all code inside the document mouseUp event, you could just add display: none in the css to #boxwrapper.
Instead of Hide() and Show() functions, you could just use toogleClass('box') jquery function
Difference between Click and MouseUp events
With a mouseup event, you can click somewhere else on the screen, hold down the click button, and move the pointer to your mouseup element, and then release the mouse pointer. A click event requires the mousedown and mouseup event to happen on that element.
Prevent Default Maybe?
You are not preventing Default on your click event. You can do it like:
Display Div
I want to add a click event to an iframe. I used this example and got this:
$(document).ready(function () {
$('#left').bind('click', function(event) { alert('test'); });
});
<iframe src="left.html" id="left">
</iframe>
But unfortunately nothing happens.
When I test it with another element (e.g. a button), it works:
<input type="button" id="left" value="test">
You could attach the click to the iframe content:
$('iframe').load(function(){
$(this).contents().find("body").on('click', function(event) { alert('test'); });
});
Note: this will only work if both pages are in the same domain.
Live demo: http://jsfiddle.net/4HQc4/
Two solutions:
Using :after on a .iframeWrapper element
Using pointer-events:none; one the iframe
1. Using :after
use a transparent overlay ::after pseudo element with higher z-index on the iframe's wrapper DIV element. Such will help the wrapper to register the click:
jQuery(function ($) { // DOM ready
$('.iframeWrapper').on('click', function(e) {
e.preventDefault();
alert('test');
});
});
.iframeWrapper{
display:inline-block;
position:relative;
}
.iframeWrapper::after{ /* I have higher Z-index so I can catch the click! Yey */
content:"";
position:absolute;
z-index:1;
width:100%;
height:100%;
left:0;
top:0;
}
.iframeWrapper iframe{
vertical-align:top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iframeWrapper">
<iframe src="http://www.reuters.tv/" frameBorder="0"></iframe>
</div>
2. Using pointer-events:none;
Clicks are not handleable from outside the iframe from an external resource (if the iframe is not in your domain).
You can only create that function inside your 'called into iframe' page, not from within the iframe-hosting page.
How to do it:
You can wrap your iframe into a div
make the click "go through" your iframe using CSS pointer-events:none;
target clicks with jQuery on your wrapping DIV (the iframe parent element)
jQuery(function ($) { // DOM ready
$('.iframeWrapper').on('click', function(e) {
e.preventDefault();
alert('test');
});
});
.iframeWrapper{
display:inline-block;
position:relative;
}
.iframeWrapper iframe{
vertical-align:top;
pointer-events: none; /* let any clicks go trough me */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iframeWrapper">
<iframe src="http://www.reuters.tv/" frameBorder="0"></iframe>
</div>
NOTA BENE:
No clicks will be registered by the iframe element, so a use-case would be i.e: if by clicking the iframe you want to enlarge it full screen.... Etc...
I got it to work but only after uploading it to a host. I imagine localhost would work fine too.
outer
<html>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
var myFrame = document.getElementById("myFrame");
$(myFrame.contentWindow.document).find("div").on("click", function () { alert("clicked"); });
});
</script>
<body>
<iframe id="myFrame" src="inner.htm"></iframe>
</body>
</html>
inner
<html>
<head>
<style>
div {
padding:2px;
border:1px solid black;
display:inline-block;
}
</style>
</head>
<body>
<div>Click Me</div>
</body>
</html>
Pure Javascript
Not my solution but only this works well.
let myConfObj = {
iframeMouseOver : false
}
window.addEventListener('blur',function(){
if(myConfObj.iframeMouseOver){
console.log('Wow! Iframe Click!');
}
});
document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseover',function(){
myConfObj.iframeMouseOver = true;
});
document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseout',function(){
myConfObj.iframeMouseOver = false;
});
$(document).ready(function () {
$('#left').click(function(event) { alert('test'); });
});
<iframe src="left.html" id="left">Your Browser Does Not Support iframes</iframe>
The script would have to be ran entirely from the iframe. I would recommend a different method of calling content, such as php.
iframes aren't really worth the hassle.
The actual problem is that, the click event does not bind to the DOM of the iframe and bind() is deprecated, use .on() to bind the event. Try with the following codes and you will find the borders of the iframe clickable getting that alert.
$('#left').on('click', function(event) { alert('test'); });
Demo of that Issue
So how to get it done?
How you should do is, create a function on iframe page, and call that function from that iframe page.