This method will dynamically load jQuery UI onto the page. This may cause conflicts (unintended behavior) if jQuery UI is loaded or added elsewhere on the page.
The campaign page must not use <header> and <footer> tags anywhere on the page. This function will inject <header> and <footer> tags and all required CSS styling. To avoid CSS clashing, please do not use <header> and <footer> tags.
The <div> containers for the Header and Footer must be direct child elements of the <body> element. Please do not wrap the containers in any layers of outer containers.
The <div> containers for the Header and Footer will push their rendered image to the edge of the browser viewport. Header pushes to the edge of the top, left, and right of the browser viewport. Footer to the bottom, left, and right.
This rendering is a stylistic requirement to mimic the official Macy's Header/Footer. It is highly recommended that the <div> containers for the Header and Footer be the very first and very last element tags, respectively, inside the <body> of the page. Any element tags above or below them risk being rendered on top of the header or footer, or being completely covered and unviewable.
In the html page where the container <div> for the header will sit, add an attribute id="ImpSdkHeaderContainer".
For the footer, repeat step 1 using an attribute id="ImpSdkFooterContainer". The footer must be a different (its own) element tag.
Note: You must use the ids ImpSdkHeaderContainer and ImpSdkFooterContainer for the header and footer, respectively. At this time, there is no customization for the ids.
In the main script file, call the function showHeaderAndFooter() to reveal the header and footer.
| Name | Parameters | Description |
|---|---|---|
| showHeaderAndFooter | optional: callback - function | Shows Macy's header and footer and then executes the callback function if one is passed in. |