I need to be able to create a hyperlink dynamically on mouseover and remove it on mouseout event. However, when the mouse goes over the link I need it to not behave as if it is mouseout. When this happens the events goes into infinite loop. See example below:
<html>
<head><title>
</title></head>
<body>
<script language="javascript" type="text/javascript">
function showEdit(tcell) {
var editTag = document.createElement('a');
editTag.appendChild(document.createTextNode("test2"));
editTag.setAttribute('name', 'test2');
editTag.setAttribute('id', 'lnkEdit');
editTag.setAttribute('href', '#');
editTag.setAttribute('style', 'float:right;');
tcell.appendChild(editTag);
}
function hideEdit(tcell) {
//var tcell = document.getElementById("tcAdd");
var lnk = document.getElementById("lnkEdit");
tcell.removeChild(lnk);
}
</script>
<div>
<table style="width:200px;">
<tr>
<td id="tcAdd" style="border:1px solid #CCC" onmouseover="showEdit(this);" onmouseout="hideEdit(this);">
test1
</td>
</tr>
</table>
</div>
</body>
</html>
Put the cursor on test1 and test2 to see the difference.
I think I am missing something obvious.
Well, I don't know if you want like this, but it works:
<html>
<head><title>
</title></head>
<body>
<script language="javascript" type="text/javascript">
function showEdit(tcell) {
document.getElementById("lnkEdit").style.display="inline";
}
function hideEdit(tcell) {
document.getElementById("lnkEdit").style.display="none";
}
</script>
<div>
<table style="width:200px;">
<tr>
<td id="tcAdd" style="border:1px solid #CCC" onmouseover="showEdit(this);" onmouseout="hideEdit(this);">
test1
test2
</td>
</tr>
</table>
</div>
</body>
</html>
It's a simpler way than using DOM. But if you want to use DOM, I can take another try =)
Related
My Google Chrome insists that my iframe is null. What's weird is that this returns the element without a hitch:
iframe = document.getElementById("main");
But then when I try to access any property of the iframe it says that I can't get a property from null (even through the element itself can be returned.)
I know I probably have to wait until it's loaded, but adding an event listener doesn't work because it gives me the same error.
EDIT: Some people asked for the context it is in...
<!DOCTYPE html>
<html>
<head>
<script src="index.js"></script>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body onload="start()">
<noscript>Your browser is ancient and doesn't support JavaScript.</noscript>
<table>
<tr>
<th colspan=10 rowspan=1><h1>TITLE</h1></th>
</tr>
<tbody>
<tr rowspan=2><td colspan=10> </td></tr>
<tr rowspan=10>
<td colspan=10>
<div class="codegena_iframe">
<iframe src="about:blank" height="300" width="500" style="border:0px;float:middle;" id="main"></iframe>
</div>
</td>
</tr>
</tbody>
</table>
<font size="30"><div id="test"></div></font>
</body>
</html>
Here's my html element:
<iframe src="about:blank" height="300" width="500" style="border:0px;float:middle;" id="main"></iframe>
And here's my JavaScript:
iframe = document.getElementById("main");
function start() {
iframe.addEventListener("load", function() {
alert("foo");
});
}
Please help, I'm at a loss of what to do.
Thanks
It is more than likely that the DOM has not been completely loaded when your start function runs. You could remedy this problem in two ways.
Place your script after that iframe
Attach an event listener to the document that fires your code when the DOM is ready.
document.addEventListener('DOMContentLoaded', function (event) {
document.getElementById('main').addEventListener('load', function() {
console.log('The `iframe` has loaded!')
})
})
<iframe src="about:blank" height="300" width="500" style="border:0px;float:middle;" id="main"></iframe>
I am trying to add a span after dynamically generated table, but the span is getting added before the contents of table are getting loaded.
Below is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
dash();
$("button").click(function(){
$("#th").append("<span>span</span>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
</script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" align="right">
<tr><td>hello</td></tr>
</table>
</div>
</body>
</html>
The span is getting added before hello. I want the span to be displayed after the table contents.
The span is being added at the bottom in the dom. You are seeing it before the table because the table is aligned right.Try the following:
$(document).ready(function(){
dash();
$("button").click(function(){
$("#th").append("<span>span</span><br/>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" >
<tr><td>hello</td></tr>
</table>
<br/>
</div>
</body>
</html>
you write something like this $("#hu").after("<span>span</span>");
this will put span after table
Use jQuery after function like the way #Reoxey did. However, please ensure you're adding your script before the </body> tag instead of using it on the <head> tag. Adding Javascript before the </body> tag is recommended to prevents render blocking while the scripts load and is much better for site perception head. Adding Javascript before the </body> tag will also improve the site loading speed.
Hey Manu try this.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
dash();
$("button").click(function(){
$("#hu").append("<span>span</span>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
</script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" align="right">
<tr><td>hello</td></tr>
</table>
</div>
</body>
</html>
You should use table id i.e #hu to append as place of #th
Hope this helps. :)
Just change:
$("#th").append("<span>span</span>");
to:
$("table").append("<span>span</span>");
JS Fiddle: http://jsfiddle.net/tk4h80yn/
This will help you
$(document).ready(function(){
dash();
$("button").click(function(){
$("#hu").after("<span>span</span>");
});
});
I managed to create a HTML/CSS editor, at http://hexagonest.tk/code/, but I can't manage it to work Javascript. I'm not sure why, all the code is valid. For example, go on this jfiddle, and type in this code:
<script>
function dothis(){
document.getElementById("thewow").innerHTML = "poop!";
}
</script>
<button type="button" onclick="dothis()">Hi</button>
<p id="thewow">Hi</p>
In theory, it should work, yes? Even when I right click>inspect element, it shows that there is a valid tag. What's wrong with this?
If you didn't catch it, my problem is that Javascript is now working with my live HTML editor.
try this
<button type="button" onclick="document.getElementById('thewow').innerHTML = 'poop!'">try me</button>
Hi
---addtional---
use this script to play with your code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
textarea, iframe {width:200px;height:200px;}
td {vertical-align:top;text-align:center;}
</style>
<script type="text/javascript">
function tryit()
{
var html = document.getElementById("code").value;
ifrm = document.getElementById("output");
var doc = ifrm.contentDocument || ifrm.contentWindow.document;
doc.open();
doc.write(html);
doc.close();
}
</script>
</head>
<body>
<table cellspacing="4" cellpadding="0" border="0">
<tr>
<td>
<textarea id="code"><html><body>Hello World!</body></html></textarea>
<br />
<button onclick="tryit();">Do it!</button>
</td>
<td>
<iframe id="output"></iframe>
</td>
</tr>
</table>
</body>
</html>
source http://w3schools.invisionzone.com/index.php?showtopic=23599
You should use the eval() function from JavaScript.
more documentation here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval
Then you should have one form for the JavaScript and another for the html.
Beware about security issues that you can have with eval() (XSS vulnerabilities, etc...).
So I'm just trying to get a message box to pop up when I click a cell in my table. I have seen many threads about $("td").click(function () { etc, but these are not working for my table. I cannot find out why.
HTML:
<body>
<div id="tableArea">
<table class="table table-bordered" id="myTable">
<tr>
<td bgcolor="green" id='a1'>1</td><td>2</td>
</tr>
</table>
</div>
</body>
And the javascript/jQuery:
<script type="text/javascript">
$("td").click(function(e) {
alert('Anything');
});
</script>
I do not see a difference in this code than in many of the other threads, but this is not working. Note: I'm using Bootstrap, if that makes a difference.
You should capture the click event after $(document).ready().
<script type="text/javascript">
$(document).ready(function() {
$("td").click(function(e) {
alert('Anything');
});
});
</script>
$(document).ready( function(){
$("td").on('click', function(e) {
alert('Anything');
});
});
just work fine for your markup.
see it on jsfiddle
I'm a newbee in Javascript.
The error in the following code is that the alert message is displayed as soon as the page loads. Please help me overcome this error. And when I hit the submit button, the alert isn't displayed but rather the next link is opened.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Delete Book</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/default.css" />
</head>
<body id="index_page">
<div id="wrapper">
<div id="header">
<h1 align="left">Library</h1>
</div>
<ul id="navigation">
<li id="index">FAQ</li>
</ul>
<div id="content">
<div id="main_content">
<h2>Delete book</h2>
<h4>Enter details of the book</h4>
<FORM action="del_book_action.php" method="post" >
<TABLE WIDTH="70%" >
<TR>
<TH width="60%">Enter book ID:</TH>
<TD width="50%"><INPUT TYPE="text" name="id" id="book_id"></TD>
</tr>
<TR>
<TH></TH>
<TD width="50%"><INPUT TYPE="submit" Value="Submit" onclick="validate_f()"></TD>
</tr>
</TABLE>
</FORM>
</div>
<p id="footer">#AntonyAjay,2012</p>
</div>
<script language="javascript">
window.onload=function validate_f()
{
var y=document.getElementById("book_id").value;
if(y==""||isNaN(x))
{
alert("Book Id should be numeric");
}
}
</script>
</body>
</html>
You're running the function on page load. Change this:
window.onload=function validate_f()
to:
function validate_f()
See if changing isNaN(x) to isNaN(y) fixes things.
Remove the windows on load the intention of the code is to validate upon submit. What is happening is that the function is being called upon page load
You pass a reference to a function to the window.onload and not the actual call.
<script>
window.onload = function(){
alert('test');
}
</script>
It is because you are calling the function onclick. Make two changes.Don't use the function on load. Use below html change and script
<INPUT TYPE="submit" Value="Submit" onclick="return validate_f()">
function validate_f()
{
var y=document.getElementById("book_id").value;
if(y==""||isNaN(x))
{
alert("Book Id should be numeric");
return false;
}
}