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.
Related
I've been pulling my hair for hours trying to figure out how to restyle the default scrollbar in Svelte. I've tried regular HTML styles, tens of external npm packages, and every source I could find, but none of them worked. How can I restyle the default scrollbar in a Svelte website?
I've tried adding the following code to my stylesheet but to no avail:
main::-webkit-scrollbar {
width: 0.25rem
}
main::-webkit-scrollbar-track {
background: #1e1e24;
}
main::-webkit-scrollbar-thumb {
color: #93CAED
}
Turns out Dai (from the original post's comments) was correct. I shouldn't have applied the styles on my <main> element. However, I didn't have much of a choice because the styles were to be applied to a .svelte file which only had 3 tags - <script, <style, and <main>. Fortunately, I found a way around this.
By prefixing the ::webkit-scrollbar with :root, which automatically applies the styles in the block provided to the whole document.
Please stop pulling out your hair, it won't help. But the following css would surely help you out to customize the scrollbar in Svelte.
For Webkit(ie. Chrome) browsers
:global(.main::-webkit-scrollbar) {
width: 0.25rem
}
:global(.main::-webkit-scrollbar-track) {
background: #1e1e24;
}
:global(.main::-webkit-scrollbar-thumb) {
color: #93CAED
}
For Gecko(ie. Firefox) browsers
:global(.main){
scrollbar-color: #93CAED #1e1e24;
scrollbar-width: 0.25rem;
}
Assuming, "main" is the class name of the Html element where custom style of scrollbar will be applied.
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!
The menu is fixed and will follow on scroll. This does not work well with touch devices.
I want to call the script, using Modernizr, when it detect no-touch devises. But I'm unsure how to do this.
Also, is there elements from the Modernizr download-page that I need to accomplish this?
Here is my script:
$(document).ready(function() {
$(window).scroll(function() {
var header = $('#fixed-bar').outerHeight(true);
console.log(header);
var scrollTopVal = $(this).scrollTop();
if ( scrollTopVal > header ) {
$('nav').css({'position':'fixed','top' :'0px', 'border-bottom':'4px solid #ff5454'});
} else {
$('nav').css({'position':'absolute','top':'90px', 'border-bottom':'none'});
}
});
});
But I'm unsure how to do this.
You don't want to just use javascript, you want to use mostly css, and just toggle classes with javascript. Its more performant (which is super important with something like scroll loops).
#fixed-bar {
position: fixed;
top: 0px;
border-bottom:4px solid #ff5454;
}
.touch #fixed-bar, #fixed-bar.at-top {
top: 90px;
border-bottom: none
}
also, you don't want to directly attach to window.scroll. Instead, you want to use requestAnimationFrame (shimming where needed) to get the most buttery smooth animations possible. Here is a coffeescript example for jQUery.With that, you would be looking to do something like this
$(document).ready(function() {
// the height doesn't change, so we don't need to look it up on scroll.
var headerHeight = $('#fixed-bar').outerHeight(true);
$.request_scroll(function() {
var scrollTopVal = $(this).scrollTop();
if ( scrollTopVal > headerHeight ) {
$('nav').addClass('at-top');
}
else {
$('nav').removeClass('at-top');
}
});
Also, is there elements from the Modernizr download-page that I need to accomplish this?
just the Modernizr.touch test.
Be warned, this doesn't detect touch screens, just devices that support touchevents. That means new windows 8 laptops will be detected as .touch, and windows phones will not (they use pointer-events, not touch events).
I now have a fiddle with help from Patricks answers, but as you can see, the bar does still not go to the top, when you scroll as it should, like on my website.
Is there a solution for this? Tablets and phones don't like effects, which have $(window).scroll(function().
Currently I have this javascript on my website (the id's are different):
$(document).ready(function() {
$(window).scroll(function() {
var header = $('#fixed-bar').outerHeight(true);
console.log(header);
//this will calculate header's full height, with borders, margins, paddings
var scrollTopVal = $(this).scrollTop();
if ( scrollTopVal > header ) {
$('nav').css({'position':'fixed','top' :'0px', 'border-bottom':'4px solid #ff5454'});
} else {
$('nav').css({'position':'absolute','top':'90px', 'border-bottom':'none'});
}
});
});
While most tablets have problems with $(window).scroll(function(), it works on desktop pc. Not much consolation though.
Is there an alternate way of getting this to work? Using touch- and pointer events, maybe someone has a working fiddle og example?
I found this method to easily add #media block using mixin:
#mixin phone() {
#media only screen and (max-width: 480px) {
#content;
}
}
To use it, just simply type something like this:
p {
#include phone { ... }
span {
#include phone { ... }
}
}
But the problem lies in the real CSS output:
#media only screen and (max-width: 480px) {
p { ... }
}
#media only screen and (max-width: 480px) {
p span { ... }
}
It duplicates the #media ... part which will bloat the CSS.
Is there a way to make the mixin act like placeholder? So it will combine all #content and put it under the same #media ... block.
So the result will be like
#media only screen and (max-width: 480px) {
p { ... }
p span { ... }
}
I know I can just put the #include phone at the end of the file and write all the necessary styles in that block.
But writing the media-query style right besides the original one makes it easier to read and organize.
Thanks
Sass does not have that functionality at this time. Your only option is to manually group your styles within a single media query (or use a 3rd party CSS compressor that has that functionality).
https://github.com/nex3/sass/issues/116
You just have to adjust your nesting. Because the mixin will place all your content within the media-query, you only want to use the mixin once and place all relevant styles within it (to avoid multiple media-queries).
#include phone {
p {
span { ... }
}
}
If you are trying to combine styles for <p> and <span> for various media-queries, you will inevitably end up with some separation of styles, either in your preprocessed or output code.
For example:
p {
...
span { ... }
#include phone {
...
span { ... }
}
}
Hope that helps. Even if you end up with output that feels 'less efficient', it shouldn't actually slow down browser rendering, so I'd say prioritize writing code that feels maintainable to develop.
SASS can not combine extends with media queries**, so duplicate media queries are currently inevitable when you adopt this code style.
You could structure your code with media queries at the top level (i. e. group code by media queries), but this is generally a bad idea. Eric Meyer, one of the CSS gurus here, says (and many other front end enthusiasts would agree) that you should never do that. I have tried this approach myself on one project and i confirm that the larger your project gets, the more painful this code structure appears. SMACSS and other code structure methodologies also advise against it.
Where this code structure is widely used is in CMS base themes (theme templates aka starter kits). But they are aimed to allow users quickly override default styles rather than build from scratch.
The matter is that the duplicate media queries don't really matter. Though #cimmanon might not agree with me, only the readabiliy and maintainability of your source code (SASS) should matter, because every modern web server provides compression (gzip) for CSS code which is read only by machine.
Of course, there are many ways of ruining your CSS by making it unreasanably huge. Using a non-semantic CSS framework is one of them. Wisely applying a lot of local media query blocks is not.
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);