I'm using jQuery Mobile 1.6.4 version, developing a mobile site and i have a data-icon that's not showing at all only in iOS 5 (so far from the feedback).
For the header:
<div data-role="header" data-position="inline" data-theme="a">
<a data-rel="back" data-icon="arrow-l" data-ajax="true" data-theme="a" data-inline="true" title="Back">Back</a>
<h1>Where can I travel</h1>
This is the global icon css code that we are using:
.ui-icon,
.ui-icon-searchfield:after {
background: #FFFFFF /*{global-icon-color}*/;
background: transparent /*{global-icon-disc}*/;
background-image: url(http://code.jquery.com/mobile/latest/images/icons-18-black.png) /*{global-icon-set}*/;
background-repeat: no-repeat;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
Not only the header, but it's entire site that's using the global icon.
Any idea on this, guys?
Thanks!
The reason for the issue might be the retina display introduced in iphone 4S.To take care of retina display,we have to use icons with double the resolution.Try including this code in your css and see if there is any difference.
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dpi) {
.ui-icon,
.ui-icon-searchfield:after {
background-image: url(images/icons-36-black.png);
}
}
Related
I have light and dark mode versions of my logo, with light mode set as the default. When I view my email on iCloud.com's Mail app, the dark mode version of my logo, which is all white, displays. With the white background behind the logo, the logo becomes hidden. I should see the color version of my logo with the white background behind as shown below.
This issue ONLY appears with iCloud.com's Mail app using my laptop/desktop. It does NOT happen in the mobile iOS version (iPhone & iPad), nor does it happen in Gmail and Outlook.
The mso code below is for Outlook, so in my case I'm saying if it's not Outlook, load the div with the "dark-img" class. This is hidden by default until the CSS media query "dark" is preferred by the user. Then I show the white logo (.dark-img) and hide the color logo (.light-img).
#media (prefers-color-scheme: dark) {
/* Shows Dark Mode-Only Content, Like Images */
.dark-img {
display: block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
max-height: inherit !important;
max-width: inherit !important;
line-height: normal !important;
margin-top: 0px !important;
visibility: inherit !important;
}
/* Hides Light Mode-Only Content, Like Images */
.light-img {
display: none !important;
}
}
<img class="light-img" src="https://example.com/content/img/color-logo.png" height="36" alt="" style="text-align: left;margin: 0 auto;padding: 0;-ms-interpolation-mode: bicubic;vertical-align: middle;border: 0;line-height: 100%;width: auto;height: 36px;outline: none;text-decoration: none;"
border="0">
<!--[if !mso]><! -->
<div class="dark-img" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;" align="left">
<img src="https://example.com/content/img/white-logo.png" height="36" alt="" style="text-align: left;margin: 0 auto;padding: 0;-ms-interpolation-mode: bicubic;vertical-align: middle;border: 0;line-height: 100%;width: auto;height: 36px;outline: none;text-decoration: none;"
border="0">
</div>
<!--<![endif]-->
I am working on a web base app for my school with different versions of CSS for handheld, tablet and desktop. I am using media queries for this. The app is almost done and it works correctly on almost all browsers and android. The app looks awesome on Iphone/Ipad however buttons do not work making the app useless in these devices.
This is what I have:
//Source code
<div id="signinbutton" class="blue_button">Sign In</div>
//desktop.CSS
.blue_button {
width: 130px;
height: auto;
padding: 8px;
margin: 0% auto 20% auto;
background-image:url(../../images/bluebar5.png);
color: #FFF;
text-align: center;
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14pt;
font-weight: bolder;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
cursor: default;
}
.blue_button:hover {
opacity: 0.7;
}
//Handheld.css (this overwrites css on desktop)
.blue_button {
width: 260px;
font-size: 18pt;
background-image:url(../../images/bluebar6.png);
}
I tried applying the style to #signinbutton without success.
You should use a <button> or <input type="button"> tag instead of a div. While the <div> button functionality may work in some browsers, it can be a bit of a hack compared to the traditional button tags
You can wrap your div around <a> like this. It's perfectly valid with html5 now.
<div id="signinbutton" class="blue_button">Sign In</div>
You just need to adjust
Reference:
https://css-tricks.com/snippets/jquery/make-entire-div-clickable/
Try adding to the style of the div {cursor:pointer}.
I have a css menu that works well in most desktop browsers, but I have had issues get my drop down menu to work on IPad and Iphone. Here is the site in question: http://bakersfield.kernhigh.org/
I am quite new to css and javascript, so any help would be great.
Thanks
Currently, iOS does not support :hover, so your navigation will not unfold in iOS as it does on a desktop.
Have you considered jQuery Mobile? I would only suggest that if you were developing a seperate mobile version, though.
Otherwise, you could use this jquery (you must also include jQuery then):
$('nav li').bind('touchstart', function(){
$(this).addClass('hover');
}).bind('touchend', function(){
$(this).removeClass('hover');
});
This will add a class (hover) upon the touch, and remove it upon removal of the finger.
You will of course have to edit this for your needs. I only say this because you say you are new to javascript and I don;t want to confuse you.
Drop down menus can suck, especially making them work with touch screen devices since you can't 'hover' on a touchscreen. This is how I do my drop down menus, it is pure CSS, and I have tested it on chrome, ff, ie7+, safari, iPhone and multiple Android (of course, you will want to tweak colors and sizing):
HTML
<div id="navigation">
<ul id="nav">
<li><a href="index.html>Home</a></li>
<li>Drop Down <!--Notice didn't close the li yet->
<ul>
<li>Drop Down Item</li>
<li...../li>
etc...
</ul>
</li>
<li>Another Drop Down</li>
<ul>
...
</ul
</li>
</ul>
</div>
CSS:
#nav {
display: block;
text-align: center;
font-size: 1em;
position: relative;
height: 3em;
width: 950px;
margin-right: auto;
margin-left: auto;
list-style-type: none;
}
#nav li {
float: left;
display: block;
width: 75px;
height: 3em;
position: relative;
}
#nav li a {
text-decoration: none;
display: block;
height: 1em;
padding-top: 1em;
padding-bottom: 1em;
}
#nav li a:hover {
color: #990000;
background-color: #999999;
}
#nav li ul {
width: 100%;
display: none;
z-index: 9999;
position: absolute;
}
#nav li ul li {
display: block;
clear: both;
width: 100%;
height: 100%;
background-color: #B5BDC8;
}
#nav li:hover ul {
display: block;
}
The idea behind all of this is to create a list, then inside that other lists to create the drop down elements....
Then, from there, display only the primary list items to begin with, then show the drop down menu on hover (or in the case of a mobile device on click by making the main list item a link to "#" thus creating and active/hover state)...
The only issue is that by using display:none it isn't screen reader friendly, however I always include site navigation at the bottom that is screen reader friendly, and SEO friendly as well.
You can see an example of this in action on this website I am working on here
In general, drop down menu's such as this usually aren't good practice to have for mobile sites. This is because you can't really hover over a navigation item with your finger, and pressing an item could prove difficult without zooming in on the menu.
A solution is having different CSS styles for your navigation when being viewed on a mobile device. Here is a great resource for helping you convert your navigation to be more mobile friendly:
http://css-tricks.com/convert-menu-to-dropdown/
I am doing a iPhone app using Phonegap & also using jquery mobile. I want to set background image for data-role=page div. In this height of page is equal to screen & hence background is set to size of screen. But the page content length is much greater than screen & hence gray background is seen after image completes.
My question is whether there is a way so that we can keep the background image fixed & scroll or move only content of page & not background image.
Just to mention I have tried full size background jquery pluggin. Its working on Android but not on iOS.
Can anyone please help? Thanks in advance.
Ok, so what I did instead was to create a fixed element within the body element of the page.
So it would look like
<body>
<div id="background"></div>
...
</body>
And for the CSS I stated the following:
#background {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: url(images/bg-retina.jpg) 0 0 no-repeat fixed !important;
background-size:contain;
}
And this did the trick for me. Hopefully it helps (someone out there :P)
You looking for css background-attachment property.
div[data-role="page"]{
background-attachment: fixed;
}
Update:
background-attachment:fixed is supported from iOS 5, if you using older version of iOS you may consider usage of iScroll.
you can try this:
.ui-mobile
.ui-page-active{
display:block;
overflow:visible;
overflow-x:hidden;
}
works fine for me.
You can set your background image to the jQuery page:
.ui-page { background-image:url(../ios/sample~ipad.png);
background-repeat:no-repeat; background-position:center center;
background-attachment:scroll; background-size:100% 100%; }
Try with this, this work for me.
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: url(../Images/loginBackground.jpg) 0 0 fixed !important;
background-size:100% 100%;
background-repeat: no-repeat;
<body>
<div id="background"></div>
...
</body>
css:
#background {
background-image: url("/images/background.png");
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
width: 100%;
position: fixed;
background-position: 0 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media screen and (max-width: 480px) {
#background {
background-attachment: initial !important;
}
}
The problem is that iOS mobile devices have errors rendering simultaneously background-size:cover; and background-attachment:fixed; so you have to fix it by #media
Safari on the iPhone renders my {position: relative; top: 80px;} div 1px too low (all other browsers work fine) - is there any way to fix this via conditional css?
I would begin by this Comprehensive List of Browser-Specific CSS Hacks (and comprehensive it is!)
/* iPhone / mobile webkit */
#media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}