I'm trying fade out the bottom of the UIWebView in my detailView. It's more like fading last 20-40 px. I'm using CSSTricks code for "ReadMoreFade" (link). My simplified version is pasted below.
My problem is when I start scrolling in my UIWebView, faded area stays there like a block. I'm attaching a screenshot that shows this. Any suggestions or hints? Thank you.
SCREENSHOT:
http://i51.tinypic.com/2rmxsfp.png
<!DOCTYPE html>
<html>
<head>
<title>Fade bottom</title>
<style>
body{background:#FFF}
p {
color:#000;
margin:0 auto;
text-align:justify;
text-indent:30px;
width:600px;
}
#fadeBottom {
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,0)),color-stop(1, rgba(255,255,255,0.7)));
bottom:0;
height:50px;
left:0;
position:fixed;
width:100%;
}
</style>
</head>
<body>
<p>Some long text here. Lorem ipsum?</p>
<div id="fadeBottom"></div>
</body>
</html>
For this situation, I'd just make a white image with a transparent gradient and overlay it on top of that UIWebView as needed. It's going to be a lot quicker than trying to debug browser stuff...
Whether you use an image or a CSS3 gradient, I'm afraid position:fixed doesn't work on iOS.
Related
Is there any way I can change the UI of DartPad from Dark to Light or vice-versa?
I didn't find any button on the DartPad to do so.
There is no lightmode for DartPad, even though there are some requests.
Also see this issue.
I've just installed the chrome extension 'Invert!' which worked. Not wonderful colouring but better than black for me.
It seems that they support specifying a theme when embedding via iframe.
So if you want light theme, you can create local dartpad.html (or whatever .html) file and place this code into it:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
iframe {
display: block;
border: none;
height: 100vh;
width: 100vw;
}
</style>
</head>
<body>
<iframe src="https://dartpad.dev/embed-dart.html?theme=light"></iframe>
</body>
</html>
I also placed the same file to GitHub Pages, so you just can use this link: https://ivanzoid.github.io/dartpad-light/
I have a webpage that I am now making work on an ipod touch. The webpage container is 480 pixels wide (450+30 padding) and then it has two divs, each with a single line of text.
When I have just one div of text, then the text appears on a single line, just like on my computer. However, when I add the second div, the iPod touch decides to make the text much bigger (for both divs), such that the text goes onto the next line.
How do I ensure that the text remains the same (smaller) size, no matter how many divs I add? I would like it to the same as on my computer. The user must be able to zoom.
css:
body{
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:15px;
margin:0px;
}
.container{
padding:15px 15px 1px 15px;
width:450px;
background:white;
overflow:hidden;
}
.quote{
padding-bottom:3px;
font-style:italic;
text-align:center;
width:450px;
overflow:hidden;
}
html:
<meta id="meta" name="viewport" content="width=device-width; initial-scale=1.0" />
<body >
<div class= "container">
<div class = "quote">"I want to be on one line and so does the other line. Even if two."</div>
<div class = "quote">"I want to be on one line and so does the other line. Even if two."</div>
</div>
</body>
I added the following to class container and now it works. Is there any reason NOT to do this? I didn't add it to body because I don't really know what other affects it might have.
-webkit-text-size-adjust: 100%;
i found out the right answer (not to adjust text size on rotation !)
Preserve HTML font-size when iPhone orientation changes from portrait to landscape
but being very naive to css how to use it inline ?
i used as follows, but it did not work
<html>
<head>
</head>
<body style ="-webkit-text-size-adjust: none;">
<font face="Arial" size="9";>< a href="mailto:subject= mysub&attachment=myatt.doc"> mail this< /a>< br/>< b>< i>Header< /i>< /b>< br/></ font>
</body>
</html>
The example you point to is a style on the html tag, not the body tag as you have done. I suggest you try:
<html style="-webkit-text-size-adjust:none;">
and see how that works. Or you can just put the style into your head section like so:
<head>
<style type="text/css">
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
</style>
</head>
Interesting trick, I haven't actually ever done this myself.
http://api.jquery.com/animate/
On this page, they give a demo where they have a gray div move across the screen with the click of a button.
Notice that if you click the right button enough times and the DIV block reaches the end of the container it creates horizontal and vertical scrollbars.
I downloaded and modified the code to get rid of the overflow property and what I have so far works BEAUTIFULLY in desktop browsers.
However, Safari on the iPhone handles things a little bit differently. For some reason, Safari completely ignores the overflow property and instead expands the browser window to show you where the block moved to.
I don't want you to be able to see the block. I want it hidden until you hit button again.
Anyone know what the heck is going on?
Here is a pic of the issue:
Here is my code:
div {
position:absolute;
background-color:#abc;
width:100%;
height:100%;
margin:0px;
max-width:100%;
}
body {
margin:0px;
padding:0px;
}
* {
overflow:hidden;
clip:rect(auto, auto, auto, auto);
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
<script>
$("#right").click(function(){
$(".block").animate({"left": "+=110%"}, "medium");
});
$("#left").click(function(){
$(".block").animate({"left": "-=110%"}, "medium");
});
</script>
Even though I have moved the DIV block off the screen and I have overflow:hidden as a global style, the iPhone will make room for it in the browser window to show you where the DIV has moved to. ANNOYING!
Thank you in advance!
Not completely sure I understand what you want to accomplish here. But if you want to make the gray box disappear as it leaves towards the end of the document, then I would suggest that you wrap the div inside another div, and set the width of the wrapping element to 100% and overflow: hidden;
Like this:
<div class="wrapper">
<div class="block"></div>
</div>
Also add the appropriate styling:
<style type="text/css">
...
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
}
</style>
Note that you need to absolute position the wrapper as well, otherwise the gray block will still be visible outside it. You'll also need to give it some height (I used 100% in my example) or it will be 0px high (due to the absolute positioned child) and nothing will be visible.
Hope that helps.
Alternative to
overflow:hidden
HTML:/<div class="clear"></div>
CSS:.clear {clear:both;}
The simple HTML below displays differently in Firefox and WebKit-based browsers (I checked in Safari, Chrome and iPhone).
In Firefox both border and text have the same color (#880000), but in Safari the text gets a bit lighter (as if it had some transparency applied to it).
Can I somehow fix this (remove this transparency in Safari)?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
input:disabled{
border:solid 1px #880000;
background-color:#ffffff;
color:#880000;
}
</style>
</head>
<body>
<form action="">
<input type="text" value="disabled input box" disabled="disabled"/>
</form>
</body>
</html>
-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */
Phone and Tablet webkit browsers (Safari and Chrome) and desktop IE have a number of default changes to disabled form elements that you'll need to override if you want to style disabled inputs.
-webkit-text-fill-color:#880000; /* Override iOS / Android font color change */
-webkit-opacity:1; /* Override iOS opacity change affecting text & background color */
color:#880000; /* Override IE font color change */
UPDATED 2021:
Combining ideas from this page into a "set and forget" reset that makes all disabled text the same as normal text.
input:disabled, textarea:disabled, input:disabled::placeholder, textarea:disabled::placeholder {
-webkit-text-fill-color: currentcolor; /* 1. sets text fill to current `color` for safari */
opacity: 1; /* 2. correct opacity on iOS */
}
it's an interesting question and I've tried plenty of overrides to see if I can get it going, but nothing's working. Modern browsers actually use their own style sheets to tell elements how to display, so maybe if you can sniff out Chrome's stylesheet you can see what styles they're forcing on to it. I'll be very interested in the result and if you don't have one I'll spend a little time myself looking for it later when I have some time to waste.
FYI,
opacity: 1!important;
doesn't override it, so I'm not sure it's opacity.
You could change color to #440000 just for Safari, but IMHO the best solution would be not to change looks of button at all. This way, in every browser on every platform, it will look just like users expect it to.
for #ryan
I wanted my disabled input box to look like a normal one. This is the only thing that would work in Safari Mobile.
-webkit-text-fill-color: rgba(0, 0, 0, 1);
-webkit-opacity: 1;
background: white;
You can use the readonly attribute instead of the disabled attribute, but then you will need to add a class because there isn't a pseudo-class input:readonly.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
button.readonly{
border:solid 1px #880000;
background-color:#ffffff;
color:#880000;
}
</style>
</head>
<body>
<form action="">
<button type="button" readonly="readonly" class="readonly">disabled input box</button>
</form>
</body>
</html>
Beware that a disabled input and readonly input aren't the same.
A readonly input can have focus, and will send values on submit. Look at w3.org
If you want to fix the problem for all the disabled inputs, you can define -webkit-text-fill-color to currentcolor, so the color property of the input will be used.
input[disabled] {
-webkit-text-fill-color: currentcolor;
}
See that fiddle on Safari
https://jsfiddle.net/u549yk87/3/
This question is very old but I thought that I would post an updated webkit solution.
Just use the following CSS:
input::-webkit-input-placeholder {
color: #880000;
}
Can you use a button instead of an input?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
button:disabled{
border:solid 1px #880000;
background-color:#ffffff;
color:#880000;
}
</style>
</head>
<body>
<form action="">
<button type="button" disabled="disabled">disabled input box</button>
</form>
</body>
</html>