I'm learning to code with bootstrap, html, css, js. And I'm wondering if it's possible to modify the language of my webpage with a toggle button? I'm using bootstrap toggle which can set events like this:
<input id="toggle-event" type="checkbox" data-toggle="toggle">
<div id="console-event"></div>
<script>
$(function() {
$('#toggle-event').change(function() {
$('#console-event').html('Toggle: ' + $(this).prop('checked'))
})
})
</script>
And I also saw this thread on stack about changing languageusing element.lang.
And I'm not able to 'mix' the two methods to change the language on deman simply by clicking on the toggle button, and I don't understand why =/
Here's my attempt:
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-toggle.min.js"></script>
<body class="fr" id="test1">
<p lang="en">
Je parle la baguette
</p>
<p lang="fr">
I speak the baguette
</p>
<input id="toggle-event" type="checkbox" checked data-toggle="toggle" data-size="large" data-onstyle="info" data-offstyle="info" data-on="Fr" data-off="En">
<!--<script>
$(function() {
$('#toggle-event').bootstrapToggle({
on: document.body.className= 'fr',
off: document.body.className = 'en'
});
})
</script>-->
<script>
$(function() {
$('#toggle-event').change(function() {
$('#test1').body('Toggle: ' + $(this).prop('checked')).className='en'
});
});
</script>
</body>
CSS:
body.en :lang(en) {
display: none;
}
body.fr :lang(fr){
display: none;
}
/
I'm learning to code with bootstrap, html, css, js. And I'm wondering if it's possible to modify the language of my webpage with a toggle button? I'm using bootstrap toggle which can set events like this:
<input id="toggle-event" type="checkbox" data-toggle="toggle">
<div id="console-event"></div>
<script>
$(function() {
$('#toggle-event').change(function() {
$('#console-event').html('Toggle: ' + $(this).prop('checked'))
})
})
</script>
And I also saw this thread on stack about changing languageusing element.lang.
And I'm not able to 'mix' the two methods to change the language on deman simply by clicking on the toggle button, and I don't understand why =/
Here's my attempt:
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-toggle.min.js"></script>
<body class="fr" id="test1">
<p lang="en">
Je parle la baguette
</p>
<p lang="fr">
I speak the baguette
</p>
<input id="toggle-event" type="checkbox" checked data-toggle="toggle" data-size="large" data-onstyle="info" data-offstyle="info" data-on="Fr" data-off="En">
<!--<script>
$(function() {
$('#toggle-event').bootstrapToggle({
on: document.body.className= 'fr',
off: document.body.className = 'en'
});
})
</script>-->
<script>
$(function() {
$('#toggle-event').change(function() {
$('#test1').body('Toggle: ' + $(this).prop('checked')).className='en'
});
});
</script>
</body>
CSS:
body.en :lang(en) {
display: none;
}
body.fr :lang(fr){
display: none;
}
https://jsfiddle/mttkchfc/1/
Share Improve this question edited Apr 20, 2017 at 8:54 ADyson 62.1k16 gold badges78 silver badges91 bronze badges asked Apr 19, 2017 at 8:23 KapuKapu 411 gold badge1 silver badge6 bronze badges 2- why exactly can't you "mix them"? At least show your attempt to do so, and then maybe we can help fix it. – ADyson Commented Apr 19, 2017 at 8:35
- Here is the piece of my code I use to try this switch button: JSFiddle. – Kapu Commented Apr 20, 2017 at 5:37
1 Answer
Reset to default 5There are a number of issues with your attempt.
The most obvious one is that the languages are the wrong way round. Your "en" section contains French text, and the "fr" one contains English text!
The CSS is also mangled pared to the example you cited - look more carefully at how the :lang part is constructed in the original. In the original example, it is used to hide the opposite language, whereas you're using it to hide the same language. You've got the concept the wrong way round.
Also, this line is total nonsense:
$('#test1').body('Toggle: ' + $(this).prop('checked')).className='en'
- There's no such jQuery function as ".body" - if you look in your browser console (press F12, if you didn't know, to open the Developer Tools in most modern desktop browsers), you'll see this error reported when you click on the toggle.
- "classname" is a native JS property, it doesn't work on jQuery objects, which this would be if it was valid
- If it was possible to use a function like "body" to set the body content, all it would do is set the content of the whole
<body>section to "Toggle: true", or similar. This would be useless. - Even if all of that were to be ignored, and it were capable of setting the class, it only ever sets it to English - you wouldn't be able to change back to French.
The example in the link you gave, using document.body.className works perfectly well. You just need to vary the class name depending on whether the toggle is on or off. I have chosen to store the class names in data- attribute values "true" and "false", which of course correspond to the string representation of a boolean. This means we can neatly use the value of the "checked" property of the toggle to fetch the correct data- attribute value and use that as the new class name, without any tedious if or switch statements:
CSS
body.en :lang(fr) {
display: none;
}
body.fr :lang(en){
display: none;
}
HTML
<body class="en">
<p lang="fr">
Je parle la baguette
</p>
<p lang="en">
I speak the baguette
</p>
<input id="toggle-event" type="checkbox" checked data-toggle="toggle" data-size="large" data-onstyle="info" data-offstyle="info" data-on="English" data-off="French" data-true="en" data-false="fr" >
</body>
JS
$(function() {
$('#toggle-event').change(function() {
document.body.className = $(this).data($(this).prop("checked").toString());
});
});
P.S. Your JSFiddle didn't work at all because you didn't include jQuery, your scripts were in the wrong section, and you have to reference bootstrap etc as external resources - the inline links you provided were pointing to local resources which don't exist in a JSFiddle environment. I've fixed that for you, plus updated it so it works as you intend:
https://jsfiddle/mttkchfc/4/