Help button when starting a new topic on certain boards

[Boy_Wonder]

So I want a way that say there's a button with a question mark on it or labelled 'help' it gives a pop up help on certain boards.

Eg for the new stable registration board the help button would bring up a prompt reminding people hashtag codes need to be done in the [#]format and that without they are running a livery stable they can only select one focus for their stable, how to use the dice code etc

[Peter]

Not sure if you need this as a plugin, but here's something I quickly wrote in the console.

Place this in your templates where you want it to appear.

<button class="button" id="forum-help-button">Help</button>

Place this in your global header, just modify the height, width, and the content (stored in the variable "help").

$(document).ready(function(){
$("button#forum-help-button").click(function(){
pb.window.dialog("forum-help-dialog", {

title: "Help",
height: 200,
width: 250,
resizable: false,
html: (function(){
var help = "";

help += "Eat a prawn pringle.<br />";
help += "Walk the fish.<br />";

return help;
})(),

buttons: {

Close: function(){
$(this).dialog("close");
}

}

});
});
});

[Boy_Wonder]

Thanks Peter! Could I put it in board headers to control slightly different content for the three boards I need it in

[Peter]

I suppose a plugin would be more suited if you wanted different messages in different boards, but what you suggested will also work.

[Boy_Wonder]

Can at least use it as a stop gap (It saves me having to write a tonne of if statements to do what I want checking if its a certain board id display this)

[Lynx]

Since I see an HTML break in the help variable, Peter, I'm guessing HTML would work in there for something like links? If so, would the dialog close if a link is clicked (thinking not). Thinking of something like:

help += "<a href='url_to_rules'>Rules</a><br />";

[Peter]

Lynx,

You would have to bind an event to the link to close the dialog.

One way of doing it:

pb.window.dialog("forum-help-dialog", {

title: "Help",
height: 200,
width: 250,
resizable: false,
html: (function(){
var help = "";

help += "Eat a prawn pringle.<br />";
help += "Walk the fish.<br />";
help += "<a id='close-it' href='#'>Close</a>";

return help;
})(),
 
create: function(){
var d = $(this);

d.find("a#close-it").click(function(){
d.dialog("close");
return false;
});
}

});


Oh, and yes, in your signature that is correct

[Lynx]

Peter,

Just so I'm clear and not goofing things up. Using your setup above, could that last line be something like:

help += "<a class="close-it" href="link_to rules_url">Rules</a>";

so when they click it, the dialog closes and redirects to the Rules URL?

Edit:

(1) By the way, I like the "Walk the fish".

(2) Thanks, regarding my sig! I lernt sumthing!

I am going through the MDN - that's where I ran across those. I read some every day.

[Peter]

Lynx,

Nope, that would error. You can't have the quotes in a string be the same as the quotes holding the string unless you escape them (which I try to avoid, as it's messy).

Examples:

help += "<a class="close-it" href="link_to rules_url">Rules</a>";  // This will give you an error
help += '<a class='close-it' href='link_to rules_url'>Rules</a>';  // This will give you an error
help += "<a class='close-it' href='link_to rules_url'>Rules</a>";  // Works
help += '<a class="close-it" href="link_to rules_url">Rules</a>';  // Works
help += "<a class=\"close-it\" href=\"link_to rules_url\">Rules</a>";  // Works
help += '<a class=\'close-it\' href=\'link_to rules_url\'>Rules</a>';  // Works

Apart from that, yes, you can do that. You can drop the create event (the dialog will not close once the link is clicked though).

[Lynx]

Ah, that's right. DORT! I used double quotes for the inner and outer when I should have used single quotes on either the inner or outer, or as you also showed, escaping the quotes.

Thanks Peter!