Jump to content
GreenSock

ziraga

Weborama HPTO Templates

By ziraga, in Banner Animation. Views: 2,608

Recommended Posts

Posted

Where is the problem? Download templates https://adrime.box.com/shared/static/xfevis0ckftkw43gkiuk6sl7i4hdm5hh.zip

 

I suggest changing two lines in template (adding https:) for better preview

        

       from

        <script type="text/javascript" src="//media.adrcdn.com/scripts/screenad_interface_1.0.3_scrambled.js"></script>
        <script src="//media.adrcdn.com/scripts/jquery.min.js"></script>

       to

        <script type="text/javascript" src="https://media.adrcdn.com/scripts/screenad_interface_1.0.3_scrambled.js"></script>
        <script src="https://media.adrcdn.com/scripts/jquery.min.js"></script>

Link to comment
Share on other sites
Posted 
<!DOCTYPE html>
<html>
	<head>
		<!-- WEBORAMA SCREENAD META DATA (don't edit/remove) -->
		<!-- SCRVERSION: screenad_interface_1.0.3 -->
		<!-- SCRFORMAT: layer -->
		<!-- SCRWIDTH: 300 -->
		<!-- SCRHEIGHT: 600 -->
		<!-- TEMPLATENAME: Persgroep Parool VK HPTO -->
		<!-- TEMPLATEDATE: 2016-11-03 -->

		<script type="text/javascript" src="https://media.adrcdn.com/scripts/screenad_interface_1.0.3_scrambled.js"></script>
		<script src="https://media.adrcdn.com/scripts/jquery.min.js"></script>
		<script src="https://media.adrcdn.com/scripts/external/tweenlite/1.19.0/TweenMax.min.js"></script>
		<script type="text/javascript">
	    // <--		Do not edit this.				--> //
	    var element = 'halfpage';
	  </script>
	  <script type="text/javascript" src="template.js"></script>
		<script type="text/javascript">
			// <--		Edit the functions below.		--> //

			// This function is called when this element is done loading.
			function onReady() {
				// Do things.
			}
			// This function is called when all elements are ready.
			function onSync() {
				// Start your synced content.
			}

		</script>
		<style type="text/css">
			body {
				margin: 0px;
				padding: 0px;
				overflow: hidden;
			}
			.full {
				width: 300px;
				height: 600px;
				position: absolute;
				left: 0px;
				top: 0px;
			}
		</style>
	</head>
	<body>
		<div id="content" class="full">
			<div id="background" class="full" style="background: #EBEBEB;"></div>
		</div>
		<div id="weborama_click" class="full" style="cursor: pointer;" onclick="screenad.click();"></div>
	</body>
</html>

 

Link to comment
Share on other sites
  • Author
Posted

Thanks, 

 

There are two problems

1. is the right and left skins and the way it previews the scaleable content div.

2. the Header HTML has 2 states which I have no idea how to preview with their respected sizes.

 

I'm assuming I have to put it on their environment to preview everything but I have not used their services before so I don't know what the process is.

 

See the Pen OgNQMr by Felipe (@Felipe) on CodePen

 

See the Pen eRZVZz by Felipe (@Felipe) on CodePen

 

Link to comment
Share on other sites
  • 3 months later...
Posted

A bit late, but I'm currently also working on a HPTO for Weborama.

Code the parts locally and upload them to preview.

You can only preview the full working HPTO in their environment. 

 

Link to comment
Share on other sites
  • 2 months later...
Posted

I also work on a lot of HPTO and APTO for Weborama. I'm doing the same thing - coding locally, upload  to Weborama to preview. Is there some kind of a tool that we can use to test locally? Just to speed up the process of building.

Link to comment
Share on other sites
  • 7 months later...
Posted

Name this index.php and place it in the same folder as skin-right.html etc.

  

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Overview</title>

    <style>
        body{
            margin: 0;
            padding: 0;
            background-color: #333;
        }

        .banner{
            font-family: arial, sans-serif;
            background: #ccc;
            float: left;
            margin: 0;
        }

        .banner iframe{
            margin: 0;
            float: left;
        }

        .banner h2{
            font-size:12px;
            margin: 0;
            padding:10px;
            background-color: #000;
            color: #fff;
            line-height: 1;
            overflow: hidden;
            clear: both;
            display: block;
        }

        .banner a{
            text-decoration: none;
            color: #fff;
        }

    </style>
</head>
<body>
    <div class="banner">
        <iframe src="skin-left.html" width="640" height="1500" frameborder="0"></iframe>
        <h2><a target="_blank" href="skin-left.html">Skin left</a></h2>
    </div>
    <div class="banner" style="margin-top: 131px">
        <iframe src="leaderboard.html" width="728" height="90" frameborder="0"></iframe>
        <h2><a target="_blank" href="leaderboard.html">Leaderboard</a></h2>
    </div>
    <div class="banner">
        <iframe src="skin-right.html" width="640" height="1500" frameborder="0"></iframe>
        <h2><a target="_blank" href="skin-right.html">Skin right</a></h2>
    </div>

</body>
</html>

 

Set up a server with your terminal: php -S 0.0.0.0:8000
And open your browser and go to: http://localhost:8000/index.php

  • Like 1
Link to comment
Share on other sites
  • 2 weeks later...
Posted

Thanks @Honingh,

 

I did try your solution but the skinRight.html doesn't look aligned. Is there something I missed? Attached is a screenshot of how it looks on my localhost.

 

Hopefully you can help me figure this out.

 

Thanks!

Mark

Screenshot 2018-07-26 00.12.01.png

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account