How to center text with dynamic length at a give point? - javascript

I have the following function which needs to print dynamically generated text(txt) centered at a given point(x,y)
function printText(x,y,txt) {
var s = "";
s = "<b style=???>"+txt+"</b>";
document.getElementById("some_div").innerHTML = s;
}
How can I do this?

Make the position of the div relative and use absolute positioning on the inner element, something like this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Test</title>
<meta charset="UTF-8" />
<style>
#some_div {
postion:relative;
height:300px;
}
#some_div b {
position:absolute;
}
</style>
<script>
function printText(x, y, txt) {
var s = "<b style=\"left:" + x + "px;top:" + y + "px;\">"+txt+"</b>";
document.getElementById("some_div").innerHTML = s;
}
</script>
</head>
<body>
<div id="some_div"></div>
<button onclick="printText(100, 40, 'This is a test');">Click Me</button>
</body>
</html>

Related

Font increase animation doesn't work JavaScript

i am trying to recreate a simple jQuery animation with JavaScript. And it doesn't work. I would be very happy if you tell me what is wrong, because for me it seems right. Thank you in advance!
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").animate({fontSize: "100px"}, "slow");
});
</script>
</head>
<body>
<div style="background:#98bf21;height:200px;width:600px;">Hello World</div>
</body>
</html>
And below is the JavaScript animation:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>This is a title!!!</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div style="background-color: #98bf21; width: 200px; height: 600px;">Hello World!</div>
<button onclick="startFontIncrease()">Click me</button>
<script>
function startFontIncrease() {
var element = document.getElementsByTagName("div")[0];
var fontSize = element.style.fontSize;
var id = setInterval(increaseFont, 5);
function increaseFont() {
if (fontSize == 100) {
clearInterval(id);
}
else {
fontSize++;
element.style.fontSize = fontSize;
}
}
}
</script>
</body>
</html>
There are numerous problems with the transcription to plain JS.
To begin with, you have not set an initial font-size in the inline style and it is thus an empty string when you try to access it. So the HTML should be like this:
<div style="background-color: #98bf21; width: 200px; height: 300px; font-size: 12px;">
Hello World!
</div>
Then, you must get the initial font size out of the font-size increasing function and you must also parse it to make sure you get the number (and not the "12px" string, otherwise it will be NaN when you try to increment).
var element = document.getElementsByTagName("div")[0];
var fontSize = parseInt(element.style.fontSize);
function startFontIncrease() {
var id = setInterval(increaseFont, 5);
function increaseFont() {
if (fontSize == 100) {
clearInterval(id);
}
else {
fontSize++;
element.style.fontSize = fontSize + 'px';
}
}
}
Instead of giving slow attribute,adjust them in milliseconds if possible.
<script>
$(document).ready(function(){
$("div").animate({fontSize: "100px"}, 2000);
});
</script>
Your implementation doesn't work because the fontSize you get for the div is ""
What you have to is
document.getElementById("btn").addEventListener("click",startFontIncrease);
function startFontIncrease() {
var element = document.getElementsByTagName("div")[0];
var fontSize = parseFloat(window.getComputedStyle(element, null).getPropertyValue('font-size'));
var id = setInterval(increaseFont, 100);
function increaseFont() {
if (fontSize == 100) {
clearInterval(id);
} else {
fontSize++;
element.style.fontSize = fontSize + "px";
}
}
}
For the jQuery version Hameed Syed seams to be correct.

JavaScript TouchEvent did not work

Recently I started play with TouchEvent.
I would like to ask why this code does not work.
Why DIV "coords" does not display any result.
I used the code from:https://mobiforge.com/design-development/html5-mobile-web-touch-events
<!DOCTYPE html>
<html lang ="pl-PL">
<head>
<meta charset="utf-8"/>
<style>
#touchzone{
width:300px;
height:300px;
border:1px solid #aaaaaa;
}
</style>
</head>
<body>
<div id="coords"></div>
<div id="touchzone"></div>
<script type="text/javascript">
window.onload=function(){
function init() {
var touchzone = document.getElementById("touchzone");
touchzone.addEventListener("touchstart", touchHandler, false);
}
}
function touchHandler(event) {
var coords = document.getElementById("coords");
coords.innerHTML = 'x: ' + event.touches[0].pageX + ', y: ' + event.touches[0].pageY;
}
</script>
</body>
</html>

Input highlight part of text

