Language can be changed for static elements

public/rgc_website/index.html

@@ -29,11 +29,11 @@
       <div class="container">
         <div class="row">
           <div class="col-sm-8 col-md-7 py-4">
-            <h4 class="text-white">About</h4>
-            <p class="text-white">Details about our group to be inserted here... </p>
+            <h4 id="rgc_about" class="text-white">About</h4>
+            <p id="rgc_group" class="text-white">Details about our group to be inserted here... </p>
           </div>
           <div class="col-sm-4 offset-md-1 py-4">
-            <h4 class="text-white">Contact</h4>
+            <h4 id="rgc_contact" class="text-white">Contact</h4>
             <ul class="list-unstyled">
               <!-- <li><a href="#" class="text-white">Follow on Twitter</a></li> -->
               <!-- <li><a href="#" class="text-white">Like on Facebook</a></li> -->
@@ -79,8 +79,8 @@
       <div class="container">
         <img src="imgs/database.svg" class="windSVG" width="100px" alt="wind">
         <h1> <b>3D Urban Analytics Lab </b> <br>@HFT Stuttgart </h1>
-        <p class="lead text-muted"> (or Vote for new group name) <br>A research group introduction here ....</p>
-        <p>The research projects at HFT Stuttgart (University of Applied Sciences Stuttgart).
+        <p id="rgc_introduction" class="lead text-muted"> (or Vote for new group name) <br>A research group introduction here ....</p>
+        <p id="rgc_introduction2" >The research projects at HFT Stuttgart (University of Applied Sciences Stuttgart).</p>
       </div>
     </section>
   <div class="search-wrapper">
@@ -94,13 +94,13 @@
     <div id="album_one" class="album py-5 bg-light topDownPadding">
       <div class="container">
         <div>
-        <h2 ><i class="fas fa-laptop-code"></i> Our Applications</h2>
+        <h2 id="rgc_application" ><i class="fas fa-laptop-code"></i> Our Applications</h2>
         <!-- Searchbar -->
         <!-- start -->
         
         <!-- end -->
         </div>
-        <p class="grey-text w-responsive mx-auto mb-5">Research Short Introduction ....</p><br>
+        <p id="rgc_applicationdesc" class="grey-text w-responsive mx-auto mb-5">Research Short Introduction ....</p><br>
 
         <div id="row_main" class="row">
 
@@ -123,8 +123,8 @@
       </div> -->
       <hr>
       <div class="container">
-        <h2><i class="fas fa-book"></i> Our Publication</h2>
-        <p class="grey-text w-responsive mx-auto mb-5">Our Publication ...</p>
+        <h2 id="rgc_publication"><i class="fas fa-book"></i> Our Publication</h2>
+        <p id="rgc_publicationdesc" class="grey-text w-responsive mx-auto mb-5">Our Publication ...</p>
 
         <!-- <li> Silberer, J., Santhanavanich, T., Müller, P., & Bäumer, T. (2020). 
           Promoting Objective and Subjective Safety for Cyclists in Metropolitan Areas. In Innovations for Metropolitan Areas (pp. 273–284). Springer
@@ -147,9 +147,9 @@
       </div>
       <hr>
       <div class="container">
-        <h2><i class="fas fa-user-friends"></i> Our amazing team</h2>
+        <h2 id="rgc_ourteam"><i class="fas fa-user-friends"></i> Our amazing team</h2>
         <!-- Section description -->
-        <p class="grey-text w-responsive mx-auto mb-5">Team Description ....</p>
+        <p id="rgc_teamdesc" class="grey-text w-responsive mx-auto mb-5">Team Description ....</p>
         <section class="team-section text-center my-5">
 
           <!-- Grid row -->
@@ -261,7 +261,7 @@
   <footer class="text-white">
     <div class="container">
       <p class="float-right">
-        <a href="#">Back to top</a>
+        <a id="rgc_backtotop" href="#">Back to top</a>
       </p>
       <p>&copy; HFT Stuttgart, 2020.</p>
       <a href="https://www.hft-stuttgart.de/impressum" target="_blank">Impressum</a>

public/rgc_website/js/add_content.js

