New issue with Content Area Modal

MPP_dshoales · December 27, 2018, 8:46pm

Hello,

I’d created a site for a client in Pro using the Pro Footer. Up until a day or two ago (at least that was the last time we’d tried it) everything worked fine. However we’re now seeing an issue where the Content Area Modal no longer displays on mobile devices, however it functions fine in the Pro design UI when viewing with the breakpoint previews.

What we’re seeing now, is that when a user taps on the Donate Here! button, the button displays the mouseDown appearance, but nothing else seems to happen, and the modal doesn’t display. However the user cannot interact with anything else on the screen. It’s as though the lightbox is active, but it isn’t visually showing anything. I’ve also disabled all of the plugins during testing and the Modal still isn’t functioning.

Any idea what would cause this to happen? We haven’t added any additional plugins since launch and everything was working fine then.

Site URL: pandasnetwork.org

Update 2: I also tried adding other Content Modal elements to the footer container and none of them work (even without any formatting or changes applied, just the default element settings).

ruenel · December 27, 2018, 9:58pm

Hello @MPP_dshoales,

Thanks for writing in!

I have inspected your page and it seems that you have added invalid html code. please make sure that the html tags were properly closed and that you are using the correct tag. For example, you are using </br> which is not correct. You should be using <br /> tag. Your <form> tag were not closed properly as well. Please double check your code because it will messed up your page layout and sometimes will results to a disappearance of a section/s in your page.

Hope this helps.

MPP_dshoales · December 28, 2018, 12:59am

Hello @RueNel,

While I understand your thought process, correcting the items you pointed out unfortunately did not address the issue. Also I verified the tags and they are closed correctly in both the mobile and desktop versions, so I’m unsure where you are seeing an improperly closed tag.

Also, the HTML content is identical on the desktop version of the footer as it is in the mobile version. We have two bars with visibility setup as one with desktop and one with mobile breakpoints. However the content area modal element works without issue on the desktop/notebook version of the footer, while the content area modal on the mobile version of the footer is not working at all.

The overall issue we’re experiencing is that clicking on the toggle of the Content Area Modal does not load the modal content at all on mobile devices or at pixel widths that trigger the mobile version of the footer. The element toggle shows the click state and that’s it, no lightbox appears, no modal, nothing else shows up.

ruenel · December 28, 2018, 1:51am

Hello @MPP_dshoales,

Your modal content area that is supposed to display in smaller screens does not display because it is inside the modal content area that is displayed in desktop screens. The should be independent and not nested. This is a result of a broken html code. Please provide us access to your site so that we can thoroughly inspect your content and point out where the broken code is located.

To do this, please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how you can create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you.

MPP_dshoales · December 28, 2018, 2:14am

I’ve added a secure note above as requested, however please bear in mind that this has been functioning without issue on mobile devices since August 2018 and is not something we just tried. The functionality stopped working within a week or so ago. As such, I’m not seeing how this is what you’re proposing as that would imply it should’ve failed from the beginning.

I look forward to hearing back on this.

ruenel · December 28, 2018, 3:13am

Hello @MPP_dshoales,

Since August 2018, your site is running the broken code. You have this:

[tab_nav type="two-up"][tab_nav_item title="Donate to PANDAS Network" active="true"][tab_nav_item title="Donate to Alex Manfull Memorial Fund" active=""][/tab_nav][tabs][tab active="true"]<h3>GENERAL DONATIONS</h3><br />
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="blank">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="ASZD2J7EKL7N2">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

