jDiction Forum
English => General Questions => Topic started by: gerardtolosa on October 30, 2013, 06:26:29 pm
-
Is there a way to present the different languages in a drop down menu.
If someone has developed this option could you share?
Thanks,
-
you can create a copy of
/modules/mod_jdlanguageswitcher/tmpl/default.php
to
/templates/<yourtemplate>/html/mod_jdlanguageswitcher/default.php
and change the html code.
-
I'm trying to get the languages in a menu too, but I do not understand what I should change in which html document. Could you please explain in more detail what I need to change? Thank you!
-
Its not possible to get the language into a menu, the only thing you can do is to add a menuitem of the type externl link and as url /en for english or /de for german if you use SEF.
-
Just wanted to document a quick method I used to create a drop down menu effect for the jdlanguage module in case anyone else was looking to do the same.
Notes:
My 1st attempt of a technical write up, so apologies if its hard to follow.
I'll try differentiate between whats needed for it to work, and what I did specifically for our version.
Positioning is also important to create the effect, so it helps if the module position your using to display jdlanguage in is position:relative, so that you can use absolute positions within this container.
Lastly, I used JQuery for the drop down functionality.
Step One: Set-up
For this to work you need to set the jdlanguage modules Style (under basic options) to "Text-only".
--> I also set Show Current Language to "No" so I could display current language as the drop down menu text (step Four(B)).
Step Two: Create Drop Down List
Add following CSS to display the languages vertically
div.languageswitcher a {
display:block;
text-decoration: none; /* this is personal preference */
}
Step Three : Style Drop Down List
Add the following to modify look of drop down.
div.languageswitcher {
display:none;
position:absolute;
z-index: 999999; /* my menu was displaying under a banner */
width:120px; /* resize, so your longest language fits in without linebreak */
top:20px; /* this is the height of the drop down menu button we create in step four */
/* Personal Styles */
padding: 5px 0px 5px 0px;
background-color: #ffffff;
border-left: thin solid #ccc;
border-right: thin solid #ccc;
border-bottom: thin solid #ccc;
text-align:center;
border-radius:0px 0px 5px 5px;
}
Step Four(A): Create Drop Down Button. (simply)
Create a custom HTML module within the same module position as the jdlanguage module. with the following.
<div id="languagemenu">Select Language ▼</div>
Step Four(B): Create Drop Down Button. (with language item)
Create a Flexi Custom Code module (or your preference for adding php) within the same position as the jdlanguage module with the following.
--> Couldn't find if there is a simply $lang->getNative(); that could simplify this step.
<div id="languagemenu">
<?php
$lang = JFactory::getLanguage();
$tag = $lang->getTag();
if ($tag == 'en-GB') {
echo "English (UK) ▼";
}
if ($tag == 'en-US') {
echo "English (US) ▼";
}
if ($tag == 'de-DE') {
echo "Deutch ▼";
}
if ($tag == 'es-ES') {
echo "Español ▼";
}
if ($tag == 'fr-FR') {
echo "Français ▼";
}
if ($tag == 'fr-CA') {
echo "Français canadien ▼";
}
if ($tag == 'it-IT') {
echo "Italiano ▼";
}
?>
</div>http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-modules/15251 (http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-modules/15251)
Step Five: Styling Drop Down button
Once again you can style to taste. But for the effect, the #languagemenu and .languageswitcher widths needs to match (note: including padding). Also the .languageswitcher top: needs to match the #languagemenu height, so it drops down from under the button.
div#languagemenu {
width: 120px; /* match .languageswitcher width */
/* Personal Styles */
border-radius: 5px;
border: 1px solid #CCC;
height: 20px;
background: #FFF;
text-align:center;
padding: 4px 0px 0px 0px;
}
div#languagemenu:hover {
cursor:pointer;
}
Step Six: Give it life!
To have the drop down work, now you just need to add some jquery to your .js file.
$(document).ready(function() {
$('#languagemenu').click(function(){
$('.languageswitcher').slideDown();
});
$('.languageswitcher').mouseleave(function(){
$('.languageswitcher').slideUp();
});
$('.languageswitcher a').click(function(){
$('.languageswitcher').hide();
});
Hope this helps anyone else wanting to get a drop down menu for this great plugin. This will auto populate as you add languages as it IS the core jdiction module restyled, with the exception of needing to updated step four(B) if you use it.
Attached are images of the final effect.
-
Thx for you good post.
echo $language->title_native;
Will output the native title.
-
I tried using this $language->title_native in place of the code I am currently using, but it kept returning nothing. Are there any prerequisites for it to work?
-
Hi, I just wanted to ask,
In joomla 3.5.1 I tried to make the drop down menu as you describe but I can't.
There is something I miss with the last part (.js)
In what exact file I must include the code? And in what part of the file?
Also I think there is a mistake in the code with an open "{" that doesn't close.
Please don't get me wrong, I am not judging you, I am novice and just want to make it work.
Thanks,
$(document).ready(function() {
$('#languagemenu').click(function(){
$('.languageswitcher').slideDown();
});
$('.languageswitcher').mouseleave(function(){
$('.languageswitcher').slideUp();
});
$('.languageswitcher a').click(function(){
$('.languageswitcher').hide();
});