| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Browse and search Google Drive and Gmail attachments (plus Dropbox and Slack files) with a unified tool for working with your cloud files. Try Dokkio (from the makers of PBworks) for free. Now available on the web, Mac, Windows, and as a Chrome extension!

View
 

WilkiMon_WhatsNewWindow

Page history last edited by PBworks 15 years, 2 months ago

Making a What's New Window and Other Wikilet Tricks

 

by WilkieMon

 

This tip uses Super Sekrit Feature II: Wikilets

 

Caution: "This feature is ALPHA, which means that it's not linked to from anywhere and will almost certainly be dramatically changing without warning. It may break periodically, too. You've been warned!"

 

That said, are you ready to rumble?

 


Intro

Suppose you want to maintain a list of major changes to your wiki (or a list of members, or extended text of some sort, or whatever) and display them in a scrolling window on a page, something like this or this. To make this work:

  1. Create a "background" page containing the text to be displayed.
  2. Use one of the following "Wikilet" codes on the main page
      • <iframe src="http://USERNAME.pbwiki.com/YourPage?raw=bare"></iframe>
      • <script src="http://USERNAME.pbwiki.com/YourPage?raw=js"></script>

The "iframe" code gives you more control over the display while the "script" version gives an arguably prettier display.

Background Page

The background page is just another wiki page containing the content you want displayed in the window.

  • If you leave window scrolling enabled, you will be able to view everything you enter in the edit box of this page in rendered form in the target window.
  • If you disable window scrolling, you will see whatever portion of the content fits in the window, beginning at the top.
  • You will not see any of the header or footer content that PBwiki includes in the fully rendered page.

 

If your content is a listing of highlights, I suggest you order the list with most recent / relevant info at the top.

 

The background page for this example is: WilkiMon_WhatsNewBackground

Iframe Technique

Basic

The basic iframe format is given above.

 

The format of the src="http://USERNAME.pbwiki.com/YourPage?raw=bare" string is critical!

  • The 'YourPage' portion of the string is __Case Sensitive__!

  • Any typo in this string will give very strange results!

You can modify how the window is displayed by including additional attributes inside the <> brackets:

  • Control the size of the window by specifying height=”X” and width=”X”
  • Turn off scrolling by specifying scrolling=”no”
  • Turn the frame border off by specifying frameborder=”0”

Here is a full list of attributes you can play around with: http://www.w3.org/TR/html401/present/frames.html#h-16.5

 

The one thing I have not figured out how to control is the background color inside the window. Depending on the skin you use, you may or may not appreciate the default green. (Personally, I do not care for it in conjunction with the Minimalist skin I use on my wiki.)

Addition by vietmusic: It is possible to change the background color through a javascript at the bottom of the source file referenced in the <iframe>. The appropriate code is:

 

<script language="javascript">document.body.style.background="white";</script>

 

Of course, white can be any of the valid CSS colors, or if you prefer, you can use hex numbers as described in Abernaith's tip on changing background colors.

 

This line of code:

 

<iframe src="http://pbwikifanclub.pbwiki.com/WilkiMon_WhatsNewBackground?raw=bare" width="600" Height="80"></iframe>

 

Creates this window:

 

 

Toggle to Page View to see what the window brings accross and what it leaves behind.

 

In a "Second Sidebar"

Vietmusic posted this tip for creating a second sidebar: http://forums.pbwiki.com/viewtopic.php?t=1629

 

This can be used in conjunction with the iframe for a pretty neat result. The following block of code yields the result to the right:

 

<div id="SideBar" style="clear:right; float:right; margin-right:0px; margin-left:10px"> <div class="SideBarTitle">Star Trek</div> < iframe src="http://pbwikifanclub.pbwiki.com/WilkiMon_WhatsNewBackground?raw=bare" width="200" Height="200"> </iframe> </div>

Script Technique

The script technique provides an arguably cleaner look than the iframe technique, but I have not figured out how to control the size or any other element of the window.

 

The format of the src="http://USERNAME.pbwiki.com/YourPage?raw=bare" string is critical!

  • The 'YourPage' portion of the string is __Case Sensitive__!

  • Any typo in this string will give very strange results!

This line of code:

 

<script src="http://pbwikifanclub.pbwiki.com/WilkiMon_WhatsNewBackground?raw=js"></script>

 

Creates this window:

 

Known Glitches

I have found a couple of unexpected things when the iframe technique is used to create the display window. (I have not tested these with the script method yet … check back later for an update.)

  • Any links you place on the background page will be active from the window, but for some reason they do NOT open in new window as expected when you use <a href=”blah” target=”_blank”>blah</a> .
  • You can position to a named anchor ( <a name="name"></a> ) on the background page by appending "#name" at the very end of the scr string (...YourPage?raw=bare#name). However, the calling page positions to the iframe window when it renders, which you may not want if the iframe is at the bottom of the page.

Comments (2)

Anonymous said

at 9:07 am on May 20, 2006

would you mind if i put a header at the top of this?

Anonymous said

at 8:37 pm on May 20, 2006

vietmusic: Be my guest. I also see that you have used the iframe without the green background. You are welcome to edit in how you do that as well.

You don't have permission to comment on this page.