How would I position a popup above a fixed footer, just like it is depicted in the attached image?
http://i.stack.imgur.com/dADjb.jpg
Thanks.
Problem with jQuery Mobile popup is that x,y positioning is nit working correctly.
But we can cheat, take a look at this working example: http://jsfiddle.net/Gajotres/LSakj/
HTML :
Open Popup
<div data-role="popup" id="popup" data-transition="slidedown" data-position-to="#footer-test" data-theme="a" data-overlay-theme="e" data-history="true">
<p>U slučaju hitnoće koristi ovaj izbornik!</p>
</div>
In this case, data position is set to footer id. Unfortunately this will place it over footer, so we need additional css to place it over footer.
CSS :
#popup {
margin-bottom: 30px !important;
}
You should change this value to accommodate your popup height.
well if you are using all jquery base, you could use jGrowl to create the notifications, just with a bit of work you will get a nice result.
Related
The scenario is simple. There's a position:fixed element which is higher than the viewport. If I animate transform:translateY (using CSS animations or JavaScript) it moves but the parts that were outside of the viewport earlier stay invisible and never appear.
The bin contains the same element with position:absolute as comparison. It's working as expected in other browsers.
http://jsbin.com/yonisekawe/5
Any idea on how to workaround this?
I found a feasible workaround that I post as an answer but I'd still like this to get fixed in Firefox.
The workaround is simple: wrap the translated element inside another position:fixed div and position itself absolute.
Before
<body>
<div style="position:fixed;">Look ma, I'm getting translated!</div>
</body>
After
<body>
<div style="position:fixed;">
<div style="position:absolute;">Look ma, I'm getting translated!</div>
</div>
</body>
This will cause the element to get correctly updated while translating without getting cut off.
So here is an interesting situation I have come across.
You are on Chrome for android, when you scroll the body the address bar runs away and hides. Great!
Now you want to add a footer to your page that sticks to the bottom. You do the following:
html {
margin:0;
padding:0;
height:100%;
}
body {
margin:0;
padding:0;
height:100%;
}
#contentWrap {
margin:0;
padding:0;
padding-bottom:4em;
min-height:calc(100% - 4em);
position:relative;
}
#footer {
margin:0;
padding:0;
height:4em;
width:100%;
position:absolute;
bottom:0;
background:#262626;
}
<html>
<body>
<div id="contentWrap">
<div id="footer">
</div>
</div>
</body>
</html>
This works brilliantly, the footer will always stick to the bottom of the page regardless of content size or view-port scale.
However! Running this on a mobile design and testing in Chrome Android I found that setting the body to an explicit size, it will only scroll "content within" causing the address bar to stick around. Overflowing content is just set to default scroll in other words.
Noticing this I tried changing it to min-height so that it will always either be the size of the view-port if no content is available to fill it, or change height if there happens to be many lines of content.
Doing this however causes the contentWrap to base its height on the content rather than the parent element ie. <body>. So your footer now floats instead of sticking to the bottom.
I have played around with many combinations and cant seem to get what I want. Seems you have to live with either a sticky address bar OR a floating footer.
Please any ideas or thoughts on this would be appreciated.
Thanks but no that does not work in this situation.
Earlier today though whilst working on another project it hit me like a wet fish.
Remove dimensions from <html>.
Then add 100vh to your <body> instead of 100%
(making sure to only target mobile devices and not desktops)
Then it works perfectly! xD
Though Chrome is awesome imo. The little address hide on scroll has given me numerous headaches over the past few months.
When i make footers,
I code in css
.footerdiv{position:fixed; left:0; right:0; bottom:0; height:60px; z-index:777}
That does the trick.
Z-index keeps it above all the other elements. Position:fixed keeps it from moving as you scroll. and the left,right,bottom keep it sized perfectly.
Style as you wish.
Hope this helps.
Im creating android application with the help of ionic famework.
Im having this problem with the UI.
Im using lists in ionic to show the today's deals given by the shops.
Im making the thumbnails as round by the property border-radius:100% , but when a rectangle image is placed my thumbnail is messed up. Its good when i use sqare images. But im creating this application which have to support all shaped images.
Find the screenshot below to know how rectangle image is responding with border-radius:100%
I want to get my thumbnails round in shape without being stretched. Image of expected list is given below
Is there any way to make the thumbnail in ionic framework as round ?
<div class="list">
<!--.....................loop........................................................-->
<a class="item item-icon-right item-thumbnail-left" href="#">
<img style="border-radius: 100%;" src="img/sample.jpg">
<h2>HEADINGG</h2>
<p>Details : Hey guys i saw that there was no thread for p300, so i decided to make one (this is the support and development thread) Do this at your own risk 1=Root your funbook It is rooted but sometimes it is not rooted so you must visit this page</p>
<i class="icon ion-chevron-right stable"></i>
</a>
<!--.....................loop........................................................-->
</div>
I think i have to do something with the CSS . I dont know what to do.
It's better to crop the square part of your images which you would like to display in your page in a circular-shape. That's because border-radius:100%; works like a charm for square-shaped images.
Here's a Live DEMO !
try using only avatar
it seems avatar css something like this,
.avatar {
border-radius: 95px;
}
<img class="avatar" src="img/sample.jpg">
also I guess u need remove thumnail clases
u can edit here
Fact:
Only square objects will be rendered as a circle with CSS border-radius: 100% or 50%.
So you have to give the image itself the same width and height.
...or I just didn't understand your problem^^
My suggestion is to set the border-radius with height and width.
<img src="" class="icon-round"></div>
.icon-round {
border-radius: 50%;
width: 100px;
height: 100px;
}
The code below is not working in Android browser!
How do I fix it?
<input id="sannn" type="button" value="SAN" />
<div id="sann" style="width:640px; height:200px; overflow:scroll; border:solid 1px red;">
<div style="border:solid 1px green; width:3000px; height:200px;">4545</div>
</div>
$('#sannn').bind('click', function () {
$('#sann').scrollLeft(10);
});
Looks like it is a bug in Android Browsers 4.0.3+
http://code.google.com/p/android/issues/detail?id=38505&thanks=38505&ts=1350315570
Issue 38505: DOM element scrollLeft setter doesn't work in Android Browser 4.0.3+
Position the div wrapper as relative with overflow hidden and a specific width and height. Use position absolute on the inner div (the div you want to move) and play with the inline style left position via jQuery.
If you really need scrollbars. The Jquery UI sliders might help: http://jqueryui.com/slider/
I ran into the same issue with Zepto.js. I was able to work around this issue by first disabling the overflow: scroll on the scrolling element, like so:
$("#element-to-scroll").css({'overflow': 'hidden'}).scrollLeftTo(newXPos, 250).css({'overflow': 'scroll');
I have the HTML code below. I have set the body's width to 640px which is close to what the iPhone's resolution is. However, when I view the webpage on either an iPhone or an Android, it shows up just like it would in my web browser - only taking up part of the screen. The text is so small it's not usable.
What CSS code do I use so that the text stays normal in desktop browsers, but fills the screen on a mobile device? I read some things about using device-width properties but I can't get those to work either. What am I doing wrong?
Note
I'm not trying to get the red border to stretch all the way across the screen (eg: body:width100%). I just don't understand why the iPhone is not zooming into an area that is set to the same resolution it is supposed to have.
HTML Code:
<style>
body{ width:640px; border: 1px solid red; }
</style>
</head>
<body>
Hello World
</body>
</html>
Actual Output:
Desired Output:
Put this in your head tag:
<meta name="viewport" content="width=480">
To make the iPhone zoom in on the page, you can use the viewport meta tag.
You can set a scale of 1.0 to make Mobile Safari zoom in on your content exactly, no matter it's actual size.
Here's some documentation on different ways of setting the viewport: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Have you tried body { width:100%; border: 1px solid red; } ?
You'll have to use media queries for this.
http://www.alistapart.com/articles/responsive-web-design/
Example: http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html (Resize the page)
A seemingly straight-forward tutorial: http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
If you're creating a webapp for iphone, you should really take a look at PhoneGap. If you're feeling a bit adventurous, it really is quite easy to use.