Here's an example of custom button html that works fine:
`var nextButtonHTML = '<input id="CustomNextButton" class="NextButton Button" title="→" type="button" name="NextButton" value="→" aria-label="Next" style="">';
jQuery('#Buttons').append(nextButtonHTML);`
Here's an example that causes the unwanted behaviour described above:
`var nextButtonHTML = '<input id="CustomNextButton" class="NextButton Button" title="→" type="button" name="NextButton" value="→" aria-label="Next" style="background-color:#106CA8; color:white">';
jQuery('#Buttons').append(nextButtonHTML);`
Anybody know why I can't add a style element to my custom button without issue? Is there any way around this?
Kind regards,
Ben
Hi there, if you still need, I adapted the code in this custom validation post which clones the next button, hides the original, adds styling with jQuery, and then advances the page when clicked on. Try pasting the below to the OnReady of the question's JavaScript.
const next = document.getElementById("NextButton");
const newnext = next.cloneNode(true);
newnext.id = "newnext";
jQuery(newnext).appendTo("#Buttons");
jQuery(next).css({"visibility":"hidden"});
jQuery(newnext).css({
"border": "none",
"color": "#fff",
"font-size": "16px",
"padding": "8px 20px",
"-webkit-border-radius": "4px",
"-moz-border-radius": "4px",
"-ms-border-radius": "4px",
"-o-border-radius": "4px",
"border-radius": "4px",
"cursor": "pointer",
"margin": "0",
"text-align": "center",
"text-decoration": "none",
"-webkit-appearance": "none",
"transition": "background .3s",
"background-color": "#007ac0"
});
var newnextclick = document.getElementById("newnext");
jQuery(newnextclick).on("click , touchstart", function() {
jQuery(newnext).css({ opacity: 0.5 });
jQuery(next).click()
});
For your original question though, you can get the ID of the custom button once its been created and style it with jQuery like above. The below does not hide the original next button, so that would need to be added in like the above:
var nextButtonHTML = '';
jQuery("#Buttons").append(nextButtonHTML);
var nextButtonStyle = document.getElementById("CustomNextButton");
jQuery(nextButtonStyle).css({
"border": "none",
"color": "#fff",
"font-size": "16px",
"padding": "8px 20px",
"-webkit-border-radius": "4px",
"-moz-border-radius": "4px",
"-ms-border-radius": "4px",
"-o-border-radius": "4px",
"border-radius": "4px",
"cursor": "pointer",
"margin": "0",
"text-align": "center",
"text-decoration": "none",
"-webkit-appearance": "none",
"transition": "background .3s",
"background-color": "#007ac0"
});
Hello, I have found this thread very helpful and was able to clone the next button. However, the cloned button keeps on fading out as soon as I get to the page where I've placed it. Where do I have to adjust the JS to make the button constantly visible next to the original button?
Hi KatjaT ,
Just remove the highlighted portion from your code.
Hope this resolves your query!!
Hi KatjaT , the "jQuery(newnext).css({ opacity: 0.5 });" piece makes it so that the cloned Next button becomes lighter when it is clicked on, similar to what happens when the original Next button is clicked. Is this what you meant by fading out? If so, removing that line of code will stop the color change when the cloned Next button is clicked.
To make the cloned Next button constantly visible next to the original button, you can remove the "jQuery(next).css({"visibility":"hidden"});" piece of the code. This will make it so that both the original and the cloned button appear next to each other, like in the below:
You might also check out this post which touches on having the Next/Previous buttons included at the top of the screen.
Thank you so much to both of you again!
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.