[Resolved] Is it possible to create a floating hook?

Home Forums Support [Resolved] Is it possible to create a floating hook?

Home Forums Support Is it possible to create a floating hook?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1544924
    Andy

    Hi there,

    Is it possible to create a floating hook for mobile and desktop banner Ads?

    Ideally, as the user scrolls down a page, a little banner Ad can sit at the bottom of the screen.

    Similar to this:

    View post on imgur.com

    Thank you

    #1544995
    Elvin
    Staff
    Customer Support

    Hi,

    There are multiple ways of doing this.

    One way is, if you have the markup, style(position:fixed) and script(position toggle, if needed), you can place them in a Hook Element that is hooked to either generate_after_content or generate_before_footer.

    One other way is, to make a Block Element. Add in a GenerateBlocks Container Block with a custom CSS selector styled to have “position:fixed” and place a custom html block with your ads markup on it. You then hook this Block Element to either generate_after_content or generate_before_footer.

    Lastly is, to install an ad plugin that does this for you. I’m not exactly sure what’s the best one for this though.

    A wise man once said:
    "Have you cleared your cache?"

    #1545099
    Andy

    Hi Elvin,

    The first method sounds the easiest. Please see the code below. How do I mark this up to get it style(position:fixed)? Or am I misunderstanding your instruction?

    <div id="xxxxx">
        <script type="text/javascript">
            try {
                window._mNHandle.queue.push(function (){
                    window._mNDetails.loadTag("xxxxx", "728x90", "xxxxx");
                });
            }
            catch (error) {}
        </script>
    </div>

    Thank you!

    #1545189
    Elvin
    Staff
    Customer Support

    You can add this style markup on your Hook Element.

    <style>
    #yourDivID{
    position: fixed;
    bottom: 0;
    left: 50%; 
    transform: translateX(-50%);
    }
    </style>

    A wise man once said:
    "Have you cleared your cache?"

    #1545309
    Andy

    Hi Elvin,

    I tried this out unsuccessfully. Just clarifying:

    1. I added this code to generate_before_footer with hooks:

    <div id="xxxxx">
        <script type="text/javascript">
            try {
                window._mNHandle.queue.push(function (){
                    window._mNDetails.loadTag("xxxxx", "728x90", "xxxxx");
                });
            }
            catch (error) {}
        </script>
    </div>

    2. Now, where do I add this style Markup specifically? I tried several places unsuccessfully. Maybe I’m adding it at the wrong place:

    <style>
    #xxxxx{
    position: fixed;
    bottom: 0;
    left: 50%; 
    transform: translateX(-50%);
    }
    </style>

    Thank you

    #1545320
    Elvin
    Staff
    Customer Support

    Can you link us to the site/page you’re working on? So we could have an idea of what might be causing it not to work.

    Does the script work when you place it somewhere else? Can you verify if its actually working?

    A wise man once said:
    "Have you cleared your cache?"

    #1545335
    Andy

    Sure thing! Please see private info.

    Please scroll to the bottom of Empower, and you will see the Ad loading (before the footer). I want to pop it off and load it as a floating banner in desktop and mobile view.

    By the way, I linked you nickiswift again. Once that page loads, you should see a floating Ad banner as well on the bottom of the screen. That’s a live example.

    #1545341
    Elvin
    Staff
    Customer Support

    Thanks.

    The ad seems to be using “911311315” as its id. But the problem is I’m not exactly sure if that’s dynamic.

    If it isn’t dynamic, try this CSS:

    <style>;
    #911311315{
    position: fixed;
    bottom: 0;
    left: 50%; 
    transform: translateX(-50%);
    }
    </style>

    But if in case it is actually dynamic, meaning the id changes, just add the position:fixed; and other things as an inline style.

    Example:

    <div id="xxxxx" style="position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);">
        <script type="text/javascript">
            try {
                window._mNHandle.queue.push(function (){
                    window._mNDetails.loadTag("xxxxx", "728x90", "xxxxx");
                });
            }
            catch (error) {}
        </script>
    </div>

    A wise man once said:
    "Have you cleared your cache?"

    #1545375
    Andy

    Awesome, thanks Elvin!

    #1545385
    Elvin
    Staff
    Customer Support

    Awesome, thanks Elvin!

    No problem. 🙂

    A wise man once said:
    "Have you cleared your cache?"

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.