IPS Tutorials: Developer Articles > Using the javascript popup class |
|
|||||||||
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 :
IPS Tutorials: Developer Articles > Using the javascript popup class |
12 May 2009, 09:22 PM
Post
#1
|
|
yourforum Robot 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
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.
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 |
|
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. |