I am trying with no luck to create webview with transparent background.
Any chance to achieve that?
I have tried to set style to the webview element style="background:transparent;",
Also maked sure that the body of the website loaded in the webview is also transparent.
Reading the docs can sometimes be helpful. Not reading the docs is unhelpful in all cases.
allowtransparency
<webview id="foo"
src="http://www.google.com/"
style="width:640px; height:480px"
allowtransparency="on">
</webview>
If "on", transparent elements within the webview will be shown as transparent. Without allowtransparency enabled, there will be no transparency within the webview, even if elements exist that are specified as transparent.
Related
I have reskinned http://peggywho.com with a fixed background in Tumblr. However, as I am adding posts to the website, the mobile view in ipad and iphone doesn't allow the background to stretch across the page. It has black space at the top and bottom (I'm unable to add an image as I am new here)
custom CSS for the background is as follows:
body {
margin-top:15px;
background-position:center center;
background-image:url('https://dl.dropboxusercontent.com/u/2633376/PS_web_BG_01.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
}
I am relatively new to coding so still learning my way around. Is there anything to add to the HTML or CSS that would allow mobile viewing to replicate the website, which looks the way I want it to look?
Thanks in advance
I'm working on webpage for iPhone devices. This page has a div with overflow property set as below to implement native scrolling provided in iOS5.
.nativeScroll {
-webkit-overflow-scrolling:touch;
overflow:auto;
height:200px;
}
With above CSS style, scrolling is working fine. But scrollbar appears only when user touches the div and tries to scroll. Now the problem when untouched the scrollbar disappears which is default implementation. In this case, it looks like the div doesn't have any overflow content. So user may never bother to scroll.
So is it possible to make scrollbar always visible whether or not the div has touch?
Thanks
IMHO, I think there is no "clean" way to do it. But, you can use a third party lib like iScroll.
On the homepage, you can find a reference to the hideScrollbar. Its default value is true. You can set it to false for your needs.
I want to have a static footer image with 5 buttons for navigation in my mobile phone website. The image is here http://www.pintum.com.au/jm/footer3a.jpg. The blue icons should be the default, the yellow icon should only be visible for the hover or active state.
I want to know how can I make this image scale to the correct width on all mobile devices (landscape and portrait) and have links to other pages and make the current/active pages icon the yellow color?
What I have tried so far
I first tried to make a CSS Sprite but that go ugly (complex) quickly. Painful working with widths everywhere so the image scales correctly as I had no way of knowing the height in pixels since the width is dynamic. I could use JS to find the width and calculate height on the fly. But this sounds like overkill.
Next I tried to have a single image with a width of 100% then place div overlays on top of the image. But with this solution I could not figure out how to navigate pages using JavaScript click event, or figure out how I would be able to change the image icon on the selected page http://jsbin.com/uraya5/3/ . And detrmining the correct height for the div
Last I tried to make each button a seperate image. These seems like the easist soultion. But jQuery Mobile adds a bunch of extra styles to the button I do not know how to remove. See http://jsbin.com/uraya5/4
So whats the best/easiest way to do this?
How can I remove the style around
links?
Or can I use a single image CSS sliding door method? To reduce HTTP request.
Ok I figured it out
See soultion here http://jsbin.com/uraya5/10/
I had to:
Set width to 19% of each button for
some reason there is spacing between
each button so 20% does not work.
Set ui-bar-a background to black so
it hides the spaces between my
images
Use this JS code to navigate pages $.mobile.changePage($("#about"),
"flip", true, true);
I would still like to use a single image instead of having 5 different images to reduce http calls. So if anyone finds a eligant soultion for this please let me know.
I have a UIWebview that I am loading with custom HTML using loadHtmlString. My HTML has a link that I intercept when tapped so that I can take control and reload the UIWebview with a different HTML string. The code works, but the area where the link text was located is replaced with a gray rectangle that is visible when the new string is loaded.
What could be going on here? How can I get rid of this behavior?
//Scott
Here it is...need to add this style statement to the link reference:
<a href=http://yourlink.com/ style = "-webkit-tap-highlight-color:rgba(0,0,0,0);">
Setting the alpha value (the last parameter to rgba) to 0 disables the tap highlight color.
Although this works, it feels like a hack. I really think the tap highlight should clear itself when my second loadHtmlString reloads new HTML code.
//Scott
You could add onclick="this.blur(); location.href=this.href;" to the link to remove the focus from the link.
I'm sure there's a better less hackish way, but this should work
Is it possible to change the background image of my facebook app? I tried adding a body tag in the css and set a background image. But the change is not reflected.
Any help? Thanks.
Its only possible by using extensions for your browser; for eg; use http://www.facebook.com/chameleontom
You can put your whole application in one div and define a background-image for the div.
This is IMHO the best workaround.