jwplayer("myElement_0").onPlay(function(){ pausePlayers(1); alert('0 has started'); });
jwplayer("myElement_1").onPlay(function(){ pausePlayers(2); alert('1 has started'); });
jwplayer("myElement_2").onPlay(function(){ pausePlayers(3); alert('2 has started'); });
jwplayer("myElement_3").onPlay(function(){ pausePlayers(4); alert('3 has started'); });
function pausePlayers(playing) {
for (var i=0; i<4; i++) {
if(i != playing) { jwplayer("myElement_"+i).pause(true); }
}
};
I have this script to pause other players if one is running. but it doesn't work. In my console, I see:
Uncaught TypeError: Object #<Object> has no method 'onPlay'
(anonymous function)
alhouthgh I'm pretty sure the jwplayer script is being loaded, no issues there.
Here is some quick and dirty sample code for something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://www.longtailvideo.com/jwplayer/jwplayer.js"></script>
<title>Multiple Mutually Exclusive JW6 Players Which Stop at End</title>
</head>
<body bgcolor="#EEE">
<div id="container"></div>
<script type="text/javascript">
jwplayer("container").setup({
file: "http://www.longtailvideo.com/jw/upload/bunny.mp4",
image: "http://www.longtailvideo.com/jw/upload/bunny.jpg",
height: 200,
width: 300,
stretching: "exactfit",
events:{
onPlay: function() {
jwplayer('container2').stop();jwplayer('container3').stop();
},
onTime: function(object) {
if(object.position > object.duration - 1) {this.pause();}
}
}
});
</script>
<br />
<div id="container2"></div>
<script type="text/javascript">
jwplayer("container2").setup({
file: "http://www.longtailvideo.com/jw/upload/bunny.flv",
image: "http://www.longtailvideo.com/jw/upload/bunny.jpg",
height: 200,
width: 300,
stretching: "exactfit",
events:{
onPlay: function() {
jwplayer('container').stop();jwplayer('container3').stop();
},
onTime: function(object) {
if(object.position > object.duration - 1) {this.pause();}
}
}
});
</script>
<br />
<div id="container3"></div>
<script type="text/javascript">
jwplayer("container3").setup({
file: "http://www.longtailvideo.com/jw/upload/bunny.mov",
image: "http://www.longtailvideo.com/jw/upload/bunny.jpg",
primary: "flash",
height: 200,
width: 300,
stretching: "exactfit",
events:{
onPlay: function() {
jwplayer('container').stop();jwplayer('container2').stop();
},
onTime: function(object) {
if(object.position > object.duration - 1) {this.pause();}
}
}
});
</script>
</body>
</html>
Related
I am guessing I am doing something stupid here and you can point me right direction. I am trying to use jquery-ui "pencil" icon for edit and the icon looks like it is not active. See the html and js below.
<!DOCTYPE html>
<HTML>
<HEAD>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" >
<TITLE>Sample</TITLE>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="sample.js"></script>
</HEAD>
<script>
$(document).ready(function() {
$( window ).on( "load", function() {
sample.launch();
});
});
</script>
<body>
<input type="button" id="applybtn" style="width:65px" value="Click Me" />
</body>
</HTML>
and here is the js file :
var sample = sample || {};
(function ($) {
"use strict";
function onApplyBtnClick() {
var html = '<input type="text" id="schpn12" value=' + "ABCD" + '>';
html += '<button class="editbtn" >Edit</button>';
$('<div></div>')
.html('<span></span>' + html)
.css("background-color","#FFFFFF")
.dialog({
modal: true,
close: function () { $(this).remove(); },
buttons: {
"Apply": function () {
$(this).dialog('close');
}
}
});
$('.editbtn').button({
icons: {
primary: "ui-icon-pencil"
},
text: false
});
}
function launch() {
$("#applybtn").click(onApplyBtnClick);
}
sample.launch = launch;
}(jQuery));
Consider the following.
$(function() {
function onApplyBtnClick() {
var dialogBox = $("<div>", {
title: "Test Dialog"
})
.css("background-color", "#FFFFFF")
.dialog({
modal: true,
close: function() {
$(this).remove();
},
buttons: {
"Apply": function() {
$(this).dialog('close');
}
}
});
$("<input>", {
type: "text",
id: "schpn12",
value: "ABCD"
}).appendTo(dialogBox);
$("<button>", {
class: "editbtn"
})
.html("Edit")
.button({
icons: {
primary: "ui-icon-pencil"
},
showLabel: false
}).appendTo(dialogBox);
}
$("#applybtn").click(onApplyBtnClick);
});
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<button id="applybtn">Apply</button>
Since you are building the Dialog, Input, and Buttons, it may be best to initialize them as you create them.
text is not a Option or Method of Button. You will want to use showLabel Option.
i am trying to load assets on javascript using phaser3 engine but on chrome consol it says 'failed to load image' here is my HTML & Javascript code look where i made mistake:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>PhaserGame</title>
<script = "text/javascript" src = "phaser.js"></script>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
JAVASCRIPT:
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: {y: 500},
debug: false
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
function preload() {
this.load.image('sky','assets/sky.png');
}
function create() {
this.add.image(400, 300, 'sky');
}
function update() {
}
I think there is some problem with your image location
the same code worked for me, with only changing the image URL
https://codepen.io/devsumanmdn/pen/zaeZwJ?editors=0010
create folder "public" in project and put images here
I wrote a code that will translate text from en-US to id-ID (Indonesian). Here button has got a text which reads as Click me if you are serious. After applying translation, it is getting translated as Klik saya jika anda serius successfully. If I click on that button, an alert message will be displayed like this: You have been alerted, code it down. I want that alert message to be translated to id-ID. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Translation</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<button onclick="alertbox();" id="btn" >Click me if you are serious</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="i18next-1.10.1.min.js"></script>
<script>
function alertbox () {
alert("You have been alerted, code it down");
}
$.i18n.init({
lng: 'id-ID',
ns: {
namespaces: ['ns.common', 'ns.special'],
defaultNs: 'ns.special'
},
useLocalStorage: false,
debug: true
}, function(t) {
$('#btn').text($.t('app.btn', {
btn: ''
}))
});
</script>
</body>
</html>
id-ID (ns.special.json)
{
"app": {
"btn": "Klik saya jika anda serius"
}
}
en-US (ns.special.json)
{
"app": {
"btn": "Click me if you are serious"
}
}
How can I translate alert message into id-ID?
Where is your problem? You dont even try :) There is everything documented:
http://i18next.com/pages/doc_jquery.html
And you can find many examples with jquery. You can find even live examples on jsfiddle, like that:
$(document).ready(function () {
i18n.init({
"lng": 'en',
"resStore": resources,
"fallbackLng" : 'en'
}, function (t) {
$(document).i18n();
});
$('.lang').click(function () {
var lang = $(this).attr('data-lang');
i18n.init({
lng: lang
}, function (t) {
$(document).i18n();
});
});
});
http://jsfiddle.net/SalvadorDali/dLc7x/
Finish your code and edit your question, so we can help you. First declare i18n variables, then use $.t
My code:
<!DOCTYPE html>
<html>
<head>
<title>Translation</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<button id="btn">Click me if you are serious</button>
<div id="qwe"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="i18next-1.10.1.min.js"></script>
<script>
/*$("#btn").click(function() {
alert("You have been alerted, code it down!!!");
});*/
$.i18n.init({
lng: 'en-US',
ns: {
namespaces: ['ns.common', 'ns.special'],
defaultNs: 'ns.special'
},
useLocalStorage: false,
debug: true
}, function(t) {
var key = $('#qwe').text();
$('#btn').text($.t('app.btn', {
btn: ''
}))
$('#qwe').text($.t('app.alert', {
alert: ''
}))
});
$("#btn").click(function() {
alert($('#qwe').text());
});
</script>
</body>
</html>
CSS:
div {
display: none;
}
ns.special.json (en-US):
{
"app": {
"btn": "Click me if you are serious",
"alert": "You have been alerted, code it down!!!"
}
}
ns.special.json (id-ID):
{
"app": {
"btn": "Klik saya jika anda serius",
"alert": "Anda telah diperingatkan, kode itu turun!!!"
}
}
my code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="http://localhost/abc/pqr/web/css_new/style.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/abc/pqr/web/css_new/scroll.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://localhost/abc/pqr/web/css/jquery_ui/ui.all.css" type="text/css" />
<script type="text/javascript" src="http://localhost/abc/pqr/web/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/abc/pqr/web/js/jquery_ui/ui.core.js"></script>
<script type="text/javascript" src="http://localhost/abc/pqr/web/js/jquery_ui/ui.dialog.js"></script>
<script>
var timer;
var keys = {};
$(document).ready(function () {
$(document).mouseleave(function () {
customAlert("Your mouse is away");
});
});
$(document).keydown(function (e) {
keys[e.which] = true;
});
$(document).keyup(function (e) {
delete keys[e.which];
});
if( (keys[91] && keys[68]) || (keys[18] && keys[9]) || (keys[17] && keys[91] && keys[68]) ) {
customAlert("Your mouse is away");
}
function customAlert(customText) {
$("#popUp").html(customText);
timer = setInterval(customAlert2, 5000);
$("#popUp").dialog({
dialogClass: "no-close",
buttons: [{
text: "OK", click: function () {
$(this).dialog("close");
clearInterval(timer);
}
}]
});
}
function customAlert2() {
location.reload();
$("#popUp2").dialog({
dialogClass: "no-close",
buttons: [{
text: "OK", click: function () {
$(this).dialog("close");
}
}]
});
}
</script>
</head>
<body>
<h1>My first PHP program</h1>
<p>Hello World!</p>
<div id="popUp" title="First alert message"></div>
<div id="popUp2" title="Second alert message">Time is over</div>
</body>
</html>
When the pop-up is displayed the Ok button is missing. It's displaying only 'O'.Can you help me in this regard please? I've also attached the screen shot of the popup. Please look at it to get better idea of my issue.
jQuery UI documentation describes different approach for defining buttons.
An example from official docs:
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
http://jqueryui.com/dialog/#modal-confirmation
So, in your case it should look like that:
$("#popUp").dialog({
dialogClass: "no-close",
buttons: {
"OK": function () {
$(this).dialog("close");
clearInterval(timer);
}
}
});
$("#popUp2").dialog({
dialogClass: "no-close",
buttons: {
"OK": function () {
$(this).dialog("close");
}
}
});
I have tried your code on JS fiddle and called your mouseleave function with the custom alert you provided over there and its working fine i.e when i leave the output window it is showing me the dialog box with "OK" button.
Please find this link and write your second fx too, may be we can find something over there.
Please find the jsFiddle below.
http://jsfiddle.net/LtQnT/352/
$(document).mouseleave(function () {
//$( "#popUp" ).dialog( "open" );
customAlert('Hi');
});
This code works in IE8, Crome and Safari, but not in firefox:
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script type="text/jscript">
alert("wazzup");
$(document).ready(function () {
$(".MathLink").hover(function () {
$(this).css("color", "#d7d7d7");
}, function () {
$(this).css("color", "#FFFFFF");
});
$("#betyg_textblock").click(function () {
window.open("http://hogrebetyg.se/");
})
$("#roids_textblock").click(function () {
window.open("http://www.kongregate.com/games/irradiance_se/roids?acomplete=roids");
})
$(".servicesDiv").mouseenter(function (event) {
if ($(this).css("height") == "45px") {
$(".servicesDiv").animate({
height: "45px"
}, 300);
$(this).animate({
height: "100px"
}, 300, function () {
$(".servicesDiv").clearQueue();
});
}
});
$(".news").click(function (event) {
if ($(this).css("height") == "53px") {
$(this).animate({
height: "100%"
}, 400, function () {
$(".news").clearQueue();
});
}
else {
$(this).animate({
height: "53px"
}, 400, function () {
$(".news").clearQueue();
});
}
});
});
</script>
I have no idea why. Please help.
See the following:
text/javascript
Opera 7.54+
IE 5+
Firefox 1.0.7+
Safari 2.0.3+
iCab 3 Beta 394
Camino 2006021400
text/jscript
Opera 7.54+
IE 5+
Safari 2.0.3+
Change it to text/javascript
Ref: http://sachabarber.net/?p=824 AND http://krijnhoetmer.nl/stuff/javascript/mime-types/
e.g.
<script type="text/jscript"> /*Code*/ </script>
To
<script type="text/javascript"> /*Code*/ </script>