Smart Object

Description

Defines an area on the page containing custom HTML/Javascript code, double-click to open the Code Editor.

The code will be embedded in its own div element, you can insert whatever from script to custom content to an iframe to embed external and even interactive code. Here’s an example of code to embed an interactive map on your page, copy/pasted from Google Maps’ Embed a Map code:

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d61580.05570288794!2d7.670089199999998!3d45.07013900000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e1!3m2!1sen!2sit!4v1415803193566" width="100%" height="100%" frameborder="0" style="border:0"></iframe>

Note that the smart object will retain its position on the page as it was defined on stage in PubCoder, to make a contained iframe as big as the smart objects itself, use attributes width="100%" height="100%".

Important: When copy/pasting code from the Internet, you may need to make minor manual adjustments to convert it from HTML to XHTML, otherwise, PubCoder will automatically enable option Use iframe to isolate the non-XHTML code

If you use the smart object to embed a script, remember to wrap the JavaScript in a script tag, there’s a snippet in the Code Editor to do it quickly:

<script type="text/javascript">
//<![CDATA[
$(window).on(PubCoder.Events.PageReady, function() {
  /* Insert your custom JavaScript code here */
});
//]]>
</script>

Properties

Being visible on page like a layout object, the smart object supports most of the Generic Object Properties, plus the ones listed below. To edit properties of a smart object, select it and use the selection inspector at the right of your project window.

Source	The source code for the smart object. Click to edit in the Code Editor
Scrollable	If enabled, the smart object area can be scrolled to reveal content that initially overflows the smart object area
Use iframe	If enabled, the smart object content will be encapsulated in an iframe and isolated from the rest of the page. This can help when using non-XHTML content,

Events

Being visible on page like a layout object, the smart object triggers all Generic Events. To edit event handlers for a smart object, select it and use the Interactivity Panel on the right side of the project window.

Actions

Being visible on page like a layout object, the smart object can be used as target of most Generic Actions