Jump to content
j.silver

Flags to be Included Besides Country Name

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>');
});
}

Share this post


Link to post
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?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Are you checking for Javascript errors in your console? So when that page loads you want to immediately hide the form and create the dl element? Where are you using the images?

Share this post


Link to post
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).

Share this post


Link to post
Share on other sites

It works fine when all files are in the same folder. I need help in properly referring to the image file because I have just started learning js/jQuery.

Share this post


Link to post
Share on other sites

Where's the <img> tag? And if you're using a background image instead, where's the code for that?

Share this post


Link to post
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).

Share this post


Link to post
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?

Share this post


Link to post
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.

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

If you use hide().by default it has a time duration to slowly hide a element (400 if i remember correctly, it depends on styling also), so this may be the problem, so set it to hide instantly using .hide(0).

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

If you are using inline-block element, this property has a habit of adding a blank space the size of font-size used to the end of element, if white space present OR if it is stacked with other sibling elements.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Without knowing what HTML created the flag and what CSS rules you have applied to it I can't tell you the best way to solve the problem.

Share this post


Link to post
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; }

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...