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%". Also note that when copy/pasting code from the Internet, you may need to make minor manual adjustments to convert it from HTML to XHTML.

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

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

Code

The smart object is exported on the page as a div element containing your custom code:

<div id="obj4" class="SCPageObject SCSmartObject">
  <!--Your code here-->
</div>