Harrenmedia Floating Ad

This document provides a simple and straightforward description of how to work in the repository (developers), and how the app works. There are some details to bear in mind about the project and what it's expected from the same. If any piece of code that may cause any problem is found, the same should be reported.

If you are encouraged to fix it, please submit a pull request with the changes.

---

Project Repository (Developers Only)

• Clone your fork in order to work over it, if you haven't forked the repository yet, just fork it.
• The main directories are:
  • img: This directory contains the images (.png files) used for this app.
  • js: This directory contains the main plugin (.js file) with its respective file obfuscated (.js file). The maintenance process affects to both files, it means if the main plugin is updated, the obfuscated file must be updated as well due to the same will be used into the app tag. We can use two tools for the obfuscation process: Closure Compiler and Javascript Obfuscator.
• The tests directory contains a simple html file, it was created just for testing purposes. A new file can be added here or the same file can be updated in order to run some tests.
• Push your commits and create a pull request, after the merge, a new tag must be created in case of being necessary.
• This plugin is hosted in Amazon S3 and the container bucket is ad.static1.harrenmedia.com. Inside the libs directory, the subdirectory called floating preserves a similar structure to the project, the difference is there isn't a js directory, that's because instead, there's a directory related to the last project's version/tag, where the obfuscated file is located.
• Once the new directory was created and the new obfuscated file was uploaded, that directory must be published in order to reproduce the app everytime is invoked, it's very important to realize this last step because the proper working of the app depends on it, otherwise the app won't be loaded in the site where it was integrated.

Installation

Add these javascript tags <script type="text/javascript"></script> before closing the body tag </body> into your html file.

<script type="text/javascript" src="http://ad.static1.harrenmedia.com/libs/floating/1.1.3/floating-ad.min.js"></script>
<script type="text/javascript">
    withJquery(function () {
        $(function () {
            $("body").floatingAd({
                tag: '<IFRAME SRC="http://ads.networkhm.com/tt?id=2252058&cb=[CACHEBUSTER]&referrer=[REFERRER_URL]" FRAMEBORDER="0" SCROLLING="no" MARGINHEIGHT="0" MARGINWIDTH="0" TOPMARGIN="0" LEFTMARGIN="0" ALLOWTRANSPARENCY="true" WIDTH="300" HEIGHT="250"></IFRAME>',
                tagWidth: 320,
                tagHeight: 270,
                lockCenter: false,
                lockBottom: true,
                speed: 600,
                left: 800,
                smallBtn: true
            });
        });
    });
</script>

Note:

The previous example shows the app using an iframe tag, bear in mind that script tags require two parameters.

If you want to add more functionalities for the floating ad, just take a look at the parameters detailed below.

Settings

Parameter Name	Value Type	Description
tag	undefined	This parameter gets the ad tag to be displayed. The value must be the whole iframe tag.
tagWidth	undefined	This parameter gets the width size that will be set to the ad tag wrapper.
tagHeight	undefined	This parameter gets the height size that will be set to the ad tag wrapper.
tagType	undefined	The accepted values for this parameter are: "script", "javascript", "SCRIPT" and "JAVASCRIPT". This parameter gets the type of the ad tag, it's used just for javascript tags, otherwise this value must not be include in the app settings.
tagUrl	undefined	This parameter gets the URL for the source attribute in the ad tag, it's used just for javascript tags, otherwise this value must not be include in the app settings.
lockTop	true / false	This value sets a top alignment into the window for the floating ad. Its value by default is set to false.
lockCenter	true / false	This value sets a center alignment into the window for the floating ad. Its value by default is set to false.
lockBottom	true / false	This value sets a bottom alignment into the window for the floating ad. Its value by default is set to true.
speed	undefined	Set a value according to how much speed you want the ad runs.
left	undefined	Position in the window, set your custom value according to your needs.
right	undefined	Position in the window, set your custom value according to your needs.
smallBtn	true / false	This parameter can be combined with the other buttons. Its value by default is set to false.
bigBtn	true / false	This parameter can be combined with the other buttons. Its value by default is set to false.
auxBtnRight	true / false	This parameter can be combined with the other buttons. Its value by default is set to false.
btnText	undefined	This parameter takes a string value, so you can type what you want the button shows.
auxBtnTxt	true / false	This parameter can be combined with the other buttons. Its value by default is set to false.

Combination Examples

These are some combination examples that you can use to customize the floating ad in your page. Of course! Don't forget to add the tag parameter with its respective sizes.

HTML script tags

Left positioned with a big button.

withJquery(function () {
    $(function () {
        $("body").floatingAd({
            tagType: "script",
            tagUrl: "http://ads.networkhm.com/ttj?id=3210012",
            tagWidth: 320,
            tagHeight: 270,
            duration: 600,
            bigBtn: true
        });
    });
});

Centred with a small button.

withJquery(function () {
    $(function () {
        $("body").floatingAd({
            tagType: "javascript",
            tagUrl: "http://ads.networkhm.com/ttj?id=3210012",
            tagWidth: 320,
            tagHeight: 270,
            duration: 600,
            left: 550,
            smallBtn: true
        });
    });
});

Right positioned with a big button.

withJquery(function () {
    $(function () {
        $("body").floatingAd({
            tagType: "SCRIPT",
            tagUrl: "http://ads.networkhm.com/ttj?id=3210012",
            tagWidth: 320,
            tagHeight: 270,
            duration: 600,
            right: 10,
            bigBtn: true
        });
    });
});

Top-Left positioned with a big button.

withJquery(function () {
    $(function () {
        $("body").floatingAd({
            tagType: "JAVASCRIPT",
            tagUrl: "http://ads.networkhm.com/ttj?id=3210012",
            tagWidth: 320,
            tagHeight: 270,
            duration: 600,
            lockTop: true,
            bigBtn: true
        });
    });
});

---

HTML iframe tags

Left positioned with a big button.

withJquery(function () {
    $(function () {
        $("body").floatingAd({
            tag: '<iframe src="..." ...></iframe>',
            tagWidth: 320,
            tagHeight: 270,
            duration: 600,
            bigBtn: true
        });
    });
});

Centred with a small button.

withJquery(function () {
    $(function () {
        $("body").floatingAd({
            tag: '<iframe src="..." ...></iframe>',
            tagWidth: 320,
            tagHeight: 270,
            duration: 600,
            left: 550,
            smallBtn: true
        });
    });
});

Right positioned with a big button.

withJquery(function () {
    $(function () {
        $("body").floatingAd({
            tag: '<iframe src="..." ...></iframe>',
            tagWidth: 320,
            tagHeight: 270,
            duration: 600,
            right: 10,
            bigBtn: true
        });
    });
});

Top-Left positioned with a big button.

withJquery(function () {
    $(function () {
        $("body").floatingAd({
            tag: '<iframe src="..." ...></iframe>',
            tagWidth: 320,
            tagHeight: 270,
            duration: 600,
            lockTop: true,
            bigBtn: true
        });
    });
});

Centred with one small and one auxiliar button.

withJquery(function () {
    $(function () {
        $("body").floatingAd({
            tag: '<iframe src="..." ...></iframe>',
            tagWidth: 320,
            tagHeight: 270,
            duration: 600,
            left: 570,
            smallBtn: true,
            auxBtnRight: true
        });
    });
});

You're done!