Content Area Modal not displaying

Support
#1

Hello,

Please my I have some help with this page: http://fairbanking.org.uk/current-mark-holders-2018/

I added some new rows by copying the previous ones under the ‘Personal Loans section’ but they are not working as they should…

I copied the rows and Content Area Model, so I can’t figure out why the new ones will not pop out and display as all the others do. The Column where it stops working is the one that houses ‘Advance Credit Union’ when you click on the Fairbanking logo below it should pop out, like it does on the ‘Croydon Plus’ column. I have moved the content area modal from ‘Advance’ to the ‘Croydon’ box and it works there… so it can’t be the Content Area Modal element I don’t think…

Hopefully that makes sens… Please let me know if you need more information.

Thanks,
Amy

#2

Hi Amy,

Thank you for writing in, please check the content of the last working Content Modal and the one that has the issue, there seems to be a syntax error somewhere on those Content Modal, you can check this tool here paste your content between <body> and </body> tag, and address all found errors.

Let us know how it goes, if you did not find anything, please provide us login credentials in a secure note so we can take a closer look.

Cheers!

#3

Hi,

Thanks for that. There are the same minor errors in both code but nothing that should stop it displaying. If I switch the ‘broken’ content modal area into the row that holds the ‘working’ content modal it works there, and the ‘working’ one won’t work where the ‘broken’ one was housed. Will send secure note with credentials… Hopefully you can help :slight_smile:

Thanks,
Amy

#4

Hello @Fairbanking,

After further investigation, I found out that you have inserted an incorrect html code in the content area. Please have it updated because you are supposed to be inserting this code:

<div style="padding: 25px; line-height: 1.4; text-align: center;">
    <img class="aligncenter size-medium wp-image-1563" src="http://fairbanking.org.uk/wp-content/uploads/2018/03/Capital_One.png" alt="capital-one_200_70" width="300" height="84" />
    <img class="aligncenter size-medium wp-image-1563" src="http://fairbanking.org.uk/wp-content/uploads/2015/10/2015®-Classic-Credit-Card-4-STAR-NO-BUTTON_72ppi.png" alt="capital-one_200_70" width="300" height="84" />

    <h3>The product features that gained this <strong>4 Star</strong> rating are:</h3>
    
    <ul>
        <li>Customers receive reminder messages to make the monthly payment and when their account balance is approaching the credit limit</li>
        <li>Customers can request a message providing their account balance at any time</li>
        <li>Customers can request a mini-statement showing the most recent transactions at any time</li>
        <li>Customers can easily pay all or part of their balance, including with a debit card</li>
        <li>Customers can easily pay any amount including the full balance by direct debit</li>
        <li>Customers are encouraged to pay more then the minimum monthly payment</li>
        <li>Customers are shown how different repayment amounts will improve the time taken to pay off the outstanding balance/debt</li>
        <li>Customers can set plans to reduce debt</li>
    </ul>


    <a href="http://fairbanking.org.uk/about-us/disclaimer/">Click here to view the product disclaimer</a>.

</div>

Or this one:

<div style="padding: 25px; line-height: 1.4; text-align: center;">

    <img class="aligncenter size-medium wp-image-1572" src="http://fairbanking.org.uk/wp-content/uploads/2018/03/barclays.png" alt="barclays_200_70" width="300" height="84" />
    <img class=" wp-image-2965 aligncenter" src="http://fairbanking.org.uk/wp-content/uploads/2017/03/Barclays-3-stars.png" alt="" width="381" height="277" />
    <h3>The product features that gained this <strong>3 Star</strong> rating are:</h3>

    <ul>
        <li>Customers can receive a message or an alert of their available balance on a regular basis and on request</li>
        <li>Customers can request a mini-statement of latest transactions at any time</li>
        <li>Customers have the ability to trigger a message once the balance has reached a certain level, as determined by the customer</li>
        <li>Customers can track their overall income and expenditure with both a summary and changes over time</li>
        <li>Customers can review their expenditure by detailed category through time</li>
        <li>Customers will be notified by message if the balance is near the authorised credit limit or a debit transaction will take it over the limit, enabling a customer to take remedial action</li>
    </ul>

    <a href="http://fairbanking.org.uk/about-us/disclaimer/">Click here to view the product disclaimer.</a>
    <a href="http://fairbanking.org.uk/wp-content/uploads/2017/03/Barclays-Fair-Banking-Results-Current-Account08.03.17.pdf" target="_blank">
    <h4><strong>Download the 3 Star Fairbanking Mark Research from Ipsos MORI</a></strong></h4>

