I'm trying to dynamically change the html content of a dialog of onse.ui, but it is not working for me, my code is as below:
Here my html code.
<ons-template id="popupFechaCalendario.html">
<ons-dialog style="height: 300px;" var="naviDialog" cancelable>
<ons-navigator var="myNav">
<ons-toolbar inline>
<div class="center contenedorPopup" id="popupFechaCalendario_fecha">html content</div>
</ons-toolbar>
</ons-navigator>
</ons-dialog>
</ons-template>
And here my Javascript code.
$("#popupFechaCalendario_fecha").html("some html...");
ons.createDialog('popupFechaCalendario.html').then(function(dialog) {
dialog.show();
});
I have also tried like,
ons.createDialog('popupFechaCalendario.html').then(function(dialog) {
dialog.on("preshow", function(e) {
$("#popupFechaCalendario_fecha").html("some html...");
});
dialog.show();
});
In advance thank you very much to anyone who can help me
Related
I want to change the color of the WebView URL to white when offline, hide with padding or whatever it is so that the URL is not visible when the application is offline.
webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
webView.loadUrl("https://google.com-example");
swipe.setRefreshing(false);
webView.setWebViewClient(new WebViewClient(){
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
webView.loadUrl("file:///android_asset/home-offline/home-offline.html");
Please apply below code in your home-offline.html.
<!DOCTYPE html>
<html><HEAD><meta user-scalable=yes" /></HEAD>
<body>
<div style="color: #FFF;">
#replace content with your offline html content#
</div>
</body>
</html>
You just have to set the blank page inside WebView Client to your WebView and display toast to a user that "You are offline please Turn On Internet".
webview.loadUrl("about:blank");
I am using below lines of code to show html pages on my application but my app is too slow when scrolling.
Can I use another method to show the text? Can it be by html page or another method? or use listview to show my text?
or is it necessary to create layout for every text page?
Thanks.
ck.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("file:///android_asset/ck.html");
((Button)findViewById(R.id.cb)).setVisibility(View.GONE);((Button)findViewById(R.id.geri)).setVisibility(View.VISIBLE); ((Button)findViewById(R.id.db)).setVisibility(View.GONE); ((Button)findViewById(R.id.bb)).setVisibility(View.GONE); ((Button)findViewById(R.id.ck)).setVisibility(View.GONE);
}
});
cb.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
You Can Use This Library :-
https://github.com/PrivacyApps/html-textview
HtmlTextView is an extended TextView component for Android, which can load HTML and converts it into Spannable for displaying it. It is a replacement for usage of the WebView component, which behaves strange on some Android versions, flickers while loading, etc.
My issue solved using below code you can try this one:
// get our html content
String htmlAsString = getString(R.string.html);
Spanned htmlAsSpanned = Html.fromHtml(htmlAsString); // used by TextView
// set the html content on the TextView
TextView textView = (TextView) findViewById(R.id.textView);
textView.setText(htmlAsSpanned);
<resources>
<string name="html">
<![CDATA[
<h1>Main Title</h1>
<h2>A sub-title</h2>
<p>This is some html. Look, here\'s an <u>underline</u>.</p>
<p>Look, this is <em>emphasized.</em> And here\'s some <b>bold</b>.</p>
<p>This is a UL list:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<p>This is an OL list:
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
</string>
</resources>
Hope this will help you if not than inform me
On android triggered event window resize when you click on the input text or search. From there it take if resizing the window does not occur. I shoveled a lot of sources, how to fix I do not know.
Accordingly, I have written that when the browser is resized remove attributes eventually INPUT text disappears
https://youtu.be/2pAL221qgwc
https://youtu.be/W4M4c4UzMfc
$(function() {
$('nav>#main-menu').click(function() {
if($(this).hasClass('active')) {
$('.nav-menu ul ').slideUp();
$(this).removeClass('active');
}
else {
$(this).addClass('active');
$('.nav-menu ul' ).slideDown();
}
});
//search-toggle
$('.icon-b').click(function() {
//$( "#search-bl" ).slideToggle( "500");
$( "#search-bl" ).toggle( "slide",{ direction: "right" });
});
$(window).resize(function() {
$('.nav-menu ul').removeAttr('style');
$('#search-bl').removeAttr('style');
$('nav>#main-menu').removeClass('active');
});
});
I forgot to add.
This is a simple Cordova & jQuery mobile (1.4.5) app...
When I click on an item in a listview I want to dinamically build a listview on another page and navigate there.
The code I have works as desired as long as I don't click items/buttons too quickly. If I navigate between pages back and forth quickly then sooner or later I end up with an empty page, with the wrong text in header.
This happens both in Ripple and in actual Android device. Why? how can I avoid this? I think it is related to clicking items during page transition but I don't know.
HTML:
<div data-role="page" id="home">
Exercises
</div>
<div data-role="page" id="categories">
<div data-role="header" data-position="fixed" data-add-back-btn="true" data-back-btn-text="Go back">
<h1>Categories</h1>
</div>
<ul data-role="listview" id="categoryList"></ul>
</div>
<div data-role="page" id="exercises">
<div data-role="header" data-position="fixed" data-add-back-btn="true" data-back-btn-text="Go back">
<h1 id="category"></h1>
</div>
<ul data-role="listview" id="exerciseList"></ul>
</div>
Javascript:
var lastCategoryID;
$(document).on("pagecontainerbeforechange", function (e, data) {
switch (data.toPage[0].id) {
case "categories":
createCategories();
break;
case "exercises":
createExercises(event.target.id, $(event.target).text());
break;
}
});
function createExercises(categoryID, categoryName) {
//Don't rebuild if is same category of last time.
if (lastCategoryID == categoryID) return; else { lastCategoryID = categoryID; }
//Set header text.
$("#category").text(categoryName);
$("#exerciseList").empty();
switch (categoryID){
case "c0":
$("#exerciseList").append('<li>Warming up</li>');
$("#exerciseList").append('<li>Weight lifting</li>');
break;
case "c1":
$("#exerciseList").append('<li>Warming up</li>');
$("#exerciseList").append('<li>Running</li>');
break;
}
$("#exerciseList").listview("refresh");
}
function createCategories() {
$("#categoryList").empty();
$("#categoryList").append('<li>Arms</li>');
$("#categoryList").append('<li>Legs</li>');
$("#categoryList").listview("refresh");
}
Steps to reproduce (it doesn't always happen):
1- Click on "Arms"
2- Quickly click on back button
3- Quickly click on "Arms" again
Instead of getting this:
you get this:
I was able to solve the problem mainly by changing
$(document).on("pagecontainerbeforechange", function (e, data) {
to
$(document).on('vclick', 'a', function () {
I have a problem in android phonegap mobile website application, I applied scroll bar in my application, it is working good in PC but when i test in android device(mobile phone) scroll bar not enable.
personally I don't like iscroll.. had many problems using it so I discovered another solution... you can try this:
1.) set your DIV overflow to auto (or scroll) and set its height.. e.g.
<div id="wrapper" style="overflow:auto; height: 200px">...content...</div>
(I usually calculate height with javascript based on user's screen size.. I never set just a fixed height for all devices, this is just for the purpose of this "demo")
2.) add this javascript:
<script>
function isTouchDevice(){
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
function touchScroll(id){
if(isTouchDevice()){ //if touch events exist...
var el=document.getElementById(id);
var scrollStartPos=0;
document.getElementById(id).addEventListener("touchstart", function(event) {
scrollStartPos=this.scrollTop+event.touches[0].pageY;
event.preventDefault();
},false);
document.getElementById(id).addEventListener("touchmove", function(event) {
this.scrollTop=scrollStartPos-event.touches[0].pageY;
event.preventDefault();
},false);
}
}
</script>
3.) call it on page load.. if you use jQuery:
$(document).ready(function() {
touchScroll("wrapper");
});
4.) if you want your scrollbars to be visible, just define following CSS rules:
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #000;
}
Use this PhoneGap link
http://phonegap.pbworks.com/w/page/22863184/Hide%20the%20scrollbar%20in%20Android
this works in Android ,PhoneGap Applications for vertical and Horizontal Scroll
Code look Like this
public class MyActivity extends DroidGap {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
// Display vertical scrollbar and hide horizontal scrollBar
super.appView.setVerticalScrollBarEnabled(true);
super.appView.setHorizontalScrollBarEnabled(false);
// set scrollbar style
super.appView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
}
}