First, hello to everyone, I'm kinda new here, altough this site has helped me with lots of stuff.
Here's my problem, I've made images in 's with text behind them, so that when you hover with your pointer over it, the image slides to the side and you can read the text. Pretty simple. Now the problem that I'm having is that when I lower the screen size(eg view it on an Android), the responsive design kinda doesn't work for those images because there's some weird spacing to the left, even though the image can fit on that screen size.
Here's the site with the problem (I use it for learning purposes :)): This
your responsive works fine (bootstrap I guess). The problem is you have a fixed width in your .slide1, .slide2, .slide3 that is messing the 33.3333% width of your col-sm-4 . Basically you need to use mediaqueries to adapt your animation.
adding overflow:hidden to col-sm-4 will show you better what is happening, and adding to your slides max-width:100% may be the first steps to fix your web. Later your problem will be the image size
Related
I am developing an Android app and am a bit stuck on how I go about creating the layout I'm after. I said spotify-like (website not app) as I dont want the parallax effect. It's actually closer to http://www.poormet.com/.
What I have tested so far is a RelativeLayout with an ImageView and Listview (with transparent dividers) within it. This layout shows the image in the background between rows which is a step in the right direction. The issue is I'm at a loss as to how to get the images to change smoothly depending on what listrows are on screen.
Also, if I want to replicate the text over the images like poormet example mentioned above, then it seems to me I am going to have to have alternating transparent and not transparent rows.
Am I on the right track or am I approaching this problem the wrong way?
Any guidance will be greatly appreciated!!!
(also, please let me know if what I have described doesn't make sense - more than happy to clarify)
I have a very weird problem that is not consistent. I have a header in my webview page that is regular html from my site. The images are linked to pages. Sometimes the links don't work and sometimes they do. If I move my finger below the image, sometimes you see the rectangular highlight press color box show up but way off from the actual image. It will just be in a random spot but always below the image somewhere. So the link href and the image are getting out of sync per say. If I reload the page it will be in the correct position again and the image/button works. It doesn't always happen. Works fine in desktop and mobile browsers. Just weird in webview. Anyway, have a suggestion or experience this and why its so random?
Use it like this
String s="<head><meta name=viewport content=target-densitydpi=medium-dpi, width=device-width/></head>";
webview.loadDataWithBaseURL(null,s+htmlContent,"text/html" , "utf-8",null);
For more reference
http://developer.android.com/guide/webapps/targeting.html
And in Samsung s3 like phones, sometimes this will not work .For that create a separate layout for xhdpi phones and change the webview's height to 40dp or something depending on your requirement for avoiding white space.
The problem wasn't with just webview it is mobile in general, specifically Android Browser which I believe webview uses. My header was position:fixed and after a lot of research I found that position:fixed is glitchy on mobile and causes weird things to happen. This was causing the clickable location of the links getting out of place when you scrolled even though the images never moved. So when you clicked on the image/link it didn't work because the location of the link was somewhere else on the page, usually under the image somewhere.
As noted on this blog solution which described my issue.
http://suratpyari.wordpress.com/2011/09/30/fixed-position-problem-with-android-webkit/
However the solution I went with was not to use position:fixed at all as I didn't want css hacks and to use the solution used at the SO link below using position:absolute to make the inner div scrollable. It actually works quite well and the scrolling is even more smooth and fluid now.
CSS 100% Height, and then Scroll DIV not page
So anyone else that may have this problem, it might be your fixed header. And it is "real" problem for the person who down voted my question. :/
At the moment, I am using Euro 2012 app and it has some interesting layout parts. If you go to matches->knockout screen, you'll see 3 screens like this.
If you slide left or right, you move between them not like between one activity to another, but just like all these elements are laid on one big canvas and you slide each screen into focus. Even thou, if you slide left/right, the screen cannot be stopped in the way that half of each image is visible, so I guess it's not a big canvas. Somehow you can slide screen like one big image, and yet it always lock perfectly as if they used 3 activities for this.
How did the do this?
It's a ViewPager, available in Android support package and described in their blog.
The designing is not so much difficult, As i think to draw that boxes showing quarterfinals, semifinals.
They having layout( we can do by placing image in background also).
The major role played by FrameLayout which shows you that effect(emphasis), the flages are fetch from url as matches are decided(not essentially images only names are sufficient as flags came inside app and gets applied as updated).
After your click i think the start image gets change it's just replacing that image with new one.
As you said they are not on single canvas (but if they did customization of heir Viewpager that it's not stopping in between activities), but i think it's on single canvas.
If your taking about quickness of loading and all it's up to you as much code and processing you optimized it gives you smooth feel and fast processing.
We can appreciate the work but we can not say it's too much difficult as i think it's quit easy...
Hope this explanation helps you to understand ....
I am developing a mobile site, so I'm using CSS to make things as liquid as possible.
I'm having an odd difficulty. Within a div container, I have a <p> that is supposed to fill the width of the div. I've tried width:auto, width:100%...nothing seems to work on Android Browser. Here are examples:
iOS (Correct):
Android (Incorrect; not fully spreading; added more text than iOS version so you can see what I'm talking about):
Both screenshots taken from respective emulators.
Here is the odd thing, though... If I give the class applied to these <p>'s a background color, the Android browser then allows the <p> to fill the full width of its parent div (looks identical to iOS). The really odd part, though, is that if I make the background color transparent (I thought I had it tricked lol), then it goes back to doing as shown in the example.
So, I have a <p> only properly referencing its CSS if it has a background-color applied... am I stupidly overlooking something, or is this some issue with Android Browser? Any ideas how to fix it?
Thanks for your time.
While it may not be the best solution, I finally just made an "invisible" transparent png and set it as the <p>'s background, and that fixed the issue... if you can call it fixing. :) I have to assume it is some kind of error in Android's Browser, as I tried this in every browser, desktop and mobile.
It is the intended behavior of Android phones. It will enhance the readability of copy text, since you are not forced to scroll sideways if you pinch zoom the page.
It can be managed on your own phone maybe in the browser's settings, but that is not the solution you want.
It can be 'fixed' by the workaround of applying a background-image to the element you want.
This can be done with a base64 encoded data url:
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
In your mobile browser's settings, look for something called "Auto Fit Pages" and disable it. This setting (in Android) is ON by default. Turn it off and your text will flow as it should.
the div or any element above this could be the issue.
if you give fixed width to the p element, does it work well ?
iam stuck with the creation of a nine patch for a progressbar background.
It has a repeating pattern like a ruler-scala and that given me headache.
here is a image of what i want(at the bottom) and what i have (top).
can someone give me a hint how to acomplish my goal?
edit: or is it generelly possible to do this with a 9patch?
my other attempt was to make a with android:tileMode="repeat" but there i get problems with the height of my image (repeating in the second line), i need something like repeat-x.
Thanks in advance
edit2: ok i managed to do my repeating 9patch by stretching the whole repeating pattern, but its not ideal :(
You seem to be overestimating the power of 9-patches. The most you could do is have a ruler image with expanding space between the ticks. You can't, however, make a 9-patch that automatically tiles parts of your image.
On the other hand, if you create a BitmapDrawable programatically, you can set the tile mode separately for the X and Y axes.
I used to do this in my webview project using border image which provides both options (repeat, stretch, fill).
As webview has kind of it's own problems in android (mostly fixed element) I decided to be more android for the next project and I found out that it's not possible to have the repeated border using 9Patch. It's so awkward as it's needy but not implemented.
In a word android development area makes me crazy, one option here one option there is a usual thing here.