[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 228
  • Last Modified:

Help with code

I have a basic forum and am having problems with the [quote] button.  What happens is when the [quote] button is clicked, it gets the appropriate text and sticks it into the message textbox like so

[quote=username]the quoted message here[/quote]

so that part works fine, and i even save it to the database at it is above.

how do i format this so it looks similar to the text in normal forums when the new message is posted which includes the quoted text?

i'm guessing css???

any suggestions on how its done?
0
narmi2
Asked:
narmi2
  • 4
  • 3
4 Solutions
 
TSmoothCommented:
Easiest way to figure it out is to go to your favorite forum of choice and open a thread that has quoted text that you like. Then right-click on the page and view source, search for the quoted text, and look at the markup around it. If it's referencing styles from an external css file, you can point your browser to that css file and download it. If you are using IE as your browser, you can get the IE Developers Toolbar which can also show you the combined rendered css of any section of a web page and I'm sure firefox has a similar if not better plug in to do the same.
0
 
jentulmanCommented:
Firefox has a plugin called Web Developer (many claim the IE toolbar was inspired by this)

https://addons.mozilla.org/en-US/firefox/addon/60

as TSmooth says you can take the styling info from another forum that you like, but here's a basic explanation.

place a <div> around the text to be quoted and set a class

<div class="quote">Here s the text that we want to appear as a quote</div>

an appropriate style to start with muight be something like

.quote{
background-colour:#333333;
border: 2px solid #000000;
padding:4px;
margin4px;
}

You can either add this to an external style sheet file and refernce it in the <head> section of your page with
<link href="stylesheet.css" rel="stylesheet" type="text/css"/>

or include the styles in the <head> section of your page like this

<style type="text/css">
.quote{
background-colour:#333333;
border: 2px solid #000000;
padding:4px;
margin:4px;
}
</style>

A great guide to getting started with CSS styles can be found here

http://www.w3schools.com/css/default.asp

and i can heartily recommend O'Reilly publishings "CSS Pocket Reference" ISBN 0-596-00777-9 if you use CSS regularly.
0
 
narmi2Author Commented:
i'm happy about the css part.  what i an confused about is the following

lets say it uses a div tag to store the information into the database e.g.

<div class="myquote">some test here</div>

is stores it in the database like this

&lt;div class=&quot;myquote&quot;&gt;some test here&lt;/div&gt;

it displays it on the page like this

<div class="myquote">some test here</div>

im using tinymce....... how do i get around this problem?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
narmi2Author Commented:
Please ignore my last comment, that was not the problem.  will get back to you which i get the problem clear in my mind!
0
 
narmi2Author Commented:
ok, another atempt

i am using a wysiwyg editor in my webpage which does not display row html, even though it is the raw html which gets saved into the database.

when i click the quote button, it sticks the quoted text into the wysiwyg editor, but only shows the text without the div tag.  the div tag is still around the text but it just cannot be seen in the editor.

now, when this happens "a quote is quoted" and the user then adds his/her own text below the quote, it ends up getting added to the quoted text because you cannot see where the div tag starts or ends in the wysiwyg editor.

how can i get around that?
0
 
jentulmanCommented:
So the text is stored as

 [quote=usrname]text to quote[/quote]

in the db and you need to turn that back into html on the way out?

you can use a regular expression to change this back in to html

you can replace the [quote=username] with

<span class="username">Username</span><div class="quote">

and then replace [/quote] with </div>

assuming $post contains the complete text of the post then this would do the job

$patterns[0] = '/\[quote=(\w*)\]/';
$patterns[1] = '/\[\/quote\]/';
$replacements[2] = '<div class="username">\1</div><div class="quote">';
$replacements[1] = '</div>';
$newpost = preg_replace($patterns,$replacements,$post);

regular expression syntax could take a long time to explain here, but here's the php manual page for it

http://uk2.php.net/manual/en/reference.pcre.pattern.syntax.php

and a brief explanation
 we create an array of regular expressions to search for and an array of replacement values for each expression. The replacement array is the opposite way around to the expressions array

So id patterns[0] is found it is replaced with $replacements[0]
 patterns[1] is found it is replaced with $replacements[1]
and so on (you could use this to replace other formatting options at the same time in future)

$patterns[0] = '/\[quote=(\w*)\]/';

the '/'s wrap around the expression. The '\'s escape special characters ([ in this case).
The \w* will match any WORD characters, so letters numbers and underscores. if your usernames allow other characters than those you will need to adjust this. it is wrapped in parenthesis (\w*) to say that we want to use the text matched by this bit in the replacement.

$replacements[0] = '<div class="username">\1</div><div class="quote">';

here we just have the string to put in the place of the text matched by the expression. the \1 is a placeholder for the first parenthesised match in the expression (the (\w*). You could have another () match in the expression and that would then be referenced by \2 e.g.

[quote=username otherthing=foo]

$patterns[0] = '/\[quote=(\w*)\ otherthing=(\w*)]/';
$replacements[0] = '<div class="\2">\1</div><div class="quote">';

and here's the php command that pulls it all together

$newpost = preg_replace($patterns,$replacements,$post);
0
 
jentulmanCommented:
Ahhh sorry i was trying to be clever and pre-empt you there ;P and went off on the wrong tangent entirely.

So what you need to do is make sure that the cursor is at the very end of the select box, outside the div when the text is added?
You are using your own javascript routine to update the contents of the tinyMCE editor?

if you add the text to the box and then flick to source view (do youhave that enabled?) is the div the very last thing in the html? if so the editor will as you say keep you inside the div when adding more text.
Have you tried adding a <br /> to the end of the text you are adding so that way the cursor is positioned outside the <div>?
0
 
narmi2Author Commented:
ok the <br /> solution worked! :D
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now