How To #3: Custom BBCdes For This Board (Note)

Hi,

Here I am with yet a third tutorial on the NOTE tag. Most of the mods would have noticed a drastic change in it's appearance over the past few days - bit by bit... I'm going to put up the code today and do a little bit of explaining as to how it works.

 

This code's script is quite long and winding though and has got 2 parts - first a JavaScript that defines a function which is reponsible for the Expand/Collapse button of the note - and the second part constitutes of the actual <DIV> layers which give the note it's shape/size/color/graphics. First here's the code:

body.style.display = 'block';

if (document.images[im]) {

document.images[im].src = "close.png";

}

} else {

body.style.display = 'none';

if (document.images[im]) {

document.images[im].src = "open.png";

}

}

if (e) {

// Stop the event from propagating, which

// would cause the regular HREF link to

// be followed, ruining our hard work.

e.cancelBubble = true;

if (e.stopPropagation) {

e.stopPropagation();

}

}

}

</script>

<div id="notice" style="width linenums:505'><script>function toggle(toggleId, e){ if (!e) { e = window.event; } if (!document.getElementById) { return false; } var body = document.getElementById(toggleId); if (!body) { return false; } var im = toggleId + "_toggle"; if (body.style.display == 'none') { body.style.display = 'block'; if (document.images[im]) { document.images[im].src = "close.png"; } } else { body.style.display = 'none'; if (document.images[im]) { document.images[im].src = "open.png"; } } if (e) { // Stop the event from propagating, which // would cause the regular HREF link to // be followed, ruining our hard work. e.cancelBubble = true; if (e.stopPropagation) { e.stopPropagation(); } }}</script><div id="notice" style="width: 505px; border: solid 2px #FF0000; background-color: #FFFFCE;"><div id="header" style="width: 505px; color: #FFFFCE;"><div id="rightbox" onClick="toggle('notemsg', event)" style="width: 15px; height: 15px; border: solid 2px #FFFFCE; background-image: url(http://Xisto.com/misc/bbcode/closebutton.jpg); color: #FFFFCE; float: right; cursor: pointer; font-family: Tahoma; font-size: 9px; font-weight:bold;"></div><div id="leftbox" style="width: 20px; height: 15px; border: solid 2px #FFFFCE; background-image: url(http://Xisto.com/misc/bbcode/topleft.jpg); color: #FFFFCE; float: left; padding-top: 0px; padding-bottom: 0px;"></div><div id="middlebar" style="padding-left: 5px; width: 475px; height: 16px; border: solid 2px #FFFFCE; background-image: url(http://Xisto.com/misc/bbcode/notetitle.jpg); color: #FFFFCE; float: center; font-family: Tahoma; font-size: 12px; font-weight: bold;"><b><center>Notice from {option}:</center></b></div></div><div id="notemsg" style="width: 475px; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px; background-color: #FFFFCE; font-family: Tahoma; font-size: 12px;">{content}</div></div>

I wouldn't go into explaining the JavaScript - it's something I got off the web, though I've lost the link. Just google for it and you'd find it for sure. But here's the arrangement of nested <DIV> tags that create the note.

<div id="notice" style="width: 505px; border: solid 2px #FF0000; background-color: #FFFFCE;">    <div id="header" style="width: 505px; color: #FFFFCE;">         <div id="rightbox" onClick="toggle('notemsg', event)" style="width: 15px; height: 15px; border: solid 2px #FFFFCE; background-image: url(http://Xisto.com/misc/bbcode/closebutton.jpg); color: #FFFFCE; float: right; cursor: pointer; font-family: Tahoma; font-size: 9px; font-weight:bold;"></div>                <div id="leftbox" style="width: 20px; height: 15px; border: solid 2px #FFFFCE; background-image: url(http://Xisto.com/misc/bbcode/topleft.jpg); color: #FFFFCE; float: left; padding-top: 0px; padding-bottom: 0px;"></div>        <div id="middlebar" style="padding-left: 5px; width: 475px; height: 16px; border: solid 2px #FFFFCE; background-image: url(http://Xisto.com/misc/bbcode/notetitle.jpg); color: #FFFFCE; float: center; font-family: Tahoma; font-size: 12px; font-weight: bold;"><b><center>Notice from {option}:</center></b></div>        </div>     <div id="notemsg" style="width: 475px; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px; background-color: #FFFFCE; font-family: Tahoma; font-size: 12px;">{content}</div></div>

