Im having a lot of trouble with the scroll of a my pages that i previous loaded into the dom, and after that,i transition to them, but when i do that my content div has for example 1500 px, but my page has only 547,a min-heigth=547 appears to, and i cant scroll my page.
this is my code:
loading:
$.mobile.pageContainer.pagecontainer("load",
"./pages/scoringCliente/selectScoringApps.html", {})
transition:
$.mobile.pageContainer.pagecontainer("change", "#selectScoringApps", {
transition : "pop",
});
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../../jqueryMobile/jquery.mobile-1.4.5.js"></script>
<link href="../../native/assets/www/default/css/jqueryMobileXXXXXXcss"
rel="stylesheet">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
<div data-role="page" id="selectScoringApps_page" data-dom-cache="true">
<div data-role="header" data-tap-toggle="false">
<div style="margin-left: auto; margin-right: auto;">
<img border="0" src="../../images/logo_header.png"
alt="Logo, Facebook" class="header_img headerDual_img" height="35" />
</div>
<h1 class="h1_header">
Mobile<br>Scoring
</h1>
</div>
<div data-role="content">
asdad <br> <br> <br> <br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>asd
</div>
</div>
</body>
</html>
Related
I created a code for collapse it is expanded on large and mobile screen How do i collapse it on mobile screen.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<div class="container py-5">
<div class="py-5">
<a href="#" data-bs-target="#mycollapse" data-bs-toggle="collapse"
class="btn btn-primary">collapse button</a>
</div>
<div id="mycollapse" class="collapse collapse-horizontal show hide-sm border rounded p-5 bg-light">
<span>here is content of collapse</span>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
Guide me please show collapse and hide-sm screen
I want to know how to show and hide collapse on large screen and mobile screen.
I am facing a pretty strange problem .I have compiled the cordova app and it runs on android smoothly now on mac when i try to compile the app for the iOS it don't show me the component of onsenui and page comes without button ,toolbars etc . I tried to open it on web browser and it gives me same result .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"/>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsenui.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsen-css-components.css"/>
<!--parse code only
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.4.2.min.js"></script>
<!-- parse code only -->
<!--<link rel="stylesheet" type="text/css" href="css/style.css"/>
<!-- Enable all requests, inline styles, and eval() -->
</head>
<body>
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center">Toolbars</div>
<div class="right">
<ons-toolbar-button>
<ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em">
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-list>
<ons-list-header>Toolbar Variations</ons-list-header>
<ons-list-item modifier="chevron" onclick="myNavigator.pushPage('page2.html', { animation : 'slide' } )">
HTML Content
</ons-list-item>
<ons-list-item modifier="chevron" onclick="myNavigator.pushPage('page4.html', { animation : 'slide' } )">
Search Box
</ons-list-item>
<ons-list-item modifier="chevron" onclick="myNavigator.pushPage('page5.html', { animation : 'slide' } )">
Images
</ons-list-item>
</ons-list>
</ons-page>
</ons-navigator>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="left" style="line-height: 44px">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Title</div>
<div class="right" style="line-height: 44px">
Right
</div>
</ons-toolbar>
<div style="text-align: center">
<br />
<ons-button modifier="light" onclick="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
<ons-template id="page4.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Search</div>
<div class="right" style="padding-right: 6px">
<input type="search" class="search-input" placeholder="Search" style="margin-top: 6px;">
</div>
</ons-toolbar>
<div style="text-align: center">
<br />
<ons-button modifier="light" onclick="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
<ons-template id="page5.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="right">
<ons-search-input></ons-search-input>
</div>
</ons-toolbar>
<div style="text-align: center">
<br />
<ons-button modifier="light" onclick="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
<script type="text/javascript" src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/angular/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/onsenui.min.js"></script>
</body>
</html>
The code overall looks ok.
The only thing missing is ons.bootstrap(). I'm guessing you accidentally removed it at some point. Add that and you should be ready to go.
Here's a working demo of your code with ons.bootstrap() added.
On a sidenote - since you don't seem to be using angular right now you might be interested in checking out Onsen 2. It has both an angular and a pure js version.
Trying to make a dialog box in jquerymobile 1.4.5 a larger width. According to an example AND the directions on http://demos.jquerymobile.com/1.4.5/pages-dialog/
I think this should work (but it doesn't seem to). I copied their example and then overrode the .ui-dialog-contain attribute as documented. I'm using a Mac/Chrome to render the page. And I have seen this post before, but I can't get anyone's solution to work. I think some of that might be because of old versions of jquerymobile.
.ui-dialog-contain {
max-width: 200px;
}
<link href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<div data-role="page" data-dialog="true">
<div data-role="header" data-theme="b">
<h1>Dialog</h1>
</div>
<div role="main" class="ui-content">
<h1>Delete page?</h1>
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
Sounds good
Cancel
</div>
</div>
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dialog example - jQuery Mobile Demos</title>
<link href="favicon.ico" rel="shortcut icon"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<style type="text/css"> {
.ui-dialog-contain {
max-width: 1500px;
}
}
</style>
</head>
<body>
<div data-role="page" data-dialog="true">
<div data-role="header" data-theme="b">
<h1>Dialog</h1>
</div>
<div role="main" class="ui-content">
<h1>Delete page?</h1>
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
Sounds good
Cancel
</div>
</div>
Hi i am new for jquery mobile. I gt three page inside my apps. page1.html->page2.html->page3.html.
I need to preserve page1's textbox value when page2.html back to page1.html.
After i googling, i get the answer
$(document).bind("mobileinit", function () {
$.mobile.page.prototype.options.domCache = true;
});
How i back my page
history.go(-1);
go to next page
$.mobile.pageContainer.pagecontainer("change", url, {
allowSamePageTransition: true,
transition: 'none',
showLoadMsg: false,
changeHash: true
})
But nw is my problem when page2 back to page1, then page1 go to page2 , page2 textbox value will keep preserved also. Is it possible that when i click back button then textbox value will be preserved, but when i click next button then pages will be refresh?
You are doing it all wrong, you should have read everything about cashing.
When page cashing is turned on you still have a option to decide which page will have it turned on and which one will not get cashed.
All you need to do to prevent second page cashing is to add attribute data-dom-cache="false" to your second page data-role="page" div container, and that is that.
Working example:
index.html
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).bind("mobileinit", function () {
$.mobile.page.prototype.options.domCache = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<input type="text" value="" id="sdfsd"/>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
second.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>collapsible demo</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="page2" data-dom-cache="false">
<div data-role="header">
Back
<h1>jQuery Mobile Example</h1>
</div>
<div data-role="content" class="ui-content">
<input type="text" value="" id="dffsd"/>
</div>
</div>
</body>
</html>
I'm using JQM 1.4.2 and have this JS:
$.mobile.changePage( "page.html", { reloadPage: true} );
and it works fine. Problem is, this will be deprecated in 1.5.0
now I try to use this:
$.mobile.pageContainer.pagecontainer("change", "page.html", { reload:true } );
and it does not work (page is not reloaded).
How to force page to reload?
Thank you.
First are you sure you are using correct jQuery Mobile 1.4 version? Beta versions of jQuery Mobile 1.4 didn't have pagecontainer widget.
This functionality works just fine.
I even made you a working example:
HTML1 - index.html
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo 1</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
$(document).on('pageinit', '#index', function(){
$(document).on('click', '#changePage', function(){
$.mobile.pageContainer.pagecontainer( "change", "second.html", { reload: "true" } );
});
});
</script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<input type="button" value="Button" id="changePage">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
HTML2 - second.html
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo 2</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="second" data-theme="a" >
<div data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Update:
From what I can see this is a bug. I have reported it here: https://github.com/jquery/jquery-mobile/issues/7406