Notice from mastercomputers:
I have updated my Notice BBCode site
Just would like to point out the site now, which has instructions to get it working under IPB (not tested though), also fixes to work with IE, except I need to work on alpha-transparency, which I may remove since it would require server-side scripting, which won't do for this, so maybe revert back to normal images without transparency, but makes changing the colour easy.The link is http://mastercompute... read more.
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:
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>
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.
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)"
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 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.
<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.
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; } ?>
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.
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
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:
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.
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 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
Just would like to point out the site now, which has instructions to get it working under IPB (not tested though), also fixes to work with IE, except I need to work on alpha-transparency, which I may remove since it would require server-side scripting, which won't do for this, so maybe revert back to normal images without transparency, but makes changing the colour easy.
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://mastercomputers.uni.cc/bbcode/notice.html (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.
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.
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.
MARQUEE Tag Hi, I'm back with yet a second tutorial on how I created the MARQUEE tag.
It's working well - but at first it'll seem that the tag has caused your browser to freeze.
I guess depending on the different ways that IE and Mozilla Compliant Browsers parse HTML tags - the
outputs are a little different. While using FireFox, the Marquee wouldn't start scrolling till
all the page elements & the page itself has FULLY LOADED . Till then, it might seem that the
browser's on the verge of freezing. On the other hand, in IE the Marquee start...
Custom BBCodes for Forums -------------------------- Hi all, I came up with this article to
share what I learnt of designing Custom BBCodes for various forum softwares while trying to come up
with some useful one's for AstaHost. Most of you are by now familiar with the new ones like
CONSOLE, NOTE, TABL etc. which I introduced a few days back. So how do these BBCodes work ? And how
does the forum softwares parse them. BBCodes, as you know, usually takes a Text Stuff
format. The "Text Stuff" in the textual content on which you want your bbcode to wor...
Looking for howto, 3, custom, bbcodes, board, note