In this guide we collected all the AdServer specific restricions and possibilities of HTML/XHTML creatives, often just refered as HTML5 - although not always really HTML5, to help developers.

This guide contains informations that is important for upload process of the HTML creatives to the AdServer, which is relevant to the person managing the campaign, but if the creatives are done per specification, it can largely ease the management of the campaign.

This documentation is true for banners invoked through Adverticum AdServer tags - called GoAdverticum3, refered as goa3 - and that the tags are embedded along the goa3 documentation into the publisher's site, where the ad should display.

Attention! Creatives converted with Swiffy, or created with Adobe Edge or Google Web Developer, this documentation is recommended: http://dev.adverticum.com/conversion-eng:start

Markup banners are almost like normal HTML banners, but as being XHTML, XML also, it has more restrictions, but provide wider possibilities. From a technical perspective the relevant distinction is that Markup banners are displayed as part of the suite, and not in an iFrame like regular HTML banners do. Markup banners can utilize the site's own CSS, and also provide the option for various custom animation, and transition effects, witout the use of display modules. The AdServer checks the XHTML, XML and HTML5 codes and indicates if there is an error. You can read more infomation about validators here: http://dev.adverticum.com/creatives:validators

Only the body's content needs to be inserted, everything else is generated by the server. The banners that contains head could not be uploaded on AdServer, the things in head need to be solved with script.

It happens often, that a HTML banner's code contains relative reference or references to external files (usually image files or CSS). When creating a HTML banner it is important that in the file belonging to the banner (generally in .css) should not be any other relative references for files (usually image files). Instead these (image) files should be inserted into the HTML code. So the banner should be created this way: every reference should be in the HTML code itself, not in CSS or javascript.

Instead of using a separate .css file, it is recommended to put the necessary parts straight into the HTML code:

<style type=”text/css”> !… </style>

