Response title
This is preview!
Move this topic
How to Make JqueryMobile Site NOT Full Screen on PCs
in jQuery Mobile
•
11 years ago
Hi,
I've been working on a jquerymobile site and I really don't want to spend a time remaking the site for PC screens.
I've been working on a jquerymobile site and I really don't want to spend a time remaking the site for PC screens.
Is there a way i can make the site into like a 800x600 size DIV for PCs?
It really doesn't look nice with all stretched out <LI> links.
Any help would be great
7
Replies(18)
Well I found the WIDTH property set to 100% inside the CSS under ui-mobile and if i change that it changes the site.
What the best way to do this?
What the best way to do this?
Should i just detect if the device is a PC or Mobile and then based on that load a different style sheet with the one WIDTH property changed?
Is there a way that actually works properly?
Leave a comment on telpager's reply
@ vitalyp
Yes, I have tried this method and it works. As you say all you you need to do is to detect the device and render the right css accordingly.
Well, there could be better suggestions. Will wait and see.
Yes, I have tried this method and it works. As you say all you you need to do is to detect the device and render the right css accordingly.
Well, there could be better suggestions. Will wait and see.
@telpager - When i do that the page floats on the left side. How do you get the page to center. Were you able to center the page?
Leave a comment on telpager's reply
@ vitalyp
Try { top: 0; left: 20%; width: 60%; min-height: 100%; position: absolute; display: none; border: 0; }
OR
{ top: 0; left: 15%; width: 70%; min-height: 100%; position: absolute; display: none; border: 0; }
OR
change percentages of left & width accordingly.
Try { top: 0; left: 20%; width: 60%; min-height: 100%; position: absolute; display: none; border: 0; }
OR
{ top: 0; left: 15%; width: 70%; min-height: 100%; position: absolute; display: none; border: 0; }
OR
change percentages of left & width accordingly.
@ telpager - Do i add this to my ui-mobile class?
How do you reply with my username showing up as a link? :)
How do you reply with my username showing up as a link? :)
Leave a comment on telpager's reply
Alternatively, what if you did this:
Setting the defaultPageTransition to "none" is needed because with large margins on the left and right slide transitions don't look so good.
In the CC, I used a min-width of 1025 so as to not invoke it on a landscape mode iPad. The 960px width is used as sort of a standard width used by designers who use 960GS and the like. Having the margins and borders only on the sides avoids an unnecessary scroll bar. The relative positioning combined with the auto side margins centers it.
It may still be a bit wide and look too much like a stretched mobile app, so I may push this down to somewhere in the 720/768px width range, if I adopt this, depending on how it ends up looking in a landscape iPad.
Am I missing anything important that would cause this to break? Quick testing didn't show me any immediate problems in Chrome, Safari, mobile Safari or Android, but I haven't tested extensively and I'm not a whiz on the JQM internals.
-- JimB. aka Brons
- <script type='text/javascript'>
- <!--
- $(document).bind('mobileinit',function(){
- $.extend( $.mobile , {
- defaultPageTransition: "none"
- });
- });
- //-->
- </script>
- <style type='text/css'>
- <!--
- html { background-color: #333; }
- @media only screen and (min-width: 1025px){
- .ui-page {
- width: 960px !important;
- margin: 0 auto !important;
- position: relative !important;
- border-right: 5px #666 outset !important;
- border-left: 5px #666 outset !important;
- }
- }
- -->
- </style>
Setting the defaultPageTransition to "none" is needed because with large margins on the left and right slide transitions don't look so good.
In the CC, I used a min-width of 1025 so as to not invoke it on a landscape mode iPad. The 960px width is used as sort of a standard width used by designers who use 960GS and the like. Having the margins and borders only on the sides avoids an unnecessary scroll bar. The relative positioning combined with the auto side margins centers it.
It may still be a bit wide and look too much like a stretched mobile app, so I may push this down to somewhere in the 720/768px width range, if I adopt this, depending on how it ends up looking in a landscape iPad.
Am I missing anything important that would cause this to break? Quick testing didn't show me any immediate problems in Chrome, Safari, mobile Safari or Android, but I haven't tested extensively and I'm not a whiz on the JQM internals.
-- JimB. aka Brons
I like yr idea: Will test tomorrow gmt+1
11 years ago
I like yr idea: Will test tomorrow gmt+1
EDIT:
Works for me so far: thankyou.
Note, I do not use page transitions in my Web App
EDIT EDIT:
I was working on trying to get rid of my wide li's so BIG THANKS
IE7/8 do not show border, but I will try and see why.
- @media only screen and (min-width: 1025px){
.ui-page {
width: 960px !important;
margin: 0 auto !important;
position: relative !important;
border-right: 5px #666 outset !important;
border-left: 5px #666 outset !important;
} Edit: probably no support for media :) IE7 is old and IE8 is too...
Our Web app is one of a suite and there is a native Windows .Net app in the set, so we don't worry as much about IE being full functionality in the Web app as other more standards compliant browsers. (In general we regard the Web app as a "WebKit app" which runs on other browsers as well. which is why we're building with JQM.)
I'll look into improving this usage model for IE once I get a solid version in for our primary browsers.
-- JimB. aka Brons
I'll look into improving this usage model for IE once I get a solid version in for our primary browsers.
-- JimB. aka Brons
This code seems to work great. Thanks!
The page transitions are still sliding. I thought the defaultPageTransition: "none" would overwrite that.
The page transitions are still sliding. I thought the defaultPageTransition: "none" would overwrite that.
Leave a comment on eldacur's reply
Sounds like a great idea. Does anyone have any examples pages/sites where this technique has been applied? Thanks
Leave a comment on vanj's reply
@eldacur's media query method is definitely the way to go. You'll need to use JS to make it work for IE. I've had good luck with http://filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/
Leave a comment on will_oe's reply
you could display the jqm app in an iframe on a different index you are redirecting to after a device detection
but this would cause a problem with deeplinks to be not working anymore
with some php or other serverside help you may generate a deeplink from the referrer (check against your enabled hostnames) and set it as source of the iframe,but then its not a simple solution any more
maybe its suitable for your needs,maybe not, but i hope you find an ideal solution at the end
feedback welcome :-)
but this would cause a problem with deeplinks to be not working anymore
with some php or other serverside help you may generate a deeplink from the referrer (check against your enabled hostnames) and set it as source of the iframe,but then its not a simple solution any more
maybe its suitable for your needs,maybe not, but i hope you find an ideal solution at the end
feedback welcome :-)
Leave a comment on itobe.de's reply
I'm going to try a few of these. Great to see all the replies. Hope this thread keep growing and we all agree on a solution.
Leave a comment on vitz's reply
Vitz,
In answer to your question above:
In my experience the order that you want things is:
The first four of the above look like this in my app:
and are followed by CSS for several ancillary themes, and then the several .js files that implement the functionality of our app.
The page transition override is in the "e4-jqm-tweaks.js" in line #3, which looks like:
I hope this helps. If not, I'm not sure what could prevent you from stopping the transitions.
-- JimB. aka Brons
In answer to your question above:
Perhaps the issue is one of ordering. I believe that the order in which the various JavaScript and CSS files are read and executed is important.The page transitions are still sliding. I thought the defaultPageTransition: "none" would overwrite that.
In my experience the order that you want things is:
- JQuery Javascript
- JQuery Mobile CSS
- Any JQuery Mobil Javascript overrides
- JQuery Mobile Javascript
- The bulk of your own CSS and Javascript
The first four of the above look like this in my app:
- <script type="text/javascript" src="js/jquery-1.6.2.js"></script>
- <link rel="stylesheet" href="css/jquery.mobile.min.css" />
- <script type='text/javascript' src='js/e4-jqm-tweaks.js'></script>
- <script type="text/javascript" src="js/jquery.mobile.js"></script>
and are followed by CSS for several ancillary themes, and then the several .js files that implement the functionality of our app.
The page transition override is in the "e4-jqm-tweaks.js" in line #3, which looks like:
- //
- // Javascript that must execute BEFORE jquery.mobile...js
- //
- $(document).bind('mobileinit',function(){
- $.mobile.selectmenu.prototype.options.nativeMenu = false;
- $.extend( $.mobile , {
- defaultPageTransition: "none"
- });
- });
I hope this helps. If not, I'm not sure what could prevent you from stopping the transitions.
-- JimB. aka Brons
Thanks again! I rearranged the order and it fixed the problem.
Here is my new order
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="mobile/jquery-ui-1.8.12.custom.min.js"></script>
<script src="mobile/autocomplete.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
Here is my new order
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="mobile/jquery-ui-1.8.12.custom.min.js"></script>
<script src="mobile/autocomplete.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
Leave a comment on eldacur's reply
I used the code to achieve limiting the screen width on PC.
But there is issues
1) when a click on a button is made there is a short movement to the right of the page,
then it returns back to left.
2) on Safari and Chrome there is a transition to the right when a click on a button is made,
not just a short movement.
How to prevent this?
Leave a comment on thstart's reply
A very later response, just incase someone is accessing this thread (like I did) looking for a way to prevent JQuerymobile from taking up the full screenwidth.
The code proposed by JimB above works great for me. The only issue being the background color of the side margins, which is not displayed correctly on pages that require scrolling. Replacing:
html { background-color: #333; }
by
.ui-overlay-d {background: #333;}
solved this for me. (Change the -d extension to whatever theme you are using in JQM)
My css now lookes like this:
@media only screen and (min-width: 64.1em){
.ui-page{
width: 45em !important;
margin: 0 auto !important;
position: relative !important;
border-right: 0.3em #666 outset !important;
border-left: 0.3em #666 outset !important;
}
.ui-overlay-d{
background: #333;
}
}
Leave a comment on hdabjq's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to vitz's question
{"z758578":[14737000002554474,14737000002554887,14737000002606209],"z5317887":[14737000002556804],"z7060333":[14737000002556495],"z5787654":[14737000002557535],"z7199131":[14737000002553049,14737000002556361,14737000002556469],"z6139744":[14737000002554927],"z336831":[14737000002549791,14737000002552429,14737000002554416,14737000002554464,14737000002603914,14737000002558176,14737000002608536],"z4283719":[14737000003010047],"z24686404":[14737000003956447]}
Statistics
- 18 Replies
- 34881 Views
- 10 Followers