Google Site Translator customization inconsistency

Hi all.
I embedded this piece of code to customize Google translator widget in a website:
<script type="text/javascript">
	$(document).ready(function () {
		/*
		 * CUSTOMIZING GOOGLE TRANSLATOR	
		 */
		$('#google_translate_element').on("click", function () {
			// Change font family and color
			$("iframe").contents().find(".goog-te-menu2-item div, .goog-te-menu2-item:link div, .goog-te-menu2-item:visited div, .goog-te-menu2-item:active div, .goog-te-menu2 *")
							.css({
								'background-color': '#000033',
								'color': '#fff',
								'font-family': 'tahoma',
								'text-transform': 'uppercase'
							});

			// Change hover effects
			$("iframe").contents().find(".goog-te-menu2-item div").hover(function () {
				$(this).css('background-color', '#033C70').find('span.text').css({'color': '#ffff00', 'background': '#033C70'});
			}, function () {
				$(this).css('background-color', 'transparent').find('span.text').css({'color': '#fff', 'background': 'transparent'});
			});

			// Change Google's default blue border
			$("iframe").contents().find('.goog-te-menu2').css({
				'border': 'none',
				'background-color': '#000044'
			});

			// Change the iframe's box shadow
			$(".goog-te-menu-frame").css({
				'-moz-box-shadow': '0 3px 8px 2px #000044',
				'-webkit-box-shadow': '0 3px 8px 2px #000044',
				'box-shadow': '0 3px 8px 2px #000044'
			});
		});
	});
</script>

Open in new window

This  code works perfectly in every page of the site but the homepage: here it just doesn't take effect!
See the hompage here
See another page here

Can someone help me to understand why this happens? The code is the same and I can't guess what prevents it to work in the homepage!

Thank you all in advance.
LVL 32
Marco GasiFreelancerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David Johnson, CD, MVPOwnerCommented:
worked for me, also when I changed the language it also changed the cookie disclaimer
Marco GasiFreelancerAuthor Commented:
Thank you for your reply, David.
Forgive me, but I think you gave it a try when yet I had replaced dropdown with flags, am I wrong?
David Johnson, CD, MVPOwnerCommented:
I used flags
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Marco GasiFreelancerAuthor Commented:
Hi David. I supposed that. In effect, seeing nobody answered to this question I have gone on with the project replacing dropdown with flags. But I would be really interested in discover something about that bug. If you agree, I can keep this question open for some day again: when the real site will be active in the default server, I'll come back to you restoring original dropdown and leaving you to see the issue. Is this nice to you?
David Johnson, CD, MVPOwnerCommented:
I never saw the dropdown menu..  When it came up in a language I do not speak. and saw the flags then I clicked on a flag that I an fluent in. and it worked
Marco GasiFreelancerAuthor Commented:
Ok, David, forgive me for the confusion. Please go again to my site and see: now in the navbar there is a dropdown. In the homepage, when you click on the dropdown arrow to elect a language, the dropdown has white background and standard links colors; in any other page of the site the dropdopwn is as I customized it (blue background, uppercase yellow links).
The code, is the same. Have you idea why this happens?
David Johnson, CD, MVPOwnerCommented:
it still works for me.http://screencast.com/t/VFmYQqgb
Marco GasiFreelancerAuthor Commented:
David, the problem is not the functionality: okay, it translates. The problem is the style of the dropdown: white in the homepage, blue in the other pages. The quesiton is: why styles don't apply to the dropdown in the homepage but they apply to the dropdown in the other pages?
lenamtlCommented:
Hi,

the background color is set in the css file = translateelement.css

