How to localize the web part title in Sharepoint Page using Javascript from Client Side?

I had create a post on how to create a web part page with tab navigation. you can find it here

How to create a SharePoint page to support Tab navigation within the Web Part page with JQuery Tabs Widget?

 since this page only have english version only, and I did not have control over the resource. then i will be able to run any powershell script and create any resource file to setup the localization on the server side.

but there is still a way to work aroud for it. I will show you how to use the javascript to translate those web part title and tab header.

1. use Inspect Element from IE Popup Menu to load DOM explorer,  to find web part ID or web 
part title ID.



2. setup an array to host those translation.

var localizedStrings={
        WebPartCaptionWPQ2:{
            '1033':'Content Webpart One',
            '1036':'Content Webpart One French'
        },
        WebPartCaptionWPQ3:{
            '1033':'Content Webpart two',
            '1036':'Content Webpart two French'
        },
        SalesDashboard:{
            '1033':'Sales Dashboard',
            '1036':'Sales Dashboard French'
        },
          SalesReport:{
            '1033':'Sales Report',
            '1036':'Sales Report French'
        }
    }


3. implement a document.ready event to handle finding those control and replace text with language specific words.

the first two lines will help to identify the web part control title by web part ID. that i had commented out. the next two line will directly use the WebPartWP_ChromeTitle to find the control and replace its text with language specific translation.


 $(document).ready(function () {
    if (g_wsaLCID == 1036) {
                // $("#WebPartCaptionWPQ2").prev().text(localizedStrings['WebPartCaptionWPQ2'][g_wsaLCID]);
                // $("#WebPartCaptionWPQ3").prev().text(localizedStrings['WebPartCaptionWPQ3'][g_wsaLCID]);
                $('a[href="#Sales-Dasboard"]').text(localizedStrings['SalesDashboard'][g_wsaLCID]);
                $('a[href="#Sales-Report"]').text(localizedStrings['SalesReport'][g_wsaLCID]);
                $("#WebPartWPQ2_ChromeTitle").text(localizedStrings['WebPartCaptionWPQ2'][g_wsaLCID]);
                $("#WebPartWPQ3_ChromeTitle").text(localizedStrings['WebPartCaptionWPQ3'][g_wsaLCID]);
            }
 });


4. Create a javascript file name LocalizeJS.js to save all the codes from above.

5. upload the files to shaepoint library.

6. add a script editor web part to the sharepoint web part page.

then I have my french version page after i change my IE browser setting to French.