Jump to content

Flags to be Included Besides Country Name


j.silver

Recommended Posts

Hi,

I have the below jQuery script that should list relevant country flag before the name of flag's country. The flags are named "flags", and are of PNG format. Everything is working fine, except flags are missing. I would appreciate showing me what to change in the code to make the flags appear.

 

function createDropDown(){
var $form = $("div#country-select form");
$form.hide();
var source = $("#country-options");
source.removeAttr("autocomplete");
var selected = source.find("option:selected");
var options = $("option", source);
$("#country-select").append('<dl id="target" class="dropdown"></dl>')
$("#target").append('<dt class="' + selected.val() + '"><a href="#"><span class="flag"></span><em>' + selected.text() + '</em></a></dt>')
$("#target").append('<dd><ul></ul></dd>')
options.each(function(){
$("#target dd ul").append('<li class="' + $(this).val() + '"><a href="' + $(this).attr("title") + '"><span class="flag"></span><em>' + $(this).text() + '</em></a></li>');
});
}
Link to comment
Share on other sites

that's very vague, what do you mean the flags are "missing"? In what way? Are you checking for errors in your browser console?

Link to comment
Share on other sites

The complete html and jQuery is below and the flags file is attached. The drop down menu should list a flag against corresponding language:

 

<div id="country-select">
<form action="server-side-script.php">
<select id="country-options" name="country-options">
<option selected="selected" title="http://www.yoursite.com" value="us">English</option>
<option title="http://www.yoursite.nl" value="uk">UK</option>
<option title="http://www.yoursite.fr" value="fr">Français</option>
<option title="http://www.yoursite.de" value="de">Deutsche</option>
<option title="http://www.yoursite.nl" value="nl">Nederlandse</option>
</select>
<input value="Select" type="submit" />
</form>
</div>
<script src="languageswitcher.js"></script>

 

$(document).ready(function() {
// --- language dropdown --- //
// turn select into dl
createDropDown();
var $dropTrigger = $(".dropdown dt a");
var $languageList = $(".dropdown dd ul");
// open and close list when button is clicked
$dropTrigger.toggle(function() {
$languageList.slideDown(200);
$dropTrigger.addClass("active");
}, function() {
$languageList.slideUp(200);
$(this).removeAttr("class");
});
// close list when anywhere else on the screen is clicked
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$languageList.slideUp(200);
$dropTrigger.removeAttr("class");
});
// when a language is clicked, make the selection and then hide the list
$(".dropdown dd ul li a").click(function() {
var clickedValue = $(this).parent().attr("class");
var clickedTitle = $(this).find("em").html();
$("#target dt").removeClass().addClass(clickedValue);
$("#target dt em").html(clickedTitle);
$languageList.hide();
$dropTrigger.removeAttr("class");
});
});
// actual function to transform select to definition list
function createDropDown(){
var $form = $("div#country-select form");
$form.hide();
var source = $("#country-options");
source.removeAttr("autocomplete");
var selected = source.find("option:selected");
var options = $("option", source);
$("#country-select").append('<dl id="target" class="dropdown"></dl>')
$("#target").append('<dt class="' + selected.val() + '"><a href="#"><span class="flag"></span><em>' + selected.text() + '</em></a></dt>')
$("#target").append('<dd><ul></ul></dd>')
options.each(function(){
$("#target dd ul").append('<li class="' + $(this).val() + '"><a href="' + $(this).attr("title") + '"><span class="flag"></span><em>' + $(this).text() + '</em></a></li>');
});
}

post-177755-0-28663700-1447084249_thumb.png

Link to comment
Share on other sites

When everything is in the same folder, it works perfectly. My folder set up is: main folder with index.php and two other folders (js & images). I placed the flags inside the images folder and the js file inside the js folder. I managed to include the js file but not the flags--I don't know how to do that within the js script (above).

Link to comment
Share on other sites

That's what I'm saying - the code you're showing does not contain any information about the images. I assume the images are defined in a CSS file, but you didn't show that.Even so, like with all other URLs you can either use a relative or an absolute URL. The absolute URL will contain the protocol and domain name, and a relative URL is relative to whatever file is referring to the image. You can use 2 periods in a relative URL to refer to the parent directory. You can also use an absolute URL where it just starts with a slash and then gives the full path on the server. When the URL starts with a slash the browser will assume that it begins at the document root of the URL (after the domain).

Link to comment
Share on other sites

Now I got it right and thanks all for the help. I need some help in tuning two minor issues in the header:

  1. My header consists of a video occupying 60% of the total width; 40% is taken by an aside that has three elements, from top to bottom: language list, h1 text, and a bottom link. Prior to introducing the language list, the bottom link had been perfectly taking the full 40% width. Upon introduction of the language list, however, a small gap of approximately 1px has appeared to the right of the bottom link. This has happened only because of the language link since no other changes in the css or html is made. Why do you think this has happened and how to fix it?
  2. In loading the page, there is a split-of-a-second time lag between the html of the language list and its css formatting. How can I delay the html of the language list portion to make it load along with the css formatting?

Link to comment
Share on other sites

I can't really guess where the 1 pixel came from, but I can tell you that HTML is not supposed to be a pixel-perfect medium. HTML is supposed to display "reliably" on many devices, it's not supposed to be pixel-perfect. PDF is for pixel-perfect documents on any device. You're welcome to spend time trying to track down where the space is coming from (and using your browser's developer tools to inspect the associated elements and look at their styles and properties would help), but you may find that when you "fix" it in one browser, something else happens in another browser. In the age of responsive design pixel-perfect accuracy is less of a goal then when everybody was developing websites for Netscape 4 on 1024x768.

 

In loading the page, there is a split-of-a-second time lag between the html of the language list and its css formatting. How can I delay the html of the language list portion to make it load along with the css formatting?

Put the link to the CSS stylesheet in the head of the document, and the browser should wait until it finishes downloading to show the page content.
Link to comment
Share on other sites

Many thanks, justomeguy, for your clarification which is informative. For your advice on placing css link in the header, it is there while links to js/jQuery are at the bottom of the body tag. The problem is still there. This might have to do with the slowness of the jQuery you addressed in a previous response. Is there anything else I can do?

Link to comment
Share on other sites

If you have Javascript code running on page load that somehow transforms the page, then you can't delay the page until that code runs. You're specifically telling it to run that code after the page finishes loading. If that is the code that hides the form and converts it to the other thing then it's going to run that after the page finishes loading. In that case it makes sense to just start with the markup for the dropdown list instead of converting a form. You can also put the Javascript code to convert the HTML directly after that HTML so that it runs immediately, but that means that you'll have to put the jQuery library in the head of the page and it's going to cause a different delay.

Link to comment
Share on other sites

I am considering an addition of 1-2px of the same color to cover the gap created. I am wondering, however, if there is a better permanent solution, but having the comment of justomeguy that html is not a pixel-perfect medium might suggest the lack of such desired better solution.

Link to comment
Share on other sites

The html code, js, and flags are provided in post 3 above. css is below.

 

@charset "UTF-8";
* { margin: 0; padding: 0; }
#country-select {
position: absolute;
top: 13px;
right: 0;
width: 180px;
}
/* rought form styles for when JS is disabled */
#country-select form {
width: 180px;
padding: 0;
}
#country-select select,
#country-select input {
display: inline;
padding: 0;
margin: 0;
}
/* JS-created definition list */
.dropdown dd { position: relative; }
.dropdown a {
text-decoration: none;
outline: 0;
font: 12px Arial, Helvetica, sans-serif;
display: block;
width: 130px;
overflow: hidden;
}
.dropdown dt a {
background: /*#c45618;*/#575c7a;
border: 1px solid #964315;
padding: 3px 10px 4px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #fff;
}
.dropdown dt a.active {
background: #db5e18;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: 1px dotted #676768;
-moz-box-shadow: 0 3px 7px rgba(0,0,0,.5);
-webkit-box-shadow: 0 3px 7px rgba(0,0,0,.5);
box-shadow: 0 3px 7px rgba(0,0,0,.5);
color: #fff;
}
.dropdown dd ul {
background: #814f33;
border: 1px solid #676768;
color: #C5C0B0;
display: none;
position: absolute;
z-index: 999;
top: 0;
left: 0;
padding: 2px 0 5px 0;
list-style: none;
border-top: none;
margin: 0;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
-moz-box-shadow: 0 3px 7px rgba(0,0,0,.5);
-webkit-box-shadow: 0 3px 7px rgba(0,0,0,.5);
box-shadow: 0 3px 7px rgba(0,0,0,.5);
}
.dropdown dd ul li a {
padding: 2px 10px;
}
.dropdown dd ul li a span,
.dropdown dt a span {
float: left;
width: 16px;
height: 11px;
margin: 2px 6px 0 0;
background-image: url(../images/flags.png); /*flags are included here*/
background-repeat: no-repeat;
cursor: pointer;
}
.us a span { background-position: 0 0 }
.uk a span { background-position: -16px 0 }
.fr a span { background-position: -32px 0 }
.de a span { background-position: -48px 0 }
.nl a span { background-position: -64px 0 }
.dropdown dd ul li a em,
.dropdown dt a em {
font-style: normal;
float: left;
width: 100px;
cursor: pointer;
}
.dropdown dd ul li a em {
color: #dbc3b5;
}
.dropdown dd ul li a:hover { background-color: rgba(255,255,255,.1); }
.dropdown dd ul li a:hover em { color: #fff; }
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...