Module: Popup | Media | Extras | Emotes | Wowhead

---

Forum Modules v1.2

This set of modules was written to make it easier for everyone to post stuff in the forums. It adds icons above the current emoticons. For now, there are two modules, I'll add more as I find the need, or if someone posts an idea or request.

*UPDATE* I updated the tooltip portion of the popup module to work withthe new jQuery tooltips now used by GuildPortal. Please read theinstructions below for the updated information.

Popup Module:   Add Facebox window   Add Growl Window   Add Tooltip   Add Hide-Show Box   Add Spoiler Box Media Module:   Insert YouTube video   Insert mp3 Extras Module:   Add Progress Bar

Adding this to your site

This is the easiest part! Just copy the code below and ideally paste it into a free form text/HTML box on your forum page, but it can be put anywhere like your header HTML, footer HTML or Footer. I've included the tooltip script (in purple) in case you haven't already added it back (since it was removed from GuildPortal).

<script type="text/javascript">
// Add any custom variables here
</script>
<script src="http://www.axiomfiles.com/Files/258012/mod-popups-v1-2.js" type="text/javascript"></script>
<script src="http://www.axiomfiles.com/Files/258012/mod-media-v1-1.js" type="text/javascript"></script>
<script src="http://www.axiomfiles.com/Files/258012/mod-extras-v1-1.js" type="text/javascript"></script>
<link type="text/css" rel="Stylesheet" href="http://www.axiomfiles.com/Files/258012/mod-style.css">
<script src="http://www.axiomfiles.com/Files/258012/tooltip.js" type="text/javascript"></script>
<style type="text/css">
/* Add any custom CSS here */
</style>

* NOTE * The links above point to my test-site files. Version 1.0 was hosted elsewhere.

Customizing

• Everything in this section is optional. You only need to add it if you want to turn off part of a module or modify the colors.
  
  

 Overall

• The window that pops up (facebox) color** can be modified by adding a few lines of javascript, include this along with the script above (if you want to modify anything):
  

  <script type="text/javascript">
  // Add any custom variables here
  var addFacebox = true;
  </script>
  

  • The "modFrameCss" adds color to the window, modify the background color and text color (in blue). ** Removed
    
  • The "modInputCss" adds color to the input area (try to make this a different color, so you can see where to input information). ** Removed
    

    **Note: In version 1.0 of this module you could modify the style of the module, with the above variables. But the styles weren't being applied on IE and Chrome, so I moved everything into a stylesheet

  • To modify the facebox or module colors, add any CSS between the <style> tags in below the comment "/* Add any custom CSS here */"
    
  • The "addFacebox" variable is set to true in the example, but setting it to true isn't required as it is automatically enabled, setting it to false will disable this part of the module. I've included it here as an example. Read the section for the module you want to turn off for the code you need to add to disable it.
    

-= Popup Module =-

Facebox v1.1

• This part of the module is automatically enabled, but it can be disabled if you so desire, by adding the following inside the <script> tags above.
  

  var addFacebox = false;

• "Facebox Content" (required) - Input text or any HTML into this area.
• "Link Text" (required) - This is the text (or image HTML) the reader must click on to get the facebox window to open.
  
  

Growl v1.1

• This part of the module is automatically enabled, but can be disabled by adding the following inside the <script> tags above.
  

  var addGrowl = false;

• "Growl Title" (optional) - Add text here if you want to add a title to the Growl window.
• "Growl Content" (required) - Input text or any HTML into this area.
• "Link Text" (required) - This is the text (or image HTML) the reader must click on to get the Growl window to open.
• If you've modified the Growl window, this part of the module will add two additional input areas:
  
• "Growl Icon URL" (optional) - Enter the URL to an icon you want to display.
• "Growl Window Width" (required) - Input the desired width of the Growl Window. The value must be between 10 and 800.
  
  

Tooltip v1.2

• This part of the module is automatically enabled, but can be disabled by adding the following inside the <script> tags above.
  

  var addTooltip = false;

• "TooltipLink HREF" (optional) - This is the URL you want to send the readerwhen they click on "Text or Image to Hover". If left blank, it will adda "void" script to prevent the link from sending the reader away fromyour page.
  
• "Tooltip Link Content" (required) - This is the text (or image HTML) the reader must hover over to get the Tooltip to open.
• "Tooltip Width" (required) - Input the desired width of the tooltip. The value must be between 10 and 800.
  
