Highlighted

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

Participant ,
Nov 13, 2017

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, 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">&times;</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>

Views

521

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Participant ,
Nov 13, 2017

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, 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">&times;</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>

Views

522

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 13, 2017 0
Adobe Community Professional ,
Nov 13, 2017

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 13, 2017 0
Participant ,
Nov 13, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 13, 2017 0
Adobe Community Professional ,
Nov 13, 2017

Copy link to clipboard

Copied

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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 13, 2017 0
Participant ,
Nov 14, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 14, 2017 0
Adobe Community Professional ,
Nov 14, 2017

Copy link to clipboard

Copied

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

11.14.2017-10.21.23

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 14, 2017 0
Adobe Community Professional ,
Nov 14, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 14, 2017 0
LEGEND ,
Nov 14, 2017

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 ?

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>

<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>
  

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 14, 2017 1
LEGEND ,
Nov 14, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 14, 2017 1
Participant ,
Nov 14, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 14, 2017 0
Participant ,
Nov 14, 2017

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 14, 2017 0
Participant ,
Nov 15, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 15, 2017 0
LEGEND ,
Nov 16, 2017

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">&times;</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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 16, 2017 0