Quick question: I have a flash banner which is 1000px wide. I'm wanting that when a user's screen (like a smartphone) is less than 1000px, a image is substituted. How can I accomplish that? Thank you!
Hide the flash banner and show display the image when width is less than 1000px using this code in css:
#media screen and (min-width:1000px) {
#flash_banner {display:block;}
#image {display:none;}
}
#media screen and (max-width:999px) {
#flash_banner {display:none;}
#image {display:block;}
}
Hope it works well for you.
Related
I am using academia wordpress theme and want to adjust responsive width of the header. the menu collapses when 1200px I want it to be collapsed at 800px. sorry for bad English.
The menu is collapsing at 1200px I wish if it collapse at 800px, please help.
You have to use media query
#media screen and (max-width: 800px) {
//collapse
}
#media screen and (min-width: 801px) {
//don't collapse
}
I have an animated svg, but firefox doesn't currently support the transform-origin property with % for svgs. So I'd like to hide the animated svg and show a static svg or png when users view in firefox. I'm not sure how to do this. I don't think feature detection will work, because firefox does support svgs and transform-origin, just not transform-origin for svg. Thanks for any suggestions.
Had this issue. I remember reading a comment somewhere in SO that Firefox42 supports this with a prefix:
-moz-transform-origin
anyway, to detect firefox i use a snippet found here:
if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1)
{
//Do Firefox-related activities
}
in your case, if the browser is indeed firefox, and assuming you are using 2 container elements, 1 for your SVG and one for your PNG, you could:
1) directly add/show the elements with js
2) add a 'firefox' class to your root html element and style your css accordingly.
so, let's say you have a #svg and #png containers
in your css you'd use:
.firefox #png { display: block; }
#png { display: none; }
#svg { display: block; }
.firefox #svg { display: none; }
Hope this helps!
I'm currently working on a website that is relatively equal for all devices; desktop & mobile. I'm working with % as I think that is the best option.
It's based on portrait mode. If you change the device to landscape, the whole website looks like a fat midget.
So I'm wondering: Is there a possibility to lock a website, displaying it in portrait all the time?
And by that, I mean: Device rotation locked. Not that when going to landscape, the website returns back to portrait, while in landscape. (which I already saw some code on StackOverflow.)
Check my site at: http://prototyping.iscs.nl/mobiel.html
for reference :)
Thanks in advance
In an update to an old ('12) question, I think this can help a lot of people!
I haven't figured out a true way of locking the device rotation, but came up with a perfect alternative, which I've seen a few people do too.
Option A. One simple alert
By use of a simple jQuery script, you can detect the orientation of your device.
if(window.innerHeight > window.innerWidth){
alert("Please use Landscape!");
}
Well, a simple alert is easy, but the notification can be quite nicer!
Option B. One nice image notification
(update as of 04-2018: (as I just saw my post again, I thought of something easier..) use media queries. Pretty much the same as below, but instead of using Javascript, use css, hide the element by default and show it when the orientation is landscape → #media (orientation: landscape) {...})
Simply add an fixed element to your page that is shown when the orientation has changed.
HTML
<div class="turnDeviceNotification"></div>
CSS
.turnDeviceNotification {
position:fixed;
top: 0;
left:0;
height:100%;
width:100%;
display: none;
}
You can update this element with text, or simply connect it to a background-image by
.turnDeviceNotification {
background-image:url('../images/turnDevice.jpg');
background-size:cover;
}
Simply add a nice background to your images folder, such as the one below.
Noticed the object has an display: none ? That's because else it'd be shown even in portrait mode. Now, all you need to do is to use the script below, so the object is shown only in landscape mode.
jQuery(window).bind('orientationchange', function(e) {
switch ( window.orientation ) {
case 0:
$('.turnDeviceNotification').css('display', 'none');
// The device is in portrait mode now
break;
case 180:
$('.turnDeviceNotification').css('display', 'none');
// The device is in portrait mode now
break;
case 90:
// The device is in landscape now
$('.turnDeviceNotification').css('display', 'block');
break;
case -90:
// The device is in landscape now
$('.turnDeviceNotification').css('display', 'block');
break;
}
});
This will show the notification only when the device orientation has changed to landscape.
Not possible. Lock rotation is a device setting: http://support.apple.com/kb/HT4085
When not locked by device, the browser will rotate and since your content is inside the browser, the content will rotate too.
Maybe the viewport will help in solving your problem: < meta name="viewport" content="width = device-width"/>". I see you're missing that meta tag.
I don't think is possible but there are couple of ways to work around
js way: window.DeviceOrientationEvent
css way
#media (orientation: landscape) {
body { background-color: black; }
}
#media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
html {
transform: rotate(-90deg);
transform-origin: left top;
width: 100vh;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0;
}
}
Source : https://css-tricks.com/snippets/css/orientation-lock/
Not possible as of now. But the other way around would be,
Using CSS,
Media query helped work properly for a landscape view.
min-aspect-ratio: 13/9 is very important as if you don't specify this, for some mobile devices, if you focus on a form field, the keyboard is opened, which basically changed the viewport's height which basically triggers the landscape media query. Hence min-aspect-ratio is very important for landscape media query.
#media only screen and (min-width: 320px) and (max-width: 1023px) and (min-aspect-ratio: 13/9) and (orientation: landscape) {
// Landscape view properties
}
Using JavaScript, we can use screen.availHeight as screen height doesn't change when keyboard displays. Also have to add more checks to allow Desktop view for following.
var currentOrientation = function() {
if(screen.availHeight < screen.availWidth){
// Landscape view
} else {
// Portrait view
}
}
// Set orientation on initiliasation
currentOrientation();
// Reset orientation each time window is resized. Keyboard opening, or change in orientation triggers this.
window.addEventListener('resize', currentOrientation);
I'm using the nivo slider on our site
It's working great on all devices except for IE8 on XP, which due to the infamous IE transparent png issue, I get black borders around the prev and next buttons on rollover. The prev and next buttons need to be transparent pngs as they have a drop-shadow and are placed on top of transitioning images.
The Arrows
The Problem IN IE8 XP
The HTML
<div class="nivo-directionNav">
<a class="nivo-prevNav" style="display: none;"></a>
<a class="nivo-nextNav" style="display: none;"></a>
</div>
The CSS
.nivo-directionNav a {
position:absolute;
z-index:9;
cursor:pointer;
}
/* the arrows are taken from a single sprite with a standard and active image
for prev and next with the background-position changed on rollover */
.nivo-prevNav, .nivo-nextNav {
width: 80px;
height: 100%;
}
.nivo-prevNav {
left:0px;
background: url("images/nivo_4_arrows.png") no-repeat 0 0;
}
.nivo-prevNav:hover {
background: url("images/nivo_4_arrows.png") no-repeat -80px 0;
}
I have tried to implement this javascript as a fix:
var i;
for (i in document.images) {
if (document.images[i].src) {
var imgSrc = document.images[i].src;
if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
}
}
}
...as well as this plugin found on a similar post on this forum but neither have proved successful.
Been wasting lots of time on this so I'd really appreciate anyone that can shed some light on a fix!
Try to insert the following lines into 'nivo-slider.css' (a style for no theme specified):
.nivo-slice
{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)" !important;/* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF) !important;/* IE6 & 7 */
zoom: 1;
}
It works for the slice effect, but put this for the other effects, however in my case this solution changes the fade effect into a simple changing pictures effect (without fading). Maybe it'll help you.
This javascript script will not work with images on backgrounds, only "img src"...
there are 2 ways to solve:
use "img src" and put "position:absolute" and positioning the image in the background.
OR
Make an if IE and instead of background-image use:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='link-to-image');
keep using backgroung-image for other browsers..
I have a 'responsive' website but there are some links I only want on 'pc browsers' only and not on 'tablet landscape' becasue they link off to flash objects.
So far this is what I have done but it't not a 100% fix as some android tablets such as 'Lenovo think pad' which have a bigger screen.
I am using media queries to make my site responsive and this is what I'm currently using...
#media only screen
and (max-device-width : 1024px)
and (orientation:landscape)
{
header.Site
{
nav.Site > ul > li { line-height: 2 ; }
div.BidSessionCountdown,
a.LiveOnline { display: none; }
}
}
Is there any CSS fixes you can think of?
Thank you in advance
Tash :D
Using media queries isn't really the appropriate technique to detect if flash is supported or not. My suggestion would be to determine this using JavaScript, and assign a class to the body element such as "no-flash". Your JavaScript might look like this:
//Using jQuery here
if(typeof navigator.plugins['Shockwave Flash'] == 'undefined') {
$('body').addClass('no-flash');
}
Then, your CSS could be as follows:
body.no-flash a.LiveOnline {
display:none;
}
Note: The javascript code that checks the navigator plugin comes from Here.
When you are using the orientation:landscape, you have to consider whether the keyboard popup will change the display, once the width size is larger than the height size, the css will consider it as landscape.