I have an HTML5 page, and it looks like this:
<html>
<head></head>
<body>
<canvas id="c1" width="500" height="500" />
</body>
</html>
I used Bootstrap 3 and Fabric.js as a canvas library. When I run it on mobile device, I have got an issue that when I touch the object on canvas and move it, the page is moved too. Seems the touch event is also handled by mobile device browser.
What I expect is that to stop the default event handle for mobile device browser, so when I touch the object in canvas and move it, the web page will not move as well. How can I make this with Fabric.js?
I have changed the way while I making the html:
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">
And then, to prevent browser default zoom bouncing, we can bind "touchmove" in document and disable it. That's from jQuery mobile, but vmousemove = touchmove for mobile device somehow.
$(document).on("vmousemove", "body", function(e) {
e.stopPropagation();
e.preventDefault();
return false;
});
This is not about Fabric.js anyway, so I don't have to change Fabric.js or else.
Related
I am having trouble with videojs: when attaching an eventlistener to the "loadedmetadata" event, the callback function is never executed.
The best explanation I found seems to be that some events may fire before Video.js binds the event listeners: Video.js - loadeddata event never fires.
Unfortunately, the solution proposed in this post does not seem to work for me.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
function init() {
var video = document.getElementById('myVideo');
video.addEventListener("loadedmetadata", function () {
alert("test");
});
}
window.addEventListener("load", init);
</script>
</head>
<body>
<video id='myVideo' class="video-js vjs-default-skin" controls data-setup='{}'>
<source id='mp4' src="http://goo.gl/fAHXgj" type='video/mp4'>
<source id='webm' src="http://goo.gl/03LOHW" type='video/webm'>
</video>
</body>
</html>
When I launch it from Visual Studio (2013), the code above produces an alert pop up only in IE(11); it does not work with Firefox nor Chrome.
When I publish it on my website it never works.
What am I missing? Thank you for reading!
As misterben said, use the .on method. But put it in the ready callback or it will not work:
var player = videojs('myVideo');
player.ready(function(){
this.on('loadedmetadata', function(){ alert('lmd'); })
});
Source: just figured this out myself.
I know misterben has mentioned using the ready callback but you may not have known that you need to use it.
As you're using video.js you need to use it's API, e.g.
videojs('myVideo').on('event',function);
Even better, remove the data-setup attribute and create the player by calling the if to videojs() along with a callback function to be executed as soon as the player is ready:
videojs('myVideo', {}, function(){
this.on('loadedmetadata', function(){
alert('lmd');
});
});
My home page does not have any videos, but other pages have video. What do you think of this code.
<script>
var ie=false;
<!--[if ie]>ie=true</p>-->
</script>
<body>
<script>
if (ie){
document.write("<a href='My Flash Page'>IE7,8,9 not IE10<a>")
} else {
document.write("<a href='My HTML5 Page'>all browsers + IE10, but not IE7,8,9<a>")
}
</script>
</body>
My home page does not have video, but the link will serve my other page in HTML5 or flash.
If broswer is IE7,8,9 then link goes to a web page with a flash player.(IE10 ignores code).
All other browers to include IE10 go to a web page with raw HTML5 video (full screen support)
I think it is a better way to have the script inside of the conditional IE comment than having the condition inside of the script.
<script type="text/javascript">
var ie=false;
</script>
<!--[IF IE]>
<script type="text/javascript">
ie=true;
</script>
<![endif]-->
We are having trouble firing events on Android 2.x devices. From our testing, Android 4.x and iOS 5/6 work correctly. But on Android 2.x devices, we are sometimes getting the "end" event and sometimes we are getting the "start" event.
It says it has cross browser compatibility but anyone run into these issues?
Here are the relevant parts of the code
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://vjs.zencdn.net/c/video-js.css">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
</head>
<body>
<div id="videoplayer" style="margin:0 auto; text-align:center;">
<video id="video" class="video-js vjs-default-skin" controls autoplay preload="auto" width="300" height="300">
</video>
</div>
</body>
</html>
<script>
$(document).ready(function() {
_V_("video").ready(function() {
var thePlayer = this;
var startVideo = function() {
// do stuff
};
var endVideo = function() {
// do stuff
};
thePlayer.addEvent("play", startVideo);
thePlayer.addEvent("ended", endVideo);
});
});
</script>
I figured out the problem. I was able to reproduce it on a Android 2.2 and 2.3 emulator. No events were firing on video playback because there was an error loading the video.
Issues (For Android 2.x devices):
Playing a link from an HTTPS url was no working. The link we were using was an Amazon Cloudwatch URL which linked to an Amazon S3 bucket. When I changed the url to an HTTP vs HTTPS URL it worked.
I had to remove the autoplay attribute on the video element. Not sure why, but the video player in Android 2.x didn't like this.
Once I made these 2 fixes I was able to stream video on Android 2.x devices (as well as Android 4.x, iPhone and iPod)
I read a lot about how to add stuff dynamically in jquery mobile, but I couldn't figure out how to add links.
Currently my solution looks like this:
Add a new Page - with id (id="list-1")
Creating a Link for it (href="#list-1")
This solution works perfectly in static pages, but I want to do it dynamically. I have tried a lot with page() and stuff like that but nothing helped me.
My questions are:
How do I add dynamic links & pages?
Did I choose the right way to use ids & anchors (#list-1) as links or is there another solution for jquery mobile?
Let me know if you need more information
To add dynamic links, I have found the easiest way is to just have an event listener waiting for a click on those links. This event listener then saves any parameters you want to pass into the next page you are visiting. You pass the parameters from the list element to the event listener by just specifying parameters within each "li" element.
(create the HTML for a list dynamically & store it into list-1-html)
$("div#my-page div[data-role=content]").html(list-1-html);
$("div.list-1 ul").listview();
$("div.list-1 ul").listview('refresh');
Then your event listener would look something like:
$('#my-page').delegate('li', 'click', function() {
passedParameter = $(this).get(0).getAttribute('passed-parameter');
});
When jQuery Mobile loads your next page, you'll probably want to load this page dynamically and you'll have this passedParameter variable available to you. To load the page dynamically, just add a listener that waits for JQM to try to load the page:
$('[data-role=page]').live('pageshow',function(e, ui){
page_name = e.target.id;
if (page_name == 'my-page-2'){
(do something with passedParameter)
}
});
This is the workflow I use with jQuery Mobile and it has been working just fine. I'm guessing in future releases, though, that they'll build in some kind of support for passing dynamic parameters to pages.
Any new enhancement to the DOM should be done before the page initializes. But by default JQM automatically initializes the page once the page is load in browser.
Hence first you need to set autoInitializePage property to false and then call initializePage() method after the new page and links are add to the document. Hope this helps.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.autoInitializePage = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).ready(function() {
//add a link.
$("#page1 div[data-role='content']").append('Next Page');
//add a page.
$('body').append(' <div data-role="page" id="page2" data-title="next page"><header data-role="header" class="header"> <h5>Page 2</h5></header><div data-role="content"><h3>Good Morning...</h3>Back</div><footer data-role="footer" data-position="fixed"><h5>© All rights reserved</h5></footer></div>');
});
window.onload = function() {
$.mobile.initializePage();
};
</script>
</head>
<body>
<div data-role="page" id="page1">
<header data-role="header" class="header">
<h5>jQuery Mobile</h5>
</header>
<div data-role="content">
<form method="get" action="" data-transition="slideup">
<label for="email">Email:</label>
<input type="email" name="email" id="email" value=""/>
</form>
</div>
<footer data-role="footer" data-position="fixed"><h5>© All rights reserved</h5></footer>
</div>
</body>
</html>
I have a small project I am doing, and am using Dojo for it. At the moment I can't get everything to load properly. I am trying to use the Tundra theme.
Essentially, the issue is that the TabContainer is missing tabs, has serif fonts instead of sans-serif, and shows all ContentPanes inside it instead of hiding ones in non-active tabs. The serif issue also applies to all other Dijit elements I try to create, however Dijit form elements seem to work a bit better (apart from font being incorrect, it has correct styling, and validation and other fancy stuff works fine).
The same issue appears when using the other Dijit themes, however the TabContainer border colour changes with each different theme which leads me to believe the Dijit theme may be loading correctly. Dojo seems to be correctly creating the Dijit elements though, looking at the Firebug output further below.
Complete copies of Dojo 1.3.2 dojo, dijit and dojox directories exist in js/dojo. All linked stylesheets and scripts are initially loading and the paths to them are correct (I've tested to confirm that with alert boxes in js and body colour changing in css).
index.html
<!DOCTYPE HTML>
<html>
<head>
<link href="js/dojo/dijit/themes/tundra/tundra.css" rel="stylesheet">
<script src="js/dojo/dojo/dojo.js"></script>
<script src="js/script.js"></script>
</head>
<body class="tundra">
<div id="xmldiv">
</div>
<script language="javascript">xmlEnableDiv('xmldiv');</script>
</body>
</html>
js/script.js
function xmlEnableDiv(div) {
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
var tc = new dijit.layout.TabContainer({
}, div);
var cp1 = new dijit.layout.ContentPane({
id: "xmleditor",
title: "Editor",
content: "This is where the editor will actually go"
});
tc.addChild(cp1);
var cp2 = new dijit.layout.ContentPane({
id: "xmltext",
title: "Source",
content: "This is where the source will actually go"
});
tc.addChild(cp2);
}
Checking Firebug, I see the following (which to my eyes looks like it should):
<body class="tundra">
<div id="xmldiv" class="dijitTabContainer dijitContainer dijitTabContainerTop dijitLayoutContainer" widgetid="xmldiv">
<div id="xmldiv_tablist" class="dijitTabContainerTop-tabs" dojoattachevent="onkeypress:onkeypress" wairole="tablist" role="tablist" widgetid="xmldiv_tablist"/>
<div class="dijitTabSpacer dijitTabContainerTop-spacer" dojoattachpoint="tablistSpacer"/>
<div class="dijitTabPaneWrapper dijitTabContainerTop-container" dojoattachpoint="containerNode" role="tabpanel">
<div id="xmleditor" class="dijitContentPane" title="" widgetid="xmleditor" role="group">This is where the editor will actually go</div>
<div id="xmltext" class="dijitContentPane" title="" widgetid="xmltext" role="group">This is where the source will actually go</div>
</div>
</div>
<script language="javascript">
xmlEnableDiv('xmldiv');
</script>
</body>
The actual output (in Firefox and Chrome) is a box (the TabContainer) with a themed border. There are no tabs on the TabContainer, and both of the ContentPanes are visible at the same time (both with serif fonts).
The things I've tried without avail:
Doing a dojo.parser.parse() at the end of my init function
Trying other Dijits. They act similarly in that they seem to partially load. Every Dijit has serif fonts instead of sans-serif, but form elements and dialog are both showing correctly apart from the incorrect font
Thanks in advance, this is driving me nuts.
The solution was to add startup after creating the TabContainer.
Thanks to this post: http://www.dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/tabcontainer-labels-not-rendering-when-created-programatically
tabContainer = new dijit.layout.TabContainer({
}, div);
tabContainer.startup();
Another possibility is that adding TabContainer to a hidden element can have missing tabs, as described above, even after calling startup. The solution to this is to ensure that the TabContainer receives the resize event. You can try this yourself by finding the ID of the tab container, and then executing this in the console:
dijit.byId('dijit_layout_TabContainer_0').resize();
If your tabs appear, then you have a resize problem. Ensure that the parent container handles/passes the resize event to the tab container child. For example:
resize: function() {
this.tabContainer.resize();
}