I have a Brightcove video that is set to autoplay with sound, but ONLY when the page is viewed on a mobile device. I set a media query to have the video and it's containers set to "display: none" when it's on desktop. However, the audio still plays on desktop. How can I turn this off?
Is this possible to do with just CSS, ideally without messing with the player itself or adding Javascript?
display:none does not actually remove the item from the DOM. It is still present, just not visible. Any other CSS option will achieve the same end result. If you do not want the player, you will have to make changes in the code to remove it from the DOM.
Related
Just discovered this code and implementation of lightbox2 and added the needed code to some of my webpages.
Looks very good o desktop and also on tablet but I don't like the lightbox in mobile view.
The pictures that are shown on mobile are smaller than the 'normal' responsive view that I get when not using lightbox2.
So my question is in the title: How can I disable the lightbox on mobile?
Regards Arno
Unfortunately this is not possible at this time. The Lightbox script on load will attach event handlers to the target images.
To get around this, you can use different markup on mobile and show hide the content with CSS media queries.
My use case: I have an image that is the preview of a video. When the user tap the preview, the video should starts a fullscreen playback (I suppose in another Form). When the video ends or when the user tap the video during the playback, the previous Form should be shown. This is the same use case of the question: Codename One landscape oriented Form in a portrait locked app
My question: the MediaPlayer class doesn't seem to expose a method to perform a custom action when pressing the video or when the video ends, like requested by this use case. The MediaPlayer is a peer component, so I'm not sure if trying to use a button as a leader component can make sense to do an action after a tap. Any idea?
Unfortunately media is pretty complicated in that sense. You can either rely on the behavior of the media player natively which handles orientation change, playback etc. seamlessly (seek etc.). Or you can implement everything on your own in a media object in which case you can use native peer overlay and have a transparent component on top of the media view which will grab all the clicks.
The former will provide a more native UX and will auto-rotate the UI but we don't have control since there's no Form underlying the UI. It's shown when you invoke setNativePlayerMode(true). When you tap the video in this case it pauses. To exit playback you would use device native keys e.g. back or a done button and would be returned to the parent Form. Notice that since this is native behavior it acts differently on the device and it's important to do device testing here.
Your alternative is to place a media component in the center of the screen and then you can override everything and customize everything. You can place a layered layout on top and grab all tap events. You will need to add your own progress, play, pause etc. UI elements. The user would need to physically rotate the device as orientation won't switch on its own (for the most part).
I have a site which uses a different menu for mobile devices than on the Desktop version using media queries. If I resize a desktop browser window to a mobile width and click the mobile navigation dropdown button and then resize the window back to desktop size, the mobile menu remains visible instead of changing back to display:none. Unfortunately this site is still in staging so I cannot show you a live example, but I was hoping someone could point me in the right direction of getting that DIV to become hidden again once the window is resized back to full screen.
Also, I realize that the chances of this scenario playing out in the real world are slim, but the client would like for it to be addressed anyway.
Thanks!
I figured out that it was javascript that was showing the DIV in the first place, not a media query, so I just added display:none to the div for the Desktop media query and the issue has gone away. Thanks!
CSS rollover sprites were cool, but for responsive design we now use images (which are responsive) rather than CSS backgrounds (which are not). Is there an equivalent to CSS sprites for responsive image-based links ? Or, is there only Javascript for switching from normal state image to hover state image when hovering the link ?
As I'm the developer of LazyLou, I can advise you to use it. It's support for responsive page design as well as pre-loading feature. It might help you.
I'm creating a web app exclusively for the iPad/mobile-Safari. The homepage is a run-of-the-mill HTML/CSS page with 3 main sections. But once you click on either of the 3 main buttons, you are directed to a page constructed with 2 iFrames (one on top for Nav, one on bottom for Content)
The problem was that before either of these 3 pages loaded there was a quick flash of white color and then the page loaded. I tried hiding the visibility style of the iframe and then onLoad change it to 'visible' and that worked. But it worked only once, when the iFrame-constructed page first loads. Once it loads and I click on a link on that page, the white flash is back because the iFrame has loaded already so it's already visible.
I tried the obvious like adding a css style to the iframe with a background color (also tried an inline style) but the same thing happened. Any ideas on how to solve it? Thanks!
You can do this cheat:
<iframe src="..." style="visibility:hidden;" onload="this.style.visibility='visible';"></iframe>
In the content, you can catch all link and form:
document.getElementsByTagName("a").addEventListener("click", function(e){
window.top.document.getElementsByTagName("iframe")[0].style.visibility = "hidden";
});
Explain:
First time, your iframe is hidden, and you can see the background of your main page (not white of iframe)
After loaded, Javascript will make iframe is visible and you can see content and background of iframe.
When click a link inside iframe, a trigger will fire, and Javascript will hide iframe again.
I met that problem, and that a whole day to trying to fix, but I cannot except above way. You can meet that issue on Chrome, Firefox, and other browsers, not just on Safari Mobile.
I think the same with KimKha. But "visibility" does not work well sometimes, so I think using "opacity" is better.
<iframe src="..." style="opacity:0;" onload="this.style.opacity=1;"></iframe>
I came across this issue, found lots of solution like KimKha mentions..
None of the solutions assist in further page transitions in the iframe and hiding it really is not a good solution.
With lots of trail and error I came up with the following which fixed my IOS webkit iFrame transition white flash issue, ironically it's such a simple solution:
Just add this to your CSS
html{background:#000}
change the colour to your desired color.
It looks like what the ultimate issue with IOS webkit is when your iframe calls another page, IOS removes the body from the current page for a split second before rendering the content from the new page. by forcing the HTML to have the background colour (default will naturally be white) this fixes the white flicker.
Also note that if your server is set to not allow caching of the .css file providing the styles then you will always get the flicker.
In apache to ensure caching look at
ExpiresByType text/css "access plus 30 days"