PDA

View Full Version : Resolved Thanks John.



robin9000
02-07-2009, 07:54 PM
I would like to take the following html coding and make it into a java script document. Dose any one know how to do this? If it's not possible pelease let me know.

<p>The contents of this website are Copyright &copy; 2009, Robin's Den
<a href="">Privacy Policy</a> |
<a href="">Terms of use</a> |
<a href="">Disclaimer</a> |
<a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">XHTML</a> |
<a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS">CSS</a></p>

Master_script_maker
02-07-2009, 09:55 PM
What do you mean? Would you like the javascript to write this?

djr33
02-07-2009, 10:01 PM
If your method isn't working, it's a much better idea to tell us what you are trying to accomplish, rather than showing us (limited) progress on a method that may or may not work-- as above, please tell us what you want to do, and perhaps how you want to do it, so we can answer-- as if, there's no javascript, and I don't see why that html wouldn't work, unless you need it to do something else.

jscheuer1
02-07-2009, 10:09 PM
<script type="text/javascript">
document.write('<div id="val_$_val"><\/div>');
(function(d){
var p = document.createElement('p'), a = [document.createElement('a')];
a[0].href = '';
for(var i = 0; i < 4; ++i)
a.push(a[0].cloneNode(true));
a[0].appendChild(document.createTextNode('Privacy Policy'));
a[1].appendChild(document.createTextNode('Terms of use'));
a[2].appendChild(document.createTextNode('Disclaimer'));
a[3].href = 'http://validator.w3.org/check/referer';
a[3].title = 'This page validates as XHTML 1.0 Transitional';
a[3].appendChild(document.createTextNode('XHTML'));
a[4].href = 'http://jigsaw.w3.org/css-validator/check/referer';
a[4].title = 'This page validates as CSS';
a[4].appendChild(document.createTextNode('CSS'));
p.appendChild(document.createTextNode('The contents of this website are Copyright \xa9 2009, Robin\'s Den '));
for(var i = 0; i < 5; ++i){
p.appendChild(a[i]);
if (i < 4)
p.appendChild(document.createTextNode(' | '));
}
d.appendChild(p);
})(document.getElementById('val_$_val'));
</script>

djr33
02-07-2009, 10:17 PM
Why such complex code, John? Can't just output it all as a string?
On the other hand, perhaps a function that would automatically output it like you just wrote, but using any input and dynamically parsing it, would be a very useful addition to the library, if that's something possible for you to write (or perhaps the input can be too varied to really work like that).

jscheuer1
02-07-2009, 10:28 PM
I prefer using the DOM, that's all. In this case (depending upon how the final code using other approaches is written) it probably won't make a lot of difference. However, it is a failsafe method in that the tags written will conform to the DOCTYPE in use for the page. Using innerHTML or document.write() cannot guarantee that, and the p element is very tricky in HTML and XHTML, best to append to it, as it has a nasty habit of self closing earlier than expected if you aren't careful how you document.write/innerHTML it and its contents to the page. It will do so anyway if you don't respect its rule about being incapable of containing another block level element.

Incidentally - I recommend against the XHTML DOCTYPE implied by the OP's code.

robin9000
02-07-2009, 10:50 PM
Wow is all I got to say John I did not even think it possible. Thanks dose not quite say enough. You are absolutly brillent. It works perfectly. Thanks.

Twey
02-08-2009, 01:05 AM
John: you can see here that you have a pattern: create link, add href, add text, append link; and also that you have some code that's basically non-flat but that has had to be flattened, harming readability. A good thing to do in these situations is to abstract out:
<div id="val_$_val"></div>

<script type="text/javascript">
Function.id = function(a) { return a; };


Array.map = function(f, a) {
for (var i = 0, r = []; i < a.length; ++i)
r[i] = f(a[i]);

return r;
};

Array.intersperse = function(el, a) {
if (a.length < 2)
return a;

for (var i = 1, r = [a[0]]; i < a.length; ++i)
r.push(el, a[i]);

return r;
};


