I'm making a mobile version of my website, and trying to make it feel as native as possible on the iphone. However, any background areas of the page respond to swiping gestures such that you can shift the page partway off the screen. Specifically, if the user touches and swipes left, for example, the content shifts off the edge of the screen and one can see a gray background 'behind' the page. How can this be prevented? I'd like to have the page itself be 320x480 with scroll-swiping disabled (except on list elements that I choose).
I have added the following meta tags to the top of the page:
<meta name="viewport" content="width=320; height=480; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
I've also tried the following as the event handler for the touchstart, touchmove, and touchend events of the body element:
function cancelTouchEvent(e) {
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
if (e.preventDefault) e.preventDefault();
return false;
}
It doesn't stop the swiping behavior, but does prevent clicks on all links on the page...
Any help is much appreciated. Thanks!
I had the same problem, but on the iPad, and couldn't find anyone who had been able to solve the problem in the general case, but I believe I have come up with a solution that works.
The solution is (in Javascript) --
document.addEventListener('touchmove', function(e) {
if (e.preventDefault) { e.preventDefault(); }});
Simple, no? It works by preventing the default behavior on 'touchmove' events, so the swiping of the background doesn't happen. It doesn't affect the simulated click events.
Related
I want to use a preloader animation for my website and want it to fadeout after my site's all content has loaded. I have tried this
way:
<script>
window.onload = function () {
document.querySelector(".loader-container").style.display = 'none';
};
</script>
But sometimes the animation is going infinitely and i can't see any content of my website and sometimes it vanishes before the images had
loaded.I have searched google for various alternatives but none worked.
It will be a great help if anyone could help a beginner like me(it has been 3 months) by providing a code snippet to accomplish this.
I want to create a site with a 360 video thats streamed from my computers 360 cam (ricoh theta s) and uses the possibilites of a-frame. I did not have any luck with embedding youtube livestreaming within a-frame though. I would have a webserver and the stream would not be really public so maybe there is some solution that involves selfhosting? Does anybody have any experience with achieving sth like this? i cant find anything related so far and this plays a crucial role in my robotproject...
EDIT 1:
I might specify even more after some research:
it would be perfect if a-videosphere and a-video would support sth like hls or mpeg-dash - streams. since that would need some kind of player for chrome and android stuff i think the easiest route would be to support a motionjpg-support because they are very easy to create. flashstreams can be good too but i dont think there is a future for that.
is there anything like that in the planning by someone because i am quite sure that nothing like that exists yet... i took 2-3 days of researching and find nothing about that topic... just a getUserMedia for webcam example showed up but its not good for my purpose.
another approach i could live with would be a routine that just autoreloads pictures in a-sky (if possible without flickering). i tried to integrate javascripts that are supposed to do that within normal divs and so but nothing worked...
or did somewhere someone get a stream of any kind running in a-videosphere and if so how?
EDIT 2:
i got it working... somehow... not really but looks promising...
the stream is provided by "yawcam" which uploads a new picture every second to my ftp. if i now click on the red sphere the script starts via addEventListener 'click' and the content of a-sky gets updated... is there any way to make a loop out of that script so one doesnt have to click anymore and it just update itself every second?
<head>
<meta charset="utf-8">
<title>joeinterface</title>
<meta name="description" content="360 Video — A-Frame">
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
</head>
<body>
<script>
AFRAME.registerComponent('set-sky', {
schema: {default:''},
init() {
const sky = document.querySelector('a-sky');
this.el.addEventListener('click', () => {
sky.setAttribute( 'src', this.data + "?" + Math.random());
});
}
});
</script>
<a-scene>
<a-camera position="0 0 0">
<a-cursor color="#4CC3D9" fuse="true" timeout="10"></a-cursor>
</a-camera>
<a-sphere color="#F44336" radius="8" position="-8 2 -8" set-sky="image1.jpg"></a-sphere>
<a-sky></a-sky>
</a-scene>
</body>
so here is the solution for the proposed "kind-of" solution...
the picture "out" is updated via "yawcam" on my server every second and updated in the a-sky tag - even without flickering... so no sound but at least kind of a live-video-feed in a-sky.
<head>
<meta charset="utf-8">
<title>joeinterface</title>
<meta name="description" content="360 Video � A-Frame">
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
</head>
<body>
<script>
AFRAME.registerComponent('set-sky', {
schema: {default:''},
init: function() {
this.timeout = setInterval(this.updateSky.bind(this), 100);
this.sky = this.el;
},
remove: function() {
clearInterval(this.timeout);
this.el.removeObject3D(this.object3D);
},
updateSky: function() {
this.sky.setAttribute( 'src', this.data + "?" + Math.random());
}
});
</script>
<a-scene>
<a-camera position="0 0 0">
<a-cursor color="#4CC3D9 " fuse="true" timeout="10"></a-cursor>
</a-camera>
<a-sphere color="#F44336 " radius="2" position="-8 2 -8"></a-sphere>
<a-sky set-sky="out"></a-sky>
</a-scene>
</body>
I am trying to offer a playlist of videos and only play a video once its link was clicked. Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>WW Video Player</title>
<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
</head>
<body>
<video id="video_player" class="video-js vjs-default/skin" width="800" height="600" data-setup='{ "controls": true }'></video>
<script type="text/javascript">
videojs("video_player", {}, function() {});
function SelectVideo(path)
{
var mplayer = videojs("video_player", { "controls": true, "autoplay": false });
mplayer.src({ type:"video/mp4", src: path});
mplayer.play();
mplayer.requestFullScreen();
}
</script>
Play Video
</body>
</html>
In the <video> tag, I have tried adding plain controls and removing data-setup, but I can't get the controls to show up.
Furthermore, mplayer.requestFullScreen(); isn't working, either - here's Firebug's error message:
TypeError: mplayer.requestFullScreen is not a function
I'm running Firefox 22.0 on Windows 7 64bit.
Any ideas? Thanks!
Video.js is good and bad at the same time. I appreciate the work that's gone into it, but I've spent days getting it to work correctly. I wish I'd found your answer earlier, codoplayer looks good.
Videojs goes wrong whenever a javascript error occurs, and subsequently fails to set the correct classes on the control bar etc.
The bad javascript could be in your own code, and there is one in video.js that affects Firefox.
First, make sure your own scripts aren't failing...
The function that must be changed in video.js is: vjs.Player.prototype.techGet()
When an exception occurs, it handles it, then re-throws at the end. Replace the line 'throw e;' with 'return null;'
Why? There are methods within video.js that do not seem to realise that techGet could throw.. here is an example:
vjs.Player.prototype.currentSrc = function(){
return this.techGet('currentSrc') || this.cache_.src || '';
};
It throws an exception on techGet whenever the tech is flash, which is common in Firefox, IE8 etc. It will never reach this.cache_.src || ''. It looks like that wasn't the intention, so it's probably a bug.
If interested in IE8, you will have to do something with all the calls to innerHTML, they may fail and will need replacing with a method that works on the DOM instead.
I've got a iframe with pdf file:
<iframe src="pdf/sample.pdf"></iframe>
How to set that the iframe is the same height as the pdf file, without scrollbars?
If you want to display the PDF without scrollbars, you can do this by passing parameters in the URL. Adobe has documented this here:
http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf
Try this:
<iframe src="pdf/sample.pdf#view=fit"></iframe>
You are not exactly setting the height of the iframe to fit the PDF, but it is probably the most robust solution since it is browser-independent and doesn't require JavaScript.
Here is an update after Daniel's comment.
I created a test HTML 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>
<title>Untitled Page</title>
</head>
<body>
<iframe src="http://partners.adobe.com/public/developer/en/pdf/PDFReference.pdf#view=fit&toolbar=0&navpanes=0"
width="300px" height="400px"></iframe>
</body>
</html>
This is how it looks in Chrome:
This is as expected.
Note that I also turned off the toolbar and the navpane so there is room for the page.
You can do it simply using the method I've explained on my facebook post https://www.facebook.com/antimatterstudios/posts/10151007211674364
Do you have an IFrame, which you want to automatically set the height of because you're hosting a page from another website in yours.
Well, unfortunately the IFrame cannot take the height of the content you are loading and unless you put a height, it'll show either the default height, or no height at all. This is annoying.
I have the solution for you, it'll only work on recent, standard supporting browsers, but also works in IE8 too, so for about 99% of you it's perfect.
The only problem is you need to insert a javascript inside the iframe, which is easy if the content you are loading belongs to you, you can just open the content you're loading and put the javascript in the content.
In your website, you need a piece of javascript which can "receive a message from the IFrame", like this
jQuery(document).ready(function(){
jQuery(window).bind("message",function(e){
data = e.data || e.originalEvent.data;
jQuery("iframe.newsletter_view").height(data.height);
});
});
in your IFrame content, add this at the very bottom, probably it's ok to just do something like "$template.$javascript" using PHP or something, even if the javascript is not inside the tag
<script type="text/javascript" src="jquery-1.7.1-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
parent.postMessage({
height:$(document.body).height()+50+"px"
},"*");
});
</script>
Obviously I am using jquery, you dont have to, it's just easier and probably you are using it, so save yourself the hassle.
if you do that, when the iframe loads, it'll send a signal back to the parent window, which will resize the iframe based on the length of the content :)
I'm sure you can figure out how to alter the little things, but thats the method I'm using
My solution
$(document).ready(function(){
var width = $(window).width();
var height = $(window).height();
$('#objFile').attr('style', 'width: ' + width + 'px; height: ' + height + 'px;');
});
<object data="myFile.pdf" type="application/pdf" id="objFile"></object>
Is there a script to make the browser refresh when a page is re-sized? More specifically, one that emulates the browser refresh button or F5? I've found two, but they don't quite do what I'm looking for;
<script type="text/javascript">
var currheight = document.documentElement.clientHeight;
window.onresize = function(){
if(currheight != document.documentElement.clientHeight) {
location.replace(location.href);
}
}
</script>
and
<body onResize="window.location=window.location;">
The problem with these two is they appear to completely reset the page where as using the browsers refresh function leaves some user made changes intact (like being at a specific hash for instance) which is what I need.
So is there a way to refresh the window on re-size with a script similar to if the browser refresh was clicked? I don't understand why there is even a difference but there is.
Thanks.
Yes, you probably want to take a look at some JavaScript events. There is an OnResize event.
Here's a link to get you started with events:
http://www.devarticles.com/c/a/JavaScript/OnReset-OnResize-and-Other-JavaScript-Events/
As far as reloading the page, you can do that too:
http://www.mediacollege.com/internet/javascript/page/reload.html
As far as keeping the user values, you could persist them in a session.
Here is the perfect solution :
I have included timeout of 1 sec i.e. browser will refresh after 1 sec of window resize
$(window).resize(function() {
setTimeout( function(){
window.location.href = window.location.href;
},1000);
});
Without timeout
$(window).resize(function() {
window.location.href = window.location.href;
});
NOTE : You may also use window.location.reload() instead of window.location.href = window.location.href
window.location.reload() reloads the current page with POST data, whilewindow.location.href=window.location.href does not include the POST data
-- hope it helps
Try this:
<![if !IE]> <body onresize="document.location=window.location;"> <![endif]>
<!--[if IE]> <body onresize="window.location.reload();"> <![endif]-->