Closed Thread Icon

Topic awaiting preservation: setting cookies (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=25797" title="Pages that link to Topic awaiting preservation: setting cookies (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: setting cookies <span class="small">(Page 1 of 1)</span>\
 
jive
Paranoid (IV) Inmate

From: Greenville, SC, USA
Insane since: Jan 2002

 posted posted 05-18-2005 04:14

Hello,

I'm a bit rusty on javascript. I have a site coded in both English and Spanish. I would like to give the user the option to select his language preference by clicking a button link. Pressing this button link would send a cookie and based on that cookie, whenever the user logs onto the site again will be the .index page with the language of his/her choice. In other words if English is selected- go to index_english.html if spanish is selected, go to index_spanish.html. can somebody explain how to do this to me?
bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

 posted posted 05-18-2005 06:28

Cookies in Javascript

That's got the functions you need. What I would do is make english your main page and then something like this in the page

<script language ="javascript">
if ( getCookie('language') == 'spanish') document.location.href = 'index_spanish.html'
<script>



.:[ Never resist a perfect moment ]:.
I X I
Paranoid (IV) Inmate

From: beyond the gray sky
Insane since: Apr 2004

 posted posted 05-18-2005 07:16

http://www.netspade.com/articles/javascript/cookies.xml

[edit] got it in while I grabbed a phone call [/edit]



You could stand me up at the gates of hell, but I won't back down (Tom Petty)

(Edited by I X I on 05-18-2005 07:20)
jive
Paranoid (IV) Inmate

From: Greenville, SC, USA
Insane since: Jan 2002

 posted posted 05-19-2005 05:16

well so far I have this:

set cookie:

code:
function setCookie() {

	document.cookie = 'lang=' + escape(language_var);

	var date = new Date();

	date.setTime(date.getTime() + 1000 * 60 * 60 * 24 * 7);

	document.cookie = 'expires=' + date.toUTCString();

}



html:

code:
<button type="button" onclick="setCookie()">foo</button>



getting cookie:

code:
var pairs = document.cookie.split(';');

for (var i = 0; i < pairs.length; i++) {

	var pair = pairs[i].split('=');

	var name = pair[0];

	var value = unescape(pair[1]);

	if (name == 'lang') {

		//load html page

	}

}



The last part gets me (commented)

maybe :

code:
location.href="http://www.url.com/englishindex.html"



something is missing...
jeremysimmons
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Jun 2005

 posted posted 06-10-2005 17:58

Hey jive,
I'm not sure if you got this finished yet, here's my solution to the problem.
This is per your spec, where the entry point is always index.html. You may want to enforce this with a server-side module. Check the referrer for your domain name, and redirect them to this page first if it is not included in the request. Thats a whole other topic though.

This includes the cookies implimentation by travis beckham, a few extra functions of my own making, and your desired page layouts. Copy all the code, and put it in the named files. Let me know if you need more help.

cookies.js

code:
// Author: Travis Beckham | squidfingers.com
var Cookie = {
  set : function(name,value,days)
  {
    if(days)
	{
      var date = new Date();
      date.setTime(date.getTime()+(days*24*60*60*1000));
      var expires = "; expires="+date.toGMTString();
    }
	else
	{
      var expires = "";
    }
    document.cookie = name+"="+value+expires+"; path=/";
  }  ,
  get : function(name)
  {
    name += "=";
    var s = document.cookie.split("; ");
    for(var i = 0; i < s.length; i++)
	{
      var c = s[i];
      if(c.indexOf(name) == 0)
	  {
        return unescape(c.substring(name.length,c.length));
      }
    }
    return null;
  },
  erase : function(name)
  {
    this.set(name,"",-1);
  },
  enabled : function()
  {
    this.set("cookietest","cookietest");
    return this.get("cookietest") != null;
  }
};


language.js

code:
function ChangeLanguage(language, doReload) {
	if(language) {
		Cookie.set('pref_language',language,365);
	}
	if(doReload)
		window.localtion.reload();
}	
function Redirect(language) {
	switch (language)	{
		case 'spanish': 
			window.location = 'index_spanish.html';
			break;
		case 'english':
			window.location = 'index_english.html';
			break;
		default: 
			window.location = 'index_nopref.html';
			break;	
	}
}
function RedirectUser() {
	var where = Cookie.get('pref_language');
	where = where ? where.toString() : 0;	
	alert(where);
	Redirect(where);
}


index.html

code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Index Page</title>
<script language="javascript" type="text/javascript" src="cookies.js"></script>
<script language="javascript" type="text/javascript" src="language.js"></script>
</head>
<body onload="RedirectUser();">
<p><a href="index.html">Smart Index</a> | <a href="index_english.html">English</a> | <a href="index_spanish.html">Español</a> | <a href="index_nopref.html">No Preference Set</a></p>
<h1>Index Page</h1>
<p>This page should redirect you to your preferred language.</p>
</body>
</html>


index_english.html

code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>English Page</title></head>
<script language="javascript" type="text/javascript" src="cookies.js"></script>
<script language="javascript" type="text/javascript" src="language.js"></script>
<body>
<p><a href="index.html">Smart Index</a> | <a href="index_english.html">English</a> | <a href="index_spanish.html">Español</a> | <a href="index_nopref.html">No Preference Set</a></p>
<h1>English</h1>
<p>Hello! This is an English page.</p>
<p>Your current language is: 
<script language="javascript" type="text/javascript">
//<![CDATA[
// Remove this line if you do not want the menu to ever be collapsable
var prefLanguageValue = Cookie.get('pref_language')
if(prefLanguageValue)
	document.write(prefLanguageValue)
else
	document.write('null');
//]]>
</script>
</p>
<hr/>
<dl>
<dt>Language/Idioma</dt>
<dd><a href="#" onclick="ChangeLanguage('english');window.location.reload();">English</a></dd>
<dd><a href="#" onclick="ChangeLanguage('spanish');window.location.reload();">Español</a></dd>
</dl>
<dl>
<dt>Test Tools</dt>
<dd><input type="button" value="RedirectUser()" onclick="javascript:RedirectUser();" name="refresh" /></dd>
<dd><input type="button" value="Erase Preference Cookie" onclick="javascript:Cookie.erase('pref_language');" name="refresh" /></dd>
</dl>
</body>
</html>


index_spanish.html

code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Spanish Page</title>
<script language="javascript" type="text/javascript" src="cookies.js"></script>
<script language="javascript" type="text/javascript" src="language.js"></script>
</head>
<body>
<p><a href="index.html">Smart Index</a> | <a href="index_english.html">English</a> | <a href="index_spanish.html">Español</a> | <a href="index_nopref.html">No Preference Set</a></p>
<h1>Español</h1>
<p>¡Hola! Esto es una página española.</p>
<p>Your current language is: 
<script language="javascript" type="text/javascript">
//<![CDATA[
// Remove this line if you do not want the menu to ever be collapsable
var prefLanguageValue = Cookie.get('pref_language')
if(prefLanguageValue)
	document.write(prefLanguageValue)
else
	document.write('null');
//]]>
</script>
</p>
<hr/>
<dl>
<dt>Language/Idioma</dt>
<dd><a href="#" onclick="ChangeLanguage('english');window.location.reload();">English</a></dd>
<dd><a href="#" onclick="ChangeLanguage('spanish');window.location.reload();">Español</a></dd>
</dl>
<dl>
<dt>Test Tools</dt>
<dd><input type="button" value="RedirectUser()" onclick="javascript:RedirectUser();" name="refresh" /></dd>
<dd><input type="button" value="Erase Preference Cookie" onclick="javascript:Cookie.erase('pref_language');window.location.reload();" name="refresh" /></dd>
</dl>
</body>
</html>


index_nopref.html

code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>No Preference</title></head>
<script language="javascript" type="text/javascript" src="cookies.js"></script>
<script language="javascript" type="text/javascript" src="language.js"></script>
<body>
<p><a href="index.html">Smart Index</a> | <a href="index_english.html">English</a> | <a href="index_spanish.html">Español</a> | <a href="index_nopref.html">No Preference Set</a></p>
<h1>No Preference page</h1>
<p>
<script language="javascript" type="text/javascript">
//<![CDATA[
// Remove this line if you do not want the menu to ever be collapsable
var prefLanguageValue = Cookie.get('pref_language')
if(prefLanguageValue) {
	document.write('Your current language is:<b>' + prefLanguageValue + '</b>');
}
else
	document.write('You have not currently selected a language');
//]]>
</script>
</p>
<p>This site is made for english or spanish. Choose your language</p>
<p>Este sitio se causa inglés o español. Escoja su idioma.</p>
<dl>
<dt>Language/Idioma</dt>
<dd><a href="#" onclick="ChangeLanguage('english');window.location.reload();">English</a></dd>
<dd><a href="#" onclick="ChangeLanguage('spanish');window.location.reload();">Español</a></dd>
</dl>
<dl>
<dt>Test Tools</dt>
<dd><input type="button" value="RedirectUser()" onclick="javascript:RedirectUser();" name="refresh" /></dd>
<dd><input type="button" value="Erase Preference Cookie" onclick="javascript:Cookie.erase('pref_language');" name="refresh" /></dd>
</dl>

</body>
</html>



(Edited by jeremysimmons on 06-10-2005 18:02)
Paulos72
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jul 2005

 posted posted 07-19-2005 16:41

i'm also looking at the same issue for a bilingual website. Is this above solution vunlerable to being penalised by search engines for using the body onload event and if so what is the workaround with javascript/cookies?

--
bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

 posted posted 07-19-2005 17:33

As long as you have links to the other language sections of your site on your main page you should not be penalized by the search engines, ie they should find both. I'm not an SEO whiz however.


BTW using a href="#" can lead to some slightly hinky behavior. (Depending on where you are on the page it can make the browser scroll) Using a href="javascript: void(0)" is a preferable solution.



.:[ Never resist a perfect moment ]:.
Paulos72
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jul 2005

 posted posted 07-19-2005 20:56

thanks, only time will tell.

Im posting an amended version of

index_english.html
----------------------------------------------------------------
<html>
<head><title>English Page</title>

<script language="JavaScript">
<!--
function namosw_goto_byselect(sel, targetstr)
{
var index = sel.selectedIndex;
if (sel.options[index].value != '') {
if (targetstr == 'blank') {
window.open(sel.options[index].value, 'win1');
} else {
var frameobj;
if (targetstr == '') targetstr = 'self';
if ((frameobj = eval(targetstr)) != null)
frameobj.location = sel.options[index].value;
}
}
}

// -->
</script>

</head>
<script language="javascript" type="text/javascript" src="../cookies.js"></script>
<script language="javascript" type="text/javascript" src="../language.js"></script>
<body>
<p><a href="../index.html">Smart Index</a></p>
<h1>English</h1>
<p>Hello! This is athe default English homepage.</p>

<p>

<script language="javascript" type="text/javascript">

var prefLanguageValue = Cookie.get('pref_language')
if(prefLanguageValue)
document.write("<IMG ALT='Selected language' SRC=flag" + prefLanguageValue + ".gif>");
else
document.write ("<IMG ALT='Select language' SRC=flag" + prefLanguageValue + ".gif>");


</script>
<select name="formselect1" size="1" OnChange="namosw_goto_byselect(this, 'self')">
<option selected>Language</option>
<option value="../es/index.html">Spanish</option>
<option value="index.html">English</option>
</select></p>
<form name="form2">
<p>Remember me: <input type="checkbox" name="formcheckbox1" value="something"></p>
</form>
<hr/>
<dl>
<form name="form1">

</form>
<dt>Links to set language cookie:</dt>
<dd><a href="#" onclick="ChangeLanguage('english');window.location.reload();">English</a></dd>
<dd><a href="#" onclick="ChangeLanguage('spanish');window.location.reload();">Spanish</a></dd>
</dl>
<dl>
<dt>Test Tools</dt>
<dd><input type="button" value="RedirectUser()" onclick="javascript:RedirectUser();" name="refresh" /></dd>
<dd><input type="button" value="Erase Preference Cookie" onclick="javascript:Cookie.erase('pref_language');" name="refresh" /></dd>
</dl>
</body>
</html>
----------------------------------------------------
with the following challenge that i'm grappling with:

I want the user to have the ability to have their dropdown language selection set as the language cookie with a "remember me" checkbox. I know its a question of tweaking the existing code but my newbie js skills are insufficient.

I have made my default page the english_index.html, all else is near identical to the files posted above.

How/what specific code additions do i need?

--

« Backwards — Onwards »

Show Forum Drop Down Menu