.goog-te-menu2-item div, .goog-te-menu2-item:link div, .goog-te-menu2-item:visited div, .goog-te-menu2-item:active div {
    color: #0000cc;
    background: #ffffff;

Open in new window



So you may want to change the font color to #FFF
and the background color to #000044
Marco GasiFreelancerAuthor Commented:
But that is what I do through jQuery within a script included in the page (the third script tag starting from the bottom of the page):

		$('#google_translate_element').on("click", function () {
			// Change font family and color
			$("iframe").contents().find(".goog-te-menu2-item div, .goog-te-menu2-item:link div, .goog-te-menu2-item:visited div, .goog-te-menu2-item:active div, .goog-te-menu2 *")
							.css({
								'background-color': '#000033',
								'color': '#fff',
								'font-family': 'tahoma',
								'text-transform': 'uppercase'
							});

			// Change hover effects
			$("iframe").contents().find(".goog-te-menu2-item div").hover(function () {
				$(this).css('background-color', '#033C70').find('span.text').css({'color': '#ffff00', 'background': '#033C70'});
			}, function () {
				$(this).css('background-color', 'transparent').find('span.text').css({'color': '#fff', 'background': 'transparent'});
			});

			// Change Google's default blue border
//		$("iframe").contents().find('.goog-te-menu2').css('border', '1px solid #F38256');
			$("iframe").contents().find('.goog-te-menu2').css({
				'border': 'none',
				'background-color': '#000044'
			});

			// Change the iframe's box shadow
			$(".goog-te-menu-frame").css({
				'-moz-box-shadow': '0 3px 8px 2px #000044',
				'-webkit-box-shadow': '0 3px 8px 2px #000044',
				'box-shadow': '0 3px 8px 2px #000044'
			});
		});

Open in new window

The proble is that this code works fine for all the pages but the homepage. And I'm not able to identify the reason of this difference...
lenamtlCommented:
FYI I'm using Chrome
Once I have used the menu, let say I select French, the background will be always white even on the home page.
I have cleared all browser cookies and history and now even if I don't select any language the background is white even on the home page.
So in my case it is always white background.
Have you try to edit the color?

Also Select should not appear in item list only language name.
Marco GasiFreelancerAuthor Commented:
Thanks for trying to help me, but it loooks my problem is not clear enough: I want the dropdown be blue. It is blue in all pages of the site but the home page, where it is always white. The customization is done through a javascript at the bottom of each page, but this javascript works in every pages but in the home page where for some reason it fails.
I would like to understand why it fails.

Summarizing:

Goal: have the dropdown with a blue background and white text
Issue: the dropdown is blue in all pages but in the home page it is white
Question: why the same code works in every pages but in the home page it fails?

Thank you so mutch for your effort.
lenamtlCommented:
You ill found the problem by comparing both file
I see this part of code is not placed at the same place, sometimes js order may cause issue
find this code and move it after google translate script around 675 instead of 606
$('.lang').on('click', function(e){
			e.preventDefault();
			var lang = $(this).attr('id');
			translate(lang);
		});

Open in new window

Marco GasiFreelancerAuthor Commented:
That part of code has nothing to do with the google widget customization: that piece of code get the click on the button and activate another functyion but here is not involved at all: it works if I replace dropdown with flags.
Anyway I deleted it both from home and other pages: as you can see the issue remains there: white in the home, blue in the other... :-(
David Johnson, CD, MVPOwnerCommented:
check the css files
lenamtlCommented:
Hi,

What I can see if I inspect the menu items is that the class is called three times on certificaciones page
.goog-te-menu2-item div, .goog-te-menu2-item:link div, .goog-te-menu2-item:visited div, .goog-te-menu2-item:active div {

Open in new window


I think one of the JS prevent to apply the css of the custom JS maybe the script stop just before
Maybe the class name is used else where and there is a conflict, try to search the class in all you css files even those that come with jquery plugins,
Try to rename css the class to see if it's working.

Also
On home page there is an error
Failed to load resource: the server responded with a status of 404 (Not Found)
http://ejemplos.webintenerife.com/buceorincondearona/assets/js/jquery-cookie.js 

On certificaciones page
Failed to load resource: the server responded with a status of 404 (Not Found)
http://ejemplos.webintenerife.com/buceorincondearona/assets/css/certificaciones.css 

So check all your page that have the issue fix the missing script and css
then if you still have the issue remove all javascript plugins and reinstall them one by one to find the culprit. Comparing problem pages code with the one that is working then check the diff this will give you a good idea of possible plugin or css to test.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Marco GasiFreelancerAuthor Commented:
Thank you, lenamtl. I couldn't do all the tests (for the client I found another solution) but it looks reasonable that your suggestion can get me to the solution and I'll do deep tests as soon as possible and I'll post results here.
Thank you for your help.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.