</div>

The correct html code for <ul><li></li></ul> can be check here:

Please go over to the other content area element and make sure that your code is valid and correct.

Please let us know how it goes.

#5

Hello,

Thanks for that. I tried both codes as suggested and neither work… I have moved the entire content modal area from a working column and put it in the rest of the columns and that also does not work. Is there something wrong with the columns…?

Thanks,
Amy

#6

Hello Amy,

Please understand that all of the contents that you have have inserted in all of the content area are all incorrect and will messed up your page. You will have to re do all of them. I actually started a few of those contents. Just make sure that your code format should be like this:

Barclays:

<div style="padding: 25px; line-height: 1.4; text-align: center;">
    <img class="aligncenter size-medium wp-image-344" src="http://fairbanking.org.uk/wp-content/uploads/2018/03/barclays.png" alt="2015-_Barclayloan_842x592" width="300" height="212" />
    <img class="aligncenter size-medium wp-image-344" src="http://fairbanking.org.uk/wp-content/uploads/2015/10/2015-_Barclayloan_842x592-300x212.png" alt="2015-_Barclayloan_842x592" width="300" height="212" />

    <h3>The product features that gained this <strong>4 Star</strong> rating are:</h3>
    <ul>
        <li>Customers have the ability to understand the amount of repayment for different periods
    and amounts</li>
        <li>Customers have a tool to work out whether you can afford to repay the loan</li>
        <li>Customers will consider the total amount of debt including the new loan</li>
        <li>Customers will have encouragements to repay early such as reminders that this is possible during the life of the loan</li>
        <li>Customers can use direct debit or standing orders to automate regular payments</li>
        <li>If customers miss a payment they are encouraged to take action if they are finding payment difficult</li>
        <li>Customers will be offered a repayment plan at an affordable level at the earliest opportunity</li>
        <li>Customers will be aware of the possibility of a revised repayment plan if they have a financial difficulty</li>
    </ul>

    <a href="http://fairbanking.org.uk/about-us/disclaimer/">Click here to view the product disclaimer.</a>
</div>

It is best that you will indent the code and edit it in Sublime Text or Notepad before you insert them into the content area.

Please let us know how it goes.

#7

Hi,

Thanks but all the other content areas work as they should. They all display a pop up when clicked. It is when you get to the Advance Credit Union box that they stop working. I have tried your code above in this box, I have tried other working codes in this box, I have duplicated the content area modal box from the Croydon box Plus box (which pops up) and put in the Advance box and none of them work.

Can you please test this? I don’t see it working…

#8

Hi Amy,

I just spent over an hour editing each and every one of the html codes that you have inserted in content area elements. Every thing should be fine now.

What did I do? I simply made sure that there are no broken html codes like unclosed <a>, <p>, <h5>, <ul> and <div> tags.

To avoid such as this inconvenience again from happening, please make sure first that your html code is correct before copying and pasting to another content area.

Please check your page now.

#9

Thank you so much for all your help!!!

I’m just lost on how when using the correct code from my end it still didn’t work. But thank you for spending the time to resolve this!!

Thanks,
Amy

#10

Hi Amy,

Glad we could help, sometimes the element with an issue is not really the one that is causing it but just a casualty of another element/s issue. What @RueNel did is corrected ALL your content modal element markup, yes even those ones that are working have a syntax error on them.

Cheers,

#11

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