PDA

View Full Version : Dreamweaver auto-comment?



jlizarraga
07-14-2008, 06:51 PM
I was wondering if anyone knew of a Dreamweaver extension that will auto-comment my closing div tags with their ID and/or class name, like this:


<div id="rwf_OuterContainer">
<div id="rwf_MainContainer">
</div><!-- end rwf_MainContainer -->
</div><!-- end rwf_OuterContainer -->

Would save me a lot of time in the long run.

boogyman
07-14-2008, 06:58 PM
isn't that what proper spacing is for?

jscheuer1
07-15-2008, 02:58 PM
I don't know much about DW, but this script will do that. Just place it in the head of your page and open it in a browser (FF is best for this, others will work OK).

It will superimpose the commented code at the top of the page in a text area. You may then copy and paste that code over the contents of the body tag in your source code, and then remove the script.

Demo:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

/* Comment Division End Tags script 2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/

function commentEndTags(){
for (var c, d = document.getElementsByTagName('div'), i = d.length - 1; i > -1; --i)
if(d[i].id || d[i].className){
c = document.createComment(' end div' + (d[i].id? ' id:' + d[i].id : '') + (d[i].className? ' class:' + d[i].className : '') + ' ');
if(d[i].nextSibling)
d[i].parentNode.insertBefore(c, d[i].nextSibling);
else
d[i].parentNode.appendChild(c);
}
var commented = document.createElement('textarea');
with (commented){
rows = 20;
cols = 80;
wrap = 'off';
with (style){
position = 'absolute';
zIndex = 10000;
top = '0px';
left = '0px';
overflow = 'auto';
}
}
commented.value = document.body.innerHTML;
document.body.appendChild(commented);
}
if(window.addEventListener)
window.addEventListener('load', commentEndTags, false);
else if(window.attachEvent)
window.attachEvent('onload', commentEndTags);
</script>
</head>
<body>
<div id="rwf_OuterContainer">
<div id="rwf_MainContainer">
</div>
</div>
<div id="bob" class="otherContainer">

</div>
</body>
</html>

Sample output for above demo (using FF):



<div id="rwf_OuterContainer">
<div id="rwf_MainContainer">
</div><!-- end div id:rwf_MainContainer -->
</div><!-- end div id:rwf_OuterContainer -->
<div id="bob" class="otherContainer">

</div><!-- end div id:bob class:otherContainer -->

allahverdi
07-16-2008, 04:34 AM
John, i think your way is only for output. I mean you can't see comments in dw.

jlizarraga, have no idea, and i haven't tried to do it. But, Google (http://www.google.com) is your friend :)

jscheuer1
07-16-2008, 06:36 AM
John, i think your way is only for output. I mean you can't see comments in dw.

Not sure what you mean. You can see comments in any text/code view of any editor. My method will generate the the code to use. It is up to whoever uses it to copy and paste it into their text/code view.

traq
07-16-2008, 02:58 PM
I think he wants the comments to appear as he's building his site in DW, not after he looks at the site in his browser, so he can better track his code during the development stage.

jscheuer1
07-16-2008, 03:48 PM
I think he wants the comments to appear as he's building his site in DW, not after he looks at the site in his browser, so he can better track his code during the development stage.

Well, If there is a macro or something for that available in DW, no one has come forward with it. I have not seen anything like that around in limited Google searching for it.

The script I wrote will allow any developer to update his or her source code with such comments, regardless of the editor used.

You raise an interesting point though when you say, "as he's building his site". For that my code would need to be modified to replace or skip creating new division end tag comments for any existing division end tag comments it had previously placed in the code. Otherwise you could end up with quite a long trail of duplicate division end tag comments.

Alternatively, the script could just be used for those times when the code is relatively completed, to aid in diagnosis of any issues where finding the end tags of divisions were required. To that end, it could even be modified to set unique ids for those divisions lacking them.

In any case, I didn't offer the script as a full solution to the original post, rather as something that would help with the issue at hand presented by it.

jlizarraga
07-16-2008, 05:01 PM
Thanks for the script, but yeah I'm looking for something that will alter the source as I write it.

In response to Boogyman, I am a freak about proper spacing and all that and my code is always structured well, but it can still be difficult to sort out tags sometimes when your beginning and ending tag are dozens of lines apart.

jscheuer1
07-16-2008, 05:04 PM
Here's a modified version that has an option for creating ids for those divisions that don't have them (be careful when setting this to true and using it more than once on the same code after removing a created id but not its comment). In either mode, it also scans to make sure an identical end tag comment isn't already in place for a given division to avoid the formation of duplicate end comment trails:


<script type="text/javascript">

/* Comment Division End Tags script 2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/

commentEndTags.createIds = false; //Should script create unique ids for divisions without them? (true or false)

//////////////////////// Stop Editing ////////////////////////

if(commentEndTags.createIds)
commentEndTags.createIds = [];

function commentEndTags(){
if(commentEndTags.createIds)
for (var d = document.getElementsByTagName('div'), i = d.length - 1; i > -1; --i)
if(/_comment_end_tags_added_id/.test(d[i].id))
commentEndTags.createIds[d[i].id.replace(/[^\d]/g, '')] = d[i].id;
for (var c, d = document.getElementsByTagName('div'), i = d.length - 1; i > -1; --i){
if(commentEndTags.createIds && !d[i].id)
d[i].id = commentEndTags.createIds[commentEndTags.createIds.length] = '_' + commentEndTags.createIds.length + '_comment_end_tags_added_id';
if(d[i].id || d[i].className){
c = document.createComment(' end div' + (d[i].id? ' id:' + d[i].id : '') + (d[i].className? ' class:' + d[i].className : '') + ' ');
if(d[i].nextSibling && d[i].nextSibling.nodeValue != c.nodeValue)
d[i].parentNode.insertBefore(c, d[i].nextSibling);
else if(!d[i].nextSibling)
d[i].parentNode.appendChild(c);
};
};
var commented = document.createElement('textarea');
with (commented){
rows = 20;
cols = 80;
wrap = 'off';
with (style){
position = 'absolute';
zIndex = 10000;
top = '0px';
left = '0px';
overflow = 'auto';
};
};
commented.value = document.body.innerHTML;
document.body.appendChild(commented);
}
if(window.addEventListener)
window.addEventListener('load', commentEndTags, false);
else if(window.attachEvent)
window.attachEvent('onload', commentEndTags);
</script>

Now, regardless of whether or not this answers the original question perfectly, it is a very useful code writing and/or code diagnostic tool. I know I will use it myself at times. It will often be much easier than hunting through the DOM Inspector to see where something ends.

Anyone care to turn it into a bookmarklet?

allahverdi
07-16-2008, 05:47 PM
Not sure what you mean. You can see comments in any text/code view of any editor. My method will generate the the code to use. It is up to whoever uses it to copy and paste it into their text/code view.

Sorry couldn't explain well.
Anyways traq already said it for me :p

jscheuer1
07-16-2008, 06:24 PM
Sorry couldn't explain well.
Anyways traq already said it for me :p

Get with the thread, I've already responded to, and hopefully satisfied traq's criticisms with the latest update.

If you can't speak for yourself, perhaps it is best to remain silent. :rolleyes:

jscheuer1
07-17-2008, 12:18 AM
Thanks for the script, but yeah I'm looking for something that will alter the source as I write it.

In response to Boogyman, I am a freak about proper spacing and all that and my code is always structured well, but it can still be difficult to sort out tags sometimes when your beginning and ending tag are dozens of lines apart.

I understand, but I'm not aware of anything like that out there, and at least so far, neither is anyone else. If you do find something, let us know because I'm sure other DW users would appreciate it.

In the meantime, I've updated the script:

http://www.dynamicdrive.com/forums/showpost.php?p=151526&postcount=9

to make it even more useful.

traq
07-17-2008, 07:15 AM
...Alternatively, the script could just be used for those times when the code is relatively completed, to aid in diagnosis of any issues where finding the end tags of divisions were required. To that end, it could even be modified to set unique ids for those divisions lacking them...

...I've already responded to, and hopefully satisfied traq's criticisms with the latest update.

more than satisfied - I wasn't really critiquing your script at all! :) I just wanted to make sure I understood jlizarraga's initial question correctly. Your script will definitely be useful as a diagnostic tool (and by that, I mean that I expect to make use of it myself!)