I must place a <video> element in a web page. When accessed from the ipad, the page displays a black placeholder until the visitor hits the play button.
Is it possible to make it white, like one would normally do "background-color: white" in css?
edit: A 'hack' to work this around: Cover the video with an opaque .shield layer and have a .play button to start the vid.
$('#intro_video .play').selectable({
start: function(){
$('#intro_video .play').fadeOut();
$('#vid').get(0).play();
setTimeout(function(){
// See HACK03
$('#intro_video .shield').fadeOut('slow');
}, 200);
}
});
Can be nice to wrap inside a browser check to only affect mobile Safari:
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { ... }
Thanks,
You could put an element over the top that has an image of a play button, and script it to disappear on touch. Not so elegant maybe, but it works.
Related
Link to website:
http://www.ideagang.co/home.php
Is it possible to set the background to black when click from 1 page to another?
Right now the website load perfectly with the black background, it's just that when I navigate from one page to another the page flickr for a second.....
Is there anyway to resolve this by setting the background to black when loading page internally?
Not using only CSS. The browser's default color for the background is white, so the flicker you see is the default coming through for a split second before it has a chance to read the CSS rule to make it black.
The only way I can think of to get around this would be to load the first page, and then switch from page to page via javascript, loading them in to the exiting page. No reloads means no flicker. In my opinion, that is a ton of overhead for very little value, so I would suggest just living with it.
I very much doubt this would be possible with CSS.
Have you tried using
<body background="#000">
It is long deprecated but may help. I think you will still get a white flash but it may be for less time.
You could also try putting a small block of CSS as the first thing in the header after your title.
the html5 method of doing this via CSS is now:
<body style="background-color:#000">
also tried putting this CSS styling as the first thing in the <head> :
<style type="text/css">
body{background-color:#000}
</style>
...but on my application it still resulted in a momentary white flash
While this is a pretty old question, hopefully this can help someone else who stumbles along (like me):
Using some javascript seems to have worked for me (only tested on Firefox 84.0 - Ubuntu):
index.html:
<script src='script.js'></script>
script.js:
onload = function() {
document.body.style.backgroundColor = 'black';
}
I believe the most efficient way to accomplish this is to place the background color in the html tag itself in the main document file. Such that
<html lang="en" style="background-color: #111">
With this you can set any background color you want and it should work.
Please review the link: http://www.useboom.com/
The video in home page works fine in other browsers but in chrome the Play and Volume buttons have a white square on top.
The buttons were fine and visible before, we've been deleting unused files and suddenly started to appear this way.
I don't know what is the problem!
I had the same problem with Chrome and worked out it is caused by styling "input" without specifying which one exactly i.e.
input {
background-color:white;
}
Using:
#my_div input {
background-color:white;
}
solves the problem. Hope this helps.
I'm working on a site at the moment, and an image that is used as the background for a submit button (current the button is normal HTML button, but will be changed to an asp:Button when developed).
Another developer pointed out that this button seems to have a white background. Thinking the image wasn't saved correctly, I opened it up in Fireworks and the PNG image had a transparent background. I exporting the image again, saving it as a PNG-32 image, and overwrit the original image with the new one. The image still appears the same.
Bizarrely, this occurs in Chrome, Firefox and IE 7/8, and the other images on the page don't have white backgrounds either.
Also, I have checked the CSS and there are no styles that contain a white background colour element.
Any one got any ideas?
Many thanks!
Due to the site being built in ASP.NET, changing the button to be an linked image and using JavaScript on it then isn't an option.
However, on the developed ASP.NET site, this issue is also occurring. But I've managed to fix it in ASP.NET by doing the following:
When calling the button, I've typed this out to begin with:
<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" />
Adding the parameter "BackColor="Transparent" removes the white background from the button. So the tag now reads as:
<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" BackColor="Transparent" />
This removes the white background in ASP.NET. At a total loss to explain why the button has a white background on it. Although I have read that using a GIF could solve the problem, but I haven't had time to see if this is true or not.
EDIT (24/01/2010)
I found out how to fix this issue in the HTML document, by pure accident!
What you need to do, in the CSS you have to call the following:
background-color: transparent;
border: none;
This removes the grey/white background on the back of the button, and it also removes the border of the button.
try adding
border: none;
to your button style.
I think if you have already tried setting:
submit{background:none;}
and such. Then you should try changing the submit to be just a link with an image instead and calling it via a javascript, I'm thinking it's the button type that does it.
Edit (20th Jan):
I expected that some ASP would solve it (I can't really stand when something like ASP has to interfer with the layout of anything).
If you want to solve this for your HTML version I think you should provide a link or copy it into a fiddle, because it's probably easy to find out what's causing it. My bet is on some inherited style you can't overwrite. Sure you're not using !important or such anywhere in some generic styling?
It's kinda weird :D
check this fiddle out ..You could try to set to that input background the url of your image and just see what happens (if it's public..or you can upload it on imageshack), so we can exclude that there's a prob with that particular image
I am having issues embedding SVG into a webpage. I have found the simplest method to just use an image tag. For example:
<img src="my_graphic.svg" height="100"/>
Works in web-kit. I do not need to explicitly set the width and the browser will maintain the aspect ratio. Very nice!
This doesn't work in Firefox though - it's not cross browser. So how about embedding as an object?
<object type="image/svg+xml"
height="100"
width="554"
data="my_graphic.svgz">
<span/></object>
This time I'm using svgz and the mime type has been added and voila! It works in both firefox and webkit. However, in webkit I need to explicitly state the width or we get some nasty containing element scrollbars. But what's worse is the background is no longer transparent. It's rendered with a white background.
So one method works perfectly in webkit. The other works perfectly in mozilla. What can I do to get it working reliably in both?
Interested in a demonstration of this? See my link for reference:
http://sumocreations.com/demo/svg/new_dttg.html
I don't believe it's currently possible for the <object> to have a transparent background in WebKit. There's a bug filed for this problem. I don't know of a workaround.
The only work around I found was by detecting whether an img utilizing an SVG source is rendered properly. I do this by only specifying one dimension. Either the height or the width but not both. I can then test if the alternate dimension is greater than zero. If it is I hide the the object. If not I hide the image. Here is how to do it with jQuery:
<script type="text/javascript">
$(document).ready( function() {
if($('img.logo').width() < 1) {
$('img.logo').hide(); $('object.logo').show();
} else {
$('img.logo').show(); $('object.logo').hide();
}
});
</script>
See the demonstration: http://sumocreations.com/demo/svg/new_dttg.html
Place an <img> tag inside your object.
The object will render in firefox, and webkit should show the <img> tag.
Edit:
Also, what's up with the self closed span tag? <span> does not support self closing.
I have a client with an event planning site asking his pages to fade into one another. I have no idea how I can accomplish this. Any ideas? Is there anyway to do this without flash?
Definitely get hold of a javascript framework. jQuery is popular (because it's ace), but there's Mootools, Prototype, and Dojo to name a few.
I'm not sure if crosssfading can be done reliably across all the browsers without popping / jumping artifacts. Even the example Dancrumb points to is a bit ropey (no insult intended Dan).
Process-wise, you could have 3 layers (top to bottom)
screen (initially invisible)
page (one)
container (initially empty)
when the user tries to navigate to the second page, load it into the container using ajax. Once the page has loaded, start fading up the screen. Once the screen is at 100% opacity, manipulate the DOM to move the loaded content out of the hidden container and into what is now page two, then start fading the screen back out again.
EDIT on a sidenote - I would summon up all my webdev mojo and try to convince the client what I bad idea it is to have complete page fades on an site designed to communicate information. Obviously I know sweet FA about this project so feel free to slap me down; but I've never seen a case where fancy effects and transitions has improved the usability of a site when used at the page level. I know it'd irritate me if I had to wait for a fancy transition to finish before I could continue navigating...
Page Transitions are supported natively with IE, using the META tag.
See the Microsoft page about Filters and Transitions for more
For a browser agnostic approach (using Javascript), see this Stack Overflow question
This should work, without relying on Ajax (jQuery) :
$(function(){
/*
Add this code to every page.
We start by hiding the body, and then fading it in.
*/
$('body').hide().fadeIn('fast');
/*
Now we deal with all 'a' tags...
*/
$('a').click(function(){
/*
Get the url from this anchors href
*/
var link = $(this).attr('href');
/*
Fade out the whole page
*/
$('body').fadeOut('fast', function(){
/*
When that's done (on the 'callback') send the browser to the link.
*/
window.location.href = link;
});
return false;
});
});
Worth noting however is that if you're loading js at the bottom of the page (as we're often told to do), on a slow page load the page might be visible, then invisible, and then fade in again... Which would look very strange.
A solution would be to just hide the body in CSS, but you might, possibly, have visitors with JS turned off but CSS turned on, then they'll just have a blank page. Alternatively you could use a tiny amount of js at the top of the page (not relying on jQuery) to hide the body.
Lastly, however, why? I think if I visited your site these effects would begin to seriously annoy me pretty quickly. Why not just take the user to the page they asked for?
Won't work in IE, but WebKit and FireFox are both on the boat with CSS transitions, and they run a lot more smoothly than any JavaScript.
http://www.w3.org/TR/css3-transitions/
This might be a little late, but to Fade a page In when it loads, and then fade out On-click I'd suggest using jQuery. I wrote this quick little script that will do the trick that your after. Have a look at it, and I will explain below.
The CSS
body { display:none; }
The JS
$(document).ready(function()
{
$( 'body' ).fadeIn("slow", 0.0);
$( 'body' ).fadeIn("slow", 0.1);
$( 'body' ).fadeIn("slow", 0.2);
$( 'body' ).fadeIn("slow", 0.3);
$( 'body' ).fadeIn("slow", 0.4);
$( 'body' ).fadeIn("slow", 0.5);
$( 'body' ).fadeIn("slow", 0.6);
$( 'body' ).fadeIn("slow", 0.7);
$( 'body' ).fadeIn("slow", 0.8);
$( 'body' ).fadeIn("slow", 0.9);
$( 'body' ).fadeIn("slow", 1.0);
$('a').click(function(){
$('body').fadeOut();
setTimeout("nav('"+this.href+"')",1000);
return false;
});
});
function nav(href){
location.href=href;
};
The CSS holds back the display of the body, which allows the JS to start the fade effect on-load of the page. The body fadeIn is set at intervals to allow a smoother fadeIn effect, giving the site time to load. I've set the fadeOut effect to trigger when any anchor link is clicked (you could change it whatever you wish to act as the fade out trigger). When the page fades out, it will most likly fade to a 'White' screen. To avoid this, set your HTML background color to any HEX to match the sites color.
That script right there is probably the best solution and quickest to impliment on any site. It's been tested on IE7-8, FF 3+ and Opera 9-10 and works like a charm. Enjoy!
You could load the content using an AJAX request and then use javascript to fade out one page and fade in the other? In jQuery, something along the lines of:
$.get('newpage.html', {}, function(res){
$('#content-container').fadeOut().html(res).fadeIn();
});
Not perfect, but it's a move in the right direction hopefully? This isn't really something HTML was made for...
Thanks,
Joe
try this jQuery plugin. it's a tutorial on page transitions
What happens with pages that contain Flash/Video elements or other complex stuff? Will those fade properly?
Here's a hacky way I just thought of. Similar to Alex Lawford's answer, but hopefully a bit better:
On clicking a link, send an AJAX request for the new page, but don't do anything with the response. Once you receive the response, then fade out the current page, issue a standard window.location = <newurl> command and have javascript on that side immediately hide and then fade in the new document.
The hope here is that the response from the AJAX call is cached, so the time between fade out and fade in will be negligible.
I'll just reiterate from the first sentence though: this is hacky.