As you can see there's a master div named noticewhich contains all the rest of the parts nested inside it. Under "notice" there are two more divs - the header that contains the icon, the titlebar and "X" button, and the notemsg div which contains the actual message body. I'm attaching a picture below. This might help you understand the layout better.

 

The 'header" div as you can see from the picture binds three divs, leftbox, middlebar & rightbox - the cryptic paramters along with the divs, are CSS (StyleSheet) parameters which define the size, color, background-image etc - all attributes of these individual divs. Now, while adding these three divs into the header div, you might want to progress in a logical order, i.e. - first the leftbox, next middlebar and then rightbox.. But here's you'll notice something funny - I've added the rightbox FIRST and then added left & middle. WHY I had to do it this way ?? Don't ask me - I still haven't acquired full understanding of how the nested div positioning works - just that when I added the rightbox last it jumped out of the note box and got placed far below in the right bottom corner.. So I figured this out through experimentation..

 

Don't think much more explanation is needed about the divs. With a little understanding of HTML and CSS2 you can figure it out yourself... Only point I'm going to mention is that notice this part in the "rightbox" div: onClick="toggle('notemsg', event)"

<div id="rightbox" onClick="toggle('notemsg', event)" style="width: 15px; height: 15px; border: solid 2px #FFFFCE; background-image: url(http://Xisto.com/misc/bbcode/closebutton.jpg); color: #FFFFCE; float: right; cursor: pointer; font-family: Tahoma; font-size: 9px; font-weight:bold;"></div>

This is the part that triggers the javascript collapsing routine and expands/collapses the "notemsg" div. The name (ID) of that div is being passed on to the function as an arguement. The event variable acts as a bi-state toggle switch. When expanded - it collapses and when collapsed it expands.. That's it I guess - I'll be back later and try spruce up the tut and put in some more explanations for the noobs.

 

I think I came up with a fix for the expanding/collapsing every single note on the page.
Here's the code:

<?php$param = {option};list($name, $id) = split(" ", $param);print <<<END<script>function toggle(toggleId, e){if (!e) {e = window.event;}if (!document.getElementById) {return false;}var body = document.getElementById(toggleId.id);if (!body) {return false;}var im = toggleId + "_toggle";if (body.style.display == 'none') {body.style.display = 'block';if (document.images[im]) {document.images[im].src = "close.png";}} else {body.style.display = 'none';if (document.images[im]) {document.images[im].src = "open.png";}}if (e) {// Stop the event from propagating, which// would cause the regular HREF link to// be followed, ruining our hard work.e.cancelBubble = true;if (e.stopPropagation) {e.stopPropagation();}}}</script><div class="notice" style="width: 505px; border: solid 2px #FF0000; background-color: #FFFFCE;"><div class="header" style="width: 505px; color: #FFFFCE;"><div class="rightbox" onClick="toggle($id, event)" style="width: 15px; height: 15px; border: solid 2px #FFFFCE; background-image: url(http://Xisto.com/misc/bbcode/closebutton.jpg); color: #FFFFCE; float: right; cursor: pointer; font-family: Tahoma; font-size: 9px; font-weight:bold;"></div><div class="leftbox" style="width: 20px; height: 15px; border: solid 2px #FFFFCE; background-image: url(http://Xisto.com/misc/bbcode/topleft.jpg); color: #FFFFCE; float: left; padding-top: 0px; padding-bottom: 0px;"></div><div class="middlebar" style="padding-left: 5px; width: 475px; height: 16px; border: solid 2px #FFFFCE; background-image: url(http://Xisto.com/misc/bbcode/notetitle.jpg); color: #FFFFCE; float: center; font-family: Tahoma; font-size: 12px; font-weight: bold;"><b><center>Notice from $name:</center></b></div></div><div class="notemsg" id="$id" style="width: 475px; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px; background-color: #FFFFCE; font-family: Tahoma; font-size: 12px;">{content}</div></div>END;?>

There are three major changes form what you had (well four, but the fourth is obvious).
1) It is now all enclosed in PHP
2) {option} is really two parameters that are split in the beginning of the code
3) the ids have been changed to classes
4) The document.getElementById() now takes an ID like it is supposed to instead of an object

