- Posts: 1
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Change languagebar from dropdown to buttons
- hannes3510
- Topic Author
- Offline
- New Member
Less
More
7 years 11 months ago #135509
by hannes3510
Change languagebar from dropdown to buttons was created by hannes3510
Hello guys,
I want to change the current 3 language dropdown list into 3 buttons / links next to each other.
Is this possible?
I am using the default skin.
Thank you in advice
I want to change the current 3 language dropdown list into 3 buttons / links next to each other.
Is this possible?
I am using the default skin.
Thank you in advice
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10114
- Thank you received: 3595
7 years 11 months ago #135543
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Change languagebar from dropdown to buttons
Add something like this to template.js:
And, this to template.css:
Code:
$(document).ready(function(){ // Insert the new buttons var languageWrapper = $('select.languagechanger').parent(); languageWrapper.addClass('language-wrapper').append('<div class="lang-buttons-wrapper" />'); $('select.languagechanger option').each(function(i) { $('.lang-buttons-wrapper').append('<button type="button" class="btn btn-primary" data-value="'+$(this).attr('value')+'">'+$(this).text()+'</button>'); }); // Listener on new buttons $('.lang-buttons-wrapper button').on('click', function(e) { // Manipulate the hidden language select $('select.languagechanger option').removeAttr('selected'); $('select.languagechanger').val($(this).attr('data-value')); $('select.languagechanger option[value="'+$(this).attr('data-value')+'"]').attr('selected', 'selected'); // Language handler from survey_runtime.js if($('select.languagechanger').hasClass('previewmode')) { var target=$('select.languagechanger').data('targeturl'); $('<form>', { "html": '<input type="hidden" name="lang" value="' + $('select.languagechanger').find('option:selected').val() + '" />', "action": target }).appendTo(document.body).submit(); return false; } if(!$('select.languagechanger').closest('form').length){ if($('form#limesurvey').length==1){ $("form#limesurvey [name='lang']").remove(); $("<input type='hidden']>").attr('name','lang').val($('select.languagechanger').find('option:selected').val()).appendTo($('form#limesurvey')); $("#changelangbtn").appendTo($('form#limesurvey')); $('#changelangbtn').click(); }else{ if($('select.languagechanger').data('targeturl')){ var target=$('select.languagechanger').data('targeturl'); }else{ var target=document.location.href; } $('<form>', { "html": '<input type="hidden" name="lang" value="' + $('select.languagechanger').find('option:selected').val() + '" />', "action": target, "method": 'post' }).appendTo(document.body).append($("input[name='YII_CSRF_TOKEN']")).submit(); } }else{ $('select.languagechanger').closest('form').find("[name='lang']").not($('select.languagechanger')).remove();// Remove other lang $('#changelangbtn').click(); } }); });
And, this to template.css:
Code:
.language-wrapper select { display: none; } .lang-buttons-wrapper { text-align: center; } .lang-buttons-wrapper button { margin: 0 5px; }
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.