Centering UIWebView content with padding - iphone

I have a UIView which loads a html5 banner. I get padding on each side of the banner which is to be expected since the banners width is shorter than the UIWebView. However.. The padding on each side is a lot bigger than I should get.
I just want the banner to be centered if the banner is shorter than the UIWebView.
Instead of looking like this: (Where X is banner and O is padding)
|OOXXXXXXOO|
It looks like this:
|OOOOXXXXXX|
Here, if I enable scrolling I can center it like the first example.
How do I fix this?
Code
UITableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:bannerIdentifier];
if (!cell) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:#"bannerCell"];
UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, cell.contentView.bounds.size.width, cell.contentView.bounds.size.height)];
webView.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleLeftMargin|UIViewAutoresizingFlexibleRightMargin;
webView.userInteractionEnabled = YES;
webView.backgroundColor = [UIColor clearColor];
webView.opaque = NO;
webView.delegate = self;
webView.scrollView.bounces = NO;
webView.scrollView.scrollEnabled = NO;
webView.scalesPageToFit = YES;
NSURL *url = [NSURL URLWithString:#"http://example.com/page.html"];
NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
[webView loadRequest:requestObj];
[cell.contentView addSubview:webView];
}

The thing is UIWebView shows HTML, that means, that if your HTML has to be rendered as you wish - the only correct way to achieve this is to fix loaded HTML (and or css).
You can do it in several ways:
If you have access to the HTML data on server you could tweak it to be rendered correctly in UIWebView.
If you don't have access to the HTML data on server you could use stringByEvaluatingJavaScriptFromString: and fix desired elements in DOM.

You can use stringByEvaluatingJavaScriptFromString: to query the DOM for the width of the desired element using Javascript. You can then resize the webview to fit that size.
This gives you the width:
document.getElementById('YOURID').offsetWidth;

Related

UIWebview scalesPageToFit doesn't work perfectly

