Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    45
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Show Image Depending on Current User Selection

    We have an e-commerce website with a variety of currencies available for selection. This is in the form of a dropdown i.e the customer hovers their mouse over "Change Currency" and all the options display. Next to "Change Currency" on the left I would like a flag to show - this flag being the one for the currency currently selected by the customer.

    Below is the code with the UK Sterling currency selected at the point of getting the code. What can I do to show to the customer what currency is selected in the form of a flag?

    i.e UK currency selected, UK flag shows but if the Euro currency is selected, the Euro flag shows etc.

    Due to restrictions with code, I cannot use php.

    Thank you very much.


    Code:
        <li><a href="#">Change Currency</a>
                        <ul style="padding: 12px 15px 1px 15px;">
                            <li>
                                <div id="SideCurrencySelector" class="Block Moveable Panel CurrencyChooser">
        <div class="BlockContent">
            <dl class="CurrencyList">
                	<dd style="border-bottom: 0px;" class="ChooseCurrencyBox">
    		<a class="Sel" href="/about-us/?setCurrencyId=1">
    			<span class="Flag"><img border="0" alt="United Kingdom" src="http://www.mydomain.co.uk/lib/flags/gb.gif"></span>
    			<span class="Text">UK Sterling</span>
    		</a>
    	</dd>	<dd style="border-bottom: 0px;" class="ChooseCurrencyBox">
    		<a class="" href="/about-us/?setCurrencyId=4">
    			<span class="Flag"><img border="0" alt="Australia" src="http://www.mydomain.co.uk/lib/flags/au.gif"></span>
    			<span class="Text">Australian Dollar</span>
    		</a>
    	</dd>	<dd style="border-bottom: 0px;" class="ChooseCurrencyBox">
    		<a class="" href="/about-us/?setCurrencyId=5">
    			<span class="Flag"><img border="0" alt="Brazil" src="http://www.mydomain.co.uk/lib/flags/br.gif"></span>
    			<span class="Text">Brazilian Real</span>
    		</a>
    	</dd>	<dd style="border-bottom: 0px;" class="ChooseCurrencyBox">
    		<a class="" href="/about-us/?setCurrencyId=6">
    			<span class="Flag"><img border="0" alt="Canada" src="http://www.mydomain.co.uk/lib/flags/ca.gif"></span>
    			<span class="Text">Canadian Dollar</span>
    		</a>
    	</dd>	<dd style="border-bottom: 0px;" class="ChooseCurrencyBox">
    		<a class="" href="/about-us/?setCurrencyId=7">
    			<span class="Flag"><img border="0" alt="Denmark" src="http://www.mydomain.co.uk/lib/flags/dk.gif"></span>
    			<span class="Text">Danish Krone</span>
    		</a>
    	</dd>	<dd style="border-bottom: 0px;" class="ChooseCurrencyBox">
    		<a class="" href="/about-us/?setCurrencyId=2">
    			<span class="Flag"><img border="0" alt="European Union" src="http://www.mydomain.co.uk/lib/flags/regions/eu.gif"></span>
    			<span class="Text">Euro</span>
    		</a>
    	</dd>	<dd style="border-bottom: 0px;" class="ChooseCurrencyBox">
    		<a class="" href="/about-us/?setCurrencyId=8">
    			<span class="Flag"><img border="0" alt="Japan" src="http://www.mydomain.co.uk/lib/flags/jp.gif"></span>
    			<span class="Text">Japanese Yen</span>
    		</a>
    	</dd>	<dd style="border-bottom: 0px;" class="ChooseCurrencyBox">
    		<a class="" href="/about-us/?setCurrencyId=9">
    			<span class="Flag"><img border="0" alt="Norway" src="http://www.mydomain.co.uk/lib/flags/no.gif"></span>
    			<span class="Text">Norwegian Krone</span>
    		</a>
    	</dd>	<dd style="border-bottom: 0px;" class="ChooseCurrencyBox">
    		<a class="" href="/about-us/?setCurrencyId=10">
    			<span class="Flag"><img border="0" alt="Sweden" src="http://www.mydomain.co.uk/lib/flags/se.gif"></span>
    			<span class="Text">Swedish Krona</span>
    		</a>
    	</dd>	<dd style="" class="ChooseCurrencyBox">
    		<a class="" href="/about-us/?setCurrencyId=3">
    			<span class="Flag"><img border="0" alt="United States" src="http://www.mydomain.co.uk/lib/flags/us.gif"></span>
    			<span class="Text">US Dollar</span>
    		</a>
    	</dd>
            </dl>
        </div>
    </div>
    
                            </li>
                        </ul>
                        </li>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts
    Couple of problems to fix before the JS can be determined to be working or not...

    1. You have not included the <style> information, so the display posted is just a list

    2. The image paths to the flags are not being found. Will not display a flag without the information.

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    45
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    Couple of problems to fix before the JS can be determined to be working or not...

    1. You have not included the <style> information, so the display posted is just a list

    2. The image paths to the flags are not being found. Will not display a flag without the information.
    Thank you for your reply.

    1. There is CSS enabled for the site and that's all live and fine though not sure if you need this for the purposes of the JS?

    2. The image paths were purposely removed for privacy reasons for the purpose of posting here. The code live on our website has full paths.

    Thank you

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts
    Well, I have difficult testing the display and modify the classes a necessary with JS to accomplish your task.

    And, without the flag paths, you might have well have left them out of your post as they are useless as posted.

    Good Luck ...

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    45
    Thanks
    13
    Thanked 0 Times in 0 Posts
    My apologies but I'm not much of a coder and our designer doesn't know much about JS unfortunately.

    The site is URL REMOVED. You can see in the top right with regards to this and presume you can use Firebug to snatch the code required.

    We're looking to get the currency in use and it's flag to show next to "Change Currency".

    Thanks very much. It's much appreciated.
    Last edited by brat42; 04-14-2013 at 02:48 AM.

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts
    Looks like the drop-down on hover action of the menu is blanking the display when it loses focus.
    Makes it difficult to select any of the options within the drop down area.

    That would appear to be more of a menu problem to solve first.
    Once you can choose a country, then you would be able to set a global variable to indicate users choice.

  • Users who have thanked jmrker for this post:

    brat42 (04-14-2013)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •