I want to give gradient to UIwebview's background which I load as:
[self.webView loadHTMLString:customHtml baseURL:nil];
but this html line does not give the effect, anyone knows how to do this better or can fix this css?
[customHtml appendString:[NSString stringWithFormat:#"%# ", #" <body style='background-color:#4b95bf; webkit-gradient(linear, left top, left bottom, from(#55aaee), to(#003366));'>"]];
The CSS is incorrect webkit-gradient() is not a property, rather it -webkit-gradient() is a value.
Rather the HTML should contain:
[customHtml appendString:[NSString stringWithFormat:#"%# ", #" <body style='background-color:#4b95bf; background-image:-webkit-gradient(linear, left top, left bottom, from(#55aaee), to(#003366));'>"]];
Note the - before the webkit-gradient and the background-image:
Related
In an iphone app i have a webview in which i want to preview some image downloaded from internet, my problem is that the some images are not viewed as to fit in the frame of webview, but most do. I think this is due to the fact that those images are too large. Am i doing something wrong? Please help
What i want is simply loading image in webview to fit the frame of webview. You can provide me some other code, but need to be regarding webview not imageview.
Here is the code i am using.
self.documentData = [NSData dataWithContentsOfURL:[NSURL URLWithString:#"http://www.folio3.com/corp/wp-content/uploads/2013/02/Entrance_A-3.jpg"]];
self.webView.scalesPageToFit = YES;
[self.webView loadData:self.documentData MIMEType:#"image/jpeg" textEncodingName:#"utf-8" baseURL:nil];
Plus here is the screenshot of output (clearly shows scroll indicators i-e image is not fit in webview's frame)
First Check and set frame of UIWebView in viewDidLoad: like bellow..
webView.frame = self.view.frame;
after use this Delegate method and set scalesPageToFit property like bellow..
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
webView.scalesPageToFit = YES;//set here
return YES;
}
This solution builds on the answer from Ammar Hasan. Instead of the original...
NSData *data = [NSData dataWithContentsOfURL:imageURL];
[self.webView loadData:data MIMEType:#"image/jpeg" textEncodingName:#"utf-8" baseURL:nil];
...you can do this:
NSString *photoWrapper = [NSString stringWithFormat:#"\
<html>\n\
<head>\n\
<meta name=\"viewport\" content=\"width=device-width\" />\n\
<style type=\"text/css\">\n\
body {\n\
margin: 0;\n\
padding: 0;\n\
}\n\
img {\n\
width: 100%%;\n\
}\n\
</style>\n\
</head>\n\
<body>\n\
<img src=\"%#\" />\n\
</body>\n\
</html>\
", URL];
[self.documentView loadHTMLString:photoWrapper baseURL:nil];
Now the image is scaled to the width of the web view, even when the web view is less than half the width of the image, which seems to be a limit that UIWebView imposes otherwise. The image can still be scaled by the user, which I wanted. You can override that by adding minimum-scale and maximum-scale to the viewport meta tag.
Try using html content for WebView, like the following code
<html>
<head>
<title>Title</title>
</head>
<body style='margin:0px; padding:0px;'>
<img src='<your_image_url>'
style='max-width:320px; max-height:460px;'
alt='Your_Image_Name'/>
</body>
</html>
To re-size image use CSS (cascaded style sheet) styling, play with the these style properties in image style attribute
max-width, min-width, width, max-height, min-height & height
Here is a problem. I am using a draggable image in UIWebview. The Source code: here:http://ios-blog.co.uk/tutorials/rich-text-editing-a-simple-start-part-7/
It simply disables the scrolling during drag and reenable it when the dragging is completed.
It works perfectly fine when UIWebview is first brought up and hereafter. As soon as the edited text length is longer than the screen. UIWebview ignores the scroll setting of its scrollview and re-enables the scrolling.
The way I disable the scroll view is using this:
webview.scrollview.scrollEnabled = NO;
Please tell me where I was wrong. Much appreciated.
This problem is caused because of the following wrap placed within the html file I loaded as a template editing section.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
<style type="text/css">
html, body {height: 100%;}
body {
margin: 0;
}
#wrap {
height: 100%;
width: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
#content
padding: 10px;
}
</style>
Any div wrapped with this block will always allow itself to be scrolled.
Deleted it and things turned out to function properly again!
may use
for(UIView *aView in webview.subviews){
if([aView isKindOfClass:[UIScrollView class]])
aView.scrollEnabled = NO;
}
this makes sure that any scrollview's scrolling is disabled.
I am using a UIWebView to render html content. I have done the following to enable the pinch zoom on the UIWebView:
self.webView.scalesPageToFit = YES;
This has enabled me to enable pinch zoom and scrolling over the content of the .html page being rendered in the UIWebView.
But, there is a limit upto which I zoom in. I have found in the following link regarding the level of zooming in available in the following link:
UIWebView Pinch Zoom
Is there a way we can zoom beyond the limit of 100%?
Is there a different approach we can follow?
EDIT: I have tried setting the minimumZoomScale and maximumZoomScale of the ScrollView property of the UIWebView object, but still, that has not worked out. What could I be missing?
try this using javascript using initial-scale=1.0; maximum-scale=5.0 here set your value
ViewDidLoad method
NSString *embedHTML = #"<html><body bgcolor=#EAEAEA><font face='Myriad Pro' size='3'><meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=5.0; user-scalable=YES'/>";
NSString *endHtml=#"</font></body></html>";
NSString *strDes=[NSString stringWithFormat:#"%#%#%#",embedHTML,YourWebviewDescription,endHtml];
[self.webViewObj loadHTMLString:strDes baseURL:nil];
NSString *string = [NSString stringWithFormat:#"document.body.style.zoom = %f;", fontSizeSlider.value]; // I used sliderControl and its value is 1 to 5.
[webViewObj stringByEvaluatingJavaScriptFromString:string];
When we change the slider position (drag the slider)
-(IBAction)sliderValueChanged:(UISlider*)sender
{
int font=(int)fontSizeSlider.value;
NSLog(#"font %d",font);
NSString *string = [NSString stringWithFormat:#"document.body.style.zoom = %f;", fontSizeSlider.value];
NSLog(#"string=%#",string);
[webViewObj stringByEvaluatingJavaScriptFromString:string];
}
I am trying to display the image in UIWebView and added uiwebiview into the uiscrollview as i wanna give the page controller effect:-
UIWebView *webview_obj=[[UIWebView alloc] initWithFrame:CGRectMake(xcorrd,0,200,320)];
NSString *html = [NSString stringWithFormat:#"<html><body><img src='%#' width='100%' height='100%'></body></html>",imageStr];
[webview_obj loadHTMLString:html baseURL:nil];
webview_obj.scalesPageToFit=YES;
[scroll_views addSubview:webview_obj];
My problem is :-
When i try to load the image of sizd 200X320. the image come in perfect size.but some white portion(approximate 30-40pixel) will added on the bottom and side of the webview.
and automatically the content size get increase and give the scroll.
I am uploading the screenshot for the output i am getting:-
Black potion in the webview part.and white is somehting which get automatically added to the image..
the size of the image i am using is :- 200 :- with and 320 :- height
Thanks & Regards
shweta
Added CSS STYLE in the HEAD tag..
NSString *html = [NSString stringWithFormat:#"<html><head><style>body{padding:0; margin:0;}</style></head><body><img src='%#' width='100%' height='100%'></body></html>",imageStr];
I'm struggling to get web page with a fixed background image, so the image does not move when page is scrolled in a UIWebView.
What I've discovered is: background-attachment: fixed does not work in iOS4 (using 4.2.1).
To double-check I've prepared a page with code snippet (below) inside <head> section and the page works as expected under Safari and Firefox on Mac, but fails to do so in iPhone's Safari...
What do you suggest as a workaround for achieving the expected results? I've made my UIWebView translucent and added UIImageView, so I can see "fixed background image" through translucent page. Unfortunately, I can see UIWebView borders when I scroll over its end/beginning edges.
Is there any official Apple resource/web page stating that background-attachment: fixed is not implemented for iOS4?
Cheers!
P.S. The code snippet referred above:
<style type="text/css">
body {
background: #ffffff url('image.jpg') fixed no-repeat;
background-attachment: fixed;
}
</style>
I am not sure what is going on with the CSS and have not had a chance to check it out for myself but I know when I was trying to get rid of the shadows from a UIWebView I used this bit of code:
NSArray *sv = [NSArray arrayWithArray:[myWebView subviews]];
UIScrollView *webScroller = (UIScrollView *)[sv objectAtIndex:0];
NSArray *wsv = [NSArray arrayWithArray:[webScroller subviews]];
[[wsv objectAtIndex:6] setHidden:YES];
[[wsv objectAtIndex:7] setHidden:YES];
[[wsv objectAtIndex:8] setHidden:YES];
[[wsv objectAtIndex:9] setHidden:YES];
and it got rid of the shadows. I thought I got the answer off of a SO question but when I looked for it this is the only one that came up.
It passed App Store inspection.
Use a div for the background with a negative z-index:
<head>
<style>
#background {
background: url("background.jpg") no-repeat;
position: fixed;
top: 0;
left: 0;
background-size: 320px 480px;
width: 320px;
height: 480px;
z-index: -1;
}
</style>
</head>
<body>
<div id="background"></div>
This body text appears over the fixed background and scrolls.
</body>
Works on iOS 5 and iOS 6.