If you would like to upload CSS as a separate file on AdServer by all means, then it should be referred this way: (in that .css file there couldn't be an access path to an image):

<link type=”text/css” href=”[file:file.name]” />

Using an image as e.g. background image is possible this way:

<div style=”background:[file:file.name]”></div>

If you upload separately the script has the file references, then you could not use relative paths because they would be changed by the server after uploading. In this case those parts containing these references should be removed from the script and be inserted into the HTML code between the usual tags:

<script type=”text/javascript”>…</script>

However this should be reconsidered when using because usually when the whole code is inserted the HTML code's size exceeds the 60kB limit, and the AdServer doesn't allow to save a longer code than that. So you should refrain from inserting whole libraries and should limit to the necessary objects and functions.

For campaign managers more detailed documentation on creatives using relative links can be found here:
https://support.adverticum.net/index.php?/Sales/Knowledgebase/Article/View/74/2/relatv-hivatkozst-tartalmaz-html-banner-felvitele

To handle clicks that takes the visitor to the landing page you need an area that could be clicked on. This could be an <a> tag, where the [cthref] string should be inserted to the link's place, and this string will be replaced with the right URL address by the AdServer when the ad is served. That URL address will count one click and then redirect to the landing page set in AdServer.

<a href=”[cthref]” target=”_blank” class=”classname”></a>

Of course this could be solved with javascript, in that case the [cthref] string should also be inserted to the link's place. If encoded links are needed for example to pass as GET parameter, use [cthref.e] expression.

What has to be taken in account in case of Adverticum AdServer internal chaining?

If we are using <a> tags in our code instead of the code beneath:

<a href="[cthref]" target=”_blank”></a>

Use the following form:

<a id="clickTAG" target="_blank" href="[cthref]" onclick="(function(){document.getElementById('clickTAG').href=HttpGetVars.cthref})();"></a>

There is also an option to retrieve out the CT link using javascript the following way. After which the script can utilize while managing clicks.

<script>
    var clickTAG = HttpGetVars.cthref;
</script>

In case cratives with multiple CT links, do not use [cthref].

In the code to the instead of [cthref] this should be [url:xxxxxxx], where the xxxxxxx is replaced with the URL's ID in AdServer. When uploading the banner the campaign manager creates the URLs in the system by clicking on the Add new url button, then by clicking on the wanted URL in the list of URLs the administration interface automatically inserts the [url:xxxxxxx] string into the code where the cursor is. This is why it is recommended to mark in the code to where and which URL should be inserted for the campaign manager.

The banner creator should always follow the information above in case of more links, but it is a different case for the campaign manager, that the clicks on different links is measured altogether or separately. More information is available in the documentation for campaign managers.

The AdServer is able to pass parameters (HTTP GET) dynamicaly to the landing page. To forward these, a special parameter has to be set while calling the AdServer.

The value of [cthref] is always has to be set the admin interface, in the CT URL field.

<form method="get" action="[cthref]" target="_blank"> 
 
    <input type="hidden" name="fwdparams" value="1"> 
    <input type="text" name="parameter1">
    <!-- ... -->
    <input type="submit" value="Mehet">
</form>

The code of markup banners and banners created for mobile devices has to be a valid XHTML code. Since the traditional goa3 code responsible for inserting banners runs on DOM ready, some functions (like document.write) could not be used in the XHTML code of markup banners.

This should be only done on sites, which use the new medthod of invocation, based on document.write, in which case both document.write and initializing on DOMReady event are available.

• All tags always need to be closed, e.g. .: <br />
• Every “&” character should be replaced with “&amp;”, which is not wrapped in CDATA.
• Scripts and styles content has to be wrapped in CDATA, to avoid the detection and replacement of special characters, like: <, >, &.

<script type=”text/javascript”>
//<![CDATA[
    /*...*/
//]]>
</script>

<style type=”text/css”>
!<![CDATA[
    !...
!]]>
</style>

• Also, all image tags must have an alt attribute, even if the value is only an empty string:

<img alt=”” src=”[file:file.name]”></img>

It is necessary to apply that is written here if the traditional Goa3 insertion is used to display ads! But it is not needed to apply if the document.write supporting insertion is used.

The creative should be prepared for that the during the insertion the Goa3 script builds the DOM elements with JavaScript, so for example if loading of the external code is done by inserting a script tag, the script tag will arrive later because the invocation is initiated only after the element's creation. This may cause a problem like a smaller script that initiates for example the animations will be ready sooner than a js library or jQuery for example.

The solution for this problem is using a script that checks periodically the existence of needed elements and the creative will start running only after everything is ready. This code should be put in the end of the banner code.

(function () {
    var started = false,
        timer,
        neededElement = undefined,
 
        adStarter = function() {
 
            if (started) return;
 
            neededElement = window.$;
            if (neededElement) {
 
                banner.init();
 
                started = true;
                clearTimeout(timer);
                return;
            }
 
            timer = setTimeout(adStarter, 100);
        };
 
    adStarter();
})();

We can check the presence of multiple objects:

neededElement = window.$ && $('myDiv')[0];

Different displays are implemented in the goa3 invocation script, as separate javascript classes. These modules which manage displayment are called Displays.

Public displays examples and their parameters can be observed on this location, and different sets of prameters can be tested.

There is the option of developing private custom display modules, the documentation on that is available here:

Several displays need interaction between the module and the creative. Theser are such as (sidekick, multi-expand, slider, etc.). In these cases we have to call the open and close functions.

• In case of HTML banners to ensure that Sidekick and Slider secondary banners are able to close the secondary banner via built in close button, the exact zoneID has to be set, where the primary banner runs. This means that the expression [zone], has to be replaced with the actual ID hardcoded!
• HTML banner do not provide a way to check if the banner should start open - for example once a day, so this has to be managed by the banner.

<div onclick="(function(){window.top.postMessage('[zone].open', '*');})();">X</div>

  $('exampleCloseButton').click(function () {
    window.top.postMessage('[zone].open', '*');
  });

window.top.postMessage('[zone].open', '*');

window.top.postMessage('[zone].close', '*');

window.top.postMessage('[zone].hide', '*');

<div onclick="(function(){goAdverticum3.getZone([zone]).open();})();">X</div>

  $('exampleCloseButton').click(function () {
    goAdverticum3.getZone([zone]).open();
  });

goAdverticum3.getZone([zone]).open();

goAdverticum3.getZone([zone]).close();

goAdverticum3.getZone([zone]).hide();

if (goAdverticum3.getZone([zone]).openNow) {
    /*...*/
}

Attention! The AdServer serves the HTML banner in an iframe, so the instructions here are not applicable for Markup banners. The links given here should be used in iframes in order to be able to measure events in Markup banners.

In HTML banners it could be solved to track some events (like clicks that don't take the visitor to the landing page or the use of tabs) with the help of special tracking URLs. The tracking URLs and the information about which tracking URL should measure which event is sent by the banner creator to the campaign manager. (It is favourable for the campaign manager to upload these in a separate measuring campaign.)

Attention! The uploaded URLs on the admin interface could be referred to the way seen below but those belong to the banner's CT data so they are not good for tracking! For tracking purposes we recommend the direct insertion of tracking links!

By using tracking URLs practically every event could be measured that sends a signal when the event occurs. Most common event is the click event, but mouse over event is also possible to be tracked. The mouse move event is a counter-example, since the mouse's moving sends signals constantly, so the mouse's residence time could not be measured above a field.

Measuring events with javascript:

window.goAdverticum3.onReady(function( goa3 ) {
 
    var $ = goa3jQuery;
 
    $('#button').click(function ( goa3 ) {
        $.get('http://ad.adverticum.net/t/?z=2084028&g=2084026&b=208402400&h=[LOCATION]&p=[PAGEIID]');
    });
});

In the new ststistics system, there is the option to measure other user interactions on top of the usual suspects (impression, clicks). With teh help of these measeures, develpers can implement hese features into the banners.

The supported displays automaticly measure user actions like open, and close.

Attention! The start open request is not measured, only user interactions are.

The collected data is stashed for a while, and the cyclic data sender sends them to our servers. This happens in every 3 sec, if there is data submit, and the window is in focus. This minimizes network traffic, in contrast if we would send every measure data solo.

Different banner types (HTML, etc.) have different methods of utilyzing these measures. For each of these, we provide an example below. To retrieve all the measures available for the banner, we have to use .getZone() function.

The boundries for a measure - eg.: how many times can be called per one ad view - can be limited, for example a measure can be called only five times per ad loadm to minimize overcollection of data, and to ensure information reliablility.

The measures can have minimum and maximum boundries, which are detailed below. It is up to configuration how to handle boundy crossing. For example crossing maximum boundry can result in the drop of the measurement if set, or it can be caped to the maximum value allowed. The same's teh case with minimum boundry, where measurement under teh allowed trashold will be ignored, or rounded up for the minimum value.

If the page or zone is reloaded, the measure boundries are reseted, and the reloaded banner will have different instances of the measure classes.

The simple event measure logs each call.

• Maximum number of fires

Our example we measure the plays of a video ad, for which we use a measure called play.

window.top.postMessage('[zone].measure.play.fire', '*');

The structure of measure play in our example, which is returned after retrieving the zone data.

{
    0000000: {
 
        displayed: {Boolean},
        ...
        node: {Object},
 
        measures: {
            play: {
                fire: function () {...}
            }
        }
    }
}

Our example we measure the plays of a video ad, for which we use a measure called play.

goAdverticum3.getZone([zone]).measure.play.fire();

With the time measurement we can measure the time between a start and a stop event. This works similar to a stopwatch. If a measurement is in progress and the system gets a ’start’ command, it stops and sends the previous measurement and starts a new one. Basically it happens as we would have called the ’stop’ function and then immediately the ’start’.

• Maximum number of fire
• Minimum measurable time
• Maximum measurable time

In the example we measure the time when the banner is opened. We use the ’Time’ measure for this. Start of the time measure:

// We send a message to the top window running Goa3, then indicate 
// the calling measure
window.top.postMessage('[zone].measure.Time.start', '*');

Finish of the time measure:

// We send a message to the top window running Goa3, then indicate 
// the calling measure
window.top.postMessage('[zone].measure.Time.stop', '*');

In our example the structure of the time measure called ’Time’ is available in the following form after requesting the zone data.

{
    0000000: { // The zone ID is the key and the zone has a content.
 
        displayed: {Boolean},
        ...
        node: {Object},
 
        measures: {
            Time: {
                start: function () {...},
                stop: function () {...},
            }
        }
    }
}

In the example we measure the time when the banner is opened. We use the ’Time’ measure for this. Start of the time measure:

// Starting the time measure.
goAdverticum3.getZone([zone]).measure.Time.start();

Finish of the time measure:

// Stopping the time measure.
goAdverticum3.getZone([zone]).measure.Time.stop();

Using the volume measure allows us to send aggregated results to the system. In contrast to the simple measure we can send a number as the parameter of the function which will be transformed into a positiv integer (int) by the system.

• Maximum number of fire
• Minimum measurable time
• Maximum measurable time

In the example we measure the result of a bubble fire game. We use the measure called ’bubbles’ for this.

// We send a message to the top window running Goa3, then indicate
// the firing event and the value in the brackets.
window.top.postMessage('[zone].measure.bubbles.fire(5)', '*');

In our example the structure of the volume measure called ’bubbles’ is available in the following form after requesting the zone data.

{
    0000000: { // The zone ID is the key and the zone has a content.
 
        displayed: {Boolean},
        ...
        node: {Object},
 
        measures: {
            bubbles: {
                fire: function ( value ) {...} 
            }
        }
    }
}

In the example we measure the result of a bubble fire game. We use the measuring called ’bubbles’ for this.

// We simply fire the event.
goAdverticum3.getZone([zone]).measure.bubbles.fire(5);

The applicable events:

• open - When display is opened
• close - When display is closed
• remove - For some display types when the banner is removed (the user makes it disappear)
• viewable -When the zone gets to be in the screen, it counts as viewable ad if at least 50% of the banner can be seen for at least 1 second (independent from if it is covered or not)
• invoke - This event happens at the time of the zone's appearance, basically it is similar to the onGoa3Invocation, but the forwarded data is different.

There are 3 ways to subscribe to the events.

1. The first case if when the Goa3 reference is used as a base, so you will be notified about every forthcoming event. This way you can set to be notified about the viewable event:

window.goAdverticum3.onReady(function( goa3 ) {
 
	goa3.on('viewable', function ( jQueryEvent, goa3Event ) {
		window.console.log(goa3Event);
	});
});

In the parameters first the jQuery Event's object arrives then the data package put together by the Goa3. After running the function above you would see the following object in the console:

{
    type: "viewable",
    zone: {
 
        id: 1785138,
 
        displayName: "embedded",
        displayParams: {...},
 
        displayed: true,
 
        width: 250
        height: 250,
 
        node: jQuery.fn.jQuery.init[1],
 
        on: function(ev, func) {...},
    }
}

2. There is a way to only subscribe to an invidual zone, which makes the creative developer's job easier. With the help of this solution a creative can be made that will only start its animation if the banner is viewable on the screen. This can be used with Markup.

goAdverticum3.getZone([zone]).on('viewable', function ( jQueryEvent, goa3Event ) {
  goa3Event.zone.open();
});

In the table below you can see which events are available for the different display types along with the 'viewable' and 'invoke' events but these two are executed by Goa3 clobally so they are independent from the banner and the display.

The marked cases mean the following:

*: Where there are a close and remove event available the banner can be opened and closed, and there is a base creative that be closed too, and the latter means the remove event, when the user makes the base creative disappear. In other cases close means remove.

The .getZones() function is responsible for querying the zone details. If the zoneID is not defined, the function returnes the whole zone list. In this object zone id’s are the keys, with the zone’s details as their values. If we set the zoneID as number or string, then the given zone will be seen in the returning data, but if we ask for a non existing zone, the response will be null. As Array we could ask for data about more zones where the elements are zoneIDs (in number or string form), and in this case only the requested zones will be seen in the response.

Pay attention! The function .getZones() must be in a separate script tag than the .loadZones() function, because otherwise itt will be evaluated before the response could arrive, hence the system will mark the zones as empty!

var zones = goAdverticum3.getZones();
console.log(zones);

zoneID {Number|String|Array}: Not mandatory.

The zone’s ID(s) to be queried.

The whole list of zones if the zoneID is not defined.

{
    0000000: { // The key is the zoneID, and the zone has content.
 
        displayed: {Boolean}, // It shows if the zone was inserted in any way.
        width: {Number}, // The banner’s width that was given on the admin
                           //interface.
        height: {Number}, // The banner’s height that was given there too.
        node: {Object} // The jQuery object where the invocation was.
                       // If there is a preloaded, but not inserted zone, 
                       // then it points to a parentless div.
    },
    0000001: { // The zone’s ID is the key, but it is empty.
 
        empty: true, // True, if it about an empty zone. If it isn’t empty, then
                     // this attribute will not be here.
        node: {Object} // The jQuery object where the invocation was.
                       // If there is a preloaded, but not inserted zone,
                       // thein it points to a parentless div.
    }
}

Optional data present only in some display types.

{
    openNow: {Boolean}, // Boolean value, that is true if the banner starts 
                        // in open state, otherwise it is not here.
    open: {Function},  // If there is a registered opening function, it could be
                       // called from here.
    close: {Function}, // If there is a registered closing function, it could be 
                      // called from here.
    hide: {Function}, // If there is a registered hiding function, it could be
                      // called from here.
}

If a zoneID was defined, but it is not existing.

null

This function provides an easier calling method for a given zone in favour of creatives and their developers. As it is with the getZones method here we can get back optional data too depending on the displays, like openNow, hide etc.

Pay attention! The function .getZone() must be in a separate script tag than the .loadZones() function, because otherwise itt will be evaluated before the response could arrive, hence the system will mark the zone as empty!

var zone = goAdverticum3.getZone(1234567);
console.log(zone);

zoneID {Number|String}

The zone’s ID to be queried.

Data of the zone we asked for.

{
    id: {Number} // The zone’s ID.
    displayed: {Boolean}, // It shows if the zone was inserted in any way.
    width: {Number}, // The banner’s width that was given on the admin interface.
    height: {Number}, // The banner’s height that was given there too
    node: {Object} // The jQuery object where the invocation was.
}

Since the screen sizes are different from device to device, it is favourable to prepare our banner to this. We recommend the use of @media tag in CSS.

@media screen and (max-width: 479px) {
 
  #[bannerID] {
    width: 320px;
    height: 50px;
  } 
}
 
@media all and (min-width: 480px){
 
  #[bannerID] {
    width: 480px;
    height: 120px;
  } 
}

