PDA

View Full Version : almost functional string to element engine (no innerhtml)



Falkon303
03-01-2009, 05:11 PM
Ok, so I started this script, and I hit a wall because I am mentally exhausted right now... The idea is to mimick innerHTML. This script is ugly right now, but somewhat functional, and I believe it has a future....

Basically it works like this - a user will be able to update html similar to the innerhtml method, all css styling, id tags, and everything else included....

Of course it's taking a while to work out, but that's because I am not using php to count elements....it's javascript.

so anyways, a user can add this insiade of an element -
onclick="inner(this.id, '<a href=\'http://www.yahoo.com\'>link</a><div id=\'test\' >huh</div>');"

The Idea being that it's similar to innerhtml in nature. Now of course innerhtml is stupid and unsafe. but I believe the prospect of this function could also provide perhaps a more interesting approach to element creation, being that it would be based on html, and the function itself would simply act as a translator, and perhaps extend to such functions as -
"inner(this.id, someotherid)"

now this would require traversing the DOM and recovering all nodeType, nodeName, values, and atrributes per element, but it might be worth it.

I have yet to look into the "cloneNode", or the cloning functions of javascript... that will be my next thing.

So anyways, here is my code. YES, it's totally horrid looking, but you will not find one innerhtml in there. A hell of a lot of "split"s though. Note: this is not functional at all how I'd like it, but I find it interesting....It splits a string into elemental properties utilizing "split". I am not that good with it yet, but I think it might be a nice solution to some problems.



<!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=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function inner(elm, html)
{
var a_array = new Array();
strtTags = html.split("<");
for(i=0; i<strtTags.length; i++)
{
inrvals = strtTags[i].split(">");
eltag = inrvals[0].split(" ");
elatt = inrvals[0].split("=");
endtag = elatt[0].split(" ");
a_array[i] = inrvals[1];
if (inrvals[1] == null || inrvals[1] == "")
{;} else {alert("element value:" + inrvals[1] + "\r\n element type:" + eltag[0] + "\r\nelem attribute:" + endtag[1] + "\r\n elem attr value:" + elatt[1]);
mknew = document.createElement("a");
//mknew.endtag[0] = endtag[1];
document.getElementById(elm).appendChild(mknew);
}
document.getElementById(elm).firstChild.nodeValue = a_array;
}

}
</script>
</head>

<body>
<a style="cursor:pointer;" id="mynode" name="mynode" onclick="inner(this.id, '<a href=\'http://www.yahoo.com\'>link</a><div id=\'test\' >huh</div>');">click me</a>
</body>
</html>

Twey
03-01-2009, 09:42 PM
But why use it and all this nasty parsing code rather than JsonML? It requires working with strings of code, for a start. Also, this approach is terribly slow and probably flawed (HTML requires contextual parsing); I would only use it as a fallback for innerHTML.

Falkon303
03-01-2009, 10:38 PM
But why use it and all this nasty parsing code rather than JsonML? It requires working with strings of code, for a start. Also, this approach is terribly slow and probably flawed (HTML requires contextual parsing); I would only use it as a fallback for innerHTML.

It was basically only going to be used as a fallback for innerHTML, but now that I have had some rest and thought about it, I don't even need this.

Technically, it was an attempt to destroy having to type "document.form.element.firstChild.NodeValue/variations" so many times.

A part of me believes it's an extra process to replace an element with another tye of element rather than changing the element nodeName, yet after reading, it's not just as simple as changing the name of somethng, you are actually dealing with creating an entirely new element, which is where the benefit of innerHTML shows in my opinion.

innerHTML is stupid and wrong, but the ability to throw html as a string is pretty useful sometimes imo. I haven't used Json, but I'll look into it. What I am trying to build is an element that changes nodeName onmouseover, and reverts on mouseout, but keeps the same values as the original element. InnerHTML seems the most efficient route.... sadly.

molendijk
03-01-2009, 11:02 PM
innerHTML is stupid and wrong
Not always, I think. When you use something like document.getElementById('some_div').innerHTML = "<object type='text/html' data='some_file.html' style='...'></object>", then I cannot imagine why innerHTML would be unrelyable, since you insert a file as-a-whole.
In fact, I made a website for someone and used this idea for including a navigation menu (on the client) on each page. (I never had any complaints).