As many as 1 in 200 children suffer from PANDAS/PANS, yet many do not receive a correct diagnosis or proper treatment. PANDAS Network is determined to change that!<br /><br />
Your generous donation will allow PANDAS Network to continue their dedication to improve the diagnosis and treatment of children with PANDAS (Pediatric Autoimmune Neuropsychiatric Disorders Associated with Streptococcal Infections) and PANS (Pediatric Acute-onset Neuropsychiatric Syndrome).<br /><br />
PANDAS Network is a 501c3 non-profit corporation.<br /><br /><b>Donations made to PANDAS Network are tax deductible – FEIN #37-1666562.</b>
<br /><br />Thank you for your support!<br /><br />
<h7>Prefer to mail your donation?</h7>
Download our donation form:<br />
<a href="http://pandasnetwork.org/wp-content/uploads/2018/11/PANDAS-Network-Donation-Sheet-2014.pdf" Target="blank">Fill out and print donation form</a><br /><br />
<b>Mail to:</b><br />
PANDAS Network
655 Oak Grove Avenue #1373
Menlo Park, CA 94026[/tab][tab]<h3>ALEX MANFULL MEMORIAL FUND</h3><br />
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<p><input name="cmd" value="_s-xclick" type="hidden" /></p>
<p><input name="hosted_button_id" value="3JLBZUJEDDSNJ" type="hidden" /></p>
<p><input alt="PayPal - The safer, easier way to pay online!" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" type="image" /></p>
<p>PANDAS is seen as a pediatric disorder, most often surfacing between age 3 and puberty. NIMH reports that it’s possible PANDAS could first appear in adolescence and in young adulthood but that a first-time emergence after puberty would be rare.  For Alex, PANDAS first occurred at age 19, suggesting more research is needed.  Your generous donation will support more PANDAS research, education, and treatment. <a href="http://www.pandasnetwork.org/alex-manfull-memorial-fund/">Click here to learn more about </a><a href="http://www.pandasnetwork.org/alex-manfull-memorial-fund/">Alex and her fund.</a></p>
<p><span style="color: #ff0000;">Please note how you wish your name(s) to be listed – or, if you wish to make your gift anonymously – in the “Add special instructions to the seller” field on the PayPal form.</span></p>
<p>PANDAS Network is a 501c3 non-profit corporation. <strong>Donations made to PANDAS Network are tax deductible – FEIN #37-1666562.</strong></p>
<p>&nbsp;</p>
<div class="entry-content">
<p>Thank you for your support!</p>
<h7>Prefer to mail your donation?</h7>
Download our donation form:<br />
<a href="http://pandasnetwork.org/wp-content/uploads/2018/11/PANDAS-Network-Donation-Form-Update-1.pdf" Target="blank">Fill out and print donation form</a><br /><br />
<b>Mail to:</b><br />
PANDAS Network
655 Oak Grove Avenue #1373
Menlo Park, CA 94026[/tab][tab]<h3>
</form>[/tab][/tabs]

Your <form> were not closed properly closed. There is a closing </fom> but it is added in the wrong place. Your <div class="entry-content"> does not have any closing div tag. And there is also an open <h3> tag that is also unclosed.

<h3>
</form>[/tab][/tabs]

If I am to correct your html content, please have it updated it and use this:

[tab_nav type="two-up"][tab_nav_item title="Donate to PANDAS Network" active="true"][tab_nav_item title="Donate to Alex Manfull Memorial Fund" active=""][/tab_nav][tabs][tab active="true"]<h3>GENERAL DONATIONS</h3><br />
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="blank">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="ASZD2J7EKL7N2">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

As many as 1 in 200 children suffer from PANDAS/PANS, yet many do not receive a correct diagnosis or proper treatment. PANDAS Network is determined to change that!<br /><br />
Your generous donation will allow PANDAS Network to continue their dedication to improve the diagnosis and treatment of children with PANDAS (Pediatric Autoimmune Neuropsychiatric Disorders Associated with Streptococcal Infections) and PANS (Pediatric Acute-onset Neuropsychiatric Syndrome).<br /><br />
PANDAS Network is a 501c3 non-profit corporation.<br /><br /><b>Donations made to PANDAS Network are tax deductible – FEIN #37-1666562.</b>
<br /><br />Thank you for your support!<br /><br />
<h7>Prefer to mail your donation?</h7>
Download our donation form:<br />
<a href="http://pandasnetwork.org/wp-content/uploads/2018/11/PANDAS-Network-Donation-Sheet-2014.pdf" Target="blank">Fill out and print donation form</a><br /><br />
<b>Mail to:</b><br />
PANDAS Network
655 Oak Grove Avenue #1373
Menlo Park, CA 94026[/tab][tab]<h3>ALEX MANFULL MEMORIAL FUND</h3><br />
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<p><input name="cmd" value="_s-xclick" type="hidden" /></p>
<p><input name="hosted_button_id" value="3JLBZUJEDDSNJ" type="hidden" /></p>
<p><input alt="PayPal - The safer, easier way to pay online!" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" type="image" /></p></form>
<p>PANDAS is seen as a pediatric disorder, most often surfacing between age 3 and puberty. NIMH reports that it’s possible PANDAS could first appear in adolescence and in young adulthood but that a first-time emergence after puberty would be rare.  For Alex, PANDAS first occurred at age 19, suggesting more research is needed.  Your generous donation will support more PANDAS research, education, and treatment. <a href="http://www.pandasnetwork.org/alex-manfull-memorial-fund/">Click here to learn more about </a><a href="http://www.pandasnetwork.org/alex-manfull-memorial-fund/">Alex and her fund.</a></p>
<p><span style="color: #ff0000;">Please note how you wish your name(s) to be listed – or, if you wish to make your gift anonymously – in the “Add special instructions to the seller” field on the PayPal form.</span></p>
<p>PANDAS Network is a 501c3 non-profit corporation. <strong>Donations made to PANDAS Network are tax deductible – FEIN #37-1666562.</strong></p>
<p>&nbsp;</p>
<div class="entry-content">
<p>Thank you for your support!</p>
<h7>Prefer to mail your donation?</h7>
Download our donation form:<br />
<a href="http://pandasnetwork.org/wp-content/uploads/2018/11/PANDAS-Network-Donation-Form-Update-1.pdf" Target="blank">Fill out and print donation form</a><br /><br />
<b>Mail to:</b><br />
PANDAS Network
655 Oak Grove Avenue #1373
Menlo Park, CA 94026</div>[/tab][tab][/tab][/tabs]

