Anything Popup Positioning

  • I have added the Anything Popup pluging, and configured a tour booking contact form using Contact Form 7. It seems to load correctly on a test post I was working with, but as soon as I added it to the tour posts I needed it to work on, when you click the “book now” button the form is out of sight, or doesn’t load at all if you have scrolled part way down the page.

    By using inspect element, I was able to make the following changes that positions it correctly: 

    element.style {
display: block;
top: 10%;
left: 37%;
}

    However, when I move into my style.css sheet and do the following, the changes aren’t there upon reloading the page. 

    #AnythingPopup_BoxContainer1 element.style {

display: block;
top: 10% !important;
left: 37% !important;

}

    Any idea what I’m doing wrong? Thanks!

    Example of booking page: https://www.planitnz.com/3-day-bay-of-islands-adventure-tour/

Viewing 13 replies - 1 through 13 (of 13 total)

  • Clear WP Total Cache and also then clear your browser cache. I would turn W3 Total Cache off during site design/maintenance/updates.

    Thread Starter nzguyyy

    (@nzguyyy)

    Thanks. I’ve just tried that with no luck.

    This code doesn’t display when I inspect element for some reason:

    #AnythingPopup_BoxContainer1 element.style {

    display: block;
    top: 10% !important;
    left: 37% !important;

    }

    It looks fine to me – what browser/version are you testing with?

    Oh wait…

    #AnythingPopup_BoxContainer1 element.style {

display: block;
top: 10% !important;
left: 37% !important;

}

    is incorrect and is surely not working (but can cause issues) remove that and again it works ok here.

    element.style is the css inline in HTML.

    Thread Starter nzguyyy

    (@nzguyyy)

    Have tried on safari, firefox and Chrome. Here is a screenshot of what happens on Firefox:

    View post on imgur.com

    Thread Starter nzguyyy

    (@nzguyyy)

    Have removed that code below, but still not showing correctly. https://i.imgur.com/bftLi13.jpg

    #AnythingPopup_BoxContainer1 element.style {

display: block;
top: 10% !important;
left: 37% !important;

}

    Since I am not seeing this issue, I cannot add anything more. That said, that is not really the best css as screen vary in width and height and the pop is a fixed width.

    <div style="display: block; top: 99.5px; left: 390px;" id="AnythingPopup_BoxContainer1">

    The left: will make it uncenter on varying screens:

    used left:50% and then half the fixed width in -margin

    Oh, and since it floats in the viewport set the position to absolute.

    Thread Starter nzguyyy

    (@nzguyyy)

    So are you suggesting I should use the following?

    #AnythingPopup_BoxContainer1 element.style {

    display: block;
    top: 99.5px;
    left: 50%;

    }

    Use this:

    #AnythingPopup_BoxContainer1 {
display: block !important;
top: 10% !important;
left: 50% !important;
margin-left: -250px !important;
position: fixed !important;
}
    <a href='javascript:AnythingPopup_OpenForm("AnythingPopup_BoxContainer1","AnythingPopup_BoxContainerBody1","AnythingPopup_BoxContainerFooter1","500","700");'><img src="https://www.planitnz.com/wp-content/uploads/2014/01/Book-Now1.png" class="mk" align="right"></a>

    Use that once.

    BTW, loading js this way is not a best method.

    The second item appears to be the issue, remove it then review all these errors:

    Invalid App Id: Must be a number or numeric string representing the application id. all.js:56
The "fb-root" div has not been created, auto-creating all.js:56
FB.getLoginStatus() called before calling FB.init(). all.js:56
body.scrollLeft is deprecated in strict mode. Please use 'documentElement.scrollLeft' if in strict mode and 'body.scrollLeft' only if in quirks mode.
body.scrollTop is deprecated in strict mode. Please use 'documentElement.scrollTop' if in strict mode and 'body.scrollTop' only if in quirks mode.
Consider using 'dppx' units instead of 'dpi', as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) tweet_button.1389999802.html:1
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.stumbleupon.com') does not match the recipient window's origin ('https://www.planitnz.com').
    Thread Starter nzguyyy

    (@nzguyyy)

    Thanks again. Have tried and now the button doesn’t respond.

    Tried what? please be distinct.

    Thread Starter nzguyyy

    (@nzguyyy)

    Sorry. I added this: 

    #AnythingPopup_BoxContainer1 {
display: block !important;
top: 10% !important;
left: 50% !important;
margin-left: -250px !important;
position: fixed !important;
}

    and then replaced the shortcode on the post in question with this:

    <a href='javascript:AnythingPopup_OpenForm("AnythingPopup_BoxContainer1","AnythingPopup_BoxContainerBody1","AnythingPopup_BoxContainerFooter1","500","700");'><img src="https://www.planitnz.com/wp-content/uploads/2014/01/Book-Now1.png" class="mk" align="right"></a>

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Anything Popup Positioning’ is closed to new replies.