This would affect that the on those devices or in that state of the screen when the screen is smaller than 480px, there the 320×50 banner will be displayed. On those screens/in that state when the screen is 480 px or its width is more than 480px, there the 480×120 ad would be seen.

The code above is responsible for changing the styles considering the state of the device. Portrait is for the “standing” position, landscape is for the “lying” position. It is important that the features depending on the device's state should be written in these @media tags, because if they are defined outside these, the ones outside would overwrite the ones inside in every case! This code is worth using, if the ad is targeted to the screen size.

@media all and (orientation: portrait) {
 
  #[bannerID] {
    width: 320px;
    height: 50px;
  } 
}
 
@media all and (orientation: landscape){
 
  #[bannerID] {
    width: 480px;
    height: 120px;
  } 
}

The script below is a solving recommendation, if you would like to create a banner that resizes itself, when the devices's state - standing or lying position - is changed and the banner adapts to that by resizing the elements and/or run the given animations.

In this example we prepare our banner to run the animation designed for standing position if the screen's resolution is smaller than 480px (that is a common width when the device is turned - lying position). If the screen is larger than 480 pixels, then we conclude the device's state according to the width and height values of the screen.

The names of bigAnimation() és smallAnimation() functions speak for itself, but it is recommended to change the styles because of the dimensions of elements and to place the creative's elements into the starting position.

