We use animated GIF buttons on our controls and it was working fine until we got to wider user testing where some users had iPhones (not Androids that all had previously). They were using the AirConsole app to control in case that's relevant. The animated GIFs don't seem to animate there. Obviously we're looking for an answer that works on all AirConsole's supported platforms. (Animated GIFs seemed like a lowest common denominator type answer!)
Any ideas / help? Do we need to do something specific or encode a particular way?
Otherwise (if it isn't supported), I guess we'll have to see if we can detect controller platform (browser info in JS?) and provide an alternative. (I'd guess probably JS swapping image frames. Otherwise entirely back to the drawing board :( ) Please suggest those alternatives if you know them!
We're writing the HTML and JavaScript by hand (not using a generator). Here are what I hope are all the appropriate bits.
.main-button{
position: absolute;
top: 35%;
width: 18%;
height: 30%;
background-size: contain;
background-repeat: no-repeat;
}
#interact-button{
background-image: url("Buttons/AnimatedButton-PickUpPutDown01.gif");
left: 30%;
top:25%;
}
<div class="main-button" id ="interact-button" ontouchstart="App.prototype.selectAction('Interact')"></div>
Here's an example GIF we're using. Let me know if there's anything else that might help and thanks in advance!
I tried showing the GIF on an old iPhone (Running iOS 10.3.3) in the AirConsole App, Chrome and Safari browsers (Using the AirConsole Simulator).
They all seem to show the animated GIF as expected:
Here is the code I used in controller.html:
<html>
<head>
<script src='https://www.airconsole.com/api/airconsole-1.7.0.js'></script>
<script>
let airconsole;
/**
* Sets up the communication to the screen.
*/
function init() {
airconsole = new AirConsole({'orientation': 'portrait'});
}
</script>
<style type='text/css'>
.main-button{
position: absolute;
top: 35%;
width: 18%;
height: 30%;
background-size: contain;
background-repeat: no-repeat;
}
#interact-button{
background-image: url("Images/support/AnimatedButton-PickUpPutDown01.gif");
left: 30%;
top:25%;
}
</style>
</head>
<body onload='init()'>
<div class="main-button" id ="interact-button" ontouchstart="App.prototype.selectAction('Interact')"></div>
</body>
</html>
What version of iOS are you having the issue on? I suggest that you try the basic controller code I show to see if it changes anything.
Related
I'm looking at implementing the solution here:
http://luxiyalu.com/scrolling-on-overlay/
When I test out the demo in firefox (emulating mobile), everything seems to work.
When I try to implement into my site (which uses jquery mobile), the body underneath scrolls.
The way I am approaching it for now is:
<body>
<div class="overlay">
<div class="overlay-content">
put popup/overlay stuff here
</div>
</div>
<div class="background-content">
<div data-role="page">
put normal page stuff here
</div>
</div> <!-- background-content-->
</body>
Is there something that jquery mobile does that is causing the body to scroll? I'm surprised it works at all in the demo (without some type of fixed positioning for the body). But I only know a little CSS so it's hard for me to troubleshoot.
Thanks!
Edit 1:
Wow, i can be so stupid, now i know it's never a good idea to turn your brain off and copy-paste without looking at something.
The author's page had the CSS listed as:
.overlay{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.8);
.overlay-content {
height: 100%;
overflow: scroll;
}
}
The brackets were messed-up and so the browser wasn't interpretting the css properly. Notice the close bracket for .overlay came after .overlay-content.
New Problem:
After fixing this, the overlay showed and scrolled until it hit the bottom of the overlay, then the body underneath picked-up the scrolling. Terence-Hill's answer actually fixed that issue for me for android's built-in browser. it stopped the body scrolling. however, the body scroll issue still seems to be occurring 1) ios safari 2) ios app using webview 3) android app using webview.
any clue why it would work in android default browser but not the other 3?
Try adding:
body:not(.hide-overlay) {
overflow: hidden;
}
if you want smooth scrolling on ios use:
.overlay {
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
}
I've created a new page for our social club and have some problems with it. It's a responsive site with one-page design. On the intro section, there's just a background image with a simple logo.
Now everything looks good on android and most pc browsers, but somehow the iphone browser shows the background image zoomed.
Does somebody know an workaround for that?
You can try it yourself on http://juku-tbg.de/
Chrome Screenshot: -> OK
Iphone Mode on Chrome: -> OK
Screenshot from android device: -> OK
Screenshot on an iphone 5s: -> NOK
Thanks a lot.
background-attachment: fixed is bugged in mobile Safari. For a fix use a seperate container and apply position: fixed to it instead.
#bg {
background-image: url('path/to/img.jpg');
background-attachment: scroll;
background-position: center top;
background-repeat: no-repeat;
display: block;
width: 100%;
min-height: 100%;
z-index: -100;
position: fixed;
top: 0;
left: 0;
}
i am using stellar.js and also am using background-attachment: fixed. However, that scrolling effect which was produced suddenly stopped working in Google Chrome. Here's a link to the
site.
When i try to preview my website in version 45.0.2454.85 m background attachment wont work to any of my background pictures. However it works in firefox, edge and others. When i tried a version below 45 it also worked just fine.
here's how i typically create my background images
CSS
.intro {
background-image: url(/img/banner-bg.jpg);
background-repeat: no-repeat;
height: 100%;
background-attachment: cover;
background-position: center center;
background-size: contain;
}
HTML
<section class="intro" data-stellar-background-ratio="0.5"> </section>
It seems that to make it work for this version i had to take out the overflow-x:hidden property from:
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
Otherwise my images won't stay fixed at this Chrome Version for a reason i don't know.
I'm running bigvideo.js on my webpage, with the set-up provided here (https://stackoverflow.com/a/17581187/1318135).
I'd like the have a background image display when bigvideo.js is incompatible with a user's set-up (scripts disabled, old browser, etc.) but the javascript overrides all attempts to add a background in the html/css.
How can I implement one? Right now it defaults to a black background.
This isn't perfect, but I used css to set a background image:
#video{
width: 100%;
height: auto;
min-width: 100%;
min-height: 100%;
z-index: -1;
background-image: url('/video/img/first.png');
background-repeat:no-repeat;
background-size: 100% 100%;
}
Then just like normal:
$(function() {
var BV = new $.BigVideo({controls:false,
container:$('#video')});
BV.init();
BV.show('/video/video/764116.mp4');
});
To get a png of the first frame you can use VLC (Video -> Take snapshot).
I'm developing a chrome extension, without going too much into it I need to inject some code into webpages and put an overlay over the full page. Thus far I have nearly achieved this butI just cannot seem to get the overlay over certain parts of some websites. These include videos from youtube, the searchbar on top of google search results, random parts of kongregate (the stars and monthly comp info).
Below is the css I'm currently using to achieve this, I have played around and looked for solutions at various places but no solutions seems to work.
.cssX9482Overlay
{
position: fixed;
width: 100%;
Height: 100%;
vertical-align: middle;
background: #000000;
opacity: 0.97;
filter: alpha(opacity=97);
text-align: center;
top: 0;
left: 0;
}
The strange css name is just so it doesn't clash with pages formatting. As you probably guessed this is being used to format a div
Remember this is a Chrome extension, therefore HTML5 and CSS3 solutions are valid.
<style type="text/css">
iframe, div {
position:absolute;
top:20px;
left:20px;
width:200px;
height:25px
}
iframe { z-index:1 }
div {
z-index:2;
background:#000;
border:solid 1px red;
color:#fff;
}
</style>
<applet code="myApp.class" width="700" height="700"></applet>
<iframe></iframe>
<div>EXAMPLE TEXT</div>
TAKEN FROM: http://www.bluestudios.co.uk/blog/?p=6
Also you had height capitalized
You might need a z-index in there; on a Google search results page for me, adding a z-index: 999; covers everything except the top navigation (Web, Images, Videos). This is because Google's CSS looks like:
#gbz, #gbg {
...
z-index: 1000;
}
Elements with a larger z-index are placed on top of others. Even while using this property, I've had problems in the placing content on top of Adobe Flash elements and Java applets.