I am using Andy Matthew's custom jQuery Mobile icon pack (both the "original" and "font-awesome" icons . The font-awesome ones work on the iPad, but the "original" icons do not show up (but show up on Samsung devices etc).
I modified the CSS to work with the Rails asset pipeline as follows:
/*
jQuery Mobile Icon Pack
andy matthews
#commadelimited
*/
/* Icons
-----------------------------------------------------------------------------------------------------------*/
.ui-icon,
.ui-icon-searchfield:after {
background: #666666;
background: rgba(0,0,0,.4);
background-image: image-url('vendor/jqm-icon-pack/icons-18-white-pack.png');
background-repeat: no-repeat;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
/* Alt icon color
-----------------------------------------------------------------------------------------------------------*/
.ui-icon-alt {
background: #ffffff;
background: rgba(255,255,255,.3);
background-image: image-url('vendor/jqm-icon-pack/icons-18-black-pack.png');
background-repeat: no-repeat;
}
/* restore default loading image */
.ui-icon-loading {
background: image-url('vendor/jqm-icon-pack/ajax-loader.gif');
background-size: 46px 46px;
}
/* HD/"retina" sprite
-----------------------------------------------------------------------------------------------------------*/
#media only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.3),
only screen and (min-device-pixel-ratio: 1.3),
only screen and (min-resolution: 1.3dppx) {
.ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r,
.ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check,
.ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
.ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-search, .ui-icon-searchfield:after,
.ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on, .ui-icon-email , .ui-icon-page,
.ui-icon-question , .ui-icon-foursquare , .ui-icon-twitter , .ui-icon-facebook , .ui-icon-dollar , .ui-icon-euro,
.ui-icon-pound , .ui-icon-apple , .ui-icon-chat , .ui-icon-trash , .ui-icon-bell , .ui-icon-mappin , .ui-icon-direction,
.ui-icon-heart , .ui-icon-wrench , .ui-icon-play , .ui-icon-pause , .ui-icon-stop , .ui-icon-person , .ui-icon-music,
.ui-icon-rss , .ui-icon-wifi , .ui-icon-phone , .ui-icon-power , .ui-icon-lock , .ui-icon-flag , .ui-icon-calendar,
.ui-icon-lightning , .ui-icon-drink , .ui-icon-android , .ui-icon-edit {
background-image: image-url('vendor/jqm-icon-pack/icons-36-white-pack.png');
-moz-background-size: 774px 54px;
-o-background-size: 774px 54px;
-webkit-background-size: 774px 54px;
background-size: 774px 54px;
}
.ui-icon-alt {
background-image: image-url('vendor/jqm-icon-pack/icons-36-black-pack.png');
}
}
Other than that I have made no changes. The images directory looks like this: assets/images/vendor/jqm-icon-pack
Jquery Mobile serves up Retina optimised icons, but at the time there was a bug in the logic for displaying Retina friendly icons
Related
I have already gone through the following links
-> Removing black borders 4:3 on youtube thumbnails
-> How to remove black border of Youtube image
-> https://stackoverflow.com/questions/13220715/removing-black-borders-43-on-youtube-thumbnails#:~:text=To%20remove%20the%20black%20borders,which%20come%20from%20that%20domain.
We have many videos in our project with different size(width & height).
Tried following solutions
Solution 1: crop or adjust the height
HTML
<div class="thumb">
<img src="...">
</div>
CSS
.thumb {
overflow: hidden;
}
.thumb img {
margin: -10% 0;
width: 100%;
}
Failing for some sceanrios , because of image black border size is varying for few images.
Screenshot for reference
Image with less black border
Image with more black border
Solution 2: Use it as a background image, center it and change height.
.youtubePreview {
background:url('http://img.youtube.com/vi/aOPGepdbfpo/0.jpg') center no-repeat;
height:204px;
width:480px;
}
or
also tried with background-image
<div class="bgimg" style="background-image: url("https://img.youtube.com/vi/8yxZ-k0xI9s/0.jpg"); height:275px "></div>
Example: 450*275 failing
We have video with different sizes so it works for some width and its failing for other widths.
Solution 3: Get Youtube Images not having black borders ( use mqdefault.jpg instead of 0.jpg)
followed this link How do I get a YouTube video thumbnail from the YouTube API?
Based on above link came to know that mqdefault.jpg images not havin black borders
We using url for images https://img.youtube.com/vi/YOUTUBEVIDEOID/0.jpg
so replaced with https://img.youtube.com/vi/YOUTUBEVIDEOID/mqdefault.jpg
But unfortunately few mqdefault images having black borders at left and right side.''
mqdefault image
Many videos with different sizes(height & width )
Preview image black border length also varying
Can anyone please give some idea how to achive this ?
Thanks in Advance
Here are some examples I adapted (by checking the embed video and view its CSS styles):
Example # 1:
.ytp-cued-thumbnail-overlay-image {
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
position: absolute;
}
<p>Image 1: </p>
<div class="ytp-cued-thumbnail-overlay-image" style="background-image: url('https://i.ytimg.com/vi/3TJgmUGFHqw/sddefault.jpg');"></div>
Example # 2:
.ytp-cued-thumbnail-overlay-image {
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
position: absolute;
}
<p>Image 2: </p>
<div class="ytp-cued-thumbnail-overlay-image" style="background-image: url('https://i.ytimg.com/vi/NNgYId7b4j0/maxresdefault.jpg');"></div>
The image that I use for my background (which is fixed) displays at 100% in Web format, but when I emulate it on Ipad (1024x768), the image stops adapting to the width of the screen and it just fills about 70% of the screen height.
This is the CSS that I've used for the website format:
.body{
background-image: url("/img/bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% auto;
height: 5700px;
width: 100%;
}
This is the CSS that I've used for the Ipad style:
#media screen and (max-width: 1024px) {
.body{
background-image: url("/img/bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% auto;
height: 5700px;
min-width: 1024px;
}
}
I've tried min-width: 1024px; beacause I found a similar question with that suggestion, but it hasn't worked.
As stated here viewport units caniuse , using viewport units can ( and will ) cause problems in iOS because
iOS 7 Safari recalculates widths set in vh as vw, and heights set in vw as vh, when orientation changes.
iOS 7 Safari sets viewport unit values to 0 if the page has been left and is returned to after 60 seconds.
vh on iOS is reported to include the height of the bottom toolbar in the height calculation, and the width of the sidebar (bookmarks) in the vw width calculation.
So i suggest you use media queries and target different iOS resolution both for portrait and landscape. I know, it's a meticulous task but if you have a serious project for a serious customer , you have to deliver serious product
See here > iosres
For example
/* iPad with portrait orientation.*/
#media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){
.body{
height: 1024px;
}
}
/*iPad with landscape orientation.*/
#media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){
.body{
height: 768px;
}
}
/*iPhone 5 with aspect ratio*/
#media screen and (device-aspect-ratio: 40/71) {
.body {
height: 500px;
}
}
or you could use jQuery or javascript , for example
$(".body").height($(window).height())
this will equal body height to window height
Try using width: 100vw. vw means viewport width, so this should make the background take up the full width of the viewport.
Thanks to #Traver I've found the answer:
.body{
background-image: url("/img/bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 200vh;
height: 5700px;
width: 100%;
}
I just had to change the background-size units to vh and remove auto (but I've tested with it too and it's worked). Giving it a number of 200vh is enough to scale it full width and height.
EDIT: Mihai T's answer is the best one. Check it.
How can I set a custom background color for e.g., the active item in the dropdown when using Bootstrap's "typeahead" autocomplete?
A minor problem, but one that has been frustrating me for a couple of hours!
I'm using Twitter Bootstrap in a Rails 3.2 app, via the bootstrap-sass gem.
I assumed this was controlled by the dropdown menu styling, but
$dropdownLinkBackgroundHover: $customColor;
does not work.
I also tried a more specific approach
.typeahead .active > a, .typeahead .active > a:hover { background-color: $customColor; }
but this also does not appear to work.
What am I overlooking? Or should my fixes be working, and the issue lies elsewhere?
First, it would appear that the :hover state is not used for the typeahead, but only the .active one, as seen in the javascript plugin (2.2.2 on github)
So if you change the color variable it has to be the $dropdownLinkColorActive variable (that will override all the dropdowns, whether there are from typeahead or not).
Secondly the little trick is that the background is not only set by the background-color, which is a fallback, but by the background-image as seen from the Less call to the Less mixin - code shown at the bottom.
And if you want to set a new color only to the dropdowns of typeahead, you have to override the color with the .typeahead +.dropdown-menu .active > a selector (at least for now).
Live demo (jsfiddle)
Here is what you have to override :
.typeahead + .dropdown-menu .active > a,
.typeahead + .dropdown-menu .active > a:hover {
color: #ffffff;
background-color: #FF77FF;
background-image: -moz-linear-gradient(top, #FF77FF, #FF44FF);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FF77FF), to(#FF44FF));
background-image: -webkit-linear-gradient(top, #FF77FF, #FF44FF);
background-image: -o-linear-gradient(top, #FF77FF, #FF44FF);
background-image: linear-gradient(to bottom, #FF77FF, #FF44FF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF77FF', endColorstr='#FF44FF', GradientType=0);
}
This is based on the original less version of Twitter Bootstrap 2.2.2, but it most surely is the same for the sass ported version.
For posterity, here is the less code referenced (version 2.2.2) :
/* called in .dropdown-menu .active > a */
#gradient > .vertical(#dropdownLinkBackgroundActive, darken(#dropdownLinkBackgroundActive, 5%));
/* mixin */
#gradient {
.vertical(#startColor: #555, #endColor: #333) {
background-color: mix(#startColor, #endColor, 60%);
background-image: -moz-linear-gradient(top, #startColor, #endColor); // FF 3.6+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#startColor), to(#endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, #startColor, #endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, #startColor, #endColor); // Opera 11.10
background-image: linear-gradient(to bottom, #startColor, #endColor); // Standard, IE10
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(#startColor),argb(#endColor))); // IE9 and down
}
}
I'm trying to set up a manualy splash-image across devices. I'm doing so by checking for orientation (touch devices) or screen width vs. screen height (none touch) and set a url accordingly.
Then I add this CSS rule via Javascript:
document.styleSheets[3].insertRule('.initHandler:before {
background: url('+x+') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}', 0)
With x being the image to be loaded depending on orientation and screen size.
My problem is this works fine in landscape mode, but on my iPad in portrait mode, the correct image is loaded (differ depending on portrait/landscape), BUT it is not expanded to fullscreen size.
Question:
Can I not use CSS background-size on iOS in portrait-mode?
Thanks for help!
EDIT:
Just tried on my Android Smartphone. Works fine there. Makes no sense, why it doesn't work on iPad.
Ok. Here is how it's working (Thanks to #iMeMyself):
body {
background: url(...) no-repeat center center fixed;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
So first set it to 100%, then to cover. This way all browser that cannot cover get the 100% value, while the ones that can get the 100% overwritten by cover.
While checking orientation please take note of these points from apple document -
Provide Launch Images :
iPhone-only applications may only have one launch image. It should be in PNG format and measure 320 x 480 pixels. Name your launch image
file Default.png.
iPad-only applications: Create a launch image for each supported orientation in the PNG format. Each launch image must be 1024 x 748
pixels (for landscape) or 768 x 1004 pixels (for portrait).
Universal applications: Include launch images for both iPhone and iPad.
Update Your Info.plist Settings Specify values for the UISupportedInterfaceOrientations and UIInterfaceOrientation
and
Not all browsers recognize the cover keyword for background-size, and as a result, simply ignore it.
So we can overcome that limitation by setting the background-size to 100% width or height, depending on the orientation. We can target the current orientation (as well as the iOS device, using device-width). With these two points I think you can use CSS background-size:cover on iOS in portrait-mode
Here are some other resources I also came across while looking for a solution: Flexible scalable background images, full scalable background images, perfect scalable background images, and this discussion.
According to Designing Websites for iPhone X iOS 11 introduces a new extension for the existing viewport meta tag called viewport-fit, which provides control over the insetting behavior. The default setting is auto, which will not cover the entire screen.
In order to disable the default inset behavior and cause the page to lay out to the full size of the screen, you can set viewport-fit to cover as shown here:
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
Without this setting existing techniques used for splash screens and full-size hero images may not display as expected on the iPhone X or other conformant iOS devices.
Code here
It fixing background images for ipad
Just enter sizes according to your image dimentions
/* Page background-image landscape for iPad 3 */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
.introduction-section {
-webkit-background-size: 2024px 768px !important;
background-size: 2024px 768px !important;
background: url('background-image.jpg') no-repeat center top #000 !important;
}
}
/* Page background-image portrait for iPad 3 */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
.introduction-section {
-webkit-background-size: 2024px 768px !important;
background-size: 2024px 768px !important;
background: url('background-image.jpg') no-repeat center top #000 !important;
}
}
/* Page background-image landscape for iPad 1/2 */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
.introduction-section {
background: url('background-image.jpg') no-repeat center top #000 !important;
-webkit-background-size: 2024px 768px !important;
background-size: 2024px 768px !important;
}
}
/* Page background-image portrait for iPad 1/2 */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
.introduction-section {
background: url('background-image.jpg') no-repeat center top #000 !important;
-webkit-background-size: 5024px 2024px !important;
background-size: 5024px 2024px !important;
}
}
As far as I'm aware, this method works on all IOS devices. Depending on your other page elements (header etc) you may need to adjust z-index for the &:before psuedo-element.
html {
height:100% !important;
}
body {
height:100%;
min-height:100%;
overflow-x:hidden;
overflow-y:auto;
// use your own class here //
&.body-class {
// #screen-xs-max is a Bootstrap3 variable name //
#media screen and (max-width:#screen-xs-max) {
min-height:100vh;
position:relative;
&:before {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
display:block;
content:"";
z-index:-1;
background-image:url(background-image.jpg);
background-position:center;
background-size:cover;
// Add this unless you compile your LESS using a preprocessor which adds vendor prefixes //
-webkit-background-size:cover;
}
}
}
}
I am trying to add a single custom icon to jqm and I'm doing the following:
<style>
.ui-icon-myicon {
background-image: url('images/myicon.png') !important;
}
</style>
Then in the footer...
<li>
News
</li>
My problem is that nothing is showing up.
I'm I forgetting something here?
WARNING: If you're using jQuery 1.4+, then you need to define these somewhat differently (notice :after below)
.ui-icon-myicon:after {
background-image: url("images/myicon.png");
background-size: 18px 18px;
}
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
.ui-icon-myicon:after {
background-image: url("images/myicon#2x.png");
background-size: 36px 36px;
}
...more HD icon rules go here...
}
Remove your class tag and use the identifiers built into JQM.
News
If you're wanting the icon to appear on a high pixel density device (i.e. an Apple Retina display) you need to include a second image twice the size. So in your CSS:
.ui-icon-myicon {
background-image: url("images/myicon.png");
}
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
.ui-icon-myicon {
/*this image should be sized at 36 x 36 */
background-image: url("images/myicon#2x.png");
background-size: 18px 18px;
}
...more HD icon rules go here...
}
I have faced the same issue, I have checked the inspect element and found that URL of my background custom icon path was wrong.
I have my custom icon in images folder so in CSS I have given
.ui-icon-myicon:after{
background-image:url("images/facebook.png");
/* Make your icon fit */
background-size:18px 18px;
}
The URL pointed previously to:Myproject/css/images/facebbok.png
Then I changed my CSS as:
.ui-icon-myicon:after{
background-image:url("../images/facebook.png");
/* Make your icon fit */
background-size:18px 18px;
}
After doing that I am able to see image