var currentOrientation,
    previousOrientation,
    checkOrientation = function () {
 
        if (window.innerWidth < 480) {
            currentOrientation = 'portrait';
        } else if (window.innerWidth > window.innerHeight) {
            currentOrientation = 'landscape';
        } else {
            currentOrientation = 'portrait';
        }
 
        if (previousOrientation === currentOrientation) return;
        else {
 
            if (currentOrientation === 'portrait') smallAnimation();
            else {
                bigAnimation();
            }
        }
        previousOrientation = currentOrientation;
    };
 
window.addEventListener('resize', function () {
    checkOrientation();
}, false);
checkOrientation();

When ads is planned to run on Android and iPhone operating systems the @webkit-keyframes provide tools that are easy to implement and customize for different sizes. It is important, that the @webkit-keyframes works in Safari, Chrome and other webkit-based browsers. Other options are e.g.: @ms-keyframes - for Internet Explorer, @moz-keyframes - for Mozilla Firefox. This way if the webkit is changed in the codes below to the right tag, then our banner would be prepared for other browsers as well. It is important to know, that the different browsers handle animations differently, this is worth looking after then testing the banner in different browsers.

@webkit - keyframes[animtionID] {
 
    0% {
        opacity: 0;
    }
 
    50% {
        opacity: 1;
    }
 
    100% {
        opacity: 0;
    }
}

