j.silver Posted November 9, 2015 Share Posted November 9, 2015 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 More sharing options...
thescientist Posted November 9, 2015 Share Posted November 9, 2015 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 More sharing options...
j.silver Posted November 9, 2015 Author Share Posted November 9, 2015 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="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <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>'); }); } Link to comment Share on other sites More sharing options...
justsomeguy Posted November 9, 2015 Share Posted November 9, 2015 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? Link to comment Share on other sites More sharing options...
j.silver Posted November 9, 2015 Author Share Posted November 9, 2015 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 More sharing options...
justsomeguy Posted November 9, 2015 Share Posted November 9, 2015 I don't see where you're referring to the image files at all. Link to comment Share on other sites More sharing options...
j.silver Posted November 9, 2015 Author Share Posted November 9, 2015 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. Link to comment Share on other sites More sharing options...
Ingolme Posted November 9, 2015 Share Posted November 9, 2015 Where's the <img> tag? And if you're using a background image instead, where's the code for that? Link to comment Share on other sites More sharing options...
justsomeguy Posted November 9, 2015 Share Posted November 9, 2015 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 More sharing options...
j.silver Posted November 10, 2015 Author Share Posted November 10, 2015 Now I got it right and thanks all for the help. I need some help in tuning two minor issues in the header: 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? 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 More sharing options...
justsomeguy Posted November 10, 2015 Share Posted November 10, 2015 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 More sharing options...
j.silver Posted November 10, 2015 Author Share Posted November 10, 2015 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 More sharing options...
dsonesuk Posted November 10, 2015 Share Posted November 10, 2015 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). Link to comment Share on other sites More sharing options...
justsomeguy Posted November 10, 2015 Share Posted November 10, 2015 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 More sharing options...
dsonesuk Posted November 10, 2015 Share Posted November 10, 2015 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. Link to comment Share on other sites More sharing options...
j.silver Posted November 10, 2015 Author Share Posted November 10, 2015 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 More sharing options...
Ingolme Posted November 10, 2015 Share Posted November 10, 2015 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. Link to comment Share on other sites More sharing options...
j.silver Posted November 10, 2015 Author Share Posted November 10, 2015 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now