Managing a multilingual website without relying on a database or backend code: Is it possible?

I am in need of translating my small website, which consists of 8-10 pages, into Spanish. Unfortunately, I do not have the resources to work with a backend developer to implement any database or variables. Therefore, I am attempting to tackle this task using solely CSS/jQuery.

While I understand how to switch elements on a page between English and Spanish, my main concern is ensuring that the language remains consistent as visitors navigate to different pages. Is there a way to accomplish this seamlessly?

Although the pages are in .aspx format, I lack access to the code behind and have minimal knowledge of working with .NET. Normally, I would not take on such a project, but due to its limited scale and text content, I am willing to give it a try.

If anyone could offer guidance on how to proceed in the right direction, I would greatly appreciate it.

jqueryhtmlcss

Answer №1

Storing the selected language choice in a cookie is a viable option.

This function should do the trick:

function setLanguage(lang) {
    var x = 0;
    setCookie('lang', lang, 30, "/");
    location.reload(false);
}

function setCookie(name, value, expiration, path, domain, security)
{
// time in milliseconds
var today = new Date();
today.setTime(today.getTime());

if (expiration)
{
    expiration = expiration * 60 * 60 * 24;
}
var expireDate = new Date(today.getTime() + (expiration));

document.cookie = name + "=" + escape(value) +
((expiration) ? ";expires=" + expireDate.toGMTString() : "") +
((path) ? ";path=" + path : "") +
((domain) ? ";domain=" + domain : "") +
((security) ? ";secure" : "");
}

Answer №2

Have you heard about Sunday Morning? This tool uses Google Translate powered by Jquery, making it easy, fast, and doesn't need a database.

Check it out here!

Answer №3

If you want to achieve this effect using only CSS, you can follow these steps:

<div class="text-1"></div>

In your CSS file, add the following code:

.text-1:after {
  content: "Hello World"
}

You will need a separate CSS file for each language you want to display.

You can see a demo of this technique here.

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

Encountering XMLHttpRequest errors when trying to make an AJAX POST request

I'm encountering an issue with a modal containing a form for submitting emails. Despite setting up the ajax post as usual, the submission is failing consistently. The console displays the following two errors: Setting XMLHttpRequest.withCredent ...

javascriptjqueryhtmlajaxasp.net-mvc-5

Stop on mouse over using jQuery

On my website, I have implemented a carousel. Check it out at . I recently modified the carousel to navigate to a specific slide after 1 second of hovering over the corresponding tab. However, now I want the slider to pause on that particular slide instea ...

jqueryhoverslidergallery

Display the iframe website without it being visible to the user

Is there a way to load a separate website, such as a Wikipedia article, in an iframe on a webpage without freezing up the whole page when it becomes visible after clicking a "show" button? And if not, how can we display a loading gif while the iframe is ...

javascriptjqueryhtml

Get the script elements from an HTML string

Or any other elements :) for example. <header> <h1>Welcome</h1> <p>Lorem ipsum...</p> </header> <main> ... <img src="image.jpg" alt="Image"> </main ...

javascriptjquerystring

modify pseudo element's style in Angular based on a particular condition

I am trying to change the style of :before based on a condition. I attempted to implement the solution provided at , but it did not work as expected. Here is my code: .sender:before { content: ""; width: 0px; ...

htmlangularsass

Unable to retrieve data for the initial keystroke in jQuery autocomplete

I'm currently working on setting up jQuery autocomplete with a specific method involving a separate source function and an intermediary variable for data storage. My main goal right now is to successfully pass the data to the source part of the autoCo ...

javascriptjqueryajaxjquery-autocomplete

Invalid Operation: The value 'undefined' cannot be used as a function

I've been working on implementing a date picker feature for an HTML form. In the HTML header, I have included the following script: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> The script I&apo ...

javascriptjqueryhtml

HTML5 database error: Uncaught TypeError due to illegal invocation

When I test the code below in Chrome, I encounter an error: var db = openDatabase('foo', 1, 'foo', 1111); var sql = function(callback){ db.transaction(function(tx){ callback(tx.executeSql); }); }; sql(function(query){ ...

javascriptdatabasehtmlgoogle-chrome

Update the User Profile using Ajax

As a newcomer to CodeIgniter, I'm seeking some assistance :). After following several tutorials, I successfully created CRUD functions with AJAX. I can Edit, Add new, and Delete all users displayed on my page. However, I now face the challenge of allo ...

phpjqueryajaxcodeigniter

Arrange objects in dropdown menu to line up

I'm currently working on a dropdown menu and I have a specific requirement – the menu should always be split into two columns and be able to span multiple lines. However, I've encountered an issue where the columns are not aligned properly, cau ...

htmlcssangulartypescripttwitter-bootstrap

jQuery can be used to mask phone numbers with three input fields

I am looking to implement phone field masking using jQuery or JavaScript. I have tried a few jQuery mask plugins, but I am still searching for a better solution. Specifically, I need three input fields for the USA (it is a requirement). The inputs needed ...

javascriptjqueryhtmlinputmasking

"The useTheme hook is not functioning as expected when used within a className

I've defined a custom theme in my App.js file like this: let theme = createTheme({ palette: { bgCells: { textAlign: 'right', color: '#8ccadf', backgroundColor: '#eef7ff' } } }); In another c ...

cssreactjsreact-hooksmaterial-ui

If additional content has been included in the `div`, be sure to scroll all the way down to view it

I have a div that needs to automatically scroll to the bottom when new content is added. This is a common feature in chat applications where the user wants to see the latest messages without having to manually scroll down each time. How can I achieve this ...

javascripthtmlcss

updating a hyperlink attribute dynamically using jQuery ajax

Currently, I have a URL that I am passing to jQuery AJAX. <a href="/wishlist.php?sku=C5&amp;action=move&amp;qty=1" class="buttoncart black">Move To Wishlist</a>; However, when the request reaches the AJAX function, I want to change th ...

ajaxjquery

Setting up web SMS configuration for email integration

I have a code for sending web mails and SMS notifications that is functioning correctly. However, I want to receive SMS notifications only when users select the “A” value from the servicerequired drop-down menu and do not wish to receive SMS between 8 ...

phphtmlsms-gateway

CSS3 flip effect on hover and click causing issues

I have successfully implemented a card flip effect using CSS3. The card is flipped using jQuery and CSS CSS .flipped { -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transfor ...

jqueryhtmlcsscss-transitions

There is a random section that keeps crashing on the website

I have encountered a bug on my one-page Bootstrap template website. One of the sections is causing issues after multiple page refreshes. Despite checking the console for errors, I am unable to identify the source of the problem. Here is the HTML code for ...

javascripthtmltwitter-bootstrap

Diagonal-left ending div in cascading style sheets

Looking to achieve a div with a diagonal side similar to the image in the link below: https://i.sstatic.net/u9grW.png I'm trying to figure out the best way to do this. One idea is to position 2 divs closely together and rotate one of them. Alternativ ...

htmlcss

Having trouble getting the loading div to display while loading data with ajax using methods like show/hide or block/none

While attempting to display a loading screen during an ajax request that retrieves records from a database, I encountered issues with both jquery show() and hide() functions as well as using javascript element.style.display="Block". function AdvanceSearc ...

jqueryajaxasp.net-mvc

Using Ajax.BeginForm with new AjaxOptions to handle exceptions

There are two standout options here: OnSuccess and OnFailure. These options allow me to execute functions depending on whether the page update is successful or fails. For instance, I have an Action that triggers an email send operation with this code snipp ...

jqueryajaxasp.net-mvcexception