Copy link to clipboard
Copied
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:
<!-- Javascript-->
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.
<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>
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.
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>
<meta charset="UTF-8" />
<title>Subscribe Footer</title>
<style>
body {
margin: 0;
font-family: helvetica, arial
...Copy link to clipboard
Copied
If the code is the same, then it must be something else in your document that is causing the problem.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
Perhaps if you showed us the rest of the code, we may be able to help you.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
the link used on the page that doesn't work are not the same ?
Copy link to clipboard
Copied
well the page that doesn't work is on the left side of the screencapture
Copy link to clipboard
Copied
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 ?
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>
<script type="text/javascript">
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>
<!-- Javascript-->
This would be the correct formatting:
<script type="text/javascript">
Cufon.replace('h1, h2, h3, h5, #sidebar li, .footer', { hover: 'true' });
</script>
<!-- Javascript-->
<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>
Copy link to clipboard
Copied
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 id="PopupSignupForm_0" widgetid="PopupSignupForm_0">
<!-- MC BANNER -->
<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>
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.
Copy link to clipboard
Copied
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.
<!-- Javascript-->
<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>
<!-- // Head -->
2. And All of the code after the End Body Tags (Lines 233-254)
<!-- End Body -->
<div id="PopupSignupForm_0" widgetid="PopupSignupForm_0">
<!-- MC BANNER -->
<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>
<!-- MC MODAL -->
<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>
<!-- MC MODAL OVERLAY -->
<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.
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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>
<meta charset="UTF-8" />
<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>
<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>
<div class="subscribe_panel">
<a href="#" class="subscribe_panel_close">×</a>
<form class="subscribe_form">
<label for="subscribe_mailing_list">Subscribe to our mailing list</label>
<input type="text" id="subscribe_mailing_list" class="subscribe_mailing_list" placeholder="Enter your email">
<input type="submit" class="subscribe_button" value="Subscribe">
</form>
</div>
<!-- end subscribe_panel -->
</body>
</html>