perpetual.design

I had some CSS issues from overriding styles of the WordPress theme (because more specific CSS overrides less specific) and issues of the popup-order, which I am fixed with Z-index.

I have a few other issues, CSS related, but my matter is basically resolved.

The solution for me was:

• properly enqueueing my scripts in the right place
• calling the proper dependencies on enqueueing
• being aware of jquery’s No Conflict Mode
• using a custom function to load static html where I want it
• being aware of CSS properties and hiearchy

Thanks for everyone involved in this thread for the help!

Okay, I put it in a proper directory and it loads in the footer!

I had an error related to the no conflict mode you mentioned earlier with jquery but I fixed that by changing

jQuery(document).ready(function(){

jQuery(document).ready(function($){

So a piece of the code

$.get(_action, json,

would work in the local scope.

So all code works and loads, however the second popup elements come up funny and slightly misplaced while the first pop up is fine. All JS elements work, including closing the popup and the .PHP based submission and the first blank overlay, but the second set of elements display wonkily.

Why do you suppose that is?

And again, thanks for all your help. I learned quite a lot.

Hmm. I added

`
function perpetual_design_render_popup_html() {
include (ABSPATH . “form.html”);
}

add_action( ‘wp_footer’, ‘perpetual_design_popup_html’);
‘

But it doesn’t seem to load at all. The static html is in a file called form.html in the root of where wordpress is installed; for example with wp-config.php and such.

<form id="ccsfg" name="ccsfg" method="post" action="/ctct/signup/index.php">

<h4>Registration Form</h4><p style="display:none">Fill out below:</p>
<div style="margin-left: 100px;"><img src="http:\\www.lakenormansocialclub.com/ctct/Logo.png" style="width: 60%;"></div>
<div id="CCFrame">
<table width="100%" cellspacing="0" cellpadding="5" border="0">
<tbody>
<!-- ########## Email Address ########## -->
<tr><td valign="top" align="right"><label class="CCFormLabel" for="EmailAddress">Email Address</label></td>
<td align="left"><input class="CCFormInput" type="text" name="EmailAddress" value="" id="EmailAddress" /></td></tr>
<!-- ########## First Name ########## -->
<tr><td valign="top" align="right"><label class="CCFormLabel" for="FirstName">First Name</label></td>
<td align="left"><input class="CCFormInput" type="text" name="FirstName" value="" id="FirstName" /><br /></td></tr>
<!-- ########## Last Name ########## -->
<tr><td valign="top" align="right"><label class="CCFormLabel" for="LastName">Last Name</label></td>
<td align="left"><input class="CCFormInput" type="text" name="LastName" value="" id="LastName" /><br /></td></tr>
<!-- ########## Contact Lists ########## -->
<tr><td valign="top" align="right"><p class="CCFormLabel">Your areas of interest</p></td>
<td align="left"><input type="checkbox"  checked="checked"  value="General Interest" name="Lists[]" id="list_General Interest" />
<label for="list_General Interest">General Interest</label></td></tr>
</tbody></table>
<input type="submit" name="signup" id="signup" value="Subscribe" />
</div>

</form>

<div class="ui-widget-overlay" id="blanket" style="display:none;" onclick="toggle('blanket'), toggle('popUpDiv')"></div>
<div id="popUpDiv" class="ui-dialog ui-widget ui-widget-content ui-corner-all" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-ccsfg" style="display:none; z-index:1000; width:350px;">

		<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" unselectable="on"><span class="ui-dialog-title" id="ui-dialog-title-ccsfg" unselectable="on">Sign Up?</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button" unselectable="on" onclick="popup('popUpDiv')"><span class="ui-icon ui-icon-closethick" unselectable="on">close</span></a></div>
        </br>
		<div style="margin-left: 100px;"><img src="http:\\www.lakenormansocialclub.com/ctct/Logo.png" style="width: 60%;"></div>
		<p style="text-align:center">Want to hear about the latest events? Sign up here! </p>
		<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><a href="#" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="popup('popUpDiv'), jQuery('#ccsfg').dialog( 'open' )" id="ccsfg_btn">Sign Me Up</a></div></div>

</div>

It is static html. Index.php is fine, but I only really need it on the home page.

Is it possible to put it in .php when it’s not really php code? Am I missing something simple, like a giant echo block?

WOW! That was it! I wonder how it’s included in the admin area, but not anywhere else. Maybe some plugin loads it in wp-admin?

Thanks you for your help so far. That was such an interesting case.

Now, I just need to find the right place to nestle the html code.
I tried putting it in index.php right after get_header(), but the console
gives a JS error on line 63: Uncaught TypeError: Cannot read property ‘style’ of null

blanket.style.height = blanket_height + 'px';

I pasted the html between a closed and open php tag in Index.php

<?php get_header(); ?>

and

<?php ...

But that library functions in admin?

The crazy thing is, still, there is no JS undefined error when logged in as admin in WP. Just bad styling.

https://i.imgur.com/XN6QLFi.png?1

Uncaught TypeError: undefined is not a function

It references this in popup.js line on line 34 whcih starts with

jQuery('#ccsfg').dialog({autoOpen:false,modal:true, resizable:false, closeText:'close', draggable:false, width:350, buttons: dialog_buttons
				});

And actually, what is happening now you will see the first popup, and then clicking “Sign Me Up” you get the errors. The first popup appears above everything, but only in what appears to be the #content div. My guess is the JS windows can only be on top of other CSS styled elements in some sort of hierarchy. Since I put the html directly in the home page, maybe that’s what it only blankets there.

The code is live right now on https://www.lakenormansocialclub.com/

Click the ‘Test’ Hyperlink.

I understand the fixed header is related to the design of the site. I just didn’t expect the JS to do that at all. I’m not sure what css to apply to keep it all top level.

It’s crazy how complex implementing this is.

I’m also not sure if the header would be made admin conditional, as, of course, non admin viewers get the header too. If you view the source of the page, the JS and CSS loads correctly in the head for all viewers. So it seems the linking of the scripts is correct. It just doesn’t execute for some reason.

I tried to do this without enqueueing, and just linking to header.php and adding to index.php, but I got the same result. My hope is doing this the correct way will eventually get this to work and keep the code resilient against theme and wordpress core updates

I was able to enqueue the script and the required css just fine in a child theme’s functions.php.

add_action('wp_enqueue_scripts', 'themify_add_scripts');

function themify_add_scripts(){

    wp_enqueue_script( 'popup.js', site_url() . '/ctct/popup.js', array(
        'jquery',
        'jquery-ui-core'
    ));

    wp_enqueue_style( 'popup-style', site_url() . '/ctct/styles.css');

}

However, I can’t seem to find a good place to put the html.

I’ve tried index.php in the child theme; I’ve even tried inside the home page itself (which is set to a static page).

Each time, I get two problems. One, is that the pop-up does not appear on top of all the elements, but seems to appear a little underneath the fixed header of the theme. Not only does this look terrible, it blocks the closing button.

The second problem is that the js only runs when a admin is logged in.

I linked to the javascript directly in the header.php and add the html to the footer. But it’s not working. Part of the javascript does not work, because it dynamically make some of the html display:none to hide it, and then pops it up.

I will make the adjustment to the overlay; I missed that UI principle.

I just need this to work first.