I have parsed html content to display in a webview.
There are phone numbers which are detected by webview by default, but those links are displayed in blue color, I want to change it to white color, how is it possible?
If anyone know please tell me..
Thanks in advance.
According to this question all you need to do is to set the a (hyperlink) CSS properties. See the answer of David Thomas. Specifically, he proposes this solution for just phone URLs:
a[href^=tel] { /* css */ }
You can change style color of your html content on server side or in client side.
For doing it from client side you must get first the elementId or class of your html content (you can do it from chrome with right mouse click on the link and selecting inspect element)
Then on your uiwebview (once it finished being loaded) you execute javascript for changing element color:
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
NSString *javascripString = [NSString stringWithFormat:#"document.getElementById(\"linkId\").style.color=\"white\";", m_studyId];
[uiwebview stringByEvaluatingJavaScriptFromString:javascripString];
}
The iPhone uses the current color setting in the a:link property. It uses that value even if the phone number is plain text and not enclosed with the hyperlink tag. If no CSS definition is set, iPhone uses the default. For those who may not know, you can set the values like this.
<head>
<style>
a:link {
color:#FFCC14;
text-decoration:underline;
}
</style>
</head>
If you do not have a CSS style setting for hyperlink then add it or Change the color to the color that works best for your webpage.
Try DarkDust solution. From client side it would be something like that:
- (void)webViewDidFinishLoad:(UIWebView *)webView{
NSString *javascripString = [NSString stringWithFormat:#"document.createElement('meta');meta.name='format-detection';meta.content='telephone=no';document.getElementsByTagName('head')[0].appendChild(meta);"];
[webView stringByEvaluatingJavaScriptFromString:javascripString];
}
Related
I defined CSS transition rules in my svg. It's something like:
#mark #bg {
transition: fill 200ms;
fill: #245575;
}
#mark:hover #bg {
fill: #ff5c26;
}
When I drag it into browser's blank page and test it, the transition works fine. But if I embed the svg into my website using <img src="images/mark.svg" alt="">, the transition doesn't work.
Did I miss something?
Images either via <img> tags of via the CSS background-image image property cannot be interactive and have other restrictions in order to maintain user's privacy and security.
If you ask yourself "could I do this if the image was a .png or a .gif?" then you'll be on the right lines. Browsers have deliberately chosen to keep to the same mental model for SVG files so that the capability of images is easy to understand.
If you want transitions to work you'll need to use an <object> or <iframe> tag or embed the SVG inline in the html document.
I'm having trouble displaying content properly in a splitview application. In the detail view I have a webview and I'm loading locally saved html files. However the files don't display properly - they are slightly zoomed in and missing detail on the left and right. Double taping them zooms them out and they display correctly. I have scaletofitpages=YES set.
Any advice?
Well, if i'm understanding you correctly, you can use auto layout.. it will fit your content from left and right.
to set the font size you must edit your html content add "css style" to them...
// Get result into string format
NSString *htmlData = [objSQLiteProtocol getDatabaseResults:fileNameToRead];
// reduce the size of font to set in iPad
htmlData = [htmlData stringByReplacingOccurrencesOfString:#"25pt" withString:#"12pt"];
[moreWebView loadHTMLString:htmlData baseURL:nil];
moreWebView.scalesPageToFit = YES;
I have applied body-background color(ex:blue) to my page. But when i open this page in tablets, mobile devices the color should change to orange color. when i resize my pc browser window the colors wont be change. Is it possible?
You can change the width by changing the CSS tag; but that changes across all devices.
#media only screen and (max-device-width: 1440px) {
To determine if its a tablet or what device the user is using specifically you can use Javascript to determine the device. Then load CSS accordingly.
You can look at the code here; [link]http://davidwalsh.name/detect-ipad[/link]
The problem with that is there is thousands of devices out there. So you'll have to check for each device.
// For use within normal web clients
var isiPad = navigator.userAgent.match(/iPad/i) != null;
// For use within iPad developer UIWebView
// Thanks to Andrew Hedges!
var ua = navigator.userAgent;
var isiPad = /iPad/i.test(ua) || /iPhone OS 3_1_2/i.test(ua) || /iPhone OS 3_2_2/i.test(ua);
Have you attempted a CSS3 Media Query; as posted below?
/*Common Tablet Width*/
#media only screen and (max-device-width: 1024px) {
body{
background-color:blue;
}
}
How can i print a webpage exactly how it looks like -- I mean with background images and colors?
(In IE)
Best
Zeesahn
In IE this is configurable from the browser. Check this tutorial for the details. Though I suspect you are looking for a css solution. I have not been able to accomplish this in a consistent fashion.
This is probably the best solution I have come across. It involves list-style... rules to attempt to get the job done. good luck.
Edit - pulled from web-graphics.com
#ti\tle { /* 6. */
display: list-item; /* 1. */
list-style-image: url(banner.jpg); /* 2. */
list-style-position: inside; /* 3. */
letter-spacing: -1000em; /* 4. */
font-size: 1pt; /* 5. */
color: #fff; /* 5. */
}
Some annotations:
We give our h1 the characteristics of a list-item.
We pretend our banner image is a list-style-image.
Firefox wants you to put the image inside.
We make the text disappear into a black hole by means of Malarkey's Image Replacement (MIR).
As MIR doesn't work in Opera, we set the font-size to 1pt and make the text white. This works fine with Opera's default print
settings. Other image replacement techniques rely on moving or
hiding mechanisms, all of which would also hide our image. Hence
small, white text.
As list-style-image is not supported in IE5 and IE5.5, we exclude these browsers with a simple escaping hack.
That's all. It works in IE6, Firefox 1.0 and 1.5 and Opera 8.5 - don't know about Safari, but I expect no problems. Konqueror 3.5 shows a black "H" just below the banner - however, the
By default, Internet Explorer (and some other browsers too, like Opera or Maxthon for instance) prints a webpage without any background images or colors.
To print a webpage with all the background images or colors,
open Internet Explorer and go to Tools->Internet Options->Advanced.
In the Settings window, you will need to scroll down until you find the Printing->Print background colors and images option and check it. After you did that press Apply, then Ok and this should solve the printing problem.
In short, try using a print stylesheet.
Check this question for more info:
How can I print background images in FF or IE?
// In your asp file, create a vbscript variable named prnMode and set it
// to true when in print mode. Then surround your entire tag with this
<body>
<% If prnMode Then %>
<div style="visibility: visible;">
<% End If %>
... your web page goes here
<% If prnMode Then %>
</div>
<% End If %>
</body>
// I did not actually print, but print preview now displays colors and imgs.
Put images in HTML not in CSS
HTML
<img src="../some_images.jpg" />
not
background-images:url(../some_images.jpg);
Hey guys I'm currently having trouble with my CSS linking. Basically I want the colour of my links to change when I hover over them, and click on them and such. But for some reason it is not working when I view it on a browser. Below is my HTML code and my CSS code, they are seperate files and are linked togather. Thanks in advance. (I apologise if the codes are not appearing correctly but it is all there)
EDIT: Don't worry its fixed now :D thanks for the help
from what I see, you don't have a:hover,a:vistied, or a:active defined anywhere, which is what controls the behavior you're looking for.
Are you coding by hand or using Dreamweaver as a WYSIWYG?
NOTE: This could be because the files aren't formatted well in your question, so Markdown could have dropped some characters from the display.
From what I can see, the CSS file isn't written correctly. I'm going to give one example for you which fits for the whole file:
content {
width: 510px;
float: left;
}
This snippet above looks for the <content> tag in the HTML, and when it finds that tag, it will give it a width of 510px and floats it to the left. The problem here is that there are no <content> tags in your HTML page OR in HTML 4.01 itself. What you need to do is change it to this:
.content {
width: 510px;
float: left;
}
By adding the '.' before 'content' in the CSS, it changes 'content' from <content> to finding a tag that has class="content" as an attribute.
Also, to get the <a> tags to change on hover, etc, use the pseudo-elements (pseudo-attributes?) of :hover, :active, and :visited, for when a user hovers over a link, clicks on a link, and has previously visited a link, respectively.
Example:
a {
color: blue;
}
a:hover {
color: red;
}
In this example, a link will display as blue unless the user has their mouse on the link.