Jump to content

Techno Kid

Members
  • Posts

    9
  • Joined

  • Last visited

Everything posted by Techno Kid

  1. Thanks again, dsonesuk! The code will be used on IE and Chrome, however, I am using an old version of FF at present and and won't be able to test on IE/Chrome until I can access them in a few days. Anyhow, in the meantime, what is happening at my end is: -The items are showing up in the order I wish them to (most recent at top), however, if I click an item, then deselect it and then select another item, both items appear. I also cannot then deselect just one of them, if I click the first one selected, nothing happens (the item still remains) and if I click the second (last) one selected, both items get deselected (disappear). -The filter as you type isn't working. -There are no gaps between each result div. As mentioned, I'm not sure how much of the above is to do with my old browser. May I ask which browser and version you are using? Thanks.
  2. Hi dsonesuk. Thank you for taking the time to write this for me; I really appreciate it! There is absolutely NO WAY I would've learnt what you have written in the time I need to have the code ready by! This has just been a one-off project and I have just been managing by manipulating existing examples, etc. I haven't had much time to start to 'learn' JS/JQuery, which you have probably guessed from my questions! Anyhow, have you managed to test the code? I have copied and pasted it in various places within the existing code but nothing is happening. There is not likely to be anything wrong with your code, but my lack of knowledge of where it is supposed to be placed! Do I need to replace any of the text in your code with text specific to my data? Thanks.
  3. Thanks for your reply, dsonesuk. Sorry for my late response; have been attempting to figure out what to do with your instructions. Please don't laugh, but are any of the following remotely close to anything I need to use in my code? Thanks. $(".mydivs1").clone() removeClass('.mydivs1') addClass('.mydivs1clone') .prependTo("body");
  4. Hi. I am familiar with some HTML but my knowledge in Javascript, JQuery and CSS is very limited. I have been learning from examples on the web and making my own changes. Please see the fiddle I am working on below; sorry if the full code is messy! https://jsfiddle.net/djj2c84t/ There are a number of features I wish to implement but I am totally stumped! I have gotten as far as I think I can with the fiddle above and it would be more than appreciated if anyone can provide any help, possibly with any example code and where the code needs to go. When I make a multiple selection from the list, how do I get the results (divs) to show in order of most recent selection at the top? For example, if I multi-selected in the order Nuts, Meats, Vegetables, Fruits, how do I get the results (divs) to appear in the order Fruits, Vegetables, Meats, Nuts? At the moment they appear in the order that they are listed in the box. I would also like to ask if it is possible to keep the results (divs) showing for all the items selected even after a new search is performed and a new selection made. For example, if I search for 'F' and select 'Fruits' and then search for 'V' and select 'Vegetables', can I have both the 'Vegetables' and 'Fruits' divs showing in the results? At the moment, 'Vegetables' replaces 'Fruits'. If this is possible, would it also be possible to have the selected items in the list remain highlighted even after a new search is performed? For example, after making the above searches/selections, if I then search for 'ts', the list would show 'Fruits', 'Nuts' and 'Meats', but I would like 'Fruits' to still be highlighted and to be able to close the 'Fruits' div by de-selecting 'Fruits' from the list or clicking the Close (X) button on the 'Fruits' div itself. There are a few other things I have not been able to solve but I will refrain from posting too many questions at once. Any help would be greatly appreciated! Thank you.
  5. Hi justsomeguy. I removed the code for the 'searchable' feature before I posted my code here as it wasn't working. I've only posted the part of the code that did work. What I did was replace the term 'keep-order' with 'custom-headers' and pasted all of the code provided at the website in the black box into the javascript section of the online code testing site, but the search boxes still didn't appear. Doing it bit by bit is exactly what I was trying to do but I couldn't find a text search box example to start with. You say that I 'probably' won't find a tutorial that matches my requirements. I can safely say that I 'DEFINITELY' won't find one that's even close! I think I may have to resort to JQuery initially, as I won't be able to complete the task on time via the other option. Thanks again for taking the time to respond.
  6. Thanks for the reply, justsomeguy. I am able to publish webpages (limited access) on the organisation's Intranet via SharePoint. The feature I have described won't actually be published as a webpage, but saved in the documents section of SharePoint and the users will just be provided with a link to the HTML file. Would saving a separate data source file in the above manner work? Is that the same as having access to the 'server'? I have tried re-ordering the JS parts as follows, but the search boxes still aren't appearing as they should. <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script> <script type="text/javascript" src="https://rawgit.com/lou/multi-select/master/js/jquery.multi-select.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.3.1/jquery.quicksearch.js"></script> <script> As mentioned previously, it is the 'searchable' feature here which I was trying to use. I have now also tried to see if I am capable of creating it all from scratch, however, examples of text search dropdowns seem to be VERY limited on the web and even the two or three that I have found, appear fine on the actual websites' demo pages but when the same code is pasted into an online code test site, I keep getting a button drop down as well as an empty text box. Also, the examples of dropdowns on W3Schools are all button dropdowns; I couldn't find any with search boxes at all. Thanks.
  7. Hi justsomeguy. Thanks for your helpful advice. It really is appreciated. The good news is that I think almost all of the computers have been upgraded to IE9, so working on IE8 may not be a major requirement after all. Speed is important, however. Anything server-side is out of the question; it must all be client/browser side due to restricted access. At present, the list would consist of about a thousand items but probably will be added to as required. I assume that querying a database would be slower than writing the data to the page. I don't mind adding any new items directly to the script if it means a faster user experience. The network can be frustratingly slow at times! I was recently modifying some code and was able to achieve emboldening of the search text in the dropdown list, however, that was probably as part of a JQuery script. I can't recall exactly which one it was but if I do find it again, I will post back. It is good to know that JQuery is not a requirement and I don't like the sound of it being possibly slower, however, with my knowledge, I may have to resort to it initially as I need to have the feature ready quite quickly. If I do have to use JQuery, would I be able to achieve my task with the script at loudev.com or would something like Select2 or Chosen be better? Below is what I have managed so far, but I have not been able to get the feature called 'searchable' to work. The box to type in just won't appear. Even if it did work, would I be able to have 'searchable' AND 'keep order'? If so, would it be possible to remove the second box and use the space below the first box to have the items moved down to instead? Thanks for any advice. HTML: <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.3.1/jquery.quicksearch.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script> <script type="text/javascript" src="https://rawgit.com/lou/multi-select/master/js/jquery.multi-select.js"></script> <script> $(document).ready(function(){ // $('#public-methods').multiSelect(); $('#public-methods').multiSelect({ afterSelect: function(values){ var get_val = ""+$("#multiple_value").val(); //var hidden_val = (get_val != "") ? get_val+"," : get_val; var hidden_val = get_val+","+values; $("#multiple_value").val(hidden_val); //$("#multiple_value").val(hidden_val+""+value); //alert("Selecting value: "+values); alert ( "HIDDEN value: "+ hidden_val) ; }, afterDeselect: function(values){ alert("Deselect value: "+values); var get_val = $("#multiple_value").val(); var new_val = get_val.replace(","+values, ""); $("#multiple_value").val(new_val); alert("HIDDEN value after deselecting: "+new_val); } }); $('#deselect-all').click(function(){ $('#keep-order').multiSelect('deselect_all'); $("#multiple_value").val(""); //alert ("HERE"); return false; }); $('#keep-order').multiSelect('addOption', { value: 'OPT8', text: 'Option 8', }); $('#keep-order').multiSelect('addOption', { value: 'OPT9', text: 'Option 9', }); $('#keep-order').multiSelect('addOption', { value: 'OPT10', text: 'Option 10' }); $('#keep-order').multiSelect('addOption', { value: 'OPT11', text: 'Option 12' }); $('#keep-order').multiSelect('addOption', { value: 'OPT12', text: 'Option 13' }); $('#keep-order').multiSelect('addOption', { value: 'OPT13', text: 'Option 14' }); }); </script> </head> <body> <a href='#' id='deselect-all'><p style="font-family: Arial, Helvetica, sans-serif; font-size:14pt">Deselect All</p></a> <select id='keep-order' multiple='multiple'> <option value="OPT1">Option 1</option> <option value="OPT2">Option 2</option> <option value="OPT3">Option 3</option> <option value="OPT4">Option 4</option> <option value="OPT5">Option 5</option> <option value="OPT6">Option 6</option> <option value="OPT7">Option 7</option> </select> <input type="hidden" name="multiple_value" id="multiple_value" /> </body> </html> CSS: .ms-container{ background: transparent url('../img/switch.png') no-repeat 50% 50%; width: 370px; } .ms-container:after{ content: "."; display: block; height: 0; line-height: 0; font-size: 0; clear: both; min-height: 0; visibility: hidden; } .ms-container .ms-selectable, .ms-container .ms-selection{ background: #fff; color: #555555; float: top; width: 500%; } .ms-container .ms-selection{ float: bottom; } .ms-container .ms-list{ border: 1px solid #ccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; position: relative; height: 208px; padding: 0; overflow-y: auto; } .ms-container ul{ margin: 1; list-style-type: none; padding: 0; } .ms-container .ms-selectable li.ms-elem-selectable, .ms-container .ms-selection li.ms-elem-selection{ border-bottom: 1px #eee solid; padding: 0px 1px; color: #555; font-size: 21px; font-family: Arial, Helvetica, sans-serif; } .ms-container .ms-selectable li.ms-hover, .ms-container .ms-selection li.ms-hover{ cursor: pointer; color: #fff; text-decoration: none; background-color: #08c; } .ms-container .ms-selectable li.disabled, .ms-container .ms-selection li.disabled{ background-color: #eee; color: #aaa; cursor: text; } JS: $('#keep-order').multiSelect({ keepOrder: true });
  8. Hi Everyone. I would like to create a dropdown list with the features described below and have played around with various existing code on the web, however, I thought it would be wise if I found out first if my aim is even possible to start with before exerting any further effort on something that has no chance of working. My knowledge on the subject is very limited; I am familiar with basic HTML and am able to modify/combine some code from existing examples/demos. I am posting in the JavaScript section of the forums as I presume that JavaScript will be necessary. The features I have described below are all that I require; I don't need a whole bunch of 'options' to change things around. I have composed a picture (attached) to help show what I wish to achieve and have provided some explanatory notes below. SECOND BOX: List of all items available in alphabetical order. List items visible upon loading. Vertical scroll bar, as there will be hundreds of items in the list. Each list item can be quite long so box should be wide enough, however, horizontal scroll bar if necessary; no text wrapping, only one item per line. FIRST BOX: Field to type search terms into. No minimum number of characters. As soon as a single letter is typed in the box, all items that 'contain' (not only start with) that letter are revealed in the second box. Pressing backspace to delete a letter increases the list in the second box again. Letters typed are emboldened in the second box; no highlighting, underlining or other emphasis. AREA UNDER SECOND BOX: Single-clicking an item in the second box removes that item from the second box and displays a block of four or three lines of text relating to that item underneath the second box. Clicking on another item in the second box removes it from the second box and displays its corresponding block of text underneath the first block of text, i.e. in the order it was selected and NOT in the order that it originally appeared in the second box. Single-clicking a block of text removes it from the area under the second box and displays its corresponding item in the second box again in its original (alphabetical) position. I think I would prefer the blocks of text to be in a free area under the second box and not boxed in, however, I am not 100% sure of this and would consider a third box. ADDITIONAL: Must work in IE8 and IE9 and compatibility with other versions/browsers would be a bonus. Must allow being maintained in the long term. Speed is very important and whatever method/language/code is used needs to load as fast as possible with its features/functions responding as quickly as possible. Note that the picture shows everything just for illustrative purposes. Of course, in an actual working example, in this instance, if 'Fruits' and 'Nuts' were displayed in the second box, the area under the second box would be blank and if the area under the second box displayed the two blocks of text, the second box would be blank. So, my questions are: Is the above possible? If yes, would anyone be kind enough to point me in the right direction, i.e. advise me on which language/type of code would be most suitable for this task. Any links to similar examples/demos would be very much appreciated! Most avenues I've come across seem to lead to JQuery! Is my task not possible without dependencies on JQuery or other/external scripts? Am I correct to assume that if I wanted everything to be hard-coded, I would require a LOT of knowledge? Any advice would be appreciated. Thanks.
×
×
  • Create New...