Same JavaScript on 2 different pages (one working, one not) - why?

Report · Nov 13, 2017

Hi guys.

I am a little puzzled why a java code I am using, mailchimp java pop up sign up sheet, is working on one page and not another. I am posting it in the javascript section in design editor in both html pages at the bottom just above where it says:

No matter where I seem to paste the code, I cannot get it to work right, except this one page.

This page it works:

touch-the-universe.com/subscription2.html

The code in question is on line 47 when viewing source from a browser.

The same code on this page does not work:

touch-the-universe.com/subscription.html

The code in question is the same as above, but on line 34.

Any help would be greatly appreciated.

Report · Nov 13, 2017

If the code is the same, then it must be something else in your document that is causing the problem.

Wappler, the only real Dreamweaver alternative.

Report · Nov 13, 2017

Only thing is, I have no clue what that could be. I'll go line by line and see what I can find. If someone else can spot it quickly using a more sophisticated method, I'd love to hear it.

Report · Nov 13, 2017

Perhaps if you showed us the rest of the code, we may be able to help you.

Wappler, the only real Dreamweaver alternative.

Report · Nov 14, 2017

Hi Ben,

If you go to the URLs I linked to earlier, you may right click on the background anywhere on the web page and select view page source using your internet browser to find the rest of the code. This process can be done on any website.

Report · Nov 14, 2017

the link used on the page that doesn't work are not the same ?

11.14.2017-10.21.23

Report · Nov 14, 2017

well the page that doesn't work is on the left side of the screencapture

Report · Nov 14, 2017

https://forums.adobe.com/people/B+i+r+n+o+u wrote
the link used on the page that doesn't work are not the same ?
11.14.2017-10.21.23

I think youre right, the below appears to be malformed: A <script></script> within another <script></script> plus there is a missing > for the last but one closing </script>

Cufon.replace('h1, h2, h3, h5, #sidebar li, .footer', { hover: 'true' });

<script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us17.list-manage.com","uuid":"17254369a831ab340dcc39d21","lid":"2769e73a04"}) })</script

   </script>

This would be the correct formatting:

Cufon.replace('h1, h2, h3, h5, #sidebar li, .footer', { hover: 'true' });

</script>

</script>

Report · Nov 14, 2017

I dont think either page works in respect of javascript pop-up. On the page where the 'subscribe to our mailiing list' does not appear you don't appear to have the code below:

</div>

On the page where it does appear the javascript part is not working because the pop-up box (if its supposed to pop-up on an event, like clicking) is already open when you first visit the webpage and the 'X" icon which I assume should close the pop-up box doesn't work.

Report · Nov 14, 2017

I was able to correct the problem thanks to this observation, though it was only part of the solution

What I did was completely blind and trial and error pasting code between the two html and seeing what happens, lol.

I needed to add Two bits of the following code from the one that worked into the one that didn't work in order to make it work.

1. (Lines 50-53) The code after javascript and before head.

<style></style><link rel="stylesheet" type="text/css" href="./Touch The Universe Productions - Audio Label and Sound Design - Hive Sound Bank - Goa Trance, Progressive Trance, Psybient Prests_files/modal-fixed.css" media="all"><style type="text/css" id=""></style></head>

2. And All of the code after the End Body Tags (Lines 233-254)

<div id="PopupSignupForm_0" widgetid="PopupSignupForm_0">
    
    <div class="mc-banner" data-dojo-attach-point="bannerContainer" style="display: block;">
        <div class="mc-layout__bannerContent">
            <iframe src="./Touch The Universe Productions - Audio Label and Sound Design - Hive Sound Bank - Goa Trance, Progressive Trance, Psybient Prests_files/saved_resource.html" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="width: 100%; height: 116px;" data-dojo-attach-point="iframeBannerContainer"></iframe>
        </div>
    </div>
    
    <div class="mc-modal" data-dojo-attach-point="modalContainer" style="display: block; opacity: 1;">
        <div class="mc-closeModal" data-action="close-mc-modal" data-dojo-attach-point="modalClose"></div>
        <div class="mc-layout__modalContent" style="max-height: 81px;">
            <iframe src="./Touch The Universe Productions - Audio Label and Sound Design - Hive Sound Bank - Goa Trance, Progressive Trance, Psybient Prests_files/saved_resource(1).html" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="width: 100%; height: 80px;" data-dojo-attach-point="iframeModalContainer"></iframe>
        </div>
    </div>
    
    <div class="mc-modal-bg" data-dojo-attach-point="modalOverlay" style="display: block; opacity: 0.65;"></div>
</div></body></html>

Why this is the case I am unsure but I can guess. The MC code at the bottom I never added myself, I'm assuming this was added after I uploaded the html online and it got the information from the Mailchimps servers and added itself!

The other code must link the necessary style sheets to the html or something, but I'd appreciate knowing the exact reason if anyone would share.

Thanks a lot for your help in narrowing this down. It was like a jig saw puzzle, really, lol

I have one more question but will ask in the post below to make it easier to notice, hopefully.

Report · Nov 14, 2017

Osgood wrote

On the page where it does appear the javascript part is not working because the pop-up box (if its supposed to pop-up on an event, like clicking) is already open when you first visit the webpage and the 'X" icon which I assume should close the pop-up box doesn't work.

This is also extremely helpful, thank you. Ideally, I would only want this popup to appear if someone clicks the subscription menu in the top navigation bar of my site. Can you please share how I would go about doing that?

Report · Nov 15, 2017

I checked and it seems they do support 3rd party alterations of the form, only I have no idea how I'd do it. Would anyone be willing to help me out? I'd be willing to compensate.

Report · Nov 16, 2017

Creating a subscribe panel like the one you want isn't so difficult. Firstly I would not be using any javascript to create the panel if I didn't know how it works. I would create my own panel, like the example code below, then just add the mailchimp form to the panel ,plus any additional mailchimp code which they suggest you use, such as a form validation script.

<!DOCTYPE html>

<html>

<head>

<title>Subscribe Footer</title>

<style>

body {

margin: 0;

font-family: helvetica, arial, sans-serif;

background-color: #000;

}

.subscribe_panel_open {

color: #fff;

padding: 20px;

display: inline-block;

}

.subscribe_panel_close {

position: absolute;

right: 20px;

top: 10px;

color: #000;

text-decoration: none;

font-size: 25px;

z-index: 10;

}

.subscribe_panel {

position: fixed;

padding: 30px;

bottom: 0;

width: 100%;

background-color: #fff;

box-sizing: border-box;

}

.subscribe_form {

display: flex;

justify-content: center;

align-items: center;

}

.subscribe_mailing_list {

width: 300px;

padding: 10px 15px;

font-size: 16px;

margin: 0 15px;

border: 1px solid #ccc;

}

.subscribe_button {

background-color: #646060;

color: #fff;

border: none;

padding: 12px 45px;

font-size: 14px;

border-radius: 5px;

}

</style>

<script

src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

$(document).ready(function(){

$('.subscribe_panel').hide();

$('.side_panel').hide();

$('.subscribe_panel_open').click(function(){

$('.subscribe_panel').fadeIn();

});

$('.subscribe_panel_close').click(function(){

$('.subscribe_panel').fadeOut();

});

</script>

</head>

<body>

<a href="#" class="subscribe_panel_open">Subscribe</a>

<label for="subscribe_mailing_list">Subscribe to our mailing list</label>

</form>

</div>

</body>

</html>

Adobe Community

Same JavaScript on 2 different pages (one working, one not) - why?

1 Correct answer