var Dom = (function() {
function get(a) {
return document.getElementById(a);
}

var attrmap = {
class: "className"
// &c.
};

function applyAttributes(el, attrs) {
for (var x in attrs)
if (attrs.hasOwnProperty(x))
if (x === "style")
el.setAttribute("style", el.style.cssText = attrs[x]);
else
el[attrmap[x] || x] = attrs[x];

return el;
}

function addChildren(el, children, filter) {
Array.map(function(child) {
if (!child) return;

if (child = create(child))
el.appendChild(child);
}, children);
}

function create(el, filter) {
if (typeof el === "string")
return document.createTextNode(el);

if (!(el instanceof Array))
return el;

filter = filter || Function.id;

var r = document.createElement(el[0]),
attrs = el[1],
children = el[2];

applyAttributes(r, attrs);

addChildren(r, children, filter);

return filter(r);
}

function link(contents, href, title) {
return ["a", {href: href, title: title}, [contents]];
}

return {
create: create,
get: get,
link: link
};
})();


// Elements are expressed as an array of three elements:
// [tagName : string, attributes : Object, children : Array]
Dom.get("val_$_val").appendChild(Dom.create(
["p", {}, Array.intersperse(" | ",
[Dom.link("Privacy Policy"),
Dom.link("Terms of Use"),
Dom.link("Disclaimer"),
Dom.link("XHTML",
"http://validator.w3.org/check/referer",
"This page validates as XHTML 1.0 Transitional"),
Dom.link("CSS",
"http://jigsaw.w3.org/css-validator/check/referer",
"This page validates as CSS 2")]
]));
</script>As you can see, this greatly improves legibility and removes redundancy from the code.

Untested, weird bugs may exist.

jscheuer1
02-08-2009, 03:32 AM
Legibility?

Ahem. Definitely in the eye of the beholder. I did think though, "Who really wants links with href = ''?"

But those could easily be added following the pattern, eliminating the need for:


a[0].href = '';

where it currently appears in my code, and true in the cloneNode line, which could then become false.

An object or array of the link properties could also be used if desired:


<script type="text/javascript">
document.write('<div id="val_$_val"><\/div>');
(function(d){
var p = document.createElement('p'), a = [document.createElement('a')],
links = [ // declare href, text, title:
['', 'Privacy Policy', ''],
['', 'Terms of use', ''],
['', 'Disclaimer', ''],
['http://validator.w3.org/check/referer', 'XHTML', 'This page validates as XHTML 1.0 Transitional'],
['http://jigsaw.w3.org/css-validator/check/referer', 'CSS', 'This page validates as CSS']
];
p.appendChild(document.createTextNode('The contents of this website are Copyright \xa9 2009, Robin\'s Den '));
for(var i = 0; i < links.length; ++i){
a[i].href = links[i][0];
a[i].appendChild(document.createTextNode(links[i][1]));
a[i].title = links[i][2];
p.appendChild(a[i]);
if (i < links.length - 1){
p.appendChild(document.createTextNode(' | '));
a.push(a[0].cloneNode(0));
}
}
d.appendChild(p);
})(document.getElementById('val_$_val'));
</script>

Twey
02-08-2009, 04:17 AM
Legibility?

Ahem. Definitely in the eye of the beholder.If you follow it through, the code, while ultimately more complex, is broken down into small, simple units — for example, the Dom.link() function just returns an array, a single statement. As such, it can be parsed with much less effort than a corresponding big block of code. You shouldn't even need to look at the more complex code: it's sufficiently modular that all you need to read to understand what's going on should be the utilising code, starting from the line Dom.get("val_$_val").appendChild(Dom.create(. The complex workings of the Dom module could be tucked neatly away in a separate file or something.
I did think though, "Who really wants links with href = ''?"Yes, I wondered about that myself.

jscheuer1
02-08-2009, 04:55 AM
Well, yes. It depends upon how modular/reusable you want it. I got the impression that in this case the use was intended for generation of a fairly specific line of HTML code.

jscheuer1
02-08-2009, 08:45 AM
This version has good legibility and modularity (in that it can make any number of footers in the basic format outlined), goes right before the closing </body> tag, may be made external:


<script type="text/javascript">
(function(p, t){
var links = [ // declare href: , text: , title: for each link -
{href: '', text: 'Privacy Policy', title: ''},
{href: '', text: 'Terms of use', title: ''},
{href: '', text: 'Disclaimer', title: ''},
{href: 'http://validator.w3.org/check/referer', text: 'XHTML', title: 'This page validates as XHTML 1.0 Transitional'},
{href: 'http://jigsaw.w3.org/css-validator/check/referer', text: 'CSS', title: 'This page validates as CSS'}
], a = [document.createElement('a')], y = new Date().getFullYear();
p.appendChild(document.createTextNode(t.replace(/cnote/, 'Copyright \xa9' + y)));
for(var i = 0; i < links.length; ++i){
a[i].href = links[i].href;
a[i].appendChild(document.createTextNode(links[i].text));
a[i].title = links[i].title;
p.appendChild(a[i]);
if (i < links.length - 1){
p.appendChild(document.createTextNode(' | '));
a.push(a[0].cloneNode(0));
}
}
document.body.appendChild(p);
})(document.createElement('p'), 'The contents of this website are cnote, Robin\'s Den - ');
</script>

Twey
02-08-2009, 12:05 PM
Well, yes. It depends upon how modular/reusable you want it. I got the impression that in this case the use was intended for generation of a fairly specific line of HTML code.That's true, but it's generally better to make as much code as possible as general as possible. That way it can be reused. It's better to write twenty lines of abstract code and five lines of concrete than ten lines of concrete code, since the twenty lines can be reused in other projects: they have value of their own, quite unrelated to the current use case.

jscheuer1
02-08-2009, 02:07 PM
Why such complex code, John? Can't just output it all as a string?


. . . it's generally better to make as much code as possible as general as possible.

What's a coder to do? :p

Twey
02-08-2009, 02:51 PM
Why such complex code, John? Can't just output it all as a string?Spoken like a true... graphical artist. :p Working with strings of code is an antipattern. It's a warning sign of a really bad design, and while it may initially appear to be simpler, that simplicity is soon proven to be deceptive...

jscheuer1
02-08-2009, 06:26 PM
I don't really agree that code should be as general as possible. Obviously I eschewed 'string theory' in this case from the beginning though. Code needs to be specific in some sense, or it will do nothing. So it is just a matter of degree. Generally in these forums you have to get fairly specific so as not to lose the OP.

I have a new (newish, now at this point) script that uses document listeners to setup all sorts of possibilities for the display of images from a thumbnail gallery to a slideshow, all with many options and possible integration with each other. The listeners allow for imported content to be immediately recognized and run against the script. All items may be configured for look and placement via css style, and many can be either script generated or hard coded by the designer. It can even integrate with my Lightbox 2.04a* (minor bug fixes and enhancements to the current Lightbox 2.04). But I'm finding it hard to explain to folks how to configure it - it's that general.

* As a side note, I'm becoming disenchanted with Lokesh's reliance upon prototype and scriptaculous, which I believe are fundamentally flawed in too many ways. As a consequence I am strongly considering changing to one of the jQuery Lightbox clones.

Twey
02-09-2009, 03:24 AM
Code needs to be specific in some sense, or it will do nothing. So it is just a matter of degree.Yes, but one should do as I did above: build up all the necessary components as generally as possible, then narrow down until one gets to the case for the specific project.
Generally in these forums you have to get fairly specific so as not to lose the OP.On the contrary — I think simpler, more general code should be far easier to follow. Of course, they can always ask if unsure.
But I'm finding it hard to explain to folks how to configure it - it's that general.Then perhaps you need to provide a more accessible front-end to it for these common cases. Just so long as the power is still accessible behind that interface for those who need it.

robin9000
02-10-2009, 02:59 PM
Of course I don't know Java script and that's why I asked for help but the code John gave me worked great! I am using it as an external script and it's perfect. Really could not be any better. I was able to add the little bit of information into it that I needed and presto. Perfection.
You can check it out if you want on my site now that I have it in place.

http:www.robinsden.110mb.com/opening.html

If you would like me to put somthing in the script for a comment John just send me a message. I'd be glad to do so.

jscheuer1
02-10-2009, 04:41 PM
That's not necessary*, but you may or may not want to try out the updated code from post #12 (http://www.dynamicdrive.com/forums/showpost.php?p=183796&postcount=12) of this thread. It is a little more intuitive as to how to add additional info or even links, and has a feature that will make the copyright year always current from the users computer, as well as using the proper convention:

2009

as opposed to:

2009

as you originally had it.


* You certainly may though:


/* Script 2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

In any case, I still hold the rights to it, since I published it first. I also at least granted you the implied right to use it by publishing it in response to your question. And , better still, I promise not to sue. :)

robin9000
02-10-2009, 04:51 PM
I added the code to my new script and thanks so much for helping me out. You have no idea how much that script just makes life easier. If I need to update for any reason, it is as simple as can be and the best part is it is easy to understand the script for editing purposes especially when you don't really know anything about java script.

Thanks again.

If you read this again I think I am going to use your new script you wrote on post 12. It looks really good. Maybe you should post it in the library too. It looks very good.

jscheuer1
02-10-2009, 05:08 PM
One thing I forgot to mention with the updated script, if it cannot go right before the closing </body> tag, it will require modification for IE (here with credit included):


<script type="text/javascript">
/* Script 2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
document.write('<div id="val_$_val"><\/div>');
(function(p, t){
var links = [ // declare href: , text: , title: for each link -
{href: '', text: 'Privacy Policy', title: ''},
{href: '', text: 'Terms of use', title: ''},
{href: '', text: 'Disclaimer', title: ''},
{href: 'http://validator.w3.org/check/referer', text: 'XHTML', title: 'This page validates as XHTML 1.0 Transitional'},
{href: 'http://jigsaw.w3.org/css-validator/check/referer', text: 'CSS', title: 'This page validates as CSS'}
], a = [document.createElement('a')], y = new Date().getFullYear();
p.appendChild(document.createTextNode(t.replace(/cnote/, 'Copyright \xa9' + y)));
for(var i = 0; i < links.length; ++i){
a[i].href = links[i].href;
a[i].appendChild(document.createTextNode(links[i].text));
a[i].title = links[i].title;
p.appendChild(a[i]);
if (i < links.length - 1){
p.appendChild(document.createTextNode(' | '));
a.push(a[0].cloneNode(0));
}
}
document.getElementById('val_$_val').appendChild(p);
})(document.createElement('p'), 'The contents of this website are cnote, Robin\'s Den - ');
</script>

robin9000
02-10-2009, 05:18 PM
Hey john hope you see this. your post on 12 is easier to edit but it dose not retain the font attributes that the other script you worte dose.

It also aligns it to the left side of the screen.

I love post 12 is there anyway to make it so that it retains the font attributes of you first script though?



Never mind I got it, thanks

jscheuer1
02-10-2009, 05:21 PM
See post 21, that change will probably also bring back the styles you had for the original.

robin9000
02-10-2009, 08:49 PM
I made the changes to my script like you did and yes it worked just fine. Thanks.

Twey
02-10-2009, 09:17 PM
There's something a bit odd about optionally allowing a notice that says 'This Notice Must Remain for Legal Use'.

Not to supplant John, but the script I posted allows arbitrary markup and style, in a very simple format:
Dom.get("val_$_val").appendChild(Dom.create(
["p", {style: "color: red;"}, Array.intersperse(" | ",
[Dom.link("Privacy Policy"),
Dom.link("Terms of Use"),
Dom.link("Disclaimer"),
Dom.link("XHTML",
"http://validator.w3.org/check/referer",
"This page validates as XHTML 1.0 Transitional"),
Dom.link("CSS",
"http://jigsaw.w3.org/css-validator/check/referer",
"This page validates as CSS 2"),
"The contents of this website are " + (new Date()).getFullYear() + ", Robin's Den - "]
]));Even without much knowledge of Javascript, it should be easy to bend to your needs.

jscheuer1
02-10-2009, 10:50 PM
Once it's on there, you cannot remove it.

Actually, it's just my before/after boiler plate credit with the space (underlined in the below) for after where the name of the script would go removed:


/* _Script 2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

Until my editor allows for tokens like _current_year in its clip collection, my credit clip (unlike the script in this thread) will require updating at least once a year.