Values in percents are the animation's percent, and the changed attribute-value pair are inside.

#[bannerID] {
 
    -webkit-animation-name: [animationID];
    -webkit-duration: [mp];
    -webkit-iteration-count: [int, infinite];
}

The listed options are only the tip of the iceberg. Without the purpose of collecting every option, we have listed only the most important tips for animations. Further tips and tricks could be found here: http://css-tricks.com

Since the IEMobile doesn't work together easy with CSS3, the next example could help, if you would like to display some content only on IEMobile. This code could be used in HTML (it is not guaranteed that it works on older versions of devices than Windows Phone 7)

<!--[ifIEMobile]>
 
…IE specific content here…
 
<![endif]-->
 
<!--[if!IEMobile]>
 
...The content that should left out of consideration by IE...
 
<![endif]-->

The guide to upload banners on AdServer is available on these links for the users with AdServer access. They can login on this site with their e-mail address and password used in AdServer.

https://support.adverticum.net/index.php?/Sales/Knowledgebase/Article/View/270/17/how-to-create-html-banner-containing-relative-references

https://support.adverticum.net/index.php?/Sales/Knowledgebase/Article/View/269/17/creating-markup-banner-xhtmlxml

We created a simple example banner and on these links we are demonstarting how they work through AdServer

View it here on your computer

