I want to provide my own preview image for page in Philips TV (NETTV models) browser.
It is displayed near page address in history.
How can I do it?
(image from avforum, obtained from google search)
Philips TV use Opera 11.6 as browser.
userAgent string is:
Opera/9.80 (Linux mips; U; HbbTV/1.1.1 (; Philips; ; ; ; ) CE-HTML/1.0 NETTV/4.0.2; en) Presto/2.10.250 Version/11.60
I don't know exactly how the Philips TV browser works, but the most logical thing to try out first would be the og:image tag and see if the TV picks it up.
<meta property="og:image" content="http://example.com/image.png"/>
If not, then the TV is probably using some screen capture library. You could try this workaround to get the desired behaviour:
First, find out your TV's user agent. For example, browse to http://whatsmyuseragent.com/ from your TV.
Then on your page, create a small script that checks the user agent, and if it's the TV, show your preview picture as an overlay for a few seconds.
Hopefully the TV will take a screenshot of the initial render of the page, and then your TV splash will show.
function hideSplash() {
document.getElementById("tv-splash").style.display = "none";
}
// Remove '|Mozilla' when development is ready
if (/Philips|Mozilla/.test(navigator.userAgent)) {
setTimeout(hideSplash, 2000);
} else {
hideSplash();
}
#tv-splash {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f00 url(http://i.imgur.com/IonCAf7.jpg) center center no-repeat;
background-size: 50%;
z-index: 1;
}
<div id="tv-splash"></div>
<h1>My website</h1>
Related
I have a short, ~2-second video that plays on a loop in the background of a website I'm making, which, when it appears through transparent portions of divs, gives the effect of a metallic shimmer. It looks great. The problem is, when an iOS device is in low power mode, the video not only doesn't play (which is acceptable, I get it), it shows a big honkin' play button that shows through those same transparent portions of divs. I need to get rid of that, but every solution I've found seems to not work in iOS 14.
Here's the video tag:
<video id="videoElement" src="copper.mp4" autoplay loop playsinline muted webkit-playsinline></video>
…and the CSS:
video#videoElement::-webkit-media-controls,
video#videoElement::-webkit-media-controls-start-playback-button,
video#videoElement::-webkit-media-controls-play-button,
video#videoElement::-webkit-media-controls-panel,
video#videoElement::-webkit-media-controls-container,
video#videoElement::-webkit-media-controls-overlay-play-button,
video#videoElement::-webkit-media-controls-enclosure {
display: none !important;
-webkit-appearance: none;
opacity: 0 !important;
}
You can do this with JQuery. Include it with this:
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
The following code will play the video as soon as the user interacts with their device in any way. This also acts as a workaround for regular safari autoplay issues.
<script type="text/javascript">
$('body').on('click touchstart', function () {
const videoElement = document.getElementById('videoElement');
if (!videoElement.playing) {
videoElement.play();
}
});
</script>
You can't trigger video playback without the user interacting with device (this is probably a good thing).
If you'd like to instead completely disable playback when low power mode is enabled (and some of us will thank you greatly), you can do the following:
<script type="text/javascript">
var promise = $('#videoElement').play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay was successful
}).catch(error => {
$('#videoElement').remove()
});
}
</script>
I'll dig some more to see if there's a way to do this with pure CSS, but I doubt it'll be anywhere near as "stable".
What to do so that screen reader reads document loading while loading the document and document loaded when document component gets loaded in react?
Adding aria-busy="true" and aria-hidden="true" attributes to the component while loading will hide the content from screen readers temporarily.
For the announcement, somewhere else, create a <div role="status"> and add/remove child elements to it that will be announced when loading/loaded.
End result:
<main>
<Document
aria-busy={isLoading ? 'true' : null}
aria-hidden={isLoading ? 'true' : null}>
</Document>
<div role="status" class="visually-hidden">
{isLoading ? (
<span key="loading">
Document loading
</span>
) : (
<span key="loaded">
Document loaded
</span>
)}
</div>
</main>
The key props are there to make sure React doesn't reuse the same <span> element.
The .visually-hidden class makes it invisible except to screen readers:
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
You will need to see how to do the following in React, but the principles for AJAX page loading carry across to all SPAs.
The only difference between this and what you asked for is you don't announce "document loaded" instead you focus the <h1> on the page as that is more useful to screen reader users.
Before Loading
You need to signal to a user that a page is loading if you are using a SPA pattern (and therefore interrupting normal navigation).
e.g. I click your link you need to let me know that an action is being performed (loading.....) as you intercept the normal browser behaviour with e.preventDefault() or equivalent.
The simplest way is to use aria-live=assertive on a region that explains the page is loading.
You may want to visually hide this aria-live region (so that only screen readers can access it) so I have included a class to do this in the snippet below, however for the demo I have left the region visible. Here is a link to my original discussion on why to use this class to hide content.
After Loading
Additionally when the new page loads you need to manage focus.
The best way to do this is to add a level 1 heading (<h1>) to each page that has tabindex="-1".
Once the page loads the last action you perform in your JavaScript navigation function is to place the focus onto this heading and then clear the aria-live region
This has two benefits:
it lets the user know where they are now
it also lets them know when the page load is complete (as AJAX navigation doesn't announce when the page is loaded in most screen readers).
By using tabindex="-1" it means that the heading won't be focusable by anything other than your JavaScript so won't interfere with the normal document flow.
Example
var link = document.querySelector('a');
var liveRegion = document.querySelector('p');
var originalPage = document.querySelector('.currentPage');
var newPage = document.querySelector('.newPage');
link.addEventListener('click', function(e){
e.preventDefault();
liveRegion.innerHTML = "loading";
simulateLoading();
});
//this function simulates loading a new page
function simulateLoading(){
window.setTimeout(function(){
//this bit just hides the old page and shows the new page to simulate a page load
originalPage.style.display = "none";
newPage.style.display = "block";
//////////////ACTUAL CODE/////////////////
// grab the heading on the new page (after the new page has loaded fully)
var mainHeading = document.querySelector('.newPage h1');
//focus the main heading
mainHeading.focus();
// reset the aria-live region ready for further navigation
liveRegion.innerHTML = "";
}, 1000);
}
.newPage{
display:none;
}
<div class="currentPage">
<h1>Current Page</h1>
Click me to navigate
<p class="live-region visually-hidden" aria-live="assertive"></p>
</div>
<div class="newPage">
<h1 tabindex="-1">New Page Heading Focused Once Loaded</h1>
<button>Just a button for something to focus so you can see you can't refocus the H1 using the Tab key (or shift + Tab)</button>
<p>Below is the visually hidden class I mentioned, this can be used to hide the aria-live region visually if you wish, I have left it visible for demonstration purposes.</p>
<pre>
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
</pre>
</div>
For a better UX, I'm showing the empty profile image as a background until the real profile image is loaded, & I'm using Multiple Backgrounds feature to achieve this behavior, like in the following screenshot:
The html look something like:
<ul>
<li><span id='span-id' class="img-circle profile-image"><span></li>
<li ...
</ul>
The CSS look something like:
.img-circle {
border-radius: 150px;
}
.profile-image {
height: 100%;
display: block;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
The js look something like:
var url = 'profile-image-url-here';// depends on user's profile of course
var anonymousUrl = 'anonymous-profile-image-here';
var backgroundImage = "url(" + url + ") , url(" + anonymousUrl + ")";
$('#span-id').css('background-image', backgroundImage);
The Issue is:
While the previous code works fine in almost all scenarios/browsers, some android devices (their Chrome browser & even webviews) repeat the images in a very weird way like the following screenshot:
So, Why is this happening?!! .. & how to prevent it?
(I'm sure that the issue is not in the data, because each image has a link to the user's profile & links are already pointing to different profiles)
I have two buttons are set position equal to "absolute", when the LastPass addon's bar dipslays, they displays wrong because LastPass had inserted an iframe to my webpage:
LastPass iFrame
<iframe id="lpiframe74158812" src="chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/overlay.html?&add=1" scrolling="no"
style="height: 27px; width: 1263px; border: 0px;"></iframe>
The CSS:
.button-bar {
width: 175px;
float: left;
top: 113px;
text-align: right;
right: 20px;
position: absolute;
}
Image: http://i.stack.imgur.com/Rq5Z5.png
How can I avoid this case? Thanks so much!
I had this same issue and I found that last pass editing the DOM of my webpage! LastPass had added a div right after the body tag of my page.
<div id="lptopspacer48468746" style="height: 27px;"></div>
It looks like the div id is random, so I can't strip it out. I think this problem is with lastPass. I don't think there is a way to truly fix it.
Also annoyed by this <div id="lptopspacer[0-9]+" style="height:40px"></div> inserted in any page monitored by firefox lastPass plugin (after the site has shown a login form), I've come up with a jQuery solution.
Only adding some CSS rules don't seems to works as the div is obviously added after page load by a script. Changing style or trying to remove the div just after page load doesn't works either.
So this snippet run a delayed function to hide the div when found, or stop running after 5 attempts if no lastPass plugin is affecting the document.
<script>
var log = function(msg) {
if (console && console.log){
console.log(msg)
}
};
$(document).ready(function(){
var maxTry = 5, lptopHideTimeout;
var clearLptop = function(delay) {
var $lptop = $("div[id^='lptopspacer']");
if (lptopHideTimeout) {
window.clearTimeout(lptopHideTimeout);
}
if ($lptop.length && $lptop.is(':visible')) {
log("** Hiding lastPass lptopspacer...");
$lptop.css( "display","none" );
}
else {
maxTry -= 1;
if (maxTry > 0) {
log("## No lastPass lptopspacer div found yet. Retrying in " + (delay/1000) + ' second...');
lptopHideTimeout = window.setTimeout(function(){
clearLptop(delay);
},delay);
}
else {
log("## Giving up after too much attempts.");
}
}
};
clearLptop(500);
});
</script>
Better late than never if others also are having this problem. I had it to, that Lp spacer, in my case it was generated because I had Mcafee safekey installed on the computer. It showed up with a notice on every pageload on my website and caused an lp spacer that broke my site with a white bar on top.
Uninstalling Mcafee safekey solved it for me.
I'm a beginner at all this however i will do my best to explain.
I used Stack Overflow to figure out how to position an image on top of another one. My reason for this is because i want a large bar at the top of my website with contact details, with a part of it linking to an email address.
I used the following code:
CSS:
.imgA1 {
position:absolute; top: 0px;
left: 0px; z-index: 1; } <br> .imgB1 {
position:absolute; top: 0px; left:
100px; z-index: 3;
}
HTML:
<img class=imgA1 src="images\headings\red_heading.jpg"><br>
<img class=imgB1 src="images\headings\red_heading_email.jpg">
PLEASE NOTE: I've had to put a space between the < and the img class above or else it wont display my code!!
All the above works really well, however i want to add an email link to the second class above, so when someone clicks it an email client opens.
I hope all this makes sense.
Anyway help/advice would be fantastic.
Kind regards,
Steve
What i want to do is add a link to the "imgB1" section above...
Place your <img> tags within <a> (Anchor) tag, and with the href attribute of anchor tag, your code to open an email client of user upon click on image will look something like this.
< img class=imgB1 src="images\headings\red_heading_email.jpg">
Now clicking on the image will launch site visitors default mail client with "to" the mail address "myname#mail.com".
I'm not sure that I understand, but to add a link to the image you would just need to put it inside an anchor tag, and to open an email client you would use an href of mailto:theemail#address.com
<img class=imgA1 src="images\headings\red_heading.jpg">
<a href='mailto:me#me.com'>
<img class=imgB1 src="images\headings\red_heading_email.jpg">
</a>
You may also need to add a border: none to the imgB1 class, as by default images have a border when they are hyperlinked.
i think what you want is:
< img class=imgA1 src="images\headings\red_heading.jpg">
< img src="images\headings\red_heading_email.jpg">
with the same css. this should apply the positioning to the anchor tag, which in turn contains the image you want to overlay.
Andy
it's quite... strange... but you can do that with Javascript, as example in JQuery you can do something like this:
$(document).ready(function() {
$('.imgB1').each(function() {
$(this).prepend('<a href="link_to_point_to">');
});
});
Note that I've not tested it
If the approaches above don't work because of the positioning change on the image (not sure if they will or not), you can set the "onclick" property of the image to a function like this:
<script type="text/javascript">
function sendEmail() {
var domain = "test.com"; // this makes it a bit harder for a spammer to find the e-mail
var user = "test";
var subject = "Some subject Line"; // You can also set the body and some other stuff, look up mailto
var mailto_link = 'mailto:' + user + '#' + domain + '?subject='+subject;
win = window.open(mailto_link,'emailWindow'); // all you see is the mail client window
if (win && win.open &&!win.closed) win.close();
}
</script>
<img class=imgB1 src="images\headings\red_heading_email.jpg" onclick="sendEmail()"/>
< img class=imgA1 src="images\headings\red_heading.jpg">
< img class=imgB1 src="images\headings\red_heading_email.jpg">
You can't have a link through a CSS class because CSS only defines DISPLAY/LAYOUT properties.
You will have to add an html anchor tag to the img.
By default, images that are hyperlinked will have a border around them (usually blue). Make sure to remove it via css or with the IMG attribute border="0"