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
Related
I want to open a new window/tab, put some HTML in the document, then bring up the browser print dialog to print that new window. I am using the following to accomplish this:
var w = window.open();
w.document.write(html);
w.document.close();
w.focus();
w.print();
w.close();
HTML:
<body>
<img src='url1' />
<img src='url2' />
<img src='urln' />
</body>
This all works, the window pops up, and the print dialog is shown for the new page and prints all images fine. However, for some reason, some of images are printing, and instead the image alt message is printed.
There are lots of images, and they are dynamically generated on the server side (which takes about 1 second to load each).
What needs to be done to make sure all images are loaded and printed?
This happens in IE and Firefox that I've confirmed. I appreciate any help.
Try to use a JS library that detect when images have been loaded.
You can use it like this:
<script src="https://npmcdn.com/imagesloaded#4.1/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript">
imagesLoaded(document.body, function() {
window.print();
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>Print Images</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<style type="text/css">
body, div, image{
text-align: center;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="/life/public/js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var data = $("td:[id^='tdImg']", window.opener.document);
for(var i = 0; i < data.length; i++){
var image = $("<image/>");
image.load(data.length, function(event){
try{
var c = $("<canvas />");
c.get(0).width = $(this).get(0).naturalWidth;
c.get(0).height = $(this).get(0).naturalHeight;
var cxt = c.get(0).getContext("2d");
cxt.drawImage($(this).get(0), 0, 0);
var base64Code = c.get(0).toDataURL("image/png");
c.remove();
$("body").append($("<div/>").append($("<image/>").attr("src", base64Code)));
if($("body").find("image").length == event.data){
window.print();
window.close();
}
}catch(e){
alert(e.message);
}finally{
$(this).unbind("error");
$(this).unbind("load");
$(this).remove();
}
});
image.attr("src", data.eq(i).attr("data-url"));
}
});
</script>
</head>
<body></body>
</html>
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Print Images</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<style type="text/css">
body, div, v\:image{
text-align: center;
margin: 0px;
padding: 0px;
}
div{
page-break-after:always;
}
v\:image{
behavior: url(#default#VML);
display: block;
width: 1078px;
height: 1527px;
}
</style>
<script type="text/javascript" src="/life/public/js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var data = $("td:[id^='tdImg']", window.opener.document);
for(var i = 0; i < data.length; i++){
var image = $("<image/>");
image.load(data.length, function(event){
try{
$("body").append($("<div/>").append($("<v\:image/>").attr("src", $(this).attr("src"))));
if($("body").find("v\\:image").length == event.data){
window.print();
window.close();
}
}catch(e){
alert(e.message);
}finally{
$(this).unbind("error");
$(this).unbind("load");
$(this).remove();
}
});
image.attr("src", data.eq(i).attr("data-url"));
}
});
</script>
</head>
<body></body>
</html>
I have 4 (or more) DIV elements on which I want to set this behavior:
In the beginning, all DIVs display A
I click on a random DIV. It must display B. Other DIVs must keep displaying A
If the consecutive click is performed on the same DIV, this later one must display back A. Others must keep displaying A.
If the consecutive click is performed on a different DIV, this later one must display B. All other DIVs must display A
This is what I am working on. I have had hard time to do anything useful.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
.divElt {
margin-left: 20%;
width: 80px;
height: 40px;
background-color: blue;
color: white;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<script>
var data = 'B';
function funct() {
var elts = document.getElementsByClassName('divElt')
for(var i = 0; i < elts.length; i++) {
elts[i].innerHTML = data
}
}
</script>
<div class ='divElt' onclick = "funct()"> A
</div>
<br/>
<div class ='divElt' onclick = "funct()"> A
</div>
<br/>
<div class ='divElt' onclick = "funct()"> A
</div>
<br/>
<div class ='divElt' onclick = "funct()"> A
</div>
</body>
</html>
Please help me to resolve this only in JavaScript (no jQuery or other libraries). Thank you a lot in advance.
var letterA = "A";
var letterB = 'B';
//Init with all "A"
var elts = document.getElementsByClassName('divElt');
for (var i = 0; i < elts.length; i++) {
elts[i].innerHTML = letterA;
}
function funct(item) {
for (var i = 0; i < elts.length; i++) {
if (elts[i] !== item)
elts[i].innerHTML = letterA;
else
elts[i].innerHTML = elts[i].innerHTML === letterA ? letterB : letterA;
}
}
.divElt {
margin-left: 20%;
width: 80px;
height: 40px;
background-color: blue;
color: white;
font-weight: bold;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<script>
</script>
<div class='divElt' onclick="funct(this)">
</div>
<br/>
<div class='divElt' onclick="funct(this)">
</div>
<br/>
<div class='divElt' onclick="funct(this)">
</div>
<br/>
<div class='divElt' onclick="funct(this)">
</div>
</body>
</html>
To uniquely identify the div which was clicked, pass this to the called function like so onclick=func(this)
Then inside your function receive it as a parameter
function func(elem) {
var elts = document.getElementsByClassName('divElt');
for(var i = 0; i < elts.length; i++) {
elts[i].innerHTML = 'A';
}
elem.innerHTML = elem.innerHTML === 'B' ? 'A' : 'B';
}
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
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>
I am currently creating divs using a for loop.
The problem is when I try to assign a unique id to every div element that is being created within the for loop.
I am getting closer but at the moment the count starts at 36 instead of being 1.
Thanks so much for you help!
Here is my html:
<!DOCTYPE html>
<html>
<head>
<title>Intro Webpage!</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0; target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
</body>
</html>
Now, this is my script.js:
for(i = 0; i < 35; i++) {
$(document).ready(function(){
$('body').append('<div id="div'+ (i++) +'" />');
});
}
Also, my css:
div {
width: 167px;
height: 167px;
border-radius: 10px;
background-color: #ff0000;
display: inline-block;
margin-left: 5px;
}
You need to put loop in side document.ready instead of putting document.ready in loop also you may not need to increament i within loop body as it is increamented in loop signature. You can read more about document.ready here
$(document).ready(function(){
for(i = 0; i < 35; i++) {
$('body').append('<div id="div'+ i +'" />');
}
});
All the provided answers will do the job but if you want to make it faster, you can do it like this. Also, if you want the div id to start with 1, you should do ++i instead of i++. i++ doesn't make sense since that's being done by the for loop automatically.
$(document).ready(function() {
var divsToAppend = "";
for (i = 0; i < 35; i++) {
divsToAppend += '<div id="div' + (++i) + '" />';
}
$('body').append(divsToAppend);
});
Try:
$(document).ready(function(){
var html='';
for(i = 0; i < 35; i++) {
html += '<div id="div'+ i +'" />';
}
$('body').append(html);
});
Take the $(document).ready out of the loop for starters.
$(document).ready(function() {
// do loop here
}