@@ -36,109 +36,5 @@ function addcontent(item){
     '</div>' +
   '</div>'
 
-//   new_row.innerHTML = new_row.innerHTML + '<div class="col-lg-4">' +
-//   '<div class="card mb-4 shadow-sm extension">' +
-//     '<h5>' + item.item.title + ' <span class="lead text-muted"> ' + item.item.project + '</span></h5>' +
-//     '<img class="thumbimg" src="imgs/thumbnails/visionZero.jpeg" alt="">' +
-//     '<div class="card-body">' +
-//       '<p class="card-text-lg small">' +
-//         'The <b>VISION ZERO </b> is an application for safety routing with the' +
-//         'visualization of 3D grid and heatmap. Developed at hackathon event "Neue Wege für die Mobilität in' +
-//         'Augsburg". (24 hours time limited)' +
-//         '<br>' +
-//         '<b><i class="fas fa-user"></i> Contact Person</b>: <a' +
-//           'href="https://www.hft-stuttgart.de/p/thunyathep-santhanavanich"> ' + item.item.author.firstName +
-//           ' ' + item.item.author.lastName + '</a> <br>' +
-//         '<b><i class="fas fa-star"></i> Keywords</b>: ' + item.item.keywords.join(' ') +
-//       '<form action="iStoeckHM.html" class="form-signin" method="GET">' +
-//         '<button type="submit" class="btn btn-sm btn-outline-secondary">Explore</button>' +
-//       '</form>' +
-//       '</p>' +
-//     '</div>' +
-//   '</div>' +
-// '</div>'
-// new_row.innerHTML = new_row.innerHTML + '<div class="col-lg-4">' +
-// '<div class="card mb-4 shadow-sm extension">' +
-//   '<h5>Vision Zero <span class="lead text-muted"> Hackathon</span></h5>' +
-//   '<img class="thumbimg" src="imgs/thumbnails/visionZero.jpeg" alt="">' +
-//   '<div class="card-body">' +
-//     '<p class="card-text-lg small">' +
-//       'The <b>VISION ZERO </b> is an application for safety routing with the' +
-//       'visualization of 3D grid and heatmap. Developed at hackathon event "Neue Wege für die Mobilität in' +
-//       'Augsburg". (24 hours time limited)' +
-//       '<br>' +
-//       '<b><i class="fas fa-user"></i> Contact Person</b>: <a' +
-//         'href="https://www.hft-stuttgart.de/p/thunyathep-santhanavanich">Joe' +
-//         'T.S.</a> <br>' +
-//       '<b><i class="fas fa-star"></i> Keywords</b>: CityGML, 3D GIS, GIS Analyst, Urban Analytics' +
-//     '<form action="iStoeckHM.html" class="form-signin" method="GET">' +
-//       '<button type="submit" class="btn btn-sm btn-outline-secondary">Explore</button>' +
-//     '</form>' +
-//     '</p>' +
-//   '</div>' +
-// '</div>' +
-// '</div>'
-// new_row.innerHTML = new_row.innerHTML + '<div class="col-lg-4">' +
-// '<div class="card mb-4 shadow-sm extension">' +
-//   '<h5>Vision Zero <span class="lead text-muted"> Hackathon</span></h5>' +
-//   '<img class="thumbimg" src="imgs/thumbnails/visionZero.jpeg" alt="">' +
-//   '<div class="card-body">' +
-//     '<p class="card-text-lg small">' +
-//       'The <b>VISION ZERO </b> is an application for safety routing with the' +
-//       'visualization of 3D grid and heatmap. Developed at hackathon event "Neue Wege für die Mobilität in' +
-//       'Augsburg". (24 hours time limited)' +
-//       '<br>' +
-//       '<b><i class="fas fa-user"></i> Contact Person</b>: <a' +
-//         'href="https://www.hft-stuttgart.de/p/thunyathep-santhanavanich">Joe' +
-//         'T.S.</a> <br>' +
-//       '<b><i class="fas fa-star"></i> Keywords</b>: CityGML, 3D GIS, GIS Analyst, Urban Analytics' +
-//     '<form action="iStoeckHM.html" class="form-signin" method="GET">' +
-//       '<button type="submit" class="btn btn-sm btn-outline-secondary">Explore</button>' +
-//     '</form>' +
-//     '</p>' +
-//   '</div>' +
-// '</div>' +
-// '</div>'
-// new_row.innerHTML = new_row.innerHTML + '<div class="col-lg-4">' +
-// '<div class="card mb-4 shadow-sm extension">' +
-//   '<h5>Vision Zero <span class="lead text-muted"> Hackathon</span></h5>' +
-//   '<img class="thumbimg" src="imgs/thumbnails/visionZero.jpeg" alt="">' +
-//   '<div class="card-body">' +
-//     '<p class="card-text-lg small">' +
-//       'The <b>VISION ZERO </b> is an application for safety routing with the' +
-//       'visualization of 3D grid and heatmap. Developed at hackathon event "Neue Wege für die Mobilität in' +
-//       'Augsburg". (24 hours time limited)' +
-//       '<br>' +
-//       '<b><i class="fas fa-user"></i> Contact Person</b>: <a' +
-//         'href="https://www.hft-stuttgart.de/p/thunyathep-santhanavanich">Joe' +
-//         'T.S.</a> <br>' +
-//       '<b><i class="fas fa-star"></i> Keywords</b>: CityGML, 3D GIS, GIS Analyst, Urban Analytics' +
-//     '<form action="iStoeckHM.html" class="form-signin" method="GET">' +
-//       '<button type="submit" class="btn btn-sm btn-outline-secondary">Explore</button>' +
-//     '</form>' +
-//     '</p>' +
-//   '</div>' +
-// '</div>' +
-// '</div>'
-// new_row.innerHTML = new_row.innerHTML + '<div class="col-lg-4">' +
-// '<div class="card mb-4 shadow-sm extension">' +
-//   '<h5>Vision Zero <span class="lead text-muted"> Hackathon</span></h5>' +
-//   '<img class="thumbimg" src="imgs/thumbnails/visionZero.jpeg" alt="">' +
-//   '<div class="card-body">' +
-//     '<p class="card-text-lg small">' +
-//       'The <b>VISION ZERO </b> is an application for safety routing with the' +
-//       'visualization of 3D grid and heatmap. Developed at hackathon event "Neue Wege für die Mobilität in' +
-//       'Augsburg". (24 hours time limited)' +
-//       '<br>' +
-//       '<b><i class="fas fa-user"></i> Contact Person</b>: <a' +
-//         'href="https://www.hft-stuttgart.de/p/thunyathep-santhanavanich">Joe' +
-//         'T.S.</a> <br>' +
-//       '<b><i class="fas fa-star"></i> Keywords</b>: CityGML, 3D GIS, GIS Analyst, Urban Analytics' +
-//     '<form action="iStoeckHM.html" class="form-signin" method="GET">' +
-//       '<button type="submit" class="btn btn-sm btn-outline-secondary">Explore</button>' +
-//     '</form>' +
-//     '</p>' +
-//   '</div>' +
-// '</div>' +
-// '</div>'
-}
+}
+
\ No newline at end of file

