I designed three interactive buttons that allow users to change the language of the website with a simple click. While my JavaScript code functions perfectly on local host, it seems to encounter issues when deployed

For those interested, the live server can be accessed at .

After creating 3 buttons that change the language of the website when clicked, the issue arose where the JavaScript code worked perfectly on localhost but failed to function properly on the online server.

<head id="Head1">
    <title>Google Translation</title>
<style>

.margin{
    margin: 40px 0;
}

.buttons{
    display: flex;
}

.button{
    margin: 1em;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid black;
    background-color:#232B38;

}
.button{
    background-color: #232B38;
    padding: 1em;
}
.buttons li{
    list-style: none;
}
.button {
    color: #FFFFFF;
}
.button {
    text-decoration: none;
}
.button:hover{
    background-color: #FFFFFF;
    transition: 0.5s ease-in-out;
}
.button:hover{
    color: #232B38;
    transition: 0.5s ease-in-out;
}
.button span{
    font-size: 1.2rem;
}
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="google_translate_element" style="display: none">
    </div>
    <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({ pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false }, 'google_translate_element');
        }
    </script>
    <script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
        type="text/javascript"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        function translateLanguage(lang) {

            var $frame = $('.goog-te-menu-frame:first');
            if (!$frame.size()) {
                alert("Error: Could not find Google translate frame.");
                return false;
            }
            $frame.contents().find('.goog-te-menu2-item span.text:contains(' + lang + ')').get(0).click();
            return false;
        }
    </script>
    <div class="margin">
    <ul class="buttons">

        <li><a class="button" href="javascript:;" id="Chinese" onclick="translateLanguage(this.id);"><span> Chinese</span></a> </li></button>
        
        <li><a class="button" href="javascript:;" id="Korean" onclick="translateLanguage(this.id);"><span> Korean</span></a> </li></button>
        
        <li><a class="button" href="javascript:;" id="Japanese" onclick="translateLanguage(this.id);"><span> Japanese</span></a> </li></button>
    </ul>
</div>
    <div>
        Hello
    </div>
    </form>
</body>
</html>

Answer №1

Having an SSL certificate for your website ensures that all assets must also be from a secure location. This includes third-party libraries like jQuery.

If the resource is available through https, such as jQuery, simply prepend https to the source URL for it to function correctly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigating a Mesh in 3D Space using three.js, Camera Movement, and physi.js

I am attempting to manipulate an object in Three.js using Physi.js. The camera is linked to the moving mesh, and I am moving it using .setLinearVelocity(); Additionally, I rotate it using .setAngularVelocity(); However, the issue I am facing is that whil ...

Using three.js to create a rotating analog clock in Javascript

I currently have a traditional clock displayed in my setting that I want to synchronize with the current time. I am able to keep the clock running by calculating each hand's rotation every second, but I am encountering peculiar issues with the minute ...

Twitter Bootstrap 3.3.5 navigation menu with a drop-down feature aligned to the right

I've been attempting to position the drop-down menu all the way to the right, following the search input field and submit button. I've tried using pull-right and navbar-right classes without success. Is there a method to accomplish this? <na ...

Comparison of Web Development Techniques: localStorage versus Cached HTTP

Imagine a scenario where there is a web server responding to a GET request by sending a .json file. The response instructs the browser to cache it for a period of 5 years. Furthermore, picture a webpage that initiates this GET request for the JSON data du ...

What exactly does the <cbn-root> HTML element signify, and how can it be parsed using Java programming language?

I attempted to develop a Java program to monitor the availability of reserved spots on this website: However, when I examine the page source using Chrome or Edge, only <cbn-root></cbn-root> is displayed in the body section. Yet, utilizing Chro ...

Clicking on the accordion twice does not alter the position of the arrow

I have implemented an accordion using "up" and "down" arrows. It works well, but when I click on the panel title again, the arrow does not change direction. Here is the issue: In my scenario, I have used "A" and "B" instead of the arrows. When the page l ...

Is it possible to alter the appearance of my menu when clicked on?

Is there a way to update the appearance of an active menu or submenu that is selected by the user? I would like the chosen submenu and its parent menu to have a distinct style once clicked (similar to a hover effect, but permanent). /*jQuery time*/ $(do ...

hide input type with minimal display

Can someone help me find the less equivalent to this css code snippet? I'm not familiar with less and this code is part of a larger global css file that includes generated code from all less files. input[type="checkbox"] { display: none; } Any a ...

Warning: Neglecting to handle promise rejections is now considered outdated and discouraged

I encountered this issue with my code and I'm unsure how to resolve it. DeprecationWarning: Unhandled promise rejections are deprecated. In the future, unhandled promise rejections will terminate the Node.js process with a non-zero exit code. This ...

Lightbox.options does not exist as a function within the lightbox plugin

I recently incorporated a lightbox plugin into my website, which can be found at the following link: For displaying items on the page, I am using markup similar to this example: <a href="images/image-2.jpg" data-lightbox="my-image">Image #2</a&g ...

Blending conditional and non-conditional styles in VueJS

Is it possible to set a class in Vue based on the value of a parameter and conditionally add another class if that parameter meets a certain condition? Can these two functionalities be combined into one class assignment? <button :class="'btn btn-p ...

Adjust the positioning of elements within a expanded and toggled Bootstrap navbar

Seeking assistance with a responsive Bootstrap navbar design. When the navbar collapses, the "logout" button is not aligning properly. Need help to keep it in the top row on the right side next to the toggler icon or underneath the other items on the right ...

Using JQuery Ajax to send a form and receive an XML response

My form submits crossdomain, and the resulting page returns XML data in this format: <response> <result>12</result> <message>Invalid parameter.</message> <error><code>0</code> <desc>Parameter[first_nam ...

Stop the event propagation when the back button is clicked

While utilizing ons-navigator, I am looking to customize the function of a particular element at a certain stage. Employing the onClick handler has allowed me to successfully trigger this function. However, upon exiting the onClick handler, the navigator ...

Vue app: ESLint throwing error for undefined global variable in component during npm run serve

In my main.js file, I am initializing a new Vue instance on the window object: window.todoEventBus = new Vue() Within my components, I am attempting to access this global todoEventBus object like so: created() { todoEventBus.$on('pluralise&apos ...

Error Detected: the C# script is not compatible with Javascript and is causing

I am facing an issue where I can successfully send information from the database, but I am unable to load the table on the page. When I check the data received with an alert, it appears to be in JSON format, but it still displays the wrong image on the web ...

What is the optimal HTML tag for showcasing chat text conversations?

To create a text window with fixed width and length that automatically wraps long texts without a horizontal scroll bar but with a vertical one, you can use HTML and CSS. The preview window on SO's ask question page is a good example of this. It is si ...

Bring in an HTML page into a DIV element by utilizing .load with jQuery

I have a PHP function that generates and returns HTML content, and I want to display that content in a DIV when the page loads. Currently, I am attempting to do this by: <div id="myModal" class="reveal-modal" title="El Farol" data-animation="fade"> ...

Tips for calculating the difference between timestamps and incorporating it into the response using Mongoose

In my attendance model, there is a reference to the class model. The response I receive contains two createdAt dates. const attendanceInfo = await Attendance.find({ student: studentId, }) .populate('class', 'createdAt'); ...

What is the best way to remove quotation marks from a string?

I am struggling to remove any quotes (") within <a href> and </a> tags when manipulating a string. I have tried various methods without success. The string resembles HTML but is actually in string form, and I need to eliminate quotes from eleme ...