0

HI Guys I have a site that carries 2 domains one is .com and the other is a .us I am trying to get it to show a flag for the country domain chosen so if it is clicked on a link to direct to a .us I wanted to show the US flag:

I have made this so far but sometimes it works but sometimes not I have no idea why!

HTML:

<li>Currency <img class="usd-flag" style="display:none" src="/images/usd-flag.svg" width="20" height="14" alt="USD CURRENCY $;"/><img class="gbp-flag" style="display:none" src="/images/gbp-flag.svg" width="20" height="14" alt="GBP CURRENCY &pound;"/>
<ul>
<li><a href="http://www.example.com">BRITISH POUNDS ( &pound; ) </a></li>
<li><a href="http://www.example.us">US DOLLARS ( $ )</a></li>
</ul>
</li>

JS:

if(location.href.indexOf('.us') >= 0) {
        $('.usd-flag').show();
        $('.gbp-flag').hide();
    }
if(location.href.indexOf('.com') >= 0) {
        $('.gbp-flag').show();
        $('.usd-flag').hide();
    }//changes flag image depending on domain

Can some one tells me whats wrong here plz?

Ricardo Alves
  • 561
  • 1
  • 5
  • 21

3 Answers3

1

Well of the top of my head I would recommend document.domain instead of location.href as it has a better output for parsing, but I think you just forgot the need to wait for the DOM to by ready before modifying it's elements. As you have tagged with jQuery you can use the below. Without it you will need a document event handler (which jQuery just wraps for you).

$(document).ready(function () {

    console.log(location.href)
    console.log(document.domain)

    if (location.href.indexOf('.us') >= 0) {
        $('.usd-flag').show();
        $('.gbp-flag').hide();
    }
    if (location.href.indexOf('.com') >= 0) {
        $('.gbp-flag').show();
        $('.usd-flag').hide();
    } //changes flag image depending on domain

});

FIDDLE

MattSizzle
  • 3,145
  • 1
  • 22
  • 42
  • Worked well I have still some issues when it comes to have a HTTPS page but that'd be my server that messes up the situation. thanks a lot! – Ricardo Alves Jun 03 '15 at 12:17
1

You could do this with a liquid if else statement and use contain.

{% if {{globals.site.host}} contains '.us' %}

<div>this is a .us domain</div>

{% else %} 

<div>This is a .com domain</div>

{% endif %}

OR you could use 2 if Statements as well. rather than the else depending on what you need.

Temporary Example here using AU domain.

http://liquiddev.rtweb.com.au/domain

Hope it helps!

James
  • 94
  • 1
  • 8
  • I must say the liquid one is the best for BC's Reason, but the jQuery option is also good perhaps for a different server and had a few errors with server request. – Ricardo Alves Nov 23 '15 at 14:59
-1

You can change location.href.indexOf to location.href.toLowerCase().indexOf first, so it will support url as .COM

Dusty
  • 354
  • 4
  • 15