public/rgc_website/js/language.js

 // placeholder for real language selection
 $('.selectpicker').change(function(){
-    alert($(this).val());
+    language($(this).val());
+    // alert($(this).val());
 })
 
 
+
+function language(lang){
+    //Change the language settings of the general Elements
+    
+    // declare all the fields
+    var rgc_about = document.getElementById("rgc_about")
+    var rgc_group = document.getElementById("rgc_group")
+    var rgc_contact = document.getElementById("rgc_contact")
+    var rgc_introduction = document.getElementById("rgc_introduction")
+    var rgc_introduction2 = document.getElementById("rgc_introduction2")
+    var rgc_application = document.getElementById("rgc_application")
+    var rgc_applicationdesc = document.getElementById("rgc_applicationdesc")
+    var rgc_publication = document.getElementById("rgc_publication")
+    var rgc_publicationdesc = document.getElementById("rgc_publicationdesc")
+    var rgc_ourteam = document.getElementById("rgc_ourteam")
+    var rgc_teamdesc = document.getElementById("rgc_teamdesc")
+    var rgc_backtotop = document.getElementById("rgc_backtotop")
+    if (lang == "English"){
+        rgc_about.innerHTML = "About"
+        rgc_group.innerHTML = "Details about our group to be inserted here... "
+        rgc_contact.innerHTML = "Contact"
+        rgc_introduction.innerHTML =" (or Vote for new group name) <br>A research group introduction here ...."
+        rgc_introduction2.innerHTML = "The research projects at HFT Stuttgart (University of Applied Sciences Stuttgart)."
+        rgc_application.innerHTML = "<i class='fas fa-laptop-code'></i> Our Applications"
+        rgc_applicationdesc.innerHTML = "Research Short Introduction ...."
+        rgc_publication.innerHTML = "<i class='fas fa-book'></i> Our Publication"
+        rgc_publicationdesc.innerHTML = "Our Publication ..."
+        rgc_ourteam.innerHTML = "<i class='fas fa-user-friends'></i> Our amazing team"
+        rgc_teamdesc.innerHTML = "Team Description ...."
+        rgc_backtotop.innerHTML = "Back to top"
+    } else if (lang == "Deutsch"){
+        rgc_about.innerHTML = "About"
+        rgc_group.innerHTML = "Details über unsere Gruppe... "
+        rgc_contact.innerHTML = "Kontakt"
+        rgc_introduction.innerHTML =" (oder Stimme für einen Gruppennamen) <br>Eine Vorstellung der Forschungsgruppe folgt hier ...."
+        rgc_introduction2.innerHTML = "Die Forschungsprojekte an der HFT Stuttgart (Hochschule für Technik Stuttgart)."
+        rgc_application.innerHTML = "<i class='fas fa-laptop-code'></i> Unsere Anwendungen"
+        rgc_applicationdesc.innerHTML = "Forschung Kurzvorstellung ...."
+        rgc_publication.innerHTML = "<i class='fas fa-book'></i> Unsere Veröffentlichungen"
+        rgc_publicationdesc.innerHTML = "Unsere Veröffentlichungen ..."
+        rgc_ourteam.innerHTML = "<i class='fas fa-user-friends'></i> Unser Team"
+        rgc_teamdesc.innerHTML = "Team Beschreibung ...."
+        rgc_backtotop.innerHTML = "Zurück an den Anfang"
+    
+    }
+  }
\ No newline at end of file