I'm using a small UIWebView, and scalesPageToFit doesn't work correctly for some url. (look like it cannot resize at 100%. (but if i zoom out the webview manually(gesture), it work!
view = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200.0f, 400.0f)];
webViewT = [[UIWebView alloc] initWithFrame:view.bounds];
webViewT.delegate = self;
webViewT.scalesPageToFit = YES;
NSURL* url = [NSURL URLWithString:#"http://www.google.com/"];
[webViewT loadRequest:[NSURLRequest requestWithURL:url]];
Please note that i've found a solution:(below work, BUT I have the time to see a "resize"
- (void) webViewDidFinishLoad:(UIWebView *)webViewT {
if ([theWebView respondsToSelector:#selector(scrollView)])
{
UIScrollView *scroll=[theWebView scrollView];
float zoom=theWebView.bounds.size.width/scroll.contentSize.width;
[scroll setZoomScale:zoom animated:NO];
}
}
Any idea? Thanks!
In Some of cases this types of problem Generated. At that time java script use for control of Zoom of UIWebView, use following code.
NSString *jsCommand = [NSString stringWithFormat:#"document.body.style.zoom = 1.5;"];
[webLookupView stringByEvaluatingJavaScriptFromString:jsCommand];
Other way is
Refer this Answer UIWebView does not scale content to fit

Load UIImage form NSData in UIWebView and center it

So I basically get an NSData of UIImage and I use a UIWebView to display it. I do it that way:
[self.view addSubview:webView];
webView.delegate = self;
webView.scalesPageToFit = YES;
webView.backgroundColor = [UIColor darkGrayColor];
I then load the picture into it like this:
NSData *image02Data = attachmentToLoad.attachment_data;
[webView loadData:image02Data MIMEType:#"image/jpg" textEncodingName:nil baseURL:nil];
And I get a result that isn't exactly what I want:
As you can see the image leaves a white bottom line down at the bottom of the UIWebView. How can I make the size of the UIWebView to be equal to that of the image?
Have you seen this post?
Click me
I think it is exactly you want

UIWebview fitting to screen but not zooming in iphone programming

I am working on uiwebview and it is supposed to load dynamic urls coming from the server.
i want to show it fitting to the iPhone screen size in my iPhone application and also it should zoom in and out.
Code i am using for it is:
m_pView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 430)];
m_pView.backgroundColor = [UIColor blackColor];
self.view = m_pView;
UIWebView *aWebView = [[[UIWebView alloc] initWithFrame:CGRectMake(0, 1, 320, 400)] autorelease];
aWebView.dataDetectorTypes = UIDataDetectorTypeNone;
aWebView.delegate = self;
NSString* url = [NSString stringWithFormat: #"http://%#",[m_URL stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]];
aWebView.scalesPageToFit = YES;
aWebView.autoresizesSubviews = YES;
aWebView.frame = self.view.bounds;
NSURL *aURL = [NSURL URLWithString: url];
NSURLRequest *aRequest = [NSURLRequest requestWithURL:aURL];
//load the index.html file into the web view.
[aWebView loadRequest:aRequest];
[m_pView addSubview:aWebView];
self.m_webView = aWebView;
Please let me know how to achieve webview fitting to the iphone screen size without loosing zoom in/out feature.
Thanks in advance.
Use following code
yourWEbView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
yourWEbView.contentMode = UIViewContentModeScaleAspectFit;
problem might be in this line:
aWebView.frame = self.view.bounds;
Why you're setting bounds of self.view while adding webview to m_pView?

How make webview with Rounded Rectangle corners?

I want my webview with Rounded Rectangle Corners.
Any help ?
Here's how:
//first, you
#import <QuartzCore/QuartzCore.h>
//.....
//In your method, where you add your UIWebView, do:
UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(50, 220, 200, 100)];
//The rounded corner part:
webView.layer.cornerRadius = 5;
webView.clipsToBounds = YES;
//Load a web site:
[webView loadRequest: [NSURLRequest requestWithURL:
[NSURL URLWithString:#"http://www.stackoverflow.com/"]]];
//yourView is the UIView's superview, might be the window, or anything you want
[yourView addSubview: webView];
[webView release];
This uses the QuartzCore framework, and it only works on >= OS 3.0
you can add some mask image over your webView. in such way you can change form of the visible part of your webView

inserting various views into UIScrollView

we're trying to implement an article detail view for an RSS-like application. The windows has a UIScrollView that contains a UITextView (which is the title), a UIButton (which opens a gallery), and a UIWebView (with the body). The idea is that all these elements scroll together...
The problem is that whenever we have a body over 1000px tall, everything below that mark is truncated. We've heard that this is because that is the maximum height for a view, and since the Scroll is handled by the top UIScrollView, there is no way to see what's further down.
does anybody know a way around this?
Thanks!
---- update 1 ----
We've broken up the body into 900px-high chunks, but all webviews after the first one show no content...
UIScrollView *scroll=[[UIScrollView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
[scroll setBackgroundColor:[UIColor whiteColor]];
[scroll setCanCancelContentTouches:NO];
scroll.clipsToBounds = NO;
scroll.indicatorStyle = UIScrollViewIndicatorStyleBlack;
//Título
CGRect tit =CGRectMake(5.0f, 0.0f, 315.f, 50.0f);
UILabel *titulo=[[UILabel alloc] initWithFrame:tit];
titulo.text=[itemNew objectForKey:#"titulo"];
titulo.numberOfLines = 2;
titulo.font=[UIFont fontWithName:#"Helvetica" size:16.0f];
titulo.textColor=[self getColor:#"00336E"];
[scroll addSubview:titulo];
[titulo release];
//Entradilla
float altura_entradilla=calcLabel([itemNew objectForKey:#"entradilla"], [UIFont boldSystemFontOfSize:16], 50, 315.0f);
CGRect ent_frame = CGRectMake(5.0f, 50.0f, 315.0f,altura_entradilla );
UILabel *entradilla=[[UILabel alloc] initWithFrame:ent_frame];
entradilla.text=[itemNew objectForKey:#"entradilla"];
entradilla.numberOfLines=4;
entradilla.font=[UIFont fontWithName:#"Helvetica" size:17.0f];
entradilla.textColor=[UIColor blackColor];
[scroll addSubview:entradilla];
[entradilla release];
NSString *cuerpo=[itemNew objectForKey:#"cuerpo"];
[scroll setContentSize:CGSizeMake(320.0f,40000.0f)];
[scroll setScrollEnabled:YES];
webView = [[UIWebView alloc] initWithFrame:CGRectMake(5.0f, altura_entradilla+50, 315.0f, 900)];
[webView loadHTMLString:cuerpo baseURL: [NSURL fileURLWithPath:[[NSBundle mainBundle] resourcePath]]];
webView.detectsPhoneNumbers=NO;
webView.delegate=self;
[webView setScalesPageToFit:NO];
[scroll addSubview:webView];
webView.backgroundColor=[UIColor blackColor];
webView.userInteractionEnabled=NO;
[webView release];
if (altura_webview>900) {
UIWebView *webView2 = [[UIWebView alloc] initWithFrame:CGRectMake(5.0f, altura_entradilla+50+900, 315.0f, 900)];
[webView2 loadHTMLString:cuerpo baseURL: [NSURL fileURLWithPath:[[NSBundle mainBundle] resourcePath]]];
webView2.detectsPhoneNumbers=NO;
webView2.delegate=self;
[webView2 setScalesPageToFit:NO];
[scroll addSubview:webView2];
webView2.backgroundColor=[UIColor yellowColor];
webView2.userInteractionEnabled=NO;
[webView2 release];
}
self.view=scroll;
check the contentSize on your UIScrollview.
I've not heard of a 1000 point limit (or seen it in bigger views I have in our app).
Use more then one UIWebViews as body
Are you using loadHTMLString to add content to webView?
Try loadRequest method. There is no problem with 1024px when you are using loadRequest
I had the same problem and I read and tried a few tips of this thread, but neither loading the content via loadHTMLString, nor using [_webView setNeedsDisplay] did changed anything for me. (I should try loading more UIWebViews, but I'm lazy:)
I used a quick and dirty fix using the scrollview delegate, which did the trick:
#interface ArticleViewController : UIViewController <UIScrollViewDelegate>
then fire up the view in init
_scrollView = [[UIScrollView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
self.view = _scrollView;
_scrollView.delegate = self;
and use the delgate's method to redraw the webView as it shows up
- (void) scrollViewDidEndDragging: (UIScrollView *) scrollView willDecelerate: (BOOL) willDecelerate
{
CGRect frame = _webView.frame;
frame.size = CGSizeMake(frame.size.width, frame.size.height + 1);
_webView.frame = frame;
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
CGRect frame = _webView.frame;
frame.size = CGSizeMake(frame.size.width, frame.size.height + 1);
_webView.frame = frame;
}
When you say :
We've tried breaking the body into several 900px-high webViews, but the second, third, etc. get blanked out (you can see the backgroundColor, but not the content)...
It seems to me that other persons have met this issue (I can't find the posts again), in fact UIWebviews seems to use only one HTML Interpreter. Meaning that if one UIWebView is loading HTML Content, others UIWebView won't load anything.
To solve that, you need to use UIWebView's delegate methods : didFinishLoad, and start loading the other webviews after that.
Please be aware that I'm not sure about what I'm saying, because I did not try it myself, but it might be a solution.
The post marked as the answer has a link in it's last comment. That is the solution to this problem. I had this very same problem, and invoking [[webView _documentView] _webCoreNeedsDisplay]; in those 2 delegates solved it. Cheers.