What do you think, Twey?
===
Arie (Molendijk).

Falkon303
03-01-2009, 11:03 PM
Nice point Twey... I think that was just a "I wanna be lazy" tangent honestly.

I actually almost have the script how I'd like it by using the DOM method thanx to people who helped in my last post.



<script type="text/javascript">
function initload(value){
if (document.getElementById("bojo").firstChild == null) {;}
else
{document.getElementById("bojo").removeChild(elOpt);}
elOpt = document.createElement(value);
elOpt.setAttribute("id","my" + value);
elOpt.style.border = "4px solid #cccccc";
elOpt.style.height = "40px";
elOpt.style.width = "40px";
elOpt.onmouseout = function() {initload('div');};
elOpt.onmouseover = function() {initload('textarea');};
document.getElementById("bojo").appendChild(elOpt);
}
</script>
<body id="body" onload="initload('div');">
<div id="bojo" name="bojo" ></div>
</body>


It seems to go very slow.... Should I use the display property instead of the actual functionality? :)

The onmouseover/onmouseout runs like crap... I know I am missing something, I just can't figure out what it is. I am trying to attach an "onmouseout"/over to the element I am creating..... it's not working.

it would be the equivalent to this - http://dynamicdrive.com/dynamicindex15/domroll.htm

except instead of an image changing, it'd be an entirely new element..... I am thinking a procedure like -

/////
<a id="myel" onmouseover = "this.id='fakeid';this.element.display = 'none';showotherel('textarea', 'myel');">illusion with element in html...</a>
/////

perhaps if the element doesn't have to be created, this will run faster, as setting attributes of an existing element may run better than creating a new one.

molendijk
03-01-2009, 11:28 PM
Do you know this (http://ejohn.org/blog/xhtml-documentwrite-and-adsense/) article about document.write?
===
Arie.

Falkon303
03-01-2009, 11:48 PM
Finally figured out how to get this working.... All I need to do transfer element.firstChild.nodeValue. :)



<textarea id="mytextarea" name="mytextarea" onmouseout="this.style.display = 'none';document.getElementById('myel').style.display = '';" style="display:none;border:1px solid #cccccc;width:100px;height:100px;">illusion with element in html</textarea>

<div id="myel" name="myel" style="border:1px solid #cccccc;width:100px;height:100px;" onmouseover="
document.getElementById('mytextarea').style.display = '';this.style.display = 'none';">illusion with element in html...</div>


Interesting article.... Wierd that he called people hand wavers with no solutions while his solution is an invalid XHTML action - document.write..

I could be missing something, but if document.write is invalid, you can't exactly "fix" it by using it.... I could be sarcastically and cockilly wrong, but everything I have learned about document.write is that it's ... document.wrong

molendijk
03-02-2009, 12:17 AM
I could be missing something, but if document.write is invalid, you can't exactly "fix" it by using it.... I could be sarcastically and cockilly wrong, but everything I have learned about document.write is that it's ... document.wrong
He doesn't actually use 'documet.write'; he changes it into something else.
===
Arie.

Falkon303
03-02-2009, 12:19 AM
He doesn't actually use 'documet.write'; he changes it into something else.
===
Arie.

Ahh, I should have read closer and kept my mouth shut. That's sick man. :) thanx.

I recant my moronic statements. That's what I was trying to do to "innerHTML".

so check this out for the concept of element change (or the illusion) -