What I did was have the moderator give there not a unique ID as the second parameter, this ID becomes the ID for the message box that will be toggled. Whe document.getElementById() is called, it takes the unique ID and searches for it, and toggles only that one. Oh, and the "class=blah" can probably be removed from the div tag, the whole purpose of class=blah (and almost the whole purpose of id=blah) is to provide style from a style sheet. Since you provide the style in the tag, the sheet is overridden and thus useless.

For an example of this, goto http://forums.xisto.com/no_longer_exists/
This page is also the new location for my [bLINK] Code, and I will be deleting the old html location of that shortly.

Without access to the IPB BBC parser, I can't say for sure as to how to code it, but the best way that I have come up with from a DHTML point of view is to use {content} to generate the id value.The method I used was to get a hash of {content} with the md5() function. Time() or microtime() may produce two seperate values. Date isn't specific enough. Basically, you need a constant specific to each note and that is {content}.The md5() function doesn't care about non-alpha-numeric characters and will produce the same hash every time for a specific string but is highly unlikely to produce the same hash for two different strings.

<script>     function toggle(toggleId, e){     	if (!e) {     	     e = window.event;     	}     	if (!document.getElementById) {     	     return false;     	}     	var body = document.getElementById(toggleId);     	if (!body) {     	     return false;     	}     	var im = toggleId + "_toggle";     	if (body.style.display == 'none') {     	     body.style.display = 'block';     	     if (document.images[im]) {     	     	document.images[im].src = "close.png";     	     }     	} else {     	     body.style.display = 'none';     	     if (document.images[im]) {     	     	     document.images[im].src = "open.png";     	     }     	}     	if (e) {  // Stop the event from propagating, which would cause the regular HREF link to be followed, ruining our hard work.     	     e.cancelBubble = true;     	     if (e.stopPropagation) {     	     	e.stopPropagation();     	     }     	}     }</script><?phpfunction id_name($id){	$id = md5($id);	return $id;}?><div id="notice" style="width: 505px; border: solid 2px #FF0000; background-color: #FFFFCE;">     <div id="header" style="width: 505px; color: #FFFFCE;">     	<div id="rightbox" onClick="toggle('notemsg', event)" style="width: 15px; height: 15px; border: solid 2px #FFFFCE; background-image: url(http://forums.xisto.com/misc/bbcode/closebutton.jpg); color: #FFFFCE; float: right; cursor: pointer; font-family: Tahoma; font-size: 9px; font-weight:bold;"></div>     	<div id="leftbox" style="width: 20px; height: 15px; border: solid 2px #FFFFCE; background-image: url(http://forums.xisto.com/misc/bbcode/topleft.jpg); color: #FFFFCE; float: left; padding-top: 0px; padding-bottom: 0px;"></div>     	<div id="middlebar" style="padding-left: 5px; width: 475px; height: 16px; border: solid 2px #FFFFCE; background-image: url(http://forums.xisto.com/misc/bbcode/notetitle.jpg); color: #FFFFCE; float: center; font-family: Tahoma; font-size: 12px; font-weight: bold;"><b><center>Notice from beetleman:</center></b></div>     </div>     <div id="notemsg" style="width: 475px; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px; background-color: #FFFFCE; font-family: Tahoma; font-size: 12px;">Note #1</div></div><div id="notice" style="width: 505px; border: solid 2px #FF0000; background-color: #FFFFCE;">     <div id="header" style="width: 505px; color: #FFFFCE;">     	<div id="rightbox" onClick="toggle('<?php echo id_name("{content}"); ?>', event)" style="width: 15px; height: 15px; border: solid 2px #FFFFCE; background-image: url(http://forums.xisto.com/misc/bbcode/closebutton.jpg); color: #FFFFCE; float: right; cursor: pointer; font-family: Tahoma; font-size: 9px; font-weight:bold;"></div>     	<div id="leftbox" style="width: 20px; height: 15px; border: solid 2px #FFFFCE; background-image: url(http://forums.xisto.com/misc/bbcode/topleft.jpg); color: #FFFFCE; float: left; padding-top: 0px; padding-bottom: 0px;"></div>     	<div id="middlebar" style="padding-left: 5px; width: 475px; height: 16px; border: solid 2px #FFFFCE; background-image: url(http://forums.xisto.com/misc/bbcode/notetitle.jpg); color: #FFFFCE; float: center; font-family: Tahoma; font-size: 12px; font-weight: bold;"><b><center>Notice from {option}:</center></b></div>     </div>     <div id="<?php echo id_name("{content}"); ?>" style="width: 475px; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px; background-color: #FFFFCE; font-family: Tahoma; font-size: 12px;">{content}</div></div>

This worked in my browser stand alone with an actual string instead of {content}. I imagine something like vizskywalker's suggestion will need to be done where a variable is assigned the value of {content}. Let me know if this helps at all.vujsa

That actually looks like a better method, but yeah, you need to save the id to a variable so that it can be passed to a function. So I would still stick the whole <div> in a php script to make that easier and use the print <<<END feature. Then you could do onClick = onClick="toggle($id, event).

Hey guys.. thanks for ur suggestions.. I'm trying them out now to see which one the BBCode parser will parse correctly.. I think we're seeing a solution quite soon

Hey guys.. thanks for ur suggestions.. I'm trying them out now to see which one the BBCode parser will parse correctly.. I think we're seeing a solution quite soon

<{POST_SNAPBACK}>

Whichever one you tried didn't work. Right now what happens is that only one closes, but it is always the first one. (And please let us know which one does this so that we may learn )

Rather than using an MD5 hash or asking the poster to supply a unique ID, I would like to propose the idea of automatic sequential numbering of the NOTEs using a JavaScript global variable. My original reply still exists, but I have since been able to concrete my findings somewhat.

 

First, take a look at the sample (attached).

 

The one-time JavaScript code is still the same; the function toggle is still defined as before and such. However, the "nested divs" section is changed, with some JavaScript added. Here is the revised section:

 

<div id="notice" style="width: 505px; border: solid 2px #FF0000; background-color: #FFFFCE;">  <div id="header" style="width: 505px; color: #FFFFCE;">    <script>      if (typeof noteCount == 'undefined')      {        var noteCount = 1;      }            else      {        noteCount++;      }            document.write("<div id=\"rightbox\" onClick=\"toggle('notemsg" + noteCount + "', event)\" style=\"width: 15px; height: 15px; border: solid 2px #FFFFCE; background-image: url(http://Xisto.com/misc/bbcode/closebutton.jpg); color: #FFFFCE; float: right; cursor: pointer; font-family: Tahoma; font-size: 9px; font-weight:bold;\"></div>");    </script>    <div id="leftbox" style="width: 20px; height: 15px; border: solid 2px #FFFFCE; background-image: url(http://Xisto.com/misc/bbcode/topleft.jpg); color: #FFFFCE; float: left; padding-top: 0px; padding-bottom: 0px;"></div>    <div id="middlebar" style="padding-left: 5px; width: 475px; height: 16px; border: solid 2px #FFFFCE; background-image: url(http://Xisto.com/misc/bbcode/notetitle.jpg); color: #FFFFCE; float: center; font-family: Tahoma; font-size: 12px; font-weight: bold;"><b><center>Notice from {option}:</center></b></div>  </div>  <script>    document.write("<div id=\"notemsg" + noteCount + "\" style=\"width: 475px; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px; background-color: #FFFFCE; font-family: Tahoma; font-size: 12px;\">{content}</div>");  </script></div>

Again, it will be necessary for this entire section to be created when the NOTE tags are replaced.

 

My primary worry at the moment is whether the {content} tag will operate properly inside the document.write function. Right now, I see no problem, but I can't be sure without consulting with someone who is familiar with PHP. However, the working HTML file seems to represent a step in the right direction.

 

Hope this helps! (And if it doesn't, thanks for forcing me to brush up on my JavaScript!)

Okay.. sorry to say but NONE of the above codes worked. I tried them all out today, tried tweaking around with the ideas too - but couldn't get them to work at all.

Okay.. sorry to say but NONE of the above codes worked. I tried them all out today, tried tweaking around with the ideas too - but couldn't get them to work at all.

<{POST_SNAPBACK}>

That's because they all relied on php. We learned last night that php, unlike what you originally said, doen't work. I'm going to try a new javascript version, but it will take time.

Hey all

[tab][/tab]FINALLY the problem with collapse/expand of multiple notes is SOLVED. Time to make a minor update to the NOTE BBCode. Earlier on there was a big problem with the design, such that, if you had multiple notes on the same page or post, clicking on one would collapse/expand all others. Mastercomputers fixed the problem at Antilost, with a very subtle and clever trick, bypassing the need for that huge collapse/expand javascript totally. As a result the BBCode stands much shorter and smoother

 

Here's the code update:

<link rel="stylesheet" type="text/css" href="LINK.TO.YOUR.NOTICE.CSS" /><div id="notice" class="notice">	<div id="header" class="header" onClick="java script:this.nextSibling.nextSibling.style.display = (this.nextSibling.nextSibling.style.display == 'block') ? 'none' : 'block';">		<div id="middlebar" class="middlebar">Notice from {option}:		</div>	</div>	<div id="notemsg" class="messagebody">{content}</div></div>

That's the whole of it Remember that lengthy JS code.. it's entirely gone

Just noting M^E, that the first click on the title of the note is not registering correctly. After that it works as it should.If you want me to fix it I can, I just didn't update the note at antilost because of the time and did not want to go through the CSS to fix it, but if you want me to I can.One thing for certain is I want to remove all id's from your note, as you can only use the named id once only in any document and cannot have ids that are the same which means multiple notes will conflict, that was probably why you thought of creating random generated id names, which in theory would work too, but more coding involved and harder to fix the CSS to reference it's styling. So I'm just saying use class as the alternative to style everything about it. No need to give it a name, if needs be comment above it and below it that states it's a notice for easier reading from source, but IPB HTML source is too messy for me to even bother looking through it.Cheers,MC

Yep - I noticed that misclick too - but happens only first time you click the header.

 

I get what you mean - now there's no reason to have the ID's - since we're using the sibling iterator.

 

Am off to make the changes

 

Done updating..

 

The new code, stripped of the div id's looks like this:

<div class="notice">	<div class="header" onClick="java script:this.nextSibling.nextSibling.style.display = (this.nextSibling.nextSibling.style.display == 'block') ? 'none' : 'block';">		<div class="middlebar">Notice from {option}:		</div>	</div>	<div class="messagebody">{content}</div></div>

I updated it on Anitlost too.

Make it look like this and you've solved the 1 click misread, when actually it works as intended if you say it like this:

At present this.nextSibling.nextSibling.style.display = NULL, we never set a style and we can't read user/browser defaults. So (shortening the code) display = (test if display == 'block' it returns NULL) ? if true display = 'none' : Well it was false/NULL or at least != to 'block' so display = 'block';

We've now set a value, display now equals block, so the second click results in true and then display = none; Understandable? I hope so, I didn't want to go too much into this.

<div class="notice">	<div class="header" onClick="java script:this.nextSibling.nextSibling.style.display = (this.nextSibling.nextSibling.style.display == 'block') ? 'none' : 'block';">		<div class="middlebar">Notice from {option}:		</div>	</div>	<div class="messagebody" style="display:block;">{content}</div></div>

I have updated here, you can do antilost . I also want to help clean the CSS, though are rounded corners neccessary, looks good but unless W3C supported it's not really things I would go out of.

What I'm proposing to do is clean up the HTML and CSS, eliminate the over use of div blocks if possible and use more semantic like means of displaying it. Also requires renaming the class names, due to reason that they could conflict especially using "header" which is too common.

Cheers,


MC

Cool - am all up for it. I think I'd posted the note files at Anti.. if not, I'll post them - so you can have a go at the CSS.

Cool - am all up for it. I think I'd posted the note files at Anti.. if not, I'll post them - so you can have a go at the CSS.

OK, well, while you were away I created this:

http://forums.xisto.com/no_longer_exists/ (you may also notice in the parent directory bbcode I'm also working on a book/article type means, it's basically quickly done, with inline styling, but I will seperate everything and make it easier to make changes).

and if you view the source, I have the seperation of CSS/Javascript and the HTML in quite a basic/simple look. I didn't use your background-image (I prefer png instead of jpg too, unless it's a photo) or rounded corners and kept it quite box shape looking.

I'm sure anyone if they wanted to, could jazz this up more, all I ask though is keep it W3C valid, it's what I aim for in all my web work.

Cheers,


MC