And also this one:

[tab_nav type="two-up"][tab_nav_item title="Donate to PANDAS Network" active="true"][tab_nav_item title="Donate to Alex Manfull Memorial Fund" active=""][/tab_nav][tabs][tab active="true"]<h3>GENERAL DONATIONS</h3>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="blank"><input type="hidden" name="cmd" value="_s-xclick" /><br />
<input type="hidden" name="hosted_button_id" value="ASZD2J7EKL7N2" /><br />
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" /><br />
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" /></form>
<p>As many as 1 in 200 children suffer from PANDAS/PANS, yet many do not receive a correct diagnosis or proper treatment. PANDAS Network is determined to change that!<br />
Your generous donation will allow PANDAS Network to continue their dedication to improve the diagnosis and treatment of children with PANDAS (Pediatric Autoimmune Neuropsychiatric Disorders Associated with Streptococcal Infections) and PANS (Pediatric Acute-onset Neuropsychiatric Syndrome).<br />
PANDAS Network is a 501c3 non-profit corporation.<b>Donations made to PANDAS Network are tax deductible – FEIN #37-1666562.</b><br />
Thank you for your support!<br />
<h7>Prefer to mail your donation?</h7><br />
Download our donation form:<br />
<a href="http://www.pandasnetwork.org/wp-content/uploads/2018/06/PN-DONATION-FORM-2018.pdf" target="blank">Fill out and print donation form</a><br />
<b>Mail to:</b><br />
PANDAS Network<br />
655 Oak Grove Avenue #1373<br />
Menlo Park, CA 94026</p>[/tab][tab]<h3>ALEX MANFULL MEMORIAL FUND</h3>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<p><input name="cmd" value="_s-xclick" type="hidden" /></p>
<p><input name="hosted_button_id" value="3JLBZUJEDDSNJ" type="hidden" /></p>
<p><input alt="PayPal - The safer, easier way to pay online!" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" type="image" /></p></form>
<p>PANDAS is seen as a pediatric disorder, most often surfacing between age 3 and puberty. NIMH reports that it’s possible PANDAS could first appear in adolescence and in young adulthood but that a first-time emergence after puberty would be rare.  For Alex, PANDAS first occurred at age 19, suggesting more research is needed.  Your generous donation will support more PANDAS research, education, and treatment. <a href="http://www.pandasnetwork.org/alex-manfull-memorial-fund/">Click here to learn more about </a><a href="http://www.pandasnetwork.org/alex-manfull-memorial-fund/">Alex and her fund.</a></p>
<p><span style="color: #ff0000;">Please note how you wish your name(s) to be listed – or, if you wish to make your gift anonymously – in the “Add special instructions to the seller” field on the PayPal form.</span></p>
<p>PANDAS Network is a 501c3 non-profit corporation. <strong>Donations made to PANDAS Network are tax deductible – FEIN #37-1666562.</strong></p>

<div class="entry-content">
<p>Thank you for your support!</p>
<p><strong>Prefer to mail your donation?</strong><br />
Download our donation form:</p>
<p><a href="http://www.pandasnetwork.org/wp-content/uploads/2018/08/PANDAS-Network-Donation-Form-for-Alex-Manfull-Fund.pdf">Fill out and print donation form</a></p>
<p>Mail to:<br />
PANDAS Network<br />
655 Oak Grove Avenue #1373<br />
Menlo Park, CA 94026</p>
<p><a href="http://greatnonprofits.org/org/pandas-network-org" target="_blank" rel="noopener"><img class="alignnone" src="http://i1315.photobucket.com/albums/t593/PANDASnetwork/General/TopNonProfit_zps62f09f28.jpg" alt="TopNonProfit" width="178" height="89" border="0" /></a><a href="http://www.guidestar.org/organizations/37-1666562/pandas-network-orgnon-profit-cure-auto-neuropsychiatric-syndrom.aspx"><img class="alignleft size-full wp-image-10959" src="http://pandasnetwork.org/wp-content/uploads/2013/12/Guidestar.png" alt="Guidestar" width="128" height="94" /></a></p></div>[/tab][/tabs]

If you need anything else, please let us know.

MPP_dshoales · December 28, 2018, 3:30am

That’s what I get for using code provided by the previous site dev

I used the two different codes you provided, one in each of the two versions (mobile and desktop) of the Content Area Modal. However on saving and testing, the modal is still not loading. Was I incorrect in replacing the Modal content for each Content Area Modal with the code you supplied?

ruenel · December 28, 2018, 4:16am

Hello @MPP_dshoales,

The first code is intended for the content area modal for desktops and the second one is for the content area modal for smaller screens. You will have to replace your code with the one I have posted above.

After saving all your changes, since you have installed a caching plugin W3 Total Cache, please clear your plugin cache before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

Hope this helps.

system · January 7, 2019, 4:16am

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.