Is there any change to have input element similar like is on my screenshot.
I would like to change value via javascript and highlight part of text with different color if it will be wrapped with *
Thanks for any help.
You cannot do it with an input element. Here is one alternative:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
/*style it to look like input element*/
[contenteditable] {
border: 1px solid gray;
}
</style>
</head>
<body>
<div id="contentDiv" contenteditable>sdfsdtokendfdfsdfs</div>
<br/>
<input type="button" onclick="test()" value="Click me"/>
<script type="text/javascript">
function test() {
// this is our token
var valueToSelect = "tokendfdf";
var contentDiv = document.getElementById('contentDiv');
// check if div contains wanted token
if (contentDiv.innerHTML.indexOf(valueToSelect) >= 0) {
// create span with wanted color
var replaceString = '<span style="color: red">*' + valueToSelect + '*</span>';
// replace the string with colored span
contentDiv.innerHTML = contentDiv.innerHTML.replace(valueToSelect, replaceString);
}
}
</script>
</body>
</html>
Here is JS Bin example

Cannot execute javascript code from loaded page

I created a page that show a gallery of images (imagenes.html):
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
<div id="gallery"></div>
<div id="image"></div>
</body>
</html>
And the javascript code is (slider.js):
$(function() {
function loadSliderImage() {
var i, f, n;
for (i = 1; i < 49; ++i) {
n = ((i < 10) ? "0" : "") + i
f = n + "-120.JPG";
$("#gallery").append("<img src='images/cocinas/thumbs/" + f + "' rel=" + n + "></img>");
}
}
$("#gallery").on('click', 'img', function() {
$("#image").html("<img src='images/cocinas/small/" + $(this).attr("rel") + "-600.JPG' rel=" + $(this).attr("rel") + "></img>");
});
$("#image").on('click', 'img', function(e) {
var url = "images/cocinas/large/" + $(this).attr("rel") + "-980.JPG";
window.open(url, 'KitchenMaster', "width = 980, height = 670, scrollbars = no");
e.preventDefault();
});
loadSliderImage();
});
If I execute the imagenes.html, works fine but if I execute the page index.html that load the imagenes.html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/km.js"></script>
<title>Gallery</title>
</head>
<body>
<div id="content"></div>
</body>
</html>
with the javascript code (km.js):
$(function() {
$("#content").load("imagenes.html");
});
the page imagenes.html not works fine (the javascript code slider.js does not run)
Can you help me?
Thanks in advance.
You are adding HTML inside HTML, it wont work, you can't have two head and body section in same HTML. instead in imagenes.html keep only those two divs 'gallery', 'image' and javascript stuff then load it in index.html

Layering two HTML component one upon another

I have a textarea and a div.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" src="JSFile.js"></script>
<style type="text/css">
.hidden {visibility: hidden;}
</style>
</head>
<body>
<textarea id="txtArea" onmouseover="mouseMoved();"></textarea>
<div id="hiddenDiv" class="hidden"></div>
</body>
There is onmouseover event associated with the textarea.
function mouseMoved() {
var txtArea = document.getElementById("txtArea");
var hiddenDiv = document.getElementById("hiddenDiv");
var newHtml = "";
var words=txtArea.value.split(" ");
for (i = 0; i < words.length; i++) {
newHtml += '<span>' + words[i] + '</span> ';
}
hiddenDiv.innerHTML=newHtml;
}
Is there any way to place the hiddenDiv in the same layer to the textarea?
What I intended to do is to attach an event with the spans of the div such that when users move mouse over the textarea as well as the div, that event tells, what is the word under the mouse pointer. Hope I represent my problem clearly. If you want to know more, I will provide information.
Thanks and regards.
Edit:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" src="JSFile.js"></script>
<style type="text/css">
.hidden {
position: relative;
/*visibility: hidden;*/
top: -50px;
left: 5px;
z-index: -1;
}
.txtArea {
position: relative;
}
</style>
</head>
<body>
<textarea id="txtArea" class="txtArea" onmouseover="mouseMovedOnTextBox();"></textarea>
<div id="hiddenDiv" class="hidden"></div>
<label id="lbl"></label>
</body>
And the .js:
function mouseMovedOnTextBox() {
var txtArea = document.getElementById("txtArea");
var hiddenDiv = document.getElementById("hiddenDiv");
var newHtml = "";
var words=txtArea.value.split(" ");
for (i = 0; i < words.length; i++) {
newHtml += '<span onmouseover="mouseMovedOnSpan(\'' + words[i] +'\');">' + words[i] + '</span> ';
}
hiddenDiv.innerHTML=newHtml;
}
function mouseMovedOnSpan(word) {
document.getElementById("lbl").innerHTML=word;
}
I suggest you to not use visibiliy:hidden but display:none, using the last one means that the element will not use space inside the page and you can handle easily your situation.
Good luck

Categories