In desktop browser you can view it on this link, how a banner appears on a standing and a lying device's screen

https://support.adverticum.net/examples/html5markup/ip.html

Use this short version of URL or read the QR code to view the operation of the example banner on your device

http://bit.ly/Pjf5Ik

The banner's source code is available on this link:

https://support.adverticum.net/examples/html5markup/source.html

The ad size should be 320×50px on a device with resolution 320×480, or 480×50px in case of landscape view. The window size can change dynamicaly, so we have to expect this and implement necessary features, which is not rocket science with CSS3.

The base creative has two parts. One for opening and one for closing the display. Simple examples below.

Attention, while choosing the class names, we have to consider to avoid possible conflicts with the publisher site. In these examples we use pritty generic names, not recommended for real banners. The two areas are right next to each other - for the display to show the adequate part. So along the above mentioned expamle device dimensions, tha base creative has to be 640×50px, which in landscape would be 960px wide. The left half is always the opener area, the roght half is always the closer.

For HTML5 banners, that contains animation, and is responsive, the following is recommended.

<div class="wrapper">
 
    <div class="banner">
        ... Opener content ... 
    </div>
 
    <div class="banner">
        ... Closeer content ...
    </div>
</div>

For this the CSS below will be along the one beneath. We refer the rigth and left half with .banner:nth-child(odd) and .banner:nth-child(even) pseudo selectors.

.wrapper {
 
    position: absolute;
 
    width: 200%;
    height: 50px;
}
 
.banner {
 
    position: relative;
    overflow: hidden;
    float: left;
 
    width: 50%;
    height: 50px;
}
 
.banner:nth-child(odd) {
    background-color: #f00;
}
 
.banner:nth-child(even) {
    background-color: #0f0;
}

For banners where the open and close area is coverd by an image for example the code below will help. The right picture is shown in the right state (port/land).

<div class="wrapper">
 
    <div class="portrait">
        ... Portrait content ...
    </div>
    <div class="landscape">
        ... Landscape content ...
    </div>
</div>

For the HTML above, this CSS will manage the displayment of the right content.

.banner {
 
    position: relative;
    float: left;
    overflow: hidden;
 
    width: 50%;
    height: 50px;
}
 
.portrait {
 
    width: 320px;
    height: 50px;
}
 
.landscape {
 
    width: 480px;
    height: 50px;
}
 
@media only screen and (orientation: portrait) {
 
    .portrait {
        display: block;
    }
 
    .landscape {
        display: none;
    }
}
 
@media only screen and (orientation: landscape) {
 
    .portrait {
        display: none;
    }
 
    .landscape {
        display: block;
    }
}

This creative will cover the rest of the viewport. With the example from above, the portrait deimensions will be around 320×430px, while the landscape will be 480×290px if the whiole screen is available.

Ezen kód egy halvány piros háttér előtt jeleníti meg a fektetett vagy állított tartalmat. Jelenleg csak egy szöveg van benne, de ez lehet szinte akármilyen bonyolultságú HTML5 vagy akár csak két kép, egy az állított állapothoz, egy pedig a fektetetthez.

<div id="fullPage">
 
    <div class="title port">
        ... Portrait content ...
    </div>
 
    <div class="title land">
        ... Landscape content ...
    </div>
 
</div>

And the accompanying CSS.

#fullPage {
 
    position: absolute;
 
    height: 100%;
    width: 100%;
    background-color: #faa;
}
 
.title {
 
    width: 100px;
    margin: 20px auto;
 
    text-align: center;
    color: #000;
}
 
@media only screen and (orientation: portrait) {
 
    .port {
        display: block;
    }
 
    .land {
        display: none;
    }
}
 
@media only screen and (orientation: landscape) {
 
    .port {
        display: none;
    }
 
    .land {
        display: block;
    }
}