UIWebview content according to webview frame

I want to disable the scroll inside UIWebview and need to display content according to the width and height of UIWebview. If the content is large enough to be displayed on the page, it should display ... at the end of the text like that in UILabel.

The flipboard application has done it properly where they are displaying a part of the content on the first page and as we pinch zoom it, more content is shown on the view according to the height and width.

How this can be achieved. Any help on this is appreciated.开发者_JAVA百科

Sample:

I am loading this on iPad

UIWebView *mWebView = [[UIWebView alloc] initWithFrame:CGRectMake(100, 100, 500, 730)];
mWebView.backgroundColor=[UIColor greenColor];
mWebView.userInteractionEnabled=YES;
mWebView.autoresizingMask=YES;
mWebView.delegate = self;
for (id subview in mWebView.subviews)
    if ([[subview class] isSubclassOfClass: [UIScrollView class]])
        ((UIScrollView *)subview).bounces = NO;
for (id subview in mWebView.subviews)
    if ([[subview class] isSubclassOfClass: [UIScrollView class]])
        ((UIScrollView *)subview).showsVerticalScrollIndicator = NO;
for (id subview in mWebView.subviews)
    if ([[subview class] isSubclassOfClass: [UIScrollView class]])
        ((UIScrollView *)subview).scrollEnabled= NO;
[self.view addSubview:mWebView];
[mWebView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://mobile.washingtonpost.com/c.jsp;jsessionid=E6B119C6EF5A6274030E7B3A9F97D374?item=http%3a%2f%2fwww.washingtonpost.com%2fpolitics%2fobama-gop-leaders-said-to-discuss-new-debt-plan%2f2011%2f07%2f21%2fgIQAT81BSI_mobile.mobile&cid=578815"]]];
[mWebView release];

I want to show only that much content that can be displayed on the frame 500,750. As you can see in the screenshot the last line is cut.

You can get the height of webView by using UIWebViewDelegate. in method

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    height = [[webView stringByEvaluatingJavaScriptFromString:@"document.body.offsetHeight"] floatValue];
    webView.frame = CGRectMake(0,0,320,(height + 30));
}

then set the webView frame size using that code.

Flipboard reformats data before presenting it. To get the same effect you will need to do the same. i.e. Read in the HTML, separate out the components and present it in your own format either via a UIWebview with HTML & CSS or in UIKIT.

UIWebviews don't support overflow with elipsis natively. If you go down the CSS route check out the overflow property it supports elipsis.

You can easily done using javascript. Here i can give you an idea rest is you have to implement. place any tag lets say div tag in your html at appropriate place and put some info pinch here for continue reading once the user click on that load the next div which will have another page info. it like open the box when we really want to see. you can easily do it with javascript.

To disable the scroll of UIWebView :

mWebView = [[UIWebView alloc] initWithFrame:CGRectMake(20, 0, 300, 390)];
mWebView.backgroundColor=[UIColor greenColor];
mWebView.userInteractionEnabled=YES;
mWebView.autoresizingMask=YES;
mWebView.delegate = self;
for (id subview in mWebView.subviews)
    if ([[subview class] isSubclassOfClass: [UIScrollView class]])
        ((UIScrollView *)subview).bounces = NO;
for (id subview in mWebView.subviews)
    if ([[subview class] isSubclassOfClass: [UIScrollView class]])
        ((UIScrollView *)subview).showsVerticalScrollIndicator = NO;
for (id subview in mWebView.subviews)
    if ([[subview class] isSubclassOfClass: [UIScrollView class]])
        ((UIScrollView *)subview).scrollEnabled= NO;

Then add this UIWebView as subview your main UIView or wherever u want.

Whenever the data is reloaded the following delegate method of UIWebView is called. So implement the dynamic resizing code inside that.

- (void)webViewDidFinishLoad:(UIWebView *)webview{
   float webHeight;
   CGRect frame = webview.frame;
   frame.size.height = 1;
   webview.frame = frame;
   CGSize fittingSize = [webview sizeThatFits:CGSizeZero];
   frame.size = fittingSize;
   webview.frame = frame;
   webHeight=fittingSize.height;
   rowHt=webHeight;
   [aTableView reloadData];
}

I have added the UIWebView inside the tableview. So I am calling the reloadData for the tableview and passing the webHeight (new webview height)to the table delegate to the set the row height.Hope this helps.