Add button
208 צפיות
מעבר להודעה הראשונה שלא נקראה
Ghanem O
7 באוג׳ 2019, 6:50:557.8.2019
עד MIT App Inventor Forum
Is it possible to add two buttons. One button for increase the font and the other one is to decrease it in the Webviewer by using Jquery.
<html>
<head>
<style>
.divClass {
font-size: 16px;
background-color: #E3E3E3;
width: 500px;
padding: 5px;
}
</style>
<script src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#linkIncrease').click(function () {
modifyFontSize('increase');
});
$('#linkDecrease').click(function () {
modifyFontSize('decrease');
});
$('#linkReset').click(function () {
modifyFontSize('reset');
})
function modifyFontSize(flag) {
var divElement = $('#divContent');
var currentFontSize = parseInt(divElement.css('font-size'));
if (flag == 'increase')
currentFontSize += 3;
else if (flag == 'decrease')
currentFontSize -= 3;
else
currentFontSize = 16;
divElement.css('font-size', currentFontSize);
}
});
</script>
</head>
<body style="font-family:Arial">
Font-Size:
<a id="linkIncrease" href="#">Increase</a>
<a id="linkDecrease" href="#">Decrease</a>
<a id="linkReset" href="#">Reset</a>
<br /><br />
<div id="divContent" class="divClass">
<b>jQuery Tutorial</b>
<ul>
<li>What is jQuery</li>
<li>What is $(document).ready(function() in jquery</li>
<li>Benefits of using CDN</li>
<li>#id selector</li>
<li>Element Selector</li>
<li>class selector</li>
<li>attribute selector</li>
<li>attribute value selectors</li>
<li>case insensitive attribute selector</li>
<li>jQuery input vs :input</li>
</ul>
</div>
</body>
</html>
TimAI2
7 באוג׳ 2019, 7:47:477.8.2019
עד MIT App Inventor Forum
Why not just have the buttons on your web page, and use plain javascript, which doesn't require any additional libraries in the webviewer
Example:
<!DOCTYPE html><html><head><style>p {font-size: "large";}</style></head><body>
<button type="button"onclick="resizeText(1);">Increase</button><button type="button"onclick="resizeText(-1);">Decrease</button> <div><p id="mytext">Hello World</p></div>
</body><script>
function resizeText(multiplier) { if (document.getElementById("mytext").style.fontSize == "") { document.getElementById("mytext").style.fontSize = "1.0em"; } document.getElementById("mytext").style.fontSize = parseFloat(document.getElementById("mytext").style.fontSize) + (multiplier * 0.2) + "em";}</script></html>Ghanem O
7 באוג׳ 2019, 8:08:407.8.2019
עד MIT App Inventor Forum
Thank you so much Tim. It works as your suggestion. But do you think that it is possible to stretch the size by using two fingers instead of two buttons I mean minimize and maximize the size.
TimAI2
7 באוג׳ 2019, 8:32:577.8.2019
עד MIT App Inventor Forum
That should just "work"
Ghanem O
7 באוג׳ 2019, 8:37:437.8.2019
עד MIT App Inventor Forum
Sorry. I didn't understand.
Do you mean that it doesn't work by using two fingers to resize the font.
TimAI2
7 באוג׳ 2019, 8:40:587.8.2019
עד MIT App Inventor Forum
Pinching "out" with two fingers should zoom the html page
Ghanem O
7 באוג׳ 2019, 8:45:247.8.2019
עד MIT App Inventor Forum
Pinching "out" with two fingers should zoom the html page that is right but some words would be out of canvas. Is there other solution.
TimAI2
7 באוג׳ 2019, 8:55:347.8.2019
עד MIT App Inventor Forum
I believe only by changing the font size in the html will ensure the text properly reflow on the viewable page...
You could probably use a slider (or thin canvas and ball) in your app to control the value of the webviewstring, which in turn would increase or decrease font size?
Ghanem O
7 באוג׳ 2019, 12:40:537.8.2019
עד MIT App Inventor Forum
Now I am trying to apply your code in my project by get csv text but I it doesn't work.
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="UTF-8">
<meta name="author" content="Osama">
<style>
body {
text-align: justify;
text-justify: inter-word;
}
@font-face {
font-family: quran;
src: url('me_quran.ttf');
}
@font-face {
font-family: quran2;
src: url('me_quran_volt_newmet.ttf');
}
.arab1a {
direction: rtl;
font-family: quran;
font-size: 18px;
}
.arab1b {
direction: rtl;
font-family: quran2;
font-size: 18px;
}
.highlight {
background-color:#b9d5da;
}
.div_style_block {
text-align: center;
border-bottom-style: solid; border-bottom-color: #E6E6FA;
}
.bg_green {
background-color:#F2F2F2;
}
.bg_grey {
background-color:#F2F2F2;
}
.div_style_inline {
display: inline;
}
</style>
<script>
window.smoothScroll = function(target) {
var scrollContainer = target;
do { //find scroll container
scrollContainer = scrollContainer.parentNode;
if (!scrollContainer) return;
scrollContainer.scrollTop += 1;
} while (scrollContainer.scrollTop == 0);
var targetY = 0;
do { //find the top of target relatively to the container
if (target == scrollContainer) break;
targetY += target.offsetTop;
} while (target = target.offsetParent);
scroll = function(c, a, b, i) {
i++; if (i > 30) return;
c.scrollTop = a + (b - a) / 30 * i;
setTimeout(function(){ scroll(c, a, b, i); }, 20);
}
// start scrolling
scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}
</script>
</head>
<body>
<button type="button"onclick="resizeText(1);">Increase</button>
<button type="button"onclick="resizeText(-1);">Decrease</button>
<div><p id="mytext">Hello World</p></div>
<script>
document.write(window.AppInventor.getWebViewString());
smoothScroll(document.getElementById('anchor'));
</script>
TimAI2
7 באוג׳ 2019, 16:44:097.8.2019
עד MIT App Inventor Forum
Should have asked this earlier:
- What will the content of the web page be?
- Does it have to be in a webviewer?
- Why do we need to increase or decrease the font size? Why not just make it as big as you want it?
- or why can't the user use the buttons ?
TimAI2
7 באוג׳ 2019, 16:46:557.8.2019
עד MIT App Inventor Forum
The html you posted will simply write the value of the webviewstring to the page
Not sure what value all your additional script has ? Is it all plain javascript ? Does nothing for me...
Without the ttf files, it is difficult to test the css elements...
TimAI2
7 באוג׳ 2019, 17:33:157.8.2019
עד MIT App Inventor Forum
csv ? Is this table content or plain text or what ?
TimAI2
7 באוג׳ 2019, 19:50:567.8.2019
עד mitappinv...@googlegroups.com
OK, I worked out the use of a slider to change the font size.
In order for the html to use a new webviewstring value I used a "timer" (setInterval) running at 500ms on the web page
For the slider I compared current versus previous thumb position values to create a boolean (plus or minus)
The javascript sees the new webviewstring value, tests it and changes font size accordingly, and makes no further changes until the webviewstring is changed by the user with the slider
This might need to happen more slowly if there is a lot of text to resize
html:
<!DOCTYPE html><html><head><style>p {font-size: "large";}</style></head><body>
<div><p id="mytext">Hello World</p></div>
</body>
<script>window.setInterval(function(){ if (window.AppInventor.getWebViewString() == "plus" ) { resizeText(1); window.AppInventor.setWebViewString("null"); } else if (window.AppInventor.getWebViewString() == "minus" ) { resizeText(-1); window.AppInventor.setWebViewString("null"); } }, 500);
Ghanem O
8 באוג׳ 2019, 1:14:108.8.2019
עד MIT App Inventor Forum
Hi Tim,
Thank you so much for giving me a time to create a resize way. I tried what you suggested but I don't know how to make it my project. Please look .aia and give me the way how to do it. I really appreciate of your effort.
Regards,
TimAI2
8 באוג׳ 2019, 4:58:528.8.2019
עד mitappinv...@googlegroups.com
Hi Osama
Once I had worked out what was going on in your blocks and html ( i see that Ghica wrote the original html :) ) I have two working solutions for you.
The first one is using the buttons, which doesn't interfere with your current use of the webviewstring
The second one uses the slider, this works for me, even when you change texts in the webviewer, but I can't guarantee it won't break something as you develop further!
I had to make a small change to your arabtext procedure to give the div holding the text an id:
The aia files will be attached after I submit this post.
EDIT: aia files removed at original posters request
TimAI2
8 באוג׳ 2019, 8:47:138.8.2019
עד MIT App Inventor Forum
It is because, I believe, the html page is being reloaded when you call for a sound (this problem will exist for both methods I provided)
Unless there is a complete re-write of the method used to display the text, play the sound AND resize the text, I believe we have got as far as we can go :(
ההודעה נמחקה
ההודעה נמחקה
Ghanem O
9 באוג׳ 2019, 12:21:209.8.2019
עד MIT App Inventor Forum
Hi Tim,
Thank you so much Tim to help me do this.
I am trying since yesterday to understand how to make button method to resize the font after calling the sound. I regret to tell you that all tries were failure. so Please help me to do this method as you can.I really appreciate all of your work.
השב לכולם
השב למחבר
העבר לנמענים
0 הודעות חדשות