"Internationalization"
Bootstrap 3.3.0 Snippet by whenom

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div id="navbar" class="navbar-collapse collapse navbar-right"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><img id="imgNavSel" src="" alt="..." class="img-thumbnail icon-small">  <span id="lanNavSel">ITA</span> <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a id="navIta" href="#" class="language"> <img id="imgNavIta" src="" alt="..." class="img-thumbnail icon-small">  <span id="lanNavIta">Italiano</span></a></li> <li><a id="navDeu" href="#" class="language"> <img id="imgNavDeu" src="" alt="..." class="img-thumbnail icon-small">  <span id="lanNavDeu">Deutsch</span></a></li> <li><a id="navFra" href="#" class="language"><img id="imgNavFra" src="" alt="..." class="img-thumbnail icon-small">  <span id="lanNavFra">Francais</span></a></li> <li><a id="navEng" href="#" class="language"><img id="imgNavEng" src="" alt="..." class="img-thumbnail icon-small">  <span id="lanNavEng">English</span></a></li> </ul> </li> </ul> </div> <!--/.navbar-collapse --> </div> </nav> <!-- Main jumbotron for a primary marketing message or call to action --> <div class="jumbotron"> <div class="container"> <h1>Internationalization </h1> <h3>In the navbar using ul dropdown<h3> <h3>In the page using button group<h3> <p> <div class="btn-group"> <button type="button" class="btn btn-default btn-lg"> <img id="imgBtnSel" src="" alt="..." class="img-thumbnail icon-medium">   <span id="lanBtnSel">ITA</span></button> <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a id="btnIta" href="#" class="language"> <img id="imgBtnIta" src="" alt="..." class="img-thumbnail icon-small">  <span id="lanBtnlIta">Italiano</span></a></li> <li><a id="btnDeu" href="#" class="language"> <img id="imgBtnDeu" src="" alt="..." class="img-thumbnail icon-small">  <span id="lanBtnDeu">Deutsch</span></a></li> <li><a id="btnFra" href="#" class="language"><img id="imgBtnFra" src="" alt="..." class="img-thumbnail icon-small">  <span id="lanBtnFra">Francais</span></a></li> <li><a id="btnEng" href="#" class="language"><img id="imgBtnEng" src="" alt="..." class="img-thumbnail icon-small">  <span id="lanBtnEng">English</span></a></li> </ul> </div> </p> </div> </div> </body>
.icon-small { height:18px; margin:0; padding:0; } .icon-medium { height:22px; margin:0; padding:0; }
$(document).ready(function(){ var itaImgLink = "http://www.roemheld.de/IT/Data/Images/Address/Italien.gif"; var engImgLink = "http://www.roemheld.de/IT/Data/Images/Address/Grossbritanien.gif"; var deuImgLink = "http://www.roemheld.de/IT/Data/Images/Address/Deutschland.gif"; var fraImgLink = "http://www.roemheld.de/IT/Data/Images/Address/Frankreich.gif"; var imgBtnSel = $('#imgBtnSel'); var imgBtnIta = $('#imgBtnIta'); var imgBtnEng = $('#imgBtnEng'); var imgBtnDeu = $('#imgBtnDeu'); var imgBtnFra = $('#imgBtnFra'); var imgNavSel = $('#imgNavSel'); var imgNavIta = $('#imgNavIta'); var imgNavEng = $('#imgNavEng'); var imgNavDeu = $('#imgNavDeu'); var imgNavFra = $('#imgNavFra'); var spanNavSel = $('#lanNavSel'); var spanBtnSel = $('#lanBtnSel'); imgBtnSel.attr("src",itaImgLink); imgBtnIta.attr("src",itaImgLink); imgBtnEng.attr("src",engImgLink); imgBtnDeu.attr("src",deuImgLink); imgBtnFra.attr("src",fraImgLink); imgNavSel.attr("src",itaImgLink); imgNavIta.attr("src",itaImgLink); imgNavEng.attr("src",engImgLink); imgNavDeu.attr("src",deuImgLink); imgNavFra.attr("src",fraImgLink); $( ".language" ).on( "click", function( event ) { var currentId = $(this).attr('id'); if(currentId == "navIta") { imgNavSel.attr("src",itaImgLink); spanNavSel.text("ITA"); } else if (currentId == "navEng") { imgNavSel.attr("src",engImgLink); spanNavSel.text("ENG"); } else if (currentId == "navDeu") { imgNavSel.attr("src",deuImgLink); spanNavSel.text("DEU"); } else if (currentId == "navFra") { imgNavSel.attr("src",fraImgLink); spanNavSel.text("FRA"); } if(currentId == "btnIta") { imgBtnSel.attr("src",itaImgLink); spanBtnSel.text("ITA"); } else if (currentId == "btnEng") { imgBtnSel.attr("src",engImgLink); spanBtnSel.text("ENG"); } else if (currentId == "btnDeu") { imgBtnSel.attr("src",deuImgLink); spanBtnSel.text("DEU"); } else if (currentId == "btnFra") { imgBtnSel.attr("src",fraImgLink); spanBtnSel.text("FRA"); } }); });

Related: See More


Questions / Comments:

It just does not work: changing ENG / FRA / ITA nothing happens. I try with different browsers.

CoolMagma () - 10 months ago - Reply 0