CMS Development

ClaudiaCaiafa
Member

Creating javascript for a scratch and reveal effect - works well in the design tool not rich text

https://app.hubspot.com/design-previewer/3478602/code/26314338580 

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700italic,700' rel='stylesheet' <type='text/css'>

<title>Scratch Card</title>
<style type="text/css">
html {
box-sizing: border-box;
border-radius: 0px
}
*, *:before, *:after {
box-sizing: inherit;
}
.scratchpad{
width: 200px;
height: 210px;
border: solid 5px #FFFFFF;
margin:0 auto;
}
body {
background:#FFFFFF;
}
.scratch-container {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width:100%;
}
@media only screen and (max-width : 280px) {
.scratchpad {width:200px;height:196px;}
.scratch-container {width:200px !important;}
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
.scratchpad {width:290px;height:287px;}
.scratch-container {width:290px !important;}
}
.promo-container {
background:#FFFFFF;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
width:200px;
padding:20px;
margin:0 auto;
text-align:center;
font-family:'Open Sans', Arial,Sans-serif;
color:#333;
font-size:16px;
margin-top:20px;
}
.btn {
background:#56CFD2;
color:#FFF;
padding:10px 25px;
display:inline-block;
margin-top:15px;
text-decoration:none;
font-weight:600;
text-transform:uppercase;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
</style>

</head>
<body>
<div class="scratch-container">
<div id="promo" class="scratchpad"></div>
</div>
<div class="promo-container" style="display:none;">
<div class="promo-code"></div>
<a href="htttp://jennamolby.com" target="_blank" class="btn">Request A Quote</a>
</div>

<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://jennamolby.com/scratch-and-win/js/wScratchPad.min.js"> </script>

<script type="text/javascript">

var promoCode = '';
var bg1 = 'https://cdn2.hubspot.net/hubfs/3478602/Flash%20Sale%202020/St.Patricks_FlashSale_40%25_Discount.png';
var bgArray= [ bg1, ],
selectBG = bgArray[Math.floor(Math.random() * bgArray.length)];
if (selectBG == bg1) {
promoCode = 'RNA Seq';
var promoCode = '';
}
$('#promo').wScratchPad({
// the size of the eraser
size : 70, 
// the randomized scratch image 
bg: selectBG,
// give real-time updates
realtime : true, 
// The overlay image
fg: 'https://cdn2.hubspot.net/hubfs/3478602/Flash%20Sale%202020/St.Patricks_FlashSale_Clover.png',
// The cursor (coin) image
'cursor': 'url("https://cdn2.hubspot.net/hubfs/3478602/Patricks_Day_FlashSale_Coin_Graphic-1.png") 5 5, default',

scratchMove: function (e, percent) {
// Show the plain-text promo code and call-to-action when the scratch area is 50% scratched
if ((percent > 50) && (promoCode != '')) {
$('.promo-container').show();
$('body').removeClass('not-selectable');
$('.promo-code').html('Your code is: ' + promoCode);
}
}
});
</script>

</body>
</html>

 

0 Upvotes
3 Replies 3
alyssamwilie
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Creating javascript for a scratch and reveal effect - works well in the design tool not rich text

I'm not sure what the issue is here? Are you trying to implement this code within a Rich Text module? Cause Rich Text isn't really built to use CSS and Javascript.

If you want a module for using this code it'd be better to create a custom module for it. You can do this in the Design Manager by clicking File > New File in the left sidebar and choosing Module from the options in the box that pop ups.

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
ClaudiaCaiafa
Member

Creating javascript for a scratch and reveal effect - works well in the design tool not rich text

Hello,

 

Yes i am trying to copy this ode onto the rich text modle on the landing page - as I want to design a landing page which has shamrocks on and can scratch this off to reveal a code underneth.

 

When i upload the code into the advantance settings on the landing page in the header then it works perfectly however i would like it on the module itself.

 

For some reason when i apply that module onto the landing page it makes the top image still go wonky - I am just wondering why is this?

0 Upvotes
sharonlicari
Community Manager
Community Manager

Creating javascript for a scratch and reveal effect - works well in the design tool not rich text

Hey @ClaudiaCaiafa 

 

thank you for the information provided,  this will help the experts. I will tag so they will be able to advise you.          

 

Hey @alyssamwilie  @prosa @Kevin-C   could you please share your knowledge with @ClaudiaCaiafa ?     

 

Thank you

Sharon 🙂


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




0 Upvotes