<style type="text/css">
.hiding {display:none;border:1px solid #cccccc;width:100px;height:100px;}
.showing {border:1px solid #cccccc;width:100px;height:100px;}
</style>
<script type="text/javascript">
function rehide(thisel, otherel)
{document.getElementById(thisel).className = 'hiding';
document.getElementById(otherel).className = 'showing';
document.getElementById(otherel).firstChild.nodeValue = document.getElementById(thisel).firstChild.nodeValue;}
</script>
</head>
<body>
<textarea class="hiding" id="mytextarea" name="mytextarea" onmouseout="rehide(this.id, 'myel');" >&nbsp;</textarea>
<div id="myel" name="myel" class="showing" onmouseover="rehide(this.id, 'myatag');">illusion with element in html...</div>
<a style="hiding" href="http://www.google.com" name="myatag" id="myatag" onmouseout="rehide(this.id, 'mytextarea');">&nbsp;</a>
</body>
</html>


Seems nice because you can target what element you want to show/hide...

Twey
03-03-2009, 01:26 AM
He doesn't actually use 'documet.write'; he changes it into something else.Namely, innerHTML — not much better, really.


Nice point Twey... I think that was just a "I wanna be lazy" tangent honestly.

I actually almost have the script how I'd like it by using the DOM method thanx to people who helped in my last post.


<script type="text/javascript">
function initload(value){
if (document.getElementById("bojo").firstChild == null) {;}
else
{document.getElementById("bojo").removeChild(elOpt);}
elOpt = document.createElement(value);
elOpt.setAttribute("id","my" + value);
elOpt.style.border = "4px solid #cccccc";
elOpt.style.height = "40px";
elOpt.style.width = "40px";
elOpt.onmouseout = function() {initload('div');};
elOpt.onmouseover = function() {initload('textarea');};
document.getElementById("bojo").appendChild(elOpt);
}
</script>
<body id="body" onload="initload('div');">
<div id="bojo" name="bojo" ></div>
</body>Laziness is the mother of invention :) You've just gone about it the wrong way in this case. You shouldn't have to write out the calls by hand, but there are better ways than presenting it as a string. See for example this post (http://www.dynamicdrive.com/forums/blog.php?b=8); using that function, it could be written:


function initload(value) {
var bojo = Dom.get("bojo");

Dom.clear(bojo);

bojo.appendChild(Dom.create(
[value,
{
id: "my" + value,
onmouseout: function() { initload('div'); },
onmouseover: function() { initload('textarea'); }
style: {
border: "4px solid #cccccc",
height: "40px",
width: "40px"
}
}
]);
}Simple, easy, readable, no big strings.

molendijk
03-04-2009, 12:06 AM
Namely, innerHTML not much better, really
InnerHTML may give unexpected results, but I don't think this happens in something like document.getElementById('some_div').innerHTML = "<object type='text/html' data='some_file.html' style='...'></object>", since you 'insert' a file as-a-whole. If this is true, then innerHTML has its legitimate uses. If not, I promise to eat my hat.
===
Arie.

Twey
03-04-2009, 01:43 AM
Both are entirely non-standard, so technically speaking, they might turn your whole website orange. Nobody knows.

Falkon303
03-04-2009, 02:55 PM
Thanks for this Twey, I really dig the style: { } method. I am going to have to make that practice....

If I wanted to use this to update an element in the process of creation, how would I do that?

For example - var newLi = Builder.node('div', id: 'temp', style: {border: '1px solid #cccccc',height: '40px',background-color: '#ffffff'}); ???

I am no sure where the styling fits in there...

- Ben


Namely, innerHTML — not much better, really.

Laziness is the mother of invention :) You've just gone about it the wrong way in this case. You shouldn't have to write out the calls by hand, but there are better ways than presenting it as a string. See for example this post (http://www.dynamicdrive.com/forums/blog.php?b=8); using that function, it could be written:


function initload(value) {
var bojo = Dom.get("bojo");

Dom.clear(bojo);

bojo.appendChild(Dom.create(
[value,
{
id: "my" + value,
onmouseout: function() { initload('div'); },
onmouseover: function() { initload('textarea'); }
style: {
border: "4px solid #cccccc",
height: "40px",
width: "40px"
}
}
]);
}Simple, easy, readable, no big strings.

Twey
03-04-2009, 11:03 PM
If I wanted to use this to update an element in the process of creation, how would I do that?

For example - var newLi = Builder.node('div', id: 'temp', style: {border: '1px solid #cccccc',height: '40px',background-color: '#ffffff'}); ???

I am no sure where the styling fits in there...I'm not sure what you mean. You've got style in there already, although the method doesn't appear to be mine (which is JsonML-compliant [or at least a subset, I haven't gone out of my way to implement the whole specification], so I would prefer it).