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...).
Related
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'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;
}
}
I was trying to find out what is wrong with this code for a few hours. After double-clicking on divs CKEditor correctly opens and after pressing down the button it correctly hides. But after clicking again on div it doesn't want to open again and then firebug returns an error "p is null" in line 86 in ckeditor.js.
Finally it turned out that the problem disappears when I turn off the option "startupMode: 'source'". Has anyone an idea what this behaviour is caused by? Is it a bug in CKEditor or I do something wrong.
Version of CKEditor I use is 3.6.4.
Thanks in advance for any help!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/admin/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<h2>Vars</h2>
<table>
<tbody>
<tr>
<td>Cell no 1.1</td>
<td><div class="editable" id="cell1">Cell no 1.2</div></td>
</tr>
<tr>
<td>Cell no 2.1</td>
<td><div class="editable" id="cell2">Cell no 2.2</div></td>
</tr>
</tbody>
</table>
<input type="submit" id="submit" value="Close"/>
<script type="text/javascript">
editor = false;
function destroy_cke() {
if (editor) {
editor.updateElement();
editor.destroy();
}
}
function replace_div(div) {
destroy_cke();
editor = CKEDITOR.replace(div,{
startupMode: 'source',
});
}
$(document).ready (function() {
$('.editable').dblclick(function(e) {
e.stopPropagation();
var element = e.target || e.srcElement;
while (element.nodeName.toLowerCase() != 'html' && (element.nodeName.toLowerCase() != 'div' || element.className.indexOf('editable') == -1 )) element = element.parentNode;
replace_div(element);
});
$('#submit').click(function(){
destroy_cke();
});
});
</script>
</body>
</html>
Answered at http://cksource.com/forums/viewtopic.php?f=11&t=26734&p=67792#p67792
The destroy_cke function isn't clearing the editor variable.
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 =)
It might be a simple, but the funny thing is i've tried it for almost 2-3hrs and haven't been able to solve it :(.
I have a parent window, which has a text box, and it has a value. I do a window.open and open a client and try to read the value of the parent, but unable to get the value.
Any help!!
I've tried
window.parent.document.getElementById(window.name)
window.parent.document.getElementById('test').value
window.opener.document.getElementById('teast').value
window.parent.opener.document.getElementById('teast').value
window.opener.parent.document.getElementById('teast').value
Almost all the permutation and combination. And its pure HTML.
Due to security restrictions, Javascript is unable to access documents that reside on a separate domain from the current one. So, if your parent is on a different domain from the child, this will never work.
window.opener.document.getElementById('test').value should work.
I've tried that, it ain't work. I'm posting the code
test.html
<html>
<head>
<title>Chat</title>
</head>
<body>
<div id="chatMessages"></div>
<script>
var newWin = null;
var OpenWindow = null;
function popUp(strURL, strType, strHeight, strWidth) {
if (newWin != null && !newWin.closed)
newWin.close();
var strOptions="";
if (strType=="console")
strOptions="resizable,height="+
strHeight+",width="+strWidth;
if (strType=="fixed")
strOptions="status,height="+
strHeight+",width="+strWidth;
if (strType=="elastic")
strOptions="toolbar,menubar,scrollbars,"+
"resizable,location,height="+
strHeight+",width="+strWidth;
alert(window.parent.document.getElementById(window.name));
newWin = window.open(strURL, 'alertWindow', strOptions);
//newWin.document.getElementById("child").value='Str';
newWin.focus();
// send_data(data);
}
function chat() {
popUp('../alert.jsp','console',250,600);
}
</script>
<form name="AlertReceiverOnHeader" onclick="chat()">
<input type="text" value="teast" id="teast" name="teast"/>
</form>
</html>
child.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Alert</title>
</head>
<body onload="load()">
<script language="JavaScript">
function load() {
alert('In load');
alert("001="+window.parent.document.getElementById('teast'));
alert("002="+window.parent.document.getElementById(window.name));
alert("003="+window.opener.document.getElementById('teast').value);
}
</script>
<form name="child">
<input type="text" id="child" value="child"/>
</form>
</body>
</html>