• "TooltipBackground Color" (optional) - Added in v1.2 of this script. You canchoose the background color of the tooltip, this is a new option addedwith the New and Improved tooltips and v1.2 of the tooltip script. Thedefault color is set by the script to the current color.
  
• "Tooltip Text Color" (optional) - Added in v1.2 of this script. Choose the tooltip text color here.
  
• "Tooltip Content" (required) - Input text or any HTML into this area.
• 
  

Hide-Show Box v1.0

• This part of the module is automatically enabled, but can be disabled by adding the following inside the <script> tags above.
  

  var addHideShow = false;

• "Box Icons" (required) - Pick the icon set you want displayed showing that the info in the box is either shown (left icon) or hidden (right icon). You can add your own icons by following the instructions below.
  
• "Icon Align" (required) - Lets you decide where the icon indicator is show in the box title bar.
• "Box Title" (optional) - Enter a hide-show box title. You can use HTML here as well - e.g. '<img src="...">'
  
• "Box Content" (required) - Input text or any HTML into this area.
• "Box Content is initially" - Setting this to "Shown" will have the box open when you first get to the post, "Hidden" will hide the contents initially.
  
• Add Custom Icons - You can add your own custom icons by adding the following script inside the area above
  

  var customHideShowIcons = new Array();
  customHideShowIcons.push (["Hearts","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/smiley_heart.gif","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/smiley_heart_broken.gif"]);
  var selectedHideShowIcon = "Hearts";

• Don't change the first line, as it sets up a new array
• Add this template to add as many icon sets as you want:
  
  customHideShowIcons.push (["Icon Set Name","Open box icon URL","Closed Box icon URL"]);
  
  
  • Replace the text in blue with the icon set name, in the example above it was "Hearts"
  • Replace the text in red with the URL to the icon that is shown when the box is open
  • Replace the text in green with the URL to the icon that is shown when the box is closed.
    
    
• To make the selection box automatically have this new custom icon set selected, replace the text in blue with the exact name of the icon set. Only one icon set can be selected at a time.
  
  var selectedHideShowIcon = "Icon Set Name";
  
  

Spoiler v1.1

• This part of the module is automatically enabled, but can be disabled by adding the following inside the <script> tags above.
  

  var addSpoiler = false;

• "Spoiler Title" (optional) - Type in the Title of the Spoiler box, if you enter nothing, it defaults to "Spoiler".
  
• "Spoiler Content" (required) - Input text or any HTML into this area.
• Choose "Click to Show" or "Hover to Show" which is what the user has to do on the spoiler box to view the contents
  
• If you'd like to change the colors of the spoiler box, add the CSS below into the CSS section above
  

  <style type="text/css">
  /* Add any custom CSS here */
  .spoiler { border: #444444 1px solid; color: #dddddd; }
  .spoilerbody { color: #888888; }
  </style>

-= Media Module =-

YouTube v1.1

• This part of the module is automatically enabled, but can be disabled by adding the following inside the <script> tags above.
  

  var addYouTube = false;

• "Video Name" (optional) - Puts the Video Name above the embedded video
• "Video URL" (required) - Find the URL of the video and paste it into this area (example: http://www.youtube.com/watch?v=wN0oDnoc3-c&fmt=)
• If you enter a non-YouTube address, you'll just end up with a link to the video. And in this case the Video Name will be required.
  
  

Mp3 v1.1

• This part of the module is automatically enabled, but can be disabled by adding the following inside the <script> tags above.
  

  var addMp3 = false;

• "mp3 Player" - You can choose to use either the "Google" mp3 player or the "Word Press" mp3 player.
• "mp3 Title" (optional) - Enter the Title and/or Artist for the song you want to insert.
  
• "mp3 URL" (required) - Enter the URL to your mp3 here. It doesn't check for the ".mp3" end, in case these players happen to play other formats.
• The "Word Press" player can be styled to match your site, but I didn't get around to setting this up yet. I haven't worked on it yet since I was thinking about using the same popup color selector that GuildPortal uses, but I don't really like it.
  
  * Note: When adding an mp3 player in the forums, it may appear that nothing was added (while in design mode ). But if you switch to HTML mode () and back, or once you save the post, it will appear!
  
  
• Custom Word Press Player Colors - The player has twelve colors you can customize. Click on the "Color Legend" box to see the image below. There are only nine labels in the image below, the three additional colors are seen when hovering over the righ side of the player.
  
  
  
  
• To add your own default colors that match the theme of your site (for those users that don't bother changing the colors or if you plan on disabling the color selector), you can add and modify any of the variables below:
  
  var mp3Bkgd = "#cce4ff"
  var mp3LeftBkgd = "#357dce"
  var mp3RightIconghtBkgd = "#af2910"
  var mp3RightIconghtBkgdHover = "#f06a51"
  var mp3LeftIcon = "#f2f2f2"
  var mp3RightIcon = "#f2f2f2"
  var mp3RightIconHover = "#333333"
  var mp3Text = "#1d4572"
  var mp3Silder = "#357dce"
  var mp3LoaderBar = "#303030"
  var mp3Track = "#969696"
  var mp3Border = "#ffffff"
  
  
• Once you have the color set to match your site theme, you can turn on the color selection display. To disable the color selection for ALL users (this includes admin), add this variable. The variable is automatically set to true if you don't add this line:
  
  var allowMp3ColoringByAll = false;
  
  If you want the admin to be able to adjust the color, add this line as well. This variable only works if the above variable is set to false. Also, this variable is automatically set to false if you don't add this line:
  
  var allowMp3ColoringByAdmin = true;
  

-= Extras Module =-

Progress Bar v1.0

• This part of the module is automatically enabled, but can be disabled by adding the following inside the <script> tags above.
  

  var addProgressBar = false;

• "Progress Bar Title" (optional) - Adds a title above the bar. No CSS class is defined for this title, but it is made bold.
• "Percentage" (required) - The percentage of the bar. Enter a number between 0 and 100 - the percentage (%) sign is optional.
• "Border Type" (required) - Select the type of border you want. Options are "none", "image" or "Text"
• None - Removes the border from the progress bar
• Image - Uses the border image, of which there are only two color choices.
• Text - Just add a colored border line around the progress bar
  
• "Border" (required) - When image type is selected, this gives you an option of choosing the black or silver border image. If the text type is chosen, you can select the custom color from the wheel on the right.
  
• "Bar Color" (required) - type in the hex color or select the color from the wheel on the right.
  
• "Text Color" (required) - type in the hex color or select the color from the wheel on the right.
• "Bar Image" (required) - Select the style of bar image you want. You can add more options to this by following the instructions in the section below.
  
• None - Choosing this option will remove the image. The color of the progress bar will be set by the "Bar Color" 
• Custom - Choosing this option will open a new input area so you can enter the URL to your bar image. The image can be of any size, but ideally it should be 200 pixels by 15 pixels. If it is larger, only the center portion of the image will be displayed.
  
• Striped (default setting) - this is a semi-transparent image that allows the "Bar Color" to show through so you can set this bar to any color
• Animated - Choosing this will add an animated image to your progress bar. This image is opaque and will not be affected by the "Bar Color"
  
  
• Custom Bar Images - You can add your own custom progress bar images by following this example (don't forget the commas!)
  

  var barImageOptions = {
   "It's Fire Baby!" : "http://i201.photobucket.com/albums/aa236/Mottie1/testsite/bars/fire.gif",
   "Water" : "http://i201.photobucket.com/albums/aa236/Mottie1/testsite/bars/water.gif"
  };
  

  • Add this template to add as many bar images as you want. Make sure the last line of the variable doesn't have a comma. See the example above.
    
    "Bar Image Name" : "Bar Image URL",
    
    
  • Replace the text in blue with the Bar Image name, in the example above it is "It's Fire Baby!" and "Water"
    
  • Replace the text in orange with the URL to the bar image.
    
    
  • To make the selection box automatically have this new progress bar imageselected, replace the text in blue with the exact name of the "Bar Image Name". Only one progress bar image can be selected at a time.
    
    var selectedProgressBarImage = "Bar Image Name";
    
    

Edit (4/2/2009): Updated the instructions for version 1.1. And added Hide-show box & Progress bar modules
Edit (4/2/2009): Updated again as apparently the <script> tag pointing to the modules was messed up somehow... fixed!
Edit (6/6/2009): Updated the tooltip portion to version 1.2. Alsoincluded are the new tooltip script and links to instructions on how toadd that script to your site.

wow, this is awesome Mottie! Thanks

Thanks Mottie! 

Question, what is the purpose of the progression bar. It's really cool.

Cool. Just wondering if these progress bars will move on their own or if we will have to manually change the % if we need to.

Very cool Thanks Mottie