Enhanced country selection with Css and Javascript
How many times you had to choose your country in a form, with a old, simple popup?
Time to change the way you choose your country (or anything else) with a bit of Css and Javascript.
I am showing the example in a iframe not to mess with WordPress styles.
As you can see, when you move the mouse over the text input, a list with (almost) every world country and flag appears, and when you click on a country, its ISO code is displayed into the text input.
When you move the mouse out of the country list, it closes.
How can it be made?
Let' see the content of the main page
-
body{margin:0px;font-family:verdana;font-size:11px;background-color:#e5e5e5}
-
a{
-
position:relative;
-
z-index:24;
-
}
-
a:hover{
-
z-index: 25;
-
background-color: #ff0}
-
a span{
-
display: none
-
}
-
a:hover span{
-
display: block;
-
position:absolute;
-
top: 10px;
-
left: 20px;
-
width: 200px;
-
border: 1px solid #000000;
-
}
-
-
input{
-
width:30px;
-
font-family:verdana
-
}
-
-
Select country: <a href="javascript:void(0)"><input type="text" name="country" readonly><span><iframe src="index.html" frameborder="0" scrolling="yes" height="150" width="220"></iframe></span></a>
-
other content here other content here other content here
The trick is in the <a> and <span> css use, with a display attribute changing on hover status.
It's easiest to see than to explain.
Let's look at line 34, when I call the iframe I simply load an ordered list with a javascript to communicate with the "parent" page.
-
body{margin:0px;background-color: #000000}
-
ul{margin:0px;padding:0px;margin-left: 1px;padding-left: 0;list-style-type: none;font-family: verdana;font-size:11px;text-transform: capitalize;}
-
img{ vertical-align: middle}
-
a{display: block;width: 200px;background-color: #f5f5f5;padding:4px;}
-
a:link, a:visited{color: #000000;text-decoration: none;}
-
a:hover{background-color: #ffaf2e;color: #000000;font-weight:bold;}
-
...
-
...
Look how I set the menu starting with an unordered list with Css (lines 5-10) and how I pass ISO values to the parent page (line 15 for example).
You can download the whole work here, check 2 html files and give me feedback or suggestion about the use of this feature.
They can be a great start to launch a website of your own and meet the individual needs of your project.
12 Responses to “Enhanced country selection with Css and Javascript”
Leave a Reply
Posts
- Rick Triqui: my first PlayCrafter game
- Prototype of a Flash game like Meeblings
- Games for the game developers!
- The art of debugging
- How to embed a text file in Flash
- Create a Flash game in minutes with PlayCrafter
- Upgrade your Flash CS4 to 10.0.2
- Play Mazeroll, my latest Box2D game
- Triqui MochiAds Arcade plugin for WordPress Released!!
- The MochiAds funnel
- Flash game creation tutorial - part 1
- Create a Lightbox effect only with CSS - no javascript needed
- Flash game creation tutorial - part 2
- Make a Flash game like Flash Element Tower Defense - Part 2
- Flash game creation tutorial - part 3
- Create a flash draw game like Line Rider or others - part 1
- Create a Flash Racing Game Tutorial
- Make a Flash game like Flash Element Tower Defense - Part 1
- Create a flash artillery game - step 1
- Create a flash draw game like Line Rider or others - part 5
- Flash game creation tutorial – part 5.2




(4.9 out of 5) - Flash game creation tutorial – part 3




(4.86 out of 5) - Creation of a platform game with Flash – step 2




(4.84 out of 5) - Create a survival horror game in Flash tutorial – part 1




(4.82 out of 5) - Create a flash artillery game – step 1




(4.82 out of 5) - Create a Flash Racing Game Tutorial




(4.8 out of 5) - Create a flash artillery game – step 2




(4.75 out of 5) - New tile based platform engine – part 6 – ladders




(4.74 out of 5) - Flash game creation tutorial – part 2




(4.73 out of 5) - The experiment – one year later




(4.7 out of 5)


Great script. Thanks alot.
Gr8 work…Can i use it..in my commercial website..without much modification in the code.
Of course… and do not forgeto to show me the final result
Bugs like a hillbilly in Opera.
its very intersted
doesnt work with IE7… but IE7 doesnt work much anyways so no worries.. lol :P
it does work in ie7, but ie7 that you used was probably beta…
amazing! there’s great need for this in almost every website! thanks!
oh … i see what you mean, kerim. when i downloaded it and view it won’t work! sorry about that!
Dont work in firefox!!!
Please provide me the source code for this.
I have a big list of values, which i want
to display like this.
Thanks,
Ben
Can you add a state/territory and zip code. Thank you
Looking for javascript Pakistan cities like world countries.