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:

Code:

<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:

Code:

<!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):

Code:

<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 is your friend

**jscheuer1** · 07-16-2008, 06:36 AM

Originally Posted by allahverdi

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

Originally Posted by traq

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:

Code:

<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

Originally Posted by jscheuer1

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

Thread: Dreamweaver auto-comment?

Thread Tools

Search Thread

Dreamweaver auto-comment?

Bookmarks

Bookmarks

Posting Permissions