AJAX and Custom Dialogs - Revision history

Dinsley: /* Before you Start */

2010-11-16T23:09:37Z

Before you Start

← Older revision		Revision as of 16:09, 16 November 2010
Line 5:		Line 5:

	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==		==Getting Started==

Dinsley at 23:09, 16 November 2010

2010-11-16T23:09:23Z

← Older revision		Revision as of 16:09, 16 November 2010
Line 2:		Line 2:
	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!		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~~!==~~==		==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~~:==~~==		==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]].		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====
	=====Step 1 - HTML=====

	When ready, first we need to add some HTML code '''to our theme's ''default.html'' file'''.		When ready, first we need to add some HTML code '''to our theme's ''default.html'' file'''.
Line 28:		Line 27:
	</source>		</source>

	=====Step 2 - CSS=====		====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 64:		Line 63:


	=====Step 3 - AJAX=====		====Step 3 - AJAX====

	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:		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 77:		Line 76:


	=====Step 4 - ~~JavaScript=~~====		====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.'''

Dinsley: Text replace - "Web-Builder" to "website builder"

2010-11-15T19:45:52Z

Text replace - "Web-Builder" to "website builder"

← Older revision		Revision as of 12:45, 15 November 2010
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 ~~Web-Builder~~ editor, such as when you [[Component Toolbar \| edit the settings of any component]]. Fortunately, this is easy to do!		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!====		====Before you Start!====
Line 66:		Line 66:
	=====Step 3 - AJAX=====		=====Step 3 - AJAX=====

	The AJAX part is actually quite simple thanks to [[AJAXify your ~~Web-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:		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:

Tkinnear at 18:26, 21 September 2010

2010-09-21T18:26:15Z

← Older revision		Revision as of 11:26, 21 September 2010
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 ~~Viviti~~ editor, such as when you [[Component Toolbar \| edit the settings of any component]]. Fortunately, this is easy to do!		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 Web-Builder editor, such as when you [[Component Toolbar \| edit the settings of any component]]. Fortunately, this is easy to do!

	====Before you Start!====		====Before you Start!====
Line 66:		Line 66:
	=====Step 3 - AJAX=====		=====Step 3 - AJAX=====

	The AJAX part is actually quite simple thanks to [[AJAXify your ~~Viviti~~ 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:		The AJAX part is actually quite simple thanks to [[AJAXify your Web-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:

Mhaugland: /* Step 4 - JavaScript */

2010-02-16T18:30:07Z

Step 4 - JavaScript

← Older revision		Revision as of 11:30, 16 February 2010
Line 159:		Line 159:


	To link to the JavaScript file in your theme, you'll need to add this to the ''<head>'' tag of your theme file:		To link to the JavaScript file in your theme, you'll need to add this to the '''<head>''' tag of your theme file:

Mhaugland: /* Step 4 - JavaScript */

2010-02-16T18:29:36Z

Step 4 - JavaScript

← Older revision		Revision as of 11:29, 16 February 2010
Line 159:		Line 159:


	To link to the JavaScript file in your theme, you'll need to add this:		To link to the JavaScript file in your theme, you'll need to add this to the ''<head>'' tag of your theme file:

Mhaugland: /* Step 4 - JavaScript */

2010-02-16T18:28:34Z

Step 4 - JavaScript

← Older revision		Revision as of 11:28, 16 February 2010
Line 160:		Line 160:

	To link to the JavaScript file in your theme, you'll need to add this:		To link to the JavaScript file in your theme, you'll need to add this:


	<source lang="html4strict">		<source lang="html4strict">

Mhaugland: /* Step 4 - JavaScript */

2010-02-16T18:28:20Z

Step 4 - JavaScript

← Older revision		Revision as of 11:28, 16 February 2010
Line 157:		Line 157:
	}		}
	</source>		</source>


	To link to the JavaScript file in your theme, you'll need to add this:		To link to the JavaScript file in your theme, you'll need to add this:


	<source lang="html4strict">		<source lang="html4strict">

Mhaugland: /* Step 4 - JavaScript */

2010-02-16T18:27:51Z

Step 4 - JavaScript

← Older revision		Revision as of 11:27, 16 February 2010
Line 159:		Line 159:

	To link to the JavaScript file in your theme, you'll need to add this:		To link to the JavaScript file in your theme, you'll need to add this:


	<source lang="html4strict">		<source lang="html4strict">
	<script src="/assets/site.js" type="text/javascript"></script>		<script src="/assets/site.js" type="text/javascript"></script>
	</source>		</source>


	[[Category:Tips and Tricks]]		[[Category:Tips and Tricks]]

Mhaugland at 18:27, 16 February 2010

2010-02-16T18:27:31Z

← Older revision		Revision as of 11:27, 16 February 2010
Line 156:		Line 156:
	});		});
	}		}
			</source>

			To link to the JavaScript file in your theme, you'll need to add this:

			<source lang="html4strict">
			<script src="/assets/site.js" type="text/javascript"></script>
	</source>		</source>

	[[Category:Tips and Tricks]]		[[Category:Tips and Tricks]]