This is a bit of an odd question, and I know it goes completely against the purpose of media queries, but is it possible to show the CSS for a desktop on a mobile device without touching the CSS files?
Our website is fully responsive. However, I have had a request to add a button to the page only on mobile devices which, when clicked, will show the page in desktop view. I have explained why this is a bad idea, and given alternative solutions, but this is what the client wants.
I have tried the following code (changing the initial scale), and this works just fine on a desktop browser, but doesn't work on a physical mobile device.
<div id="desktop-view-btn">
<a class="btn">Desktop</a>
</div>
<style type="text/css">
#desktop-view-btn {
display:none;
}
#media screen and (max-width: 576px) {
#desktop-view-btn {
display:block;
}
}
</style>
<script>
$(document).ready(function() {
$('#desktop-view-btn')
.insertBefore('h1')
.on('click', 'a', function(e) {
e.preventDefault();
$("meta[name='viewport']").attr('content',"width=device-width, initial-scale=0");
$(this).parent().remove();
});
});
</script>
Is anyone able to help?
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".
My company has an old JSP page that we are trying to make responsive. As I am going through the templates that our UX team sent us and attempting to implement them, I am learning responsive design at the same time. I have tried to implement an HTML/CSS responsive images tip whereby the HTML
<img srcset="examples/images/image-384.jpg 1x,
examples/images/image-768.jpg 2x">
and the CSS
.img {
background-image: url(examples/images/image-384.jpg);
}
#media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.img {
background-image: url(examples/images/image-768.jpg);
}
}
However, I am finding that this solution doesn't work so well for my application but I haven't found any other tips.
Here's where I am at in the JSP:
<%-- <img class="formbackground"
srcset="resources/images/Group5209<%=staticAssetsVersionInfoIMAGES%>.jpg 1x,
resources/images/Group5209#2x<%=staticAssetsVersionInfoIMAGES%>.png 2x,
resources/images/Group5209#3x<%=staticAssetsVersionInfoIMAGES%>.png 3x"/> --%>
and the CSS:
.formbackground{background: url(../images/Group5209#3x.png);
#media (min-width:682px) {
.formbackground{
background: url(../images/Group5209.jpg);
}
}
#media (min-width:992px) {
.formbackground{
background: url(../images/Group5209#2x.png);
}
}
NOTE: The <%=staticAssetsVersionInfoIMAGES%> tag is to help with our asset versioning so that all of our resources are picked up on a content caching system if they ever change.. otherwise, the content cache takes a few hours to catch up.
Can anyone offer any tips to get the images to swap when the page is loaded or resized to a different width?
All the image slider plugins I have used so far for Wordpress sites have had no way, as far as I could tell, to swap out different sized images at various screen sizes to enable an 'mobile first' experience.
For example: http://www.akqa.com/
They have changed which image is displayed depending on certain breakpoints and it allows control over which part of the image is displayed.
If there is no plugin to automate this, could it at least be achieved through CSS alone?
Thank you
You can do this by HTML picture tag or Jquery .data()
Jquery Example
orignalImg = $(".test").attr("src"); // get orignal image
mobileImg = $(".test").data("mobile"); // get mobile image
brakpoint = 768; //what ever your brakpoint
//do magic
function changeImg() {
$(".test").each(function() {
if ($(window).width() <= brakpoint) {
$(this).attr("src", mobileImg);
}else {
$(this).attr("src", orignalImg);
}
});
}
// call magic
changeImg();
//change image if viewport change
$(window).on('resize', function() {
changeImg()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Resize your window </h1>
<img class="test" src="http://placehold.it/600x300" data-mobile="http://placehold.it/300x600">
HTML Example
<picture>
<source srcset="http://placehold.it/600x300" media="(min-width:768px)">
<img src="http://placehold.it/300x600" alt="img">
</picture>
In your example link they are also using this <picture> tag. This is a simple solution but might be you will face browser compatibility issue
I have a 2550px x 3300px image of a document. I scale it to 901px to 1166px using css. Also used image width/height attributes without css. It looks great in chrome and IE but the image contents look jagged in FF (3.6). Resizing the image itself is not an option (for good quality printing).
Any suggestions?
You could try adding the CSS tag image-rendering: optimizeQuality; although this should be the default. Perhaps you have another tag somewhere which is overriding the default?
From http://articles.tutorboy.com/css/resize-images-in-same-quality.html
If the intention is to get a better quality when the user prints the page you could use separate style sheets for print and screen.
<style>
#media screen
{
#origImage { display:none; }
}
#media print
{
#screenImage { display:none; }
}
</style>
...
<img id="origImage" src="original.jpg" />
<img id="screenImage" src="resized.jpg" />
I'm trying to dynamically hide certain DIV's when a print (or print preview) occurs from the browser.
I can easily differentiate statically by having two style sheets, one for normal and one for print media:
But I need to go one step further and hide some elements dynamically when the print style sheet becomes active during a print based upon certain criteria
One way to easily solve it would be to handle a DOM event for handling print / printview, then I could just use jQuery to change the display:none on the classes that need to be hidden, but I can't find a DOM print event!!
Anyone know what the solution is?
Not all browsers allow you to capture the print event. I've seen this tackled by adding a 'print this page' link and then using that click event to accomplish what you need.
I don't think you need a print event. All you need to do is adjust your #media print styles based on your Javascript(?) criteria. When the user attempts to print the page, the #media print style will apply and your styles will be in effect:
<html>
<head>
<style id="styles" type="text/css">
#media print { .noprint { display:none; } }
</style>
<script type="text/javascript">
var x = Math.random();
if (x > .5) {
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '#media print { .maybe_noprint { display:none; } }';
document.getElementsByTagName('head')[0].appendChild(style);
}
</script>
</head>
<body>
<div class="noprint">This will never print.</div>
<span class="maybe_noprint">This may print depending on the value of x.</span>
</body>
</html>
If you are using server-side criteria to determine what prints, then just have server-side code spit out #media print to decorate the classes as necessary. Also, you may want to consider modifying an existing class that's already inside #media print, or building up the new CSS using something other than innerHTML, which I'll admit smells awful to me, but seems to work in Opera 9.6, Safari for Windows 3.1.2, IE 6 and Firefox 2.0.0.17 (I didn't test any other browsers).
Just tag those DIVs with a class that's hidden on the print stylesheet:
HTML
<div id='div19' class='noprint'>
...
</div>
print.css
.noprint {
display: none;
}
If you don't know in advance which elements you need to hide, you can use javascript to set the class for the given objects:
Javascript
document.getElementById('div19').className='noprint';
There's an onbeforeprint event in IE. It doesn't appear to be supported by other major browsers. (I tested Firefox 3.0.3 and Safari 3.1.2.)