AJAX and Custom Dialogs: Difference between revisions
mNo edit summary |
|||
| (11 intermediate revisions by 4 users not shown) | |||
| Line 1: | Line 1: | ||
__NOTOC__ | __NOTOC__ | ||
Here we will go through the steps to create custom lightbox popups for your site. A lightbox is like a traditional popup box, but it doesn't appear in a separate frame or window. These are used throughout the | Here we will go through the steps to create custom lightbox popups for your site. A lightbox is like a traditional popup box, but it doesn't appear in a separate frame or window. These are used throughout the website builder editor, such as when you [[Component Toolbar | edit the settings of any component]]. Fortunately, this is easy to do! | ||
==Before you Start== | |||
We recommend you [[Uploading/Downloading a Theme | save a backup of your theme]] before starting in case you don't like the changes made. Alternately, you can remove the code added, but saving a backup provides extra security and is a good practice in general. It is also likely a quicker way to revert to a previous state. | We recommend you [[Uploading/Downloading a Theme | save a backup of your theme]] before starting in case you don't like the changes made. Alternately, you can remove the code added, but saving a backup provides extra security and is a good practice in general. It is also likely a quicker way to revert to a previous state. | ||
==Getting Started== | |||
This will require the addition of small amounts of 4 different code types to various sections within the theme's source code - HTML, CSS, AJAX, and JavasScript. We recommend you save a backup of your theme, make a copy of the backup, then make these changes to it. When complete, you will want to [[Uploading/Downloading a Theme | upload the modified theme]]. | |||
====Step 1 - HTML==== | |||
When ready, first we need to add some HTML code '''to our theme's ''default.html'' file'''. | |||
You will want to add this to the '''<body>''' tag area specifically: | |||
You will want to add this to the '''< | |||
<source lang="html4strict"> | <source lang="html4strict"> | ||
| Line 28: | Line 26: | ||
</source> | </source> | ||
====Step 2 - CSS==== | |||
This CSS code is how we hide the dialog from being seen at all times, and how we style it to look nice. For the most part, you can leave this how it is, but you'll probably want to modify the colours to match your site. '''This code will need to be added to your theme's ''style.css'' file.''' | This CSS code is how we hide the dialog from being seen at all times, and how we style it to look nice. For the most part, you can leave this how it is, but you'll probably want to modify the colours to match your site. '''This code will need to be added to your theme's ''style.css'' file.''' | ||
| Line 65: | Line 62: | ||
====Step 3 - AJAX==== | |||
The AJAX part is actually quite simple thanks to [[AJAXify your | The AJAX part is actually quite simple thanks to [[AJAXify your website builder Site | this article]]. We use [http://jquery.com/ jQuery] to load a page, then grab the content we want using a selector. We are using '''$j''' instead of '''$''' because the jQuery we provide is in a no-conflict mode. '''This code will need to be added to a Javascript file that is not currently part of your theme, but one that you will need to create and add to your list of theme files - for example, a created file named ''site.js'' added to your theme's /assets/ folder.''' The code you will need to add is: | ||
| Line 78: | Line 75: | ||
====Step 4 - JavaScrip==== | |||
The last step is to add this JavaScript code. All of it will need to be added, however we have broken it into segments here to explain what each part does. '''This code will need to be added to a Javascript file that is not currently part of your theme, but one that you will need to create and add to your list of theme files - for example, a created file named ''site.js'' added to your theme's /assets/ folder.''' | The last step is to add this JavaScript code. All of it will need to be added, however we have broken it into segments here to explain what each part does. '''This code will need to be added to a Javascript file that is not currently part of your theme, but one that you will need to create and add to your list of theme files - for example, a created file named ''site.js'' added to your theme's /assets/ folder.''' | ||
| Line 158: | Line 155: | ||
} | } | ||
</source> | </source> | ||
To link to the JavaScript file in your theme, you'll need to add this to the '''<head>''' tag of your theme file: | |||
<source lang="html4strict"> | |||
<script src="/assets/site.js" type="text/javascript"></script> | |||
</source> | |||
[[Category:Tips and Tricks]] | [[Category:Tips and Tricks]] | ||
Latest revision as of 15:09, 16 November 2010
Here we will go through the steps to create custom lightbox popups for your site. A lightbox is like a traditional popup box, but it doesn't appear in a separate frame or window. These are used throughout the website builder editor, such as when you edit the settings of any component. Fortunately, this is easy to do!
Before you Start
We recommend you save a backup of your theme before starting in case you don't like the changes made. Alternately, you can remove the code added, but saving a backup provides extra security and is a good practice in general. It is also likely a quicker way to revert to a previous state.
Getting Started
This will require the addition of small amounts of 4 different code types to various sections within the theme's source code - HTML, CSS, AJAX, and JavasScript. We recommend you save a backup of your theme, make a copy of the backup, then make these changes to it. When complete, you will want to upload the modified theme.
Step 1 - HTML
When ready, first we need to add some HTML code to our theme's default.html file.
You will want to add this to the <body> tag area specifically:
<div class="window" id="content-dialog">
<div id="dialog-content"></div>
<div id="dialog-controls">
<a href="/#" class="close">Close</a>
</div>
</div>
<div id="mask"></div>
Step 2 - CSS
This CSS code is how we hide the dialog from being seen at all times, and how we style it to look nice. For the most part, you can leave this how it is, but you'll probably want to modify the colours to match your site. This code will need to be added to your theme's style.css file.
#mask {
position: absolute;
z-index: 9000;
background-color: #000;
display: none;
}
#content-dialog {
position: absolute;
width: 550px;
height: 500px;
z-index: 9999;
padding: 10px 13px;
display: none;
background-color: #23201B;
font-size: 90%;
}
#content-dialog a {
color: #FE8D2F;
}
#content-dialog #dialog-controls {
text-align: right;
padding: 10px;
}
#dialog-content {
overflow: auto;
height: 455px;
}
Step 3 - AJAX
The AJAX part is actually quite simple thanks to this article. We use jQuery to load a page, then grab the content we want using a selector. We are using $j instead of $ because the jQuery we provide is in a no-conflict mode. This code will need to be added to a Javascript file that is not currently part of your theme, but one that you will need to create and add to your list of theme files - for example, a created file named site.js added to your theme's /assets/ folder. The code you will need to add is:
// Load a new page and place it in the dialog
function loadPage( page ) {
$j('#dialog-content').load( page + ' #location_0 > *', function() { $j('#location_0');});
}
Step 4 - JavaScrip
The last step is to add this JavaScript code. All of it will need to be added, however we have broken it into segments here to explain what each part does. This code will need to be added to a Javascript file that is not currently part of your theme, but one that you will need to create and add to your list of theme files - for example, a created file named site.js added to your theme's /assets/ folder.
This first piece of code is going to execute once the page has finished loading. It'll call the other two functions to setup the links and dialog so everything will work:
$j( document ).ready( function() {
setupLinks();
setupDialog();
});
This next bit of code will only need one small change, and that's the selector. In this example, we created a custom code block which was just a list of links to the pages we wanted to load. You'll need to do the same. The reason we use this example is so that if JavaScript is disabled, the visitor can still get to those other pages. For the most part, all this code does is find out where to position the dialog and show it. You can also tweak the fade-in and fade-out times if you'd like:
function setupLinks() {
$j('#linkHolder ul li a').click( function(e) {
// prevent default link action
e.preventDefault();
// Hide the scrollbars
$j('body').css('overflow', 'hidden');
// clear the dialog content
$j('#dialog-content').empty();
// start loading the new content
loadPage( $j(this).attr('href') );
// open the new dialog
var id = '#content-dialog';
//Get the screen height and width
var maskHeight = $j(document).height();
var maskWidth = $j(window).width();
//Set height and width to mask to fill up the whole screen
$j('#mask').css({'width':maskWidth,'height':maskHeight,'top':0,'left':0});
//transition effect
$j('#mask').fadeIn(300);
$j('#mask').fadeTo("fast",0.8);
//Get the window height and width
var winH = $j(window).height();
var winW = $j(window).width();
//Set the popup window to center
$j(id).css('top', parseInt((winH/2-$j(id).height()/2) + $j(document).scrollTop()));
$j(id).css('left', winW/2-$j(id).width()/2);
//transition effect
$j(id).fadeIn(500);
});
}
This last bit of code just tells the dialog to close itself. It registers listeners on the close button and the semi-transparent mask to see when they're clicked. As soon as they're clicked, it hides both the mask and the dialog.
function setupDialog() {
//if close button is clicked
$j('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$j('#mask, .window').hide();
$j('body').css('overflow', 'auto');
});
//if mask is clicked
$j('#mask').click(function () {
$j(this).hide();
$j('.window').hide();
$j('body').css('overflow', 'auto');
});
}
To link to the JavaScript file in your theme, you'll need to add this to the <head> tag of your theme file:
<script src="/assets/site.js" type="text/javascript"></script>