Response title
This is preview!
Add a border around the jQuery Mobile content
in Developing jQuery Mobile
•
10 years ago
I've tried adding a border around the viewport using a series of images -- corners and top/bottom and left/right lines. I can get it to successfully show up in chrome but when I view it on the iPhone, it's not showing up. I've tried setting the page container to position: relative and absolutely positioning the border divs. I've also tried using position: fixed to no avail. No matter what I do the images do not show up on the iphone version of the mobile site I'm developing.
Is there any way to get this to work right? If it helps any, here is the markup I was testing it with:
- <div id="page-wrap" data-role="page">
- <div id="cr-page-mask-corner-tl"></div>
- <div id="cr-page-mask-corner-tr"></div>
- <div id="cr-page-mask-corner-bl"></div>
- <div id="cr-page-mask-corner-br"></div>
- <div id="cr-page-mask-outline-t"></div>
- <div id="cr-page-mask-outline-b"></div>
- <div id="cr-page-mask-outline-l"></div>
- <div id="cr-page-mask-outline-r"></div>
- #page-wrap
- {
- background: transparent !important;
- clear: both;
- display: block;
- position: relative;
- }
- #cr-page-mask-corner-tl {background: transparent url('../img/bg-sprites-corners-2.png') 0 0 no-repeat; display: block; height: 11px; width: 11px; position: fixed; top: 0; left: 0; z-index: 9001;}
- #cr-page-mask-corner-tr {background: transparent url('../img/bg-sprites-corners-2.png') -11px 0 no-repeat; display: block; height: 11px; width: 11px; position: fixed; top: 0; right: 0; z-index: 9001;}
- #cr-page-mask-corner-bl {background: transparent url('../img/bg-sprites-corners-2.png') 0 -11px no-repeat; display: block; height: 11px; width: 11px; position: fixed; bottom: 0; left: 0; z-index: 9001;}
- #cr-page-mask-corner-br {background: transparent url('../img/bg-sprites-corners-2.png') -11px -11px no-repeat; display: block; height: 11px; width: 11px; position: fixed; bottom: 0; right: 0; z-index: 9001;}
- #cr-page-mask-outline-t {background: transparent url('../img/bg-sprites-borders-h-2.png') 0 0 repeat-x; display: block; height: 4px; width: 100%; position: fixed; top: 0; left: 0; z-index: 9000;}
- #cr-page-mask-outline-b {background: transparent url('../img/bg-sprites-borders-h-2.png') 0 -4px repeat-x; display: block; height: 4px; width: 100%; position: fixed; bottom: 0; left: 0; z-index: 9000;}
- #cr-page-mask-outline-l {background: transparent url('../img/bg-sprites-borders-v-2.png') 0 0 repeat-y; display: block; height: 100%; width: 4px; position: fixed; top: 0; left: 0; z-index: 9000;}
- #cr-page-mask-outline-r {background: transparent url('../img/bg-sprites-borders-v-2.png') -4px 0 repeat-y; display: block; height: 100%; width: 4px; position: fixed; top: 0; right: 0; z-index: 9000;}
I will say I'm not entirely familiar with the jQuery mobile framework, this is one of the first times I'm using it in depth. Any help would be greatly appreciated.
1