i want to use a icon in jQuery Mobile on a span element...and i want to support retina display too. So how can i use a icon without giving my span a fix width?
Should i use Media Queries and try to get it working that way or is there any "offical way" to do it?
Regards
Nils
Here is my procedure for making custom icons in jQM.
You need 2x png's one that is 18x18 and another that is 36x36
In your css:
//non-retina
.ui-icon-amazing {
background-image: url("custom.png");
}
//retina
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
.ui-icon-amazing {
background-image: url("custom-hd.png");
background-size: 18px 18px;
}
}
To use your new icon, which you have called 'amazing' simply use the appropriate data-icon= attribute
data-icon="amazing"
and the icon will get applied.
You get bonus points for base64 encoding your png directly into your stylesheet.
Related
This is a full-screen view of the amazon website
This is responsive view
I want to do like this how can I do that using CSS
I would suggest you to read this post
https://stackoverflow.com/help/how-to-ask
Specifically we could get more information about what you have already tried doing.
You can use css media queries to manipulate the layout of the website.
reference link
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
I suggest u for using bootstrap. It's easier way to learn responsive website
https://getbootstrap.com/docs/4.0/getting-started/introduction/
After that, u can build miniproject to learn it.
I have a site which already is overall dark (https://spacetrace.org), but since the new dark mode in Firefox exists, if it is selected, some colours and image transparencies are then changed somehow, which breaks the overall style.
I couldn't find an official document that explains the automatic changes.
How do I find out what was changed and revert those unexpected changes?
Note: I would like to enhance the site so it does what the user wants, and serve a working dark version using media query:
#media (prefers-color-scheme: dark) {
/* css */
}
But I cannot find the CSS options that were changed, so I can adapt them
I guess you are talking about this.
http://kb.mozillazine.org/index.php?title=UserChrome.css&printable=yes#Editing;
https://developer.mozilla.org/en-US/docs/Web/CSS/#media/prefers-color-scheme;
All you need is to add userChrome.css file with some code like this:
:root:not(:-moz-lwtheme) {
background-color: #e3e4e6 !important;
color: #18191a !important;
}
I have a site.css and something similar to mobile.css.
What I am building is a webpage where you can preview the app you've made. Imagine it like a site devided in half where one half has a panel with controls while the other one has the preview (div), curently designed as a mobile phone.
So what I am actually doing is a mobile phone on my site (preview), but the problem is that I dont know how to use the mobile.css file in the preview div only.
Is there a way to import a CSS file for one div (and its children)?
A simplified look of my page: https://jsfiddle.net/kc8rgde2/1/
<iframe>, <style scoped> or external CSS preprocesors are not an option.
EDIT:
I kinda decided to go with SASS as it was the easiest to understand and Visual Studio had a nice extension for it.
Thank you for all the help.
I had an idea. It could work, and it needs a lot of testing.Check this fiddle ->
https://jsfiddle.net/kc8rgde2/2/
Basically, as you can see, in the fiddle there's no bootstrap loaded.
I load bootstrap, and access the file using the CDN link from an AJAX request.
The response of the ajax, is the content of the bootstrap css file (minified version) - (check the console!)
What i do after, is replacing all the classes (dots) with ("#phonePreview .") and this prepends the phone preview div id to all the classes.
$(document).ready(function() {
$.when($.get("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"))
.done(function(response) {
var res = response.replace(/\./g,'#phonePreview .')
console.debug (res);
$('<style />').text(res).appendTo($('body'))
});
})
Prepending the parent id means that the classes are applied only to #phonePreview children.
It's just a starting point, but with some work it could work!
If you want to use styles specifically for devices under a certain size you could use media queries:
#media only screen and (max-width: 431px) {
.myDiv {
style: style;
style: style;
}
#div2 {
style: style;
style: style;
}
}
max-width: 431px means devices that are 431px or lower in width. You could also use height and change it to min-width.
Trying to print my views to PDF and I am getting pdfs rendered as for mobile device. Basically, I think smallest screen is detected and css styles for mobile are used. Is there a way to fix this?
I tried to change format size and make it really big, tried to use landscape orientation, but content would just scale up and it would still show with mobile styles.
I am thinking to render a partial view to pdf and have custom css file just for pdf exports, but that seems like a lot of not necessary work
Any ideas?
Thanks
What you could be doing is using the print media type in your stylesheet. It would look something like this:
#media print {
p {
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
color: red;
}
}
Maybe you already use this media type and put it in your mobile styling? Might want to put it above any responsive input and see how that works out?
How to get the perticluar image from large set images in one image using css
e.g. Jquery ui icons having one large image but using css class it retrives only perticlar image icon.
Firstly, you create approporiate viewport div:
<div class="ui-icon alert-icon"></div>
Then you define CSS:
.ui-icon { width:16px; height:16px; overflow:hidden; background:url(images/icons.png); }
.alert-icon { background-position:0 0; }
.warrning-icon { background-position:0 -16px; }
Note - our ui-icon class applies default values for every icon. Classes alert-icon and warrning-icon are example of customized icons. They are just moving background image showing correct piece of the icons.png image.
Depending on the layout of the icons in your main, sprite image, you will have to move the image by more/less pixels or in different direction (+/-).
You can assign them the same class, or you can get them by tag name .. get an array of images.. class it retrieves only perticular image icon what you mean here is ID, only one ID is allowed per document but you can use class on multiple elements, hence retrieving them with the class selector.
EDIT
e.g. Jquery ui icons having one large
image but using css class it retrives
only perticlar image icon.
What you probably meant was, that you are using image sprites?so you want to get only portion of that big image(like jquery ui), the thing you need to do is you need background position . Google image sprites I'm sure you'll find plenty of resources, that is how I got around it
Make your div with standard size and then apply like this:
<style>#jd {
display:block;
overflow:hidden;
background-image:url(1.png);
background-repeat:no-repeat;
height:100px;
width:100px;}.j1 { background-position: 0px 0px;}.j2 {background-position: 0px -99px;}</style><div id="jd" class="j1"></div><hr><div id="jd" class="j2"></div>