TinyPortal

Development => Support => Installation => Topic started by: Inny on May 02, 2009, 11:11:09 AM

Title: [How-TO]: World of Warcraft Website Design v1.3
Post by: Inny on May 02, 2009, 11:11:09 AM
The last few days more and more people either through TP or friends and colleagues were asking me on how to create their World of Warcraft website so i decided to create this brief and small guide on how to fit your SMF+TP installation to the specific game needs, but also for my obscene kind of perfection to see Tinyportal World of Warcraft websites that are not using in the "correct" or "proper" way articles so it leads to have their Web Applications opening in new window or outside of the Portal Wrapper.

Have in mind that because of the nature of the guide you need to know how to install specific Web Applications but also some minimal skills of editing SMF files.

Changelog:
1.3 Added RSS Collection
1.2 Minor Fix
1.1. Added Extra features
1.0 Initial Release of the Guide




Required:
Simple Machines Forum (http://www.simplemachines.org)
Tinyportal (http://www.tinyportal.co.uk)


Tools
NotePad   (http://notepad-plus.sourceforge.net/)
Core FTP (http://www.coreftp.com/)




1) Search for a good host that causes you no headaches. Im using Hostgator for the last 26months (as of 04/2009) without any problems. In total i opened 1 technical ticket so far. Feel free to check around this Server & Hosts Board (http://www.tinyportal.net/index.php/board,70.0.html) for more info.

2) Get Simple Machine Forum Engine. You can find a series of usefull documents for everything Here (http://docs.simplemachines.org/index.php?board=2.0;sort=subject)

3) Next step is to install TinyPortal and its not as Tiny as it seems. Installation is Here (http://docs.tinyportal.co.uk/index.php/topic,28.html).

As of the end of this step you have a fully functional website with a forum engine. Steps below this have to do with your personal preferences in website design. There are many places that you can get a theme for your site, i will just mention 2 because i truly support the people working on them

4) Tinyportal Theme Club (http://www.tinyportal.net/index.php/page,tpthemeclub/themeclub.html)

5) DzinerStudio (http://www.dzinerstudio.com)


Following next steps are the customization of your site according to your WoW needs.

6) Recruitment Block (http://www.tinyportal.net/index.php/topic,19751.0.html)

7) Progress Block (http://www.tinyportal.net/index.php/topic,29110.0.html)

8.) Join-Us form (http://www.tinyportal.net/index.php/topic,9840.0.html)

9) WoW Login News (http://www.tinyportal.net/index.php/topic,28072.0.html)

10) Ulduar Progress Block (http://www.tinyportal.net/index.php?topic=29267.0)

Advanced:
By using TP you have opened some more possibilities by the usage of articles. I'm not giving installation steps for the following just some general workaround.

Required Tools:
- Minimal knowledge of editing files and following instructions
- Iframe SSI script II (http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm)
- WOWHead Tooltips (http://www.wowhead.com/)
- EQDKP (http://www.phpraider.com/)
- Event Horizon Fight Statistics (http://ehfs.event-horizon-gilde.de/)
- PhP Raider (http://www.phpraider.com/)

Installation of Iframe SSI Script II:
1) Download the script on the bottom of this topic, and put it in the Default Theme directory.

2) In index.template.php of your Default theme and/or SMF default theme find:

// The ?fin11 part of this link is just here to make sure browsers don't cache it wrongly.


Add Before:

   // Iframe scrolling bars make people go emo
      echo '
<script type="text/javascript" src="', $settings['default_theme_url'], '/IframescriptII.js?fin11"></script>';
   // No more emoness


Installation of WoWHead tooltips:
in index.template.php of your Default theme and/or SMF default theme find:

// The ?fin11 part of this link is just here to make sure browsers don't cache it wrongly.


Add Before:

   // WoWhead tooltips makes good boys behave like bad boys
   echo '
   <script src="http://www.wowhead.com/widgets/power.js?fin11" type="text/javascript"></script>';
   // Im a bad boy now




Installation of these tools is recommended in your server root before attempting to create the articles.

Categories to put the specific articles in it are needed, im suggesting to create DKP, Raid Calendar and Raid Report categories.

EQDKP:
After you installed EQDKP, open your SMF admin panel, go to Articles and create an HTML article:
put the following code in it:

<iframe id="myframe" src="/your_eqdkp_folder/" marginheight="0" vspace="0" hspace="0" scrolling="no" width="100%" frameborder="0">none</iframe>


PHPRaider:
For Raid Calendar Create an HTML article again add the following code:

<iframe id="myframe" src="/your_phpraid_folder/" marginheight="0" vspace="0" hspace="0" scrolling="no" width="100%" frameborder="0">none</iframe>


Event Horizon Fight Statistics:
For this i suggest to make a directory in your server root called "Raid Reports". Each and everytime you create reports you save them by date in that directory. e.g. 300409.

Create an HTML article use this code:

<iframe id="myframe" src="/your_raidreports_folder/report_date/index.html" marginheight="0" vspace="0" hspace="0" scrolling="no" width="100%" frameborder="0">none</iframe>





Extras:
Extras is my personal preference to some of the most important block codes for your frontpage.

Article Archive Index:
Article Archive List (http://www.tinyportal.net/index.php/topic,26746.0.html).
I use this block code in an article, to have some kind of an index of my Raid Reports. If you followed my suggestion to create a category of the Raid Reports, the only thing you need to edit in the block code is the category.

Use the following 2 Blocks for your frontpage, preferably in a 2 Column display of blocks.

Multifunctional Article Snippet:
- Multifunctional Article Snippet (http://www.tinyportal.net/index.php/topic,20261.0.html). This Snippet is good to show the latest 5-10, you call it, latest Raid reports for you members.

Multifunctional Post and Topics:
- Multifunctional Post and Topics (http://www.tinyportal.net/index.php/topic,19339.0.html). Simple Recent Topics Snippet.


WoWhead Search box:
Code to use in an HTML & Javascript Code type of block. Preferably should be either a left or right Block.

<center><script type="text/javascript">var mt_style = 3</script>
<script src="http://www.wowhead.com/widgets/searchbox.js" type="text/javascript"></script> </center>





RSS Feed Collection
As with the upcoming versions of TP more RSS features will be included i compile here a list of RSS feeds:

As of today 05/2009 and TP v1.0 Beta 3 i use the RSS Feeds in php Article Pages using the code below:

// An RSS Reader to grab news from whichever site you choose
$backend = "http://feeds.gameriot.com/wowriot?format=xml"; //change this to match the rss feed url you wish to display.
// end


function endtheElement($parser, $tagName) {
// This function is used when an end-tag is encountered.
global $insideitem, $tag, $title, $description, $link;
 
  if ($tagName == "ITEM") {
    echo '<table width="100%" border="0"><tr>
      <td class="main-table">
      <span class="nav-head"><strong>
      ';
    printf("<p><b><a href="%s">%s</a></b></p>", // make our title into an actual link
    trim($link),htmlspecialchars(trim($title))); // remove html characters from the title
 
    echo "</tr>";
    echo '<tr>
      <td class="nav">';
    printf("<p>%s</p>",$description); // Print out the live journal entry
    echo"</td>";
    echo "</tr>";
    echo "</table>";
    echo "<br>";
    $title = $description = $link = $insideitem = false;
   }
}

// Now to the parsing itself. Starts by creating it:

$xml_parser = xml_parser_create();

// Then setup the handlers:

xml_set_element_handler($xml_parser, "startElement", "endElement");
xml_set_character_data_handler($xml_parser, "characterData");

// Open the actual datafile:

$fp = fopen($backend, r);

// Run through it line by line and parse:

while ($data = fread($fp, 4096)) {
  xml_parse($xml_parser, $data, feof($fp))
    or die(sprintf("XML error: %s at line %d",
           xml_error_string(xml_get_error_code($xml_parser)),
           xml_get_current_line_number($xml_parser)));
}

// Close the datafile

fclose($fp);

// Free any memmory used

xml_parser_free($xml_parser);


In the above find:

$backend = "http://feeds.gameriot.com/wowriot?format=xml"; //change this to match the rss feed url you wish to display.


and change the url to the specific RSS feed.




Important Info:
- Guide was written for TinyPortal (//http:///www.tinyportal.co.uk).
- All credits go to the block code authors and web application developers.
- Block Specific Support request it in the appropriate block code topic.

To-Do List:
- Clarification of some parts of the Guide

I will try to reply to every question involving the guide and specific steps. Comments are welcomed.

Title: Re: [How-TO]: World of Warcraft Website Design
Post by: G6Cad on May 02, 2009, 05:32:37 PM
 :up:

These kind of posts are valuable to a lot of people, including us in the staff, Well written, and a good collection of the code snippets.
5 of 5 Stars to you Inny  :D
Title: Re: [How-TO]: World of Warcraft Website Design
Post by: Inny on May 02, 2009, 06:23:21 PM
Thanks G6  :)

Added some more features called Extras.
Title: Re: [How-TO]: World of Warcraft Website Design
Post by: Renegd98 on May 02, 2009, 09:29:23 PM
Nice guide
Title: Re: [How-TO]: World of Warcraft Website Design
Post by: maviel on May 06, 2009, 04:36:49 AM
thank you for the guide but i cant find // End i do find ...// TinyPortal end

Is that correct?
Title: Re: [How-TO]: World of Warcraft Website Design
Post by: Inny on May 06, 2009, 07:03:09 AM
Quote from: maviel on May 06, 2009, 04:36:49 AM
thank you for the guide but i cant find // End i do find ...// TinyPortal end

Is that correct?

Had to go over some themes, to check index.template.

I fixed the code for it in the guide.

You have to find:

// The ?fin11 part of this link is just here to make sure browsers don't cache it wrongly.
Title: Re: [How-TO]: World of Warcraft Website Design
Post by: maviel on May 06, 2009, 07:36:33 AM
nice thank you!  :up: :up: :up: :up: :up:

got a question for the wowhead tooltip, how do u use it is it <item> or [item] ? and is it possible to add it in the forums to were u press a button so it automatic comes up [item][/item] ?
Title: Re: [How-TO]: World of Warcraft Website Design
Post by: Inny on May 06, 2009, 08:58:02 AM
You dont need to use the item tags anymore.

any of the ones below will give you a tooltip:

http://www.wowhead.com/?spell=47498
[url=http://www.wowhead.com/?spell=47498]Devastate[/url]

http://www.wowhead.com/?achievement=1860
[url=http://www.wowhead.com/?achievement=1860]Gotta Go![/url]

http://www.wowhead.com/?quest=13183
[url=http://www.wowhead.com/?quest=13183]Victory In Wintergrasp[/url]

http://www.wowhead.com/?item=43228
[url=http://www.wowhead.com/?item=43228]Stone Keeper's Shard[/url]

http://www.wowhead.com/?spell=44529
[url=http://www.wowhead.com/?spell=44529]Enchant Gloves - Major Agility[/url]


http://www.wowhead.com/?item=18582
[url=http://www.wowhead.com/?item=18582] The Twin Blades of Azzinoth[/url]


So if you wanna put items or quests or anything from WoWHead you simply copy paste the url from WoWHead. You can enhance the link by using url tag.

Not using item tags might be a downpart, but with that mod you cant add achievements, spells, quests :)
Title: Re: [How-TO]: World of Warcraft Website Design
Post by: maviel on May 07, 2009, 03:41:59 AM
found another option to this with the thing i needed however it was a SMF configuration. I haven't tested this yet but:

http://wowhead.crackpot.us/

Will fix this as we speak supports SMF 1.*

EDIT:
Works like a charm and u even get "epic" look on epic items. U can add stuff such ass:

    *  Item Syntax: [item]{item name}[/item] or [item]{item id}[/item]
          o You can also add enchant="{enchant_id}" and gems="{gem1id},{gem2id},etc."
    * Item Icon Syntax (Default Size Medium): [itemico]{item name}[/itemico] or [itemico]{item id}[/itemico]
    * Item Icon Syntax (Specific Size): [itemico size=(small|medium|large)]{item name}[/itemico] or [itemico size=(small|medium|large)]{item id}[/itemico]
    * Quest Syntax: [quest]{quest name}[/quest] or [quest]{quest id}[/quest]
    * Spell Syntax w/o Ranks: [spell]{spell name}[/spell] or [spell]{spell id}[/spell]
    * Spell Syntax w/ Ranks: [spell rank={#}]{spell name}[/spell]
    * Achievement Syntax: [achievement]{achievement name}[/achievement] or [achievement]{achievement id}[/achievement]
    * Itemset Syntax: [itemset]{itemset name}[/itemset]
    * Craftable Syntax: [craft]{craftable name}[/craft]
    * For any of these you can add the lang={en|fr|de|es|ru} option to force a language for that given object.


;D ;D ;D ;D ;D
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: Inny on May 08, 2009, 08:06:59 AM
Added a list with RSS feeds.
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: Dramber on May 14, 2009, 05:31:39 AM
Very nice guide! Wish I would have had it 6 months ago. I had to figure out how to do most of these mods by trial and error. 
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: wolfface on May 30, 2009, 04:21:59 PM
Hello Inny;
From what I heard, this is an excellent guide...allow me to say thank you for all your effort.
I am trying to follow this guide to build to a forum for my guild.
I am currently using
     1- SMF 1.1.8 (thats the one supported by my hsoting company)
     2- WOW-DK Theme latest version (wow-dk119v1)
However, when i try to install Tiny Portal ( 0.9.8 ) using that theme i lose the forums tab, and the home page becomes empty, and in turn i can't proceed with your guide...
So my questions are:
      1- is this theme not compatible with this guide or TP??
      2- is there any other (close) theme you would suggest so i can follow this guide??
      3- if this theme doesn't work wit TP, can i use the mods without TP??

you can find the forums by following this link: www.dwg-uther.com (http://www.dwg-uther.com) and then clicking on forums tab.
thank you so much again.
Wollf
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: Inny on May 30, 2009, 06:07:34 PM
erm, what are you reasons for using TP0.98?

There is a guide on how to add a Forum button, i think its this (http://docs.tinyportal.co.uk/index.php?topic=30)

For:
1) There are various issues regarding this, most probably you might need a manual install. Im certainly sure than WoW-DK is fine with TP
2) Im not a WoW theme fan, you can check my signature for our website. There are many themes around that are fine for running a WoW Site
3) SMF mods have nothing to do with TP, TP is a mod itself so the answer is yes you can use the mods without TP


P.S: As for the theme check this (http://www.tinyportal.net/index.php/topic,5349.0.html)
I think somewhere in this forum theres a new version for WOW-DK compatible theme. Need to search a bit to find it because i dont remember where and how i crossed it :P.
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: Crip on May 30, 2009, 07:18:27 PM
Quote from: wolfface on May 30, 2009, 04:21:59 PM
Hello Inny;
From what I heard, this is an excellent guide...allow me to say thank you for all your effort.
I am trying to follow this guide to build to a forum for my guild.
I am currently using
     1- SMF 1.1.8 (thats the one supported by my hsoting company)
     2- WOW-DK Theme latest version (wow-dk119v1)
However, when i try to install Tiny Portal ( 0.9.8 ) using that theme i lose the forums tab, and the home page becomes empty, and in turn i can't proceed with your guide...
So my questions are:
      1- is this theme not compatible with this guide or TP??
      2- is there any other (close) theme you would suggest so i can follow this guide??
      3- if this theme doesn't work wit TP, can i use the mods without TP??

you can find the forums by following this link: www.dwg-uther.com (http://www.dwg-uther.com) and then clicking on forums tab.
thank you so much again.
Wollf

You can use the converted 098 WoW-DK Theme ---
http://www.tinyportal.net/index.php/topic,5349.0.html
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: Inny on May 30, 2009, 11:04:11 PM
Thanks Crip  :up:
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: Riggs on June 01, 2009, 04:18:32 AM
Quote from: maviel on May 07, 2009, 03:41:59 AM
found another option to this with the thing i needed however it was a SMF configuration. I haven't tested this yet but:

http://wowhead.crackpot.us/

Will fix this as we speak supports SMF 1.*

EDIT:
Works like a charm and u even get "epic" look on epic items. U can add stuff such ass:

    *  Item Syntax: [item]{item name}[/item] or [item]{item id}[/item]
          o You can also add enchant="{enchant_id}" and gems="{gem1id},{gem2id},etc."
    * Item Icon Syntax (Default Size Medium): [itemico]{item name}[/itemico] or [itemico]{item id}[/itemico]
    * Item Icon Syntax (Specific Size): [itemico size=(small|medium|large)]{item name}[/itemico] or [itemico size=(small|medium|large)]{item id}[/itemico]
    * Quest Syntax: [quest]{quest name}[/quest] or [quest]{quest id}[/quest]
    * Spell Syntax w/o Ranks: [spell]{spell name}[/spell] or [spell]{spell id}[/spell]
    * Spell Syntax w/ Ranks: [spell rank={#}]{spell name}[/spell]
    * Achievement Syntax: [achievement]{achievement name}[/achievement] or [achievement]{achievement id}[/achievement]
    * Itemset Syntax: [itemset]{itemset name}[/itemset]
    * Craftable Syntax: [craft]{craftable name}[/craft]
    * For any of these you can add the lang={en|fr|de|es|ru} option to force a language for that given object.


;D ;D ;D ;D ;D

DOH!  Domain expired.  Anyone have this information stored somewhere else?

BTW, EXCELLENT Guide!
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: wolfface on June 01, 2009, 08:44:47 AM
OMG..
Thanks Inny and Crip for the prompt response  :up:
i really appreciate this guys..
i will definetly try it ASAP and let you guys know the results  ;D
Wolf
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: Inny on June 01, 2009, 10:51:19 AM
No problem




As for the itemstats links i suggest using directly the WoWhead script that i have in the guide. Much more simpler and its one less mod to take care off, plus you dont need to update anything.

You can see an excessive use of it here (http://www.epu-wow.com/page/170/).

In forum posts you can use the URL tag for it and pretty much everyone before linking items is going through wowhead or thottbot. Theres a script from thottbot aswell, i will check it out and maybe add it aswell, since i know you can use both at the same time.
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: wolfface on June 03, 2009, 07:09:10 PM
Hello Crip;
I am using the theme you suggested, and which i believe you converted, looks awesome and kick ass, and for that i thank you.
One small problem, SMF is giving me a warning on top of the forum:
" Attention of WOW-DK theme:
This theme doesn't correspond to the version of SMF that you are using. This theme is made for SMF 1.1.3. "

What can i do to fix this??

Again I appreciate you and Inny's help.

Wolf
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: Starrbuck on June 03, 2009, 07:24:30 PM
There should be a check-box on the theme settings to turn off the warning.
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: exact on June 05, 2009, 12:28:34 AM
Hey Inny, i'm a fan of your work and what you did with your website. I'm trying to set my own website up and I just can't seem to get the iframe scaling correctly for my DKP page. I copied the script from http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm and made it into a javascript file named IframescriptII.js and I put that into my main directory, my default theme directory, and my current theme directory, but to no avail my DKP page is still squished. Here is the link: http://www.coalesce-guild.com/index.php?page=5
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: Inny on June 05, 2009, 07:30:33 AM
Hello exact,

you article link isnt active so i cant check it out.

Some people reported a failure in the script when you were adding the style into the iframe tag.

Find style="overflow: visible; width: 100%; display: none;"

and remove it. Additionally in the iframe tag put width: "100%"

What i specifically use is:

<iframe id="myframe" src="/raidreports/040609/index.html" marginheight="0" vspace="0" hspace="0" scrolling="no" width="100%" frameborder="0">none</iframe>

Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: exact on June 05, 2009, 08:12:58 AM
Thanks for the reply, I got it working now at http://www.coalesce-guild.com/index.php?page=7 I was wondering if you knew how to get the leaderboard working, and do you use EQDKP at all? Or do you use bbdkp or something like that?
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: Inny on June 05, 2009, 08:31:01 AM
I had leaderboard long ago, stopped using it because its kinda worthless now for us :P

Instructions are simple to install it, make sure you install leaderboard first and then any other mods, makes it easier.

and yeah we use EQDKP.  :laugh:
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: exact on June 05, 2009, 09:06:48 AM
Did you ever get colors working on the leaderboard, and do you by chance know how to make the leaderboard only show members with a certain attendance percentage threshold? Persay, only showing members above 75% attendance?
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: Inny on June 05, 2009, 11:20:37 AM
Quote from: exact on June 05, 2009, 09:06:48 AM
Did you ever get colors working on the leaderboard, and do you by chance know how to make the leaderboard only show members with a certain attendance percentage threshold? Persay, only showing members above 75% attendance?

No never had classes mods, and i dont think you can have the leaderboard show attendance specific members. Unless you wanna make it really slow :P
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: maldave on June 23, 2009, 01:09:04 PM
Hi Inny,

I tried your code but the result was that only the top of the dkp is show in the frame;

http://www.skyline-mmo.eu/index.php?page=3

Any way one can fix this ?
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: Inny on June 23, 2009, 03:08:11 PM
Seems you got a problem with the path there of the iframe script.

i get: "Not Found
The requested URL /Themes/default/IframescriptII.js was not found on this server."

Its either the permissions or you have the path wrong.
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: maldave on June 23, 2009, 04:25:59 PM
Quote from: Inny on June 23, 2009, 03:08:11 PM
Seems you got a problem with the path there of the iframe script.

i get: "Not Found
The requested URL /Themes/default/IframescriptII.js was not found on this server."

Its either the permissions or you have the path wrong.

The theme that I use is here /Themes/overview_tp10/IframescriptII.js
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: Inny on June 23, 2009, 04:36:19 PM
in Your index.template i can see:


<script type="text/javascript" src="http://www.skyline-mmo.eu/Themes/default/IframescriptII.js?fin11"></script>


So you need to fix that path.

Change it to:

<script type="text/javascript" src="http://www.skyline-mmo.eu/Themes/overview_tp10/IframescriptII.js?fin11"></script>

Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: maldave on June 23, 2009, 04:51:02 PM
Quote from: Inny on June 23, 2009, 04:36:19 PM
in Your index.template i can see:


<script type="text/javascript" src="http://www.skyline-mmo.eu/Themes/default/IframescriptII.js?fin11"></script>


So you need to fix that path.

Change it to:

<script type="text/javascript" src="http://www.skyline-mmo.eu/Themes/overview_tp10/IframescriptII.js?fin11"></script>



The line that I have in index.template is;

<script type="text/javascript" src="', $settings['default_theme_url'], '/IframescriptII.js?fin11"></script>';

I have put the script file both in the default theme and my own theme and still it doesn't work.
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: Inny on June 23, 2009, 05:15:38 PM
In your script file (IframescriptII.js) i see the <script> tags.

the script file should contain:

/***********************************************
* IFrame SSI script II- Ã,© Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["myframe"]

//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="yes"

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 100 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: maldave on June 23, 2009, 05:20:26 PM
Quote from: Inny on June 23, 2009, 05:15:38 PM
In your script file (IframescriptII.js) i see the <script> tags.

the script file should contain:

/***********************************************
* IFrame SSI script II- Ã,© Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["myframe"]

//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="yes"

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 100 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller


Ok I updated IframescriptII.js with what you wrote and still have same problem ;(
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: maldave on June 23, 2009, 05:32:32 PM
Hmm,

Ok I tried to reload the page serveral times and it worked 1 in 5 tries when I updated it, but once I updates the page again only the top is shown.
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: Inny on June 23, 2009, 05:40:32 PM
can you post me the code you use in article?

it seems it wont be fully functional with EQDKP Plus
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: maldave on June 23, 2009, 05:48:24 PM
Quote from: Inny on June 23, 2009, 05:40:32 PM
can you post me the code you use in article?

it seems it wont be fully functional with EQDKP Plus

The code that I use in the article is;

<iframe id="myframe" src="/eqdkp/" marginheight="0" vspace="0" hspace="0" scrolling="no" width="100%" frameborder="0">none</iframe>
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: maldave on June 23, 2009, 08:50:58 PM
Quote from: maldave on June 23, 2009, 05:48:24 PM
Quote from: Inny on June 23, 2009, 05:40:32 PM
can you post me the code you use in article?

it seems it wont be fully functional with EQDKP Plus

The code that I use in the article is;

<iframe id="myframe" src="/eqdkp/" marginheight="0" vspace="0" hspace="0" scrolling="no" width="100%" frameborder="0">none</iframe>

Ok I solved it by inputting height="1200" in the code. I mainly wanted this script to adjust the width, since height has no real meaning since you can just scroll down if you are running on a lowres screen.

This is the new code I use now;

<iframe id="myframe" src="/eqdkp/" marginheight="0" vspace="0" hspace="0" scrolling="no" width="100%" frameborder="0" height="1200">none</iframe>

I tried to use height="100%" but that didn't work as I got the same problem as before.
Anyways I'm happy now, the autoconfiguration of the width was the most important part but I would like to have known what was wrong with it from the beginning and not beeing able to use height="100%" ^^
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: IchBin on June 23, 2009, 11:24:45 PM
Why does src=\"eqdkp\" have the escaping "\" character in it?
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: maldave on June 23, 2009, 11:56:45 PM
Quote from: IchBinâ„¢ on June 23, 2009, 11:24:45 PM
Why does src=\"eqdkp\" have the escaping "\" character in it?

Hehe no idea :D it works without them as well;

<iframe id="myframe" src="eqdkp" marginheight="0" vspace="0" hspace="0" scrolling="no" width="100%" frameborder="0" height="1200">none</iframe>

Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: Inny on June 24, 2009, 08:43:58 AM
If you put height in the iframe then you dont need the iframe script.

Your problem with the automatic height lies on EQDKP Plus from what i can see.
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: Nolt on June 24, 2009, 12:28:18 PM
Nice tutorial @Inny, could you post an screenshot how that site looks?
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: maldave on June 24, 2009, 01:46:31 PM
Quote from: Inny on June 24, 2009, 08:43:58 AM
If you put height in the iframe then you don't need the iframe script.

Your problem with the automatic height lies on EQDKP Plus from what i can see.

Actually I do since if I try to use width="100%" in a simple htlm page without the use of the script, it wont expand and autoconfig to the users resolution. I'm forced to use a specific number like width="1600" but then this won't work for people that run under that resolution. So your script did help out in the end ^^

PS. Yes its EQDKP Plus that is the problem but at least we have a temp solution that works now ^^
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: Inny on June 24, 2009, 03:19:26 PM
Quote from: Nolt on June 24, 2009, 12:28:18 PM
Nice tutorial @Inny, could you post an screenshot how that site looks?

You can click on my Signature :p

Script is not automatically fixing width. With iframes you can set the width, but height is the problem with iframes. You cant set 100% height in them, only certain pixels.
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: johanlm on September 30, 2009, 09:41:47 AM
This is great reading, going to move from phpbb myself and need to redo our current WoW forum/portal so this was a real gem to find here.
Title: Re: [How-TO]: World of Warcraft Website Design v1.3
Post by: davidjoshua11 on February 11, 2010, 02:15:48 PM
Well, thank you for guiding information about website design. I can use this information for my study in web design.