Welcome Guest ( Log In | Register )



2 Pages V   1 2 >  
 Reply to this topicStart new topic
> How To #3: Custom BBCdes For This Board (Note)
miCRoSCoPiC^eaRt...
post Apr 2 2005, 10:49 AM
Post #1


PsYcheDeLiC dR3aMeR
Group Icon

Group: Admin
Posts: 2,242
Joined: 29-January 05
From: Nakorn Chaisri, Thailand
Member No.: 2,411
Hi,
    [/tab]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.

[tab]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:
CODE

<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://astahost.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://astahost.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://astahost.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>



    [/tab]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.
CODE

<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://astahost.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://astahost.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://astahost.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>


[tab]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.
user posted image

    [/tab]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..

[tab]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)"
CODE

<div id="rightbox" onClick="toggle('notemsg', event)" style="width: 15px; height: 15px; border: solid 2px #FFFFCE; background-image: url(http://astahost.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.

Notice from microscopic^earthling:
Till then, have fun smile.gif Lol.. I came back and added this as an example of the NOTE tag. I'd completely forgotten about it. Thanks to vujsa for reminding me. Hope the bug gets fixed quick.
Go to the top of the page
 
+Quote Post
vizskywalker
post Apr 2 2005, 07:20 PM
Post #2


Techno-Necromancer
Group Icon

Group: Members
Posts: 1,018
Joined: 13-January 05
From: The Net
Member No.: 2,127
I think I came up with a fix for the expanding/collapsing every single note on the page.
Here's the code:
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://astahost.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://astahost.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://astahost.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://www.mouseisle.com/BBCode.php
This page is also the new location for my [BLINK] Code, and I will be deleting the old html location of that shortly.
Go to the top of the page
 
+Quote Post
vujsa
post Apr 4 2005, 11:30 AM
Post #3


Absolute Newbie
Group Icon

Group: Admin
Posts: 888
Joined: 20-February 05
From: Indianapolis, Indiana, USA (Midwest)
Member No.: 2,714
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.

CODE

<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>
<?php
function 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://astahost.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://astahost.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://astahost.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://astahost.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://astahost.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://astahost.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

Notice from vujsa:
Thought that there should be a note tag actually used in the note tag tutorial.


Notice from vujsa:
This note is here to be used as a test note for the identification bug that is still being resolved.
Go to the top of the page
 
+Quote Post
vizskywalker
post Apr 4 2005, 09:34 PM
Post #4


Techno-Necromancer
Group Icon

Group: Members
Posts: 1,018
Joined: 13-January 05
From: The Net
Member No.: 2,127
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).
Go to the top of the page
 
+Quote Post
miCRoSCoPiC^eaRt...
post Apr 6 2005, 10:48 AM
Post #5


PsYcheDeLiC dR3aMeR
Group Icon

Group: Admin
Posts: 2,242
Joined: 29-January 05
From: Nakorn Chaisri, Thailand
Member No.: 2,411
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 smile.gif
Go to the top of the page
 
+Quote Post
vizskywalker
post Apr 10 2005, 09:24 PM
Post #6


Techno-Necromancer
Group Icon

Group: Members
Posts: 1,018
Joined: 13-January 05
From: The Net
Member No.: 2,127
QUOTE(microscopic^earthling @ Apr 6 2005, 05:48 AM)
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 smile.gif
*


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 smile.gif)
Go to the top of the page
 
+Quote Post
X-Wes
post Apr 13 2005, 10:45 AM
Post #7


Member [ Level 1 ]
Group Icon

Group: Members
Posts: 43
Joined: 12-April 05
From: British Columbia, Canada
Member No.: 3,921
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:

CODE

<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://astahost.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://astahost.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://astahost.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!)
Attached File(s)
Attached File  efefef.html ( 4.95k ) Number of downloads: 54
 
Go to the top of the page
 
+Quote Post
miCRoSCoPiC^eaRt...
post Apr 17 2005, 11:37 AM
Post #8


PsYcheDeLiC dR3aMeR
Group Icon

Group: Admin
Posts: 2,242
Joined: 29-January 05
From: Nakorn Chaisri, Thailand
Member No.: 2,411
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.
Go to the top of the page
 
+Quote Post
vizskywalker
post Apr 17 2005, 05:39 PM
Post #9


Techno-Necromancer
Group Icon

Group: Members
Posts: 1,018
Joined: 13-January 05
From: The Net
Member No.: 2,127
QUOTE(microscopic^earthling @ Apr 17 2005, 06:37 AM)
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.
*


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.
Go to the top of the page
 
+Quote Post
miCRoSCoPiC^eaRt...
post Apr 6 2006, 04:12 AM
Post #10


PsYcheDeLiC dR3aMeR
Group Icon

Group: Admin
Posts: 2,242
Joined: 29-January 05
From: Nakorn Chaisri, Thailand
Member No.: 2,411
Hey all smile.gif
    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 wink.gif

Here's the code update:
CODE

<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 wink.gif Remember that lengthy JS code.. it's entirely gone
Go to the top of the page
 
+Quote Post
« Next Oldest · HTML, XML and other Markup Languages · Next Newest »
 

2 Pages V   1 2 >
Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. How To #4: Custom BBCodes For This Board (Pptions)(2)