I'm trying to make a Tumblr blog page with multiple languages selection, that will load markup from a file and replace the tagged elements, like this:
<p id="line1">Text in English</p>
user presses "RU" button, browser loads the html file with using AJAX, replaces p id="line1" with the one from the file, browser shows paragraph in second language
I really cannot find any normal solution, since I don't know JavaScript (yes), but I know this is really easy, I really want the AJAX way, since it will be easier for me to translate.
My current code:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="author" content="yvemiro">
<meta name="description" content="yve miro funny jokes satire internet memes est. 2015">
<link rel="stylesheet" href="http://static.tumblr.com/zicio7x/pI5nxaau9/font.css" type="text/css">
<link rel="stylesheet" href="font.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$("#rusbutton").click(function () {
var language = 'russian';
$.ajax({
url: 'https://psv4.vk.me/c610917/u284972650/docs/267ee3075ebc/langs.xml'
success: function(xml) {
$(xml).find('translation').each(function(){
var id = $(this).attr('id');
var text = $(this).find(language).text();
$("." + id).html(text);
});
}
});
});
</script>
<style>
body { color: #0a1713; font-family: 'Clear Sans', Verdana, sans-serif; margin: 0; background-color: #fdfffd; }
em { font-style: italic; }
strong { font-weight: bold; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: normal; }
#navbar {
width: 100%;
line-height: 45px;
margin: 0;
color: rgb(139, 141, 150);
font-size: 15px;
}
#navbarul {
list-style-type: none;
padding: 0;
margin: 0;
margin-left: 16px;
display: inline-block;
}
#navbarul li {
display: inline;
margin-right: 13px;
}
#navbarul li a {
text-decoration: none;
color: inherit;
}
#navbar ul a:hover {
color: rgb(120, 121, 130);
}
#cont {
padding: 0;
text-align: center;
min-width: 400px;
max-width: 700px;
margin: 20px auto;
padding: 0;
}
#yvelogo {
height: 19px;
width: 15px;
vertical-align: -4px;
}
a #yvelogo {
border: 0;
}
#lang {
float: right;
list-style-type: none;
padding: 0;
margin: 12px 16px 0 0;
line-height: initial;
}
#lang li {
margin-bottom: 12px;
}
.reblicon {
height: 17px;
width: 16px;
display: inline-block;
vertical-align: middle;
}
#pagination {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
color: gray;
}
#pagination li {
display: inline-block;
margin-right: 10px;
}
#status {
font-style: italic;
color: gray;
background-color: #eeeeee;
padding: 4px 8px;
border-radius: 5px;
}
#line {
margin-right: 15px;
}
#mainlinks {
list-style-type: none;
padding: 0;
margin: 0;
}
#mainlinks li {
display: inline;
padding: 0;
margin: 0 20px;
}
</style>
</head>
<body>
<nav>
<div id="navbar">
<ul id="navbarul">
<li><a href="#"><img id="yvelogo" alt="yve miro" src="http://static.tumblr.com/zicio7x/Btdnxoyc0/home.png"></a></li>
</ul>
<ul id="lang"><li><strong>EN</strong></li><li><button id="rusbutton">RU</button></li><li>LT</li><li>FR</li></ul>
</div>
</nav>
<div id="cont">
<img src="http://static.tumblr.com/zicio7x/L8Pnxoyp5/vuvuzela.jpg"><br><br>
<img id="line" height="27px" width="40px" src="http://static.tumblr.com/zicio7x/xo2nxoye9/line.png" /><span id="status">„Fenmisimn is good”</span>
<br><br>
<h2 id="title1">SHUT YOUR MOUTH YVE'S SPEAKIN'</h2>
<p id="line1">welcome to my funny satirical™ page</p><br>
<ul id="mainlinks">
<li><a href="#">Blog</a></li>
<li><a href="#">Stuff</a></li>
<li><a href="#">Me</a></li>
<li><a href="#">Ask</a></li>
<li><a href="#">Archive</a></li><br><br>
<li><a href="#">Twitter</a></li>
<li><a href="#">YouTube</a></li>
</ul>
</div>
</body>
</html>
And replacing images, too
