"Internationalization"
Bootstrap 3.3.0 Snippet by whenom

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
.icon-small
{
height:18px;
margin:0;
padding:0;
}
.icon-medium
{
height:22px;
margin:0;
padding:0;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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") {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard PRO

Questions / Comments:

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

CoolMagma () - 6 years ago - Reply 0