Content Column |
---|
| Content Block |
---|
| HTML |
---|
<button onclick="topFunction()" id="scrollToTopBtn" title="Go to top"></button>
<script>
// Show or hide Scrolltotop button
function ToggleScrollToTop() {
if (document.body.scrollTop > 1000 || document.documentElement.scrollTop > 1000) {
document.getElementById("scrollToTopBtn").style.display = "block";
|
|
| >
$( document ).ready(function() {
window.ATL_JQ_PAGE_PROPS = $.extend(window.ATL_JQ_PAGE_PROPS, {
'904ad635': {
// ==== custom trigger function ====
triggerFunction : function( showCollectorDialog ) {
$('#swp_isse_collector').on( 'click', function(e) {
if(showCollectorDialog !== undefined){
e.preventDefault();
showCollectorDialog();
}
});
},
fieldValues: {
description: window.location.href
}
}
});
});
</script> HTML | <script type="text/javascript">
// Form Logic
// Form DOM present in .brikit.footer.beta
AJS.toInit( function ($) {
// Shows the dialog from url
if(window.location.hash) {
if(window.location.hash.substring(1) === "dialog-show-newsletter") {
AJS.dialog2("#newsletter-dialog").show();
ga('send', 'event', "Newsletter", "modal");
}
}
// Shows the dialog when the "Show dialog" button is clicked
$("#dialog-show-newsletter-cat").click(function(e) {
e.preventDefault();
AJS.dialog2("#newsletter-dialog").show();
ga('send', 'event', "Newsletter", "modal");
});
$("#dialog-show-newsletter").click(function(e) {
e.preventDefault();
AJS.dialog2("#newsletter-dialog").show();
ga('send', 'event', "Newsletter", "modal");
});
// Hides the dialog
$("#dialog-close-newsletter").click(function(e) {
e.preventDefault();
AJS.dialog2("#newsletter-dialog").hide();
});
// Form submission
var $form = $('form#newsletter');
if ( $form.length > 0 ) {
$('form#newsletter input[type="submit"]').bind('click', function (e) {
e.preventDefault();
if (validate_name()) {
if (validate_email()) {
register($('form#newsletter'));
var myFlag = AJS.flag({
type: 'error',
close: 'auto',
title: 'Error',
body: '<p>Please enter a valid email address.</p>'
});
}
} else {
var myFlag = AJS.flag({
type: 'error',
close: 'auto',
title: 'Error',
body: '<p>Please enter a valid name.</p>'
});
}
});
}
// Email check with regex
function validate_email document.getElementById("scrollToTopBtn").style.display = "none";
}
}
// Check every defined value millisecond
setInterval( ToggleScrollToTop, 250 );
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
|
|
| var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test($("#mce-EMAIL").val());
}
// Name check with value check
function validate_name() {
return $("#mce-NAME").val() != "";
}
// Register to mailchimp
function register($form) {
$.ajax({
type : 'GET',
url : 'https://europa.us13.list-manage.com/subscribe/post-json?u=9a428438959d4d20c2a84163b&&id=bc6ca47df5&c=?',
data : $form.serialize(),
cache : false,
dataType : 'json',
contentType : "application/json; charset=utf-8",
error : function(err) { alert("Could not connect to the registration server. Please try again later."); },
success : function(data) {
if (data.result != "success") {
var myFlag = AJS.flag({
type: 'error',
close: 'auto',
title: 'Error',
body: data.msg
});
} else {
AJS.dialog2("#newsletter-dialog").hide();
var myFlag = AJS.flag({
type: 'success',
close: 'auto',
title: 'Form Submitted',
body: '<p>Welcome to the CEFDIGITAL Newsletter, you will receive a confirmation email soon.</p>'
});
$( 'form#newsletter' ).each(function(){
this.reset();
});
ga('send', 'event', "Newsletter", "subscribed");
}
}
});
}
});
</script>document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
</script> |
CSS Stylesheet |
---|
#scrollToTopBtn{
background:url('https://ec.europa.eu/digital-building-blocks/sites/download/attachments/82773348/BackToTop.png?api=v2') no-repeat left center;
display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99;
border: none;
outline: none;
background-color: #bbb;
color: white;
cursor: pointer;
width: 50px;
height: 50px;
border-radius: 10px;
font-size: 18px;
}
#scrollToTopBtn:hover{background-color: #555;} |
|
|
|