Welcome Guest ( Log In | Register )


> IPS Related Information

This section is focused on Invision Power Services products...

IPS, widely praised for the continuous efforts aimed to a stable, fast and efficient board system has brought to us Invision Power Board, but not only that..

Invision Power Gallery & Invision Community Blog allow the forum members :

  1. Host & publish images
  2. Host and link Blogs
  3. Integrate all that to the Invision Power Board

 
Reply to this topicStart new topic
> IPS Tutorials: Developer Articles > Using the javascript popup class
RSS Bot
post 12 May 2009, 09:22 PM
Post #1


yourforum Robot
Group Icon

Group: Private Members
Posts: 196639
Joined: 12-July 05
From: RSS World
Member No.: 125



IP.Board 3 uses DHTML on-screen displays where possible to reduce or eliminate the traditional popup windows of the past in IP.Board. Popups are handled through a central javascript class that you can make use of in your own modifications if you wish.

The popup class supports loading the content into the popup window from an existing element in the HTML source, and through AJAX directly.

The available parameters are as follows

  • type: can be one of 'pane' or 'balloon'. A pane is a box in the middle of the screen, while a balloon will attempt to "stem" from the clicked link (e.g. the user popup you see when clicking the small green arrow next to user names).
  • modal: can be either false or true. If true, the page is overlayed with the popup, preventing the user from clicking anything else on the page until the box is closed.
  • w: initial width of the popup
  • h: initial height of the popup
  • initial: the initial content to show in the popup - in our case, the innerHTML of a specific div
  • hideAtStart: hide the popup after it is created. This can be used to create the popup early on, and then simply shown/hidden as needed.
  • close: the selector to look for to close the popup. It is safe to use 'a[rel="close"]' as in the example, since IP.Board's skin will add a link with rel="close" to the top of the popup.
  • classname: a classname to add to the wrapper of the popup
  • ajaxURL: an AJAX url to call to retrieve the HTML for the popup
  • stem: whether to try to stem from the element clicked to trigger the popup (see description of "type" above)
  • delay: defaults to "{ show: 0, hide: 0 }". Number of microseconds to delay when popup is clicked before showing the popup.


For both types of popups
You will need something that will trigger the popup. In order to make it unobtrusive, we will simply create a link with an id in it. Note that the link points to a full page that should output this same content. This is done so that if a user does not have javascript enabled in their browser, clicking the link will bring them to the same content that would normally have shown inline.

<a href='http://full-link-here.com/index.php?arguments=1' id='showHiddenContent'>See the div!</a>


DHTML popups
To create a popup from HTML code already in the page source you must do two things: define the HTML element and call the javascript popup class with appropriate arguments, namely specifying the 'initial' parameter.

Generally, you will want to create a hidden div with the HTML you wish to display in it. Here is an example:

<div id='hiddenContent' style='display:none;'>
Here is the content that will go into the popup window
</div>


Now, we will want to define the javascript that will handle the link and show the div. You can do this in the HTML source inside script tags, or inside an included javascript file.

if( $('showHiddenContent') )
{
$('showHiddenContent').observe('click', showHiddenContent );
}

showHiddenContent = function(e) {
Event.stop(e);
popup = new ipb.Popup( 'hiddenContentPopup', { type: 'pane', modal: false, w: '500px', h: '500px', initial: $('hiddenContent').innerHTML, hideAtStart: false, close: 'a[rel="close"]' } );
return false;
}


Within the function designed to show the popup, you will notice that we call Event.stop(e) and we return false. This is done to prevent the link from actually bringing the user to the page after the popup is displayed.

AJAX popups
To show a popup while loading the content from an AJAX callback URL, instead of specifying 'initial' and including the HTML content in the page, you specify the ajaxURL instead. When the popup is created, the popup class will call the URL to retrieve the HTML to display instead.

if( $('showHiddenContent') )
{
$('showHiddenContent').observe('click', showHiddenContent );
}

showHiddenContent = function(e) {
Event.stop(e);
popup = new ipb.Popup( 'hiddenContentPopup', { type: 'pane', modal: false, w: '500px', h: '500px', ajaxURL: "http://url-to-call.com", hideAtStart: false, close: 'a[rel="close"]' } );
return false;
}


That's really the only main difference in how the two are used.

Callbacks
I will note quickly that the popup class does support some other functionality you may wish to make use of. Most modification authors will not need these options, but if you do, note that you can pass callback functions to the class to perform extra javascript processing at specific points of the popup creation/updating.

  • afterInit: called after the object is initialized for the first time
  • afterAjax: called after the AJAX request is performed, when using an ajaxURL to retrieve the HTML
  • afterShow: called after the popup is printed to the browser window
  • afterHide: called when the popup is hidden


Conclusion
Most developers won't need to worry about the callbacks, and will find creating popups to be rather straightforward. They add a small but import touch to your application, making it feel that much more integrated with IP.Board as a whole. The more you utilize built in functionality, the smoother the user experience will be when working in your third party application. View the full article
Go to the top of the page
 
Bookmark this: Post to Del.icio.usPost to DiggPost to FacebookPost to GooglePost to SlashdotPost to StumbleUponPost to TechnoratiPost to YahooMyWeb
+Quote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



RSS Lo-Fi Version Time is now: 28th March 2024 - 11:13 AM
Skin and Graphics by Dan Ellis and Anubis. Hosting by Forums & More © 2005-2011.
InvisionGames - Your #1 Arcade Games Repository | AllSigs - Signatures for all | Rock Band + Guitar Hero = RockHero ! | The Remoters - Remote Assistance | FileMiners - You ask, We find