Is there a way in AngularJS to show / hide a div depending on the browser with?
Here is some pseudo-code:
if (width < 750px)
ng-hide
I hope you got my intention. :-)
Due to accessibility issues, I don't wan't to use this jquery code:
#media (min-width: 500px) and (max-width: 600px) {
myelement {
display: none;
}
}
This does just hide the html-element, I wan't to remove it from the DOM.
I am thankful for any help I can get on this issue.
Related
I'm trying to write some css that will only work in firefox, that is within a media query so it only works after 767px. Below is what I've currently written but it doesn't work.
#media only (min-width: 767px) {
#-moz-document url-prefix() {
.SearchBlock input {
width:88% !important;
}
}
}
It works just fine without the "#media only" section, but I only want it to work after 767px. Is this possible?
Edit: Changed resolution to width.
Don't use min-resolution. Use
min-width: if you need to apply CSS to the devices which are more than 767px, and use
max-width: If you need to apply CSS to the devices having size less than 767px - for mobiles
Example:
#media screen and (min-width: 767px) {
#-moz-document url-prefix() {
.SearchBlock input {
width:88% !important;
}
}
}
Hope this helps!
You are not getting the result because you are using min-resolution correctly.
You can do one of the 2 :
Either change min-resolution to min-width
Enter resolution value in min-resolution for example min-resolution(192dpi)
Px is not the unit of resolution.
Change min-resolution to min-width.
Resolution is for the pixel density of the device. width refers to the actual width which is what you want.
The url-prefix portion needs to have the url of the document the style rules refer to, such as
url-prefix("https://example.com/")
The #document CSS at-rule restricts the style rules contained within
it based on the URL of the document.
https://developer.mozilla.org/en-US/docs/Web/CSS/#document
Try this. Should work! :)
.SearchBlock input {
display: block;
width: 30%;
}
#-moz-document url-prefix() {
#media screen and (min-width: 767px) {
.SearchBlock input {
width:88% !important;
}
}
}
<div class="SearchBlock">
<input type="text" placeholder="text"/>
</div>
I have written media queries in this order. But some of my html code is not working, which does not have any relation with this media queries. A html button disabled in responsive view. But after deleting the media queries it is working fine. I have checked the code, all the brackets are closed properly. Is there any strict rule that should follow while writing media queries?
#media all and (max-width:1200px) {
}
#media all and (max-width:992px) {
}
#media all and (max-width:768px) {
}
#media all and (max-width:480px) {
}
#media all and (max-width:320px) {
}
Some possibilities
If you have absolute positioning to button, you can try removing it
Position button according to device width in responsive view
Check if another div or element is overlapping button
I need a media query (or similar) using pure CSS, HTML or possibly LESS (as long althogh pre-compiled won't work) to apply a particular class to an ID depending on the screen height. I'm setting classes defined by Add2Any - not css properties.
jsfiddle
What I want to do is set the div #add2any to this for small screens.
<div id="add2any" class="a2a_kit a2a_default_style">
Otherwise I want this:
<div id="add2any" class="a2a_kit a2a_kit_size_32 a2a_default_style">
Is this possible, and how?
Looking for a non-javascript/not Jquery solution to avoid time lag and having a <div> for each style and showing only the relevant one.
Background
The idea is to change the layout and size of the AddToAny bar for small screens, so instead of 32px images it displays a totally different style of compact bar, with less buttons, and using AddToAny's classes means future changes they make would not be dependent on fixed css in my stylesheets. Browser compatibility is important.
CSS so far
#media screen and (max-height: 430px) {
.a2a_button_google_plus, .a2a_button_pinterest, .a2a_button_print { display:none;}
#add2any a, hr#add2any, hr#add2any a, .a2a_divider { font-size: 15px; padding-top:2px; padding-bottom:-2px; }
.a2a_divider { top:5px ; position: relative}
}
Edit
Unable to find solution from any of these, I'm using foundation framework.
conditional CSS based upon div not screen
Toggle mobile view in Foundation using CSS class or JS
How to toggle class using pure javascript in html
**Edit 2 **
Suggestions of using Less or Sass from this question seem like overkill, since the solution would be needed on every page.
Self-hosting the script and adding some javacript to it might be a better choice, the class names look certain to remain the same even if the script changes since all Customize instructions encourage direct use of AddToAny's class names.
Edited
If you have this html:
<div class="a2a_kit a2a_default_style">
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
You can make a media query like this:
/* first state */
.a2a_kit { display: block; }
.a2a_kit.a2a_kit_size_32 { display: none; }
#media screen and (max-height: 430px) {
/* reverse behaviour on max-height 430 px */
.a2a_kit { display: none; }
.a2a_kit.a2a_kit_size_32 { display: block; }
}
You just need to set up modified styles in your media queries:
#add2any {
/* any styles you want to apply all the time */
background-color: blue;
width: 100px;
color: white;
}
#media (min-width: 420px) and (max-width: 760px) {
/* styles when screen is greater than 420px wide but less than 760px */
/* omitting the 'and (max-width: 760px)' would cause these styles to apply at any width above 420px unless overridden by another media query */
#div1 {
background-color: red;
width: 300px;
color: yellow;
}
}
#media (min-width: 760px) {
/* styles when screen is greater than 760px wide */
#div1 {
background-color: green;
width: 600px;
}
}
JSFiddle Demo
*if you don't want to style based on the ID, you can add a unique class and style that
I have added a lightbox to a webpage, but the content does't show up in mobile view. I am a developer and new to designing, so please help me solve the issue
http://www.kahui.org/user/boardmember
Will be very thankful for any helpful suggestion
The problem is in the styles.css:2362
#media (max-width: 768px) {
...
.about-left p:nth-child(3) {
display: none;
}
...
}
It says browser to hide <p> if it's the third child.
I understood how I change CSS via media queries (such as media="screen and (max-width:640px)")
but let's say I want to write (just for example)
<div>
[if screen resolution is lower then 960 px]
<div>
some new text only for lower resolution
</div>
[end of condition]
</div>
What is the condition I need to write to get it right?
As far as i have experienced, you cannot do media queries inside HTML pages. You need to do it from within your CSS.
But if you want to show some special text only when it is below a certain resolution, why not only make it visible when the resolution is lower than 960px?
Creating responsive designs is very different from a regular design, because you have to think a lot more (which is haaard)
you can check it via using javascript screen object :
screen.width
or you can do this with css
<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />
http://css-tricks.com/6206-resolution-specific-stylesheets/
http://www.javascriptkit.com/howto/newtech3.shtml
I am actually going through the same situation and found that if you want to do this you could really add all the text in the HTML page, and then hide it on screen widths that you don't want it to show. For example:
<div>
[text that will be shown for screens less or equal to 960px in width]
<div class="smallScreen">
some new text only for lower resolution
</div>
[end of condition for small screens]
[text that will be shown for other screens that are greater in width]
<div class="largeScreen">
some new text only for higher resolution
</div>
</div>
And then you could add CSS:
/* On smaller resolutions, hide the text for Large screens */
#media only screen and (max-width: 960px) {
.largeScreen {display: none;}
}
/* On larger resolutions, hide the text for Small screens */
#media only screen and (min-width: 960px) {
.smallScreen {display: none;}
}
I hope this works out fine :)
You need to assign an id (or a class or any other way of finding your element from CSS) to the <div> and then you can set a media query definition like this:
<div id="mydiv">...</div>
<style type="text/css">
#media screen and (min-width: 961px) {
div#mydiv { display: none }
}
</style>
Or for better readability: Make it hidden on default and visible if max-width: 960px.
I could be wrong, but I think css selection by resolution would need a little help from javascript.
Here is a quick example of what that js could look like, embedded in jquery:
$(document).ready(function() {
if ((screen.width>=1024) && (screen.height>=768)) {
alert('Screen size: 1024x768 or larger');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect1024.css"});
}
else {
alert('Screen size: less than 1024x768, 800x600 maybe?');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect800.css"});
}
});
Hope that helps.
You can add jQuery function to change style dynamically as per scree resolution.
if(screen.width==1600)
{
jQuery('#hb-gotop').removeAttr("margin-left", "-0.9");
jQuery('#hb-gotop').attr('style', 'margin-left: -0.7%');
}
else if(screen.width==1280)
{
jQuery('#hb-gotop').removeAttr("margin-left", "-0.9");
jQuery('#hb-gotop').attr('style', 'margin-left: -0.9%');
}
else if(screen.width==1024)
{
jQuery('#hb-gotop').removeAttr("margin-left","-0.9");
jQuery('#hb-gotop').attr('style', 'margin-left: -1.1%');
}
else if(screen.width==800)
{
jQuery('#hb-gotop').removeAttr("margin-left","-0.9");
jQuery('#hb-gotop').attr('style', 'margin-left: -1.3%');
}
Answere was helpful from:
if screen resolution is less than x append css
You can do this entirely with CSS 3 using the #media command.
**#media (max-width:960px) { css... } //nothing with screen size bigger than 960px
#media (min-width:960px) { css... } //nothing with screen size smaller than 960px**
Jason Whitted makes a good point, this is CSS 3 only, so it won't work with older browsers (it should work with all modern browsers though).
You can as well do screen or device edit
#media screen { .nomobile { display: block; } } //desktops/laptops
#media handheld { .nomobile { display: none; } } //mobile devices
Or you could assume mobile devices will have a smaller width, and go on that.