I'm trying to use jFontSize in a local html page to be displayed in a WebView.
The script should allow the user to change the text size and it does. However this is no longer the case when I add to the text.
I tried using another script but the same problem persists.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir = "ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript" src="jquery-1.5.js"></script>
<script type="text/javascript" language="javascript" src="jquery.jfontsize-1.0.js"></script>
<script type="text/javascript" language="javascript" src="jquery.corner-2.09.js"></script>
<script type="text/javascript" language="javascript" src="shCore.js"></script>
<script type="text/javascript" language="javascript" src="shBrushJScript.js"></script>
<script type="text/javascript" language="javascript" src="shBrushXml.js"></script>
<script type="text/javascript" language="javascript" src="shBrushCss.js"></script>
<script type="text/javascript" language="javascript" src="funcoes.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
<link type="text/css" rel="stylesheet" href="jfontsize.css" />
<link type="text/css" rel="stylesheet" href="shCoreDefault.css" />
</head>
<body>
<a class="jfontsize-button" id="jfontsize-m2" href="#">A-</a>
<a class="jfontsize-button" id="jfontsize-d2" href="#">A</a>
<a class="jfontsize-button" id="jfontsize-p2" href="#">A+</a>
<p class="some-class-name2" dir="rtl" align = "right">Hello<br>world</p>
<script type="text/javascript" language="javascript">
$('.some-class-name2').jfontsize({
btnMinusClasseId: '#jfontsize-m2',
btnDefaultClasseId: '#jfontsize-d2',
btnPlusClasseId: '#jfontsize-p2',
btnMinusMaxHits: 1,
btnPlusMaxHits: 7,
sizeChange: 7
});
</script>
</body>
</html>
The page works fine on Firefox.
You need to add the initialize code in document load -
$(document).ready(function(){
//jfontsize increase
$('.some-class-name2').jfontsize({
btnMinusClasseId: '#jfontsize-m2',
btnDefaultClasseId: '#jfontsize-d2',
btnPlusClasseId: '#jfontsize-p2',
btnMinusMaxHits: 1,
btnPlusMaxHits: 7,
sizeChange: 7
});
});
It should work fine.
Related
i have my react code in plain HTML
<!Doctype html>
<html>
<head>
<meta charset="uttf-8">
<title>React! React! React!</title>
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<script>
ReactDOM.render(
<h1>Sherlock Holmes</h1>,
document.body
);
</script>
</body>
</html>
but he not work, after run this index.html in Chrome i have only blank white page,
can someone explain me what i am doing wrong?
i use vscode
To make this work, use the development version, not the production version of the react and react-dom files. Also note that you need to specify the type of your script as "text/babel" or babel won't parse it.
Check out the code below:
<html>
<head>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
</head>
</head>
<body>
<script type="text/babel"> /* notice type="text/babel"*/
ReactDOM.render(
<h1>Sherlock Holmes</h1>,
document.body
);
</script>
</body>
</html>
RESULT:
I did react for the first time and it edited your code like that. I guess the two scripts I added are not needed, but just try it. As I understood you have to set an section to place the text. These two links could help too.
Where to place line of code in html for ReactDOM.render?
https://www.w3schools.com/react/react_render.asp
My Code:
<!Doctype html>
<html>
<head>
<meta charset="uttf-8">
<title>React! React! React!</title>
<link rel="stylesheet" href="lib/style.css" />
</head>
<body>
<section id="entry-point"></section>
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<script type="text/javascript">
var h = React.createElement('p', null, 'Sherlock Holmes');
ReactDOM.render(h, document.getElementById('entry-point'));
</script>
</body>
</html>
I have a collapsible that I mocked up on jsfiddle at https://jsfiddle.net/1gsqxo26/
It works fine there.
Same exact code on google apps script, nadda. What do I need to change to make this work properly there?
test4.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/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">
<base target="_top">
</head>
<body>
<div data-role="collapsible-set" id="set">
<div data-role="collapsible" data-collapsed="false" data-mini="true" class="stuff">
<h3>Stuff</h3>
<button type="button" id="submit" data-mini="true">Submit</button>
</div>
</div>
<?!= include('test4JS'); ?>
</body>
</html>
test4JS:
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<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/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
$('#submit').on('click', collapse);
function collapse(sender) {
$("#set").children(":first").collapsible( "collapse" );
//$(".stuff").collapsible("collapse");
//$("#set").children(":first").trigger( "collapse" );
//$(".stuff").trigger("collapse");
//none of these work
}
</script>
I create a example of LocalStorage. When I use Chrome web browser, It works fine. But when I test on iPhone Emulator, It doesn't. Please help.
Here is my code to set the local storage value:
function onclick(){
window.localStorage.setItem("data","Nguyen Minh Binh");
}
===========
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="cordova-2.5.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="js/index.js" type="text/javascript" ></script>
</head>
<body>
<a data-role="button" href="DemoWOrklightJQM/index.html" data-prefetch onclick="onclick()">Click me</a>
</body>
</html>
Here is the code where I tried to get the saved data:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>DemoSimpleControls</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link href="jqueryMobile/jquery.mobile-1.3.0.css" rel="stylesheet">
<link rel="stylesheet" href="css/DemoSimpleControls.css">
<script>
window.$ = window.jQuery = WLJQ;
</script>
<script src="jqueryMobile/jquery.mobile-1.3.0.js"></script>
<script src="../js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("#mysavedData").html("XYZ");
$("#mysavedData").html(window.localStorage.getItem("data"));
});
</script>
</head>
<body id="content" >
<div data-role="page" id="page">
<div data-role="header" >
<a data-rel="back" href="#" >Back</a>
<h1>My page</h1>
</div>
<div data-role="content" style="padding: 15px" data-theme="e">
<div id="mysavedData">My data</div>
Button
</div>
</div>
</body>
</html>
EDIT:
At Whizkid747's suggest, I change the script source as below but It still doesn't work.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>DemoSimpleControls</title>
<meta name="
viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link href="jqueryMobile/jquery.mobile-1.3.0.css" rel="stylesheet">
<link rel="stylesheet" href="css/DemoSimpleControls.css">
<script src="jqueryMobile/jquery.mobile-1.3.0.js"></script>
<script src="../js/jquery-1.9.1.min.js"></script>
< script type="text/javascript" charset="utf-8" src="../cordova-2.5.0.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad(){
document.addEventListener("deviceready", deviceready, false);
}
function deviceready(){
$("#mysavedData").html("XYZ");
$("#mysavedData").html(window.localStorage.getItem("data"));
}
</script>
</head>
<body id="content" onLoad="onLoad();" >
<div data-role="page" id="page">
<div data-role="header" >
<a data-rel="back" href="#" >Back</a>
<h1>My page</h1>
</div>
<div data-role="content" style="padding: 15px" data-theme="e">
<div id="mysavedData">My data</div>
Button
</div>
</div>
</body>
</html>
EDIT2: Try to set localStorage at OnDeviceReady then get it next lines, but still doesn't work.
<!DOCTYPE html>
<html>
<head>
<title>Contact Example</title>
<script src="js/jquery-1.9.1.min.js">
</script>
<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<script src="https://raw.github.com/phonegap/phonegap/2.5.0rc1/lib/android/cordova-2.5.0rc1.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
//
function onDeviceReady() {
window.localStorage.setItem("key", "minhbinh");
var keyname = window.localStorage.key(i);
// keyname is now equal to "key"
var value = window.localStorage.getItem("key");
// value is now equal to "value"
window.localStorage.removeItem("key");
window.localStorage.clear();
// localStorage is now empty
$("p#p1").text(value);
}
</script>
</head>
<body>
<h1>Example</h1>
<p id="p1">localStorage</p>
</body>
</html>
Move your code in document.ready to onDeviceReady event of PhoneGap. onDeviceReady is when you need to start executing your custom code.
Edit: *Try the below code with cordova.js added locally and not from github*
<!DOCTYPE html>
<html>
<head>
<title>Contact Example</title>
<script src="js/jquery-1.9.1.min.js">
</script>
<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<script src="cordova-2.5.0rc1.js"></script>
</head>
<body>
<h1>Example</h1>
<p id="p1">localStorage</p>
<script type="text/javascript">
// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
function onDeviceReady() {
window.localStorage.setItem("key", "minhbinh");
var keyname = window.localStorage.key(i);
// keyname is now equal to "key"
var value = window.localStorage.getItem("key");
// value is now equal to "value"
//window.localStorage.removeItem("key");
//window.localStorage.clear();
// localStorage is now empty
$("p#p1").text(value);
}
</script>
</body>
</html>
There was a problem when running Cordova 2.1 (fixed in 2.2) on iOS 6: initializing the localstorage the first time the app is run does not work.
Please check this for a solution:
http://www.x-services.nl/cordova-localstorage-cleared-after-first-app-launch-ios6/369
I'm trying to create a datebox with dateFormat, but it looks like dateFormat won't work.
It gives day/month/year, but I want only month/year.
this is my jsp:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.calbox.min.js"></script>
<script src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
</head>
<body>
<div data-role="page">
<input type="date" name="date" data-role="datebox" data-options='{"mode":"calbox","dateFormat":"%m/%Y"}' />
</div>
</body>
</html>
I saw this thread, but still I don't understand why it's not working.
It seems like there's an issue in the code that you've provided:
http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.calbox.min.js
Contains some hidden characters in between "js". Normally, it would be a hex of 6a73, but in your case, it is 6ae2808ce2808b73 for some reason, so change that link to
http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.calbox.min.js
Proof
However, to answer your question, try using:
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" />
<link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.durationbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.slidebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<div data-role="page">
<input type="date" name="date" data-role="datebox" data-options='{"mode":"datebox","overrideDateFormat":"%m/%Y","overrideDateFieldOrder": ["m", "y"],"calUsePickers": true, "calNoHeader": true,"calShowDays": false,"calMonthMode": true}' />
</div>
To force a month/year selection only
Live Demo | Source
I'm new to rails. I have my controller and view setup.
When I view my html source, my body is empty. I put a debugger in my controller and my view and it hits both so I know it's being executed.
Any idea what I'm doing wrong?
I have also installed bootstrap.
Thank you in advance.
see below.
class ListController < ApplicationController
def recent
#page_title = #head_title="Lists"
end
end
recent.html.erb
<ul class="tabs">
<li class="active">Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<li>Sit</li>
<li>Amet</li>
</ul>
application.html.erb
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= content_for?(:title) ? yield(:title) : "Myapp" %></title>
<meta name="description" content="">
<meta name="author" content="">
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<%= yield(:head) %>
</head>
</html>
html source code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Myapp</title>
<meta name="description" content="">
<meta name="author" content="">
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/home.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/twitter/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/alert.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/button.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/modal.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/popover.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/tab.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/transition.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="7imEFVfD5bYIV7ZcK4181eCoz0pKxyyE2G+UFI46v5U=" name="csrf-token" />
</head>
</html>
from the server logs
Started GET "/list/recent" for 127.0.0.1 at Fri May 18 17:54:57 -0700 2012
Processing by ListController#recent as HTML
Rendered list/recent.html.erb within layouts/application (0.8ms)
Completed 200 OK in 17ms (Views: 16.9ms | ActiveRecord: 0.0ms)
Um, you don't have a <body> tag or any view contents in your application.html.erb file? :-)
Try adding this just befor your </html>:
<body>
<%= yield %>
</body>
That yield with no argument will grab the content from the rendered view and spit it into your application layout.