Template:Optin/Default: Difference between revisions
Jump to navigation
Jump to search
Content deleted Content added
change function to only fire if selection actually changes |
trying focus method instead |
||
(5 intermediate revisions by the same user not shown) | |||
Line 16: | Line 16: | ||
<div class="optin-no-prompt__yes"></html>{{Translated|Template:OptinText/PromptYes}}<html></div> |
<div class="optin-no-prompt__yes"></html>{{Translated|Template:OptinText/PromptYes}}<html></div> |
||
</div> |
</div> |
||
< |
<div id="error-optin" class="lp-error" style="display: none;" tabindex="-1"><!-- tabindex="-1" allows focus with js so it can be announced --> |
||
</html>{{Translated|Template:OptinText/PleaseSelect}}<html> |
</html>{{Translated|Template:OptinText/PleaseSelect}}<html> |
||
</ |
</div> |
||
<div class="optin-smallprint links-in-new-tab"> |
<div class="optin-smallprint links-in-new-tab"> |
||
</html>{{Translated|Template:OptinText/Smallprint}}<html> |
</html>{{Translated|Template:OptinText/Smallprint}}<html> |
||
</div> |
</div> |
||
</fieldset> |
</fieldset> |
||
<style> |
|||
/* --- Opt-in --- */ |
|||
.optin-options { |
|||
padding: 0 4px !important; |
|||
} |
|||
.optin-options legend { |
|||
padding: 0; |
|||
font-size: inherit; |
|||
font-weight: bold; |
|||
} |
|||
.optin-options ul { |
|||
list-style: none; |
|||
margin: 0; |
|||
} |
|||
.optin-options li { |
|||
display: table; |
|||
} |
|||
.lp-radio { |
|||
display: table-cell; |
|||
vertical-align: top; |
|||
margin: 7px 8px 8px 2px; |
|||
cursor: pointer; |
|||
} |
|||
.lp-radio-label { |
|||
display: table-cell; |
|||
vertical-align: top; |
|||
padding: 4px 0; |
|||
white-space: normal; |
|||
font-size: 14px; |
|||
line-height: 18px; |
|||
font-weight: normal; |
|||
cursor: pointer; |
|||
} |
|||
.lp-radio-label:hover, |
|||
.lp-radio:focus + .lp-radio-label, |
|||
.lp-radio:hover + .lp-radio-label { |
|||
color: #36c; |
|||
text-decoration: none; |
|||
} |
|||
.optin-smallprint { |
|||
clear: both; |
|||
font-size: 12px; |
|||
line-height: 14px; |
|||
margin-top: 8px; |
|||
} |
|||
.optin-no-prompt { |
|||
display: none; |
|||
margin: 0; |
|||
padding: 6px; |
|||
border: 2px solid #900; |
|||
border-radius: 2px; |
|||
font-size: 14px; |
|||
line-height: 18px; |
|||
font-weight: normal; |
|||
} |
|||
.optin-no-prompt.is-positive { |
|||
border-color: #14866d; |
|||
font-weight: bold; |
|||
} |
|||
.optin-no-prompt__yes { |
|||
display: none; |
|||
} |
|||
.optin-no-prompt__no { |
|||
display: block; |
|||
} |
|||
.optin-no-prompt.is-positive .optin-no-prompt__yes { |
|||
display: block; |
|||
} |
|||
.optin-no-prompt.is-positive .optin-no-prompt__no { |
|||
display: none; |
|||
} |
|||
</style> |
|||
<script> |
|||
/* Called by Common.js */ |
|||
function initOptin() { |
|||
$('.optin-options').on('change', function(e) { |
|||
$('#error-optin').hide(); |
|||
// Only do all this if we have translated prompts |
|||
if ( $('.optin-no-prompt').data('is-translated') === 'yes' ) { |
|||
if ( e.target.id === 'optin-no' ) { |
|||
$('.optin-no-prompt').removeClass('is-positive'); |
|||
if ( !$('.optin-no-prompt').is(':visible') ) { |
|||
$('.optin-no-prompt').slideDown(); |
|||
} |
|||
} else { |
|||
$('.optin-no-prompt').addClass('is-positive'); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
</script> |
|||
</html> |
</html> |
Latest revision as of 19:12, 20 November 2024