Leaderboard


Popular Content

Showing most liked content since 03/23/2017 in Posts

  1. 1 like
    The form attribute only applies to form control elements. It doesn't exist on elements like <div> or <p>. What kind of element are you referring to when you say "non-form element"? This is regarding the form attribute from the MDN page for the <input> element: When the element is a descendant of a <form> element the form attribute is not needed. If the element is not inside a <form> then the form attribute will indicate which form the element belongs to so that when the form is submitted the element's value is added to the data that is sent. I'm not certain how fieldset elements behave, I would guess that the fieldset's children would belong to the same form that the fieldset belongs to, but it can be easily confirmed with an experiment. Experiments can be done with the form attribute by submitting the form and seeing which values get sent to the server. My guess before doing experiments is that a child of one form that has a form attribute from a different form will be added as a value when either of the two forms are submitted.
  2. 1 like
    You can use scandir() to list files in a directory and generate the HTML for the images. The line breaks exist, but HTML doesn't render line breaks unless you specifically put a <br> element. You can use nl2br() to show line breaks in the text provided by users. You can't choose the size of a file, but you can give a size limit in the file uploader. There are plenty of PHP file upload tutorials, you should look at some of them. The W3Schools tutorial has sections explaining how to limit the file size and file type. You can use str_replace() to change substrings into something else, such as in the following example: <?php $string = str_replace(':)', '<img src="smiley.gif">', $string); ?>
  3. 1 like
    Block elements such as div, h1, p fill the width available to them, any element below them will stack below them, if floated or not. A floated element before a block element/s, will cause the block element to merge within it, and even though the block element still take the full width, the text within them will flow to and around the edges of floated element. #1 If you place img element within the first paragraph, which you can because is a inline element and acts similar to text, It will fall below header h1, the first paragraph text will merge to edge of img element as will the second paragraphs text. For adding a div element to .content class div for extra column, you need to float and set its width to requirements.#2 and #3 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript"> </script> <style type="text/css"> * { box-sizing: border-box; } .header, .footer { background-color: grey; color: white; padding: 15px; } .column { float: left; padding: 15px; } .clearfix::after { content: ""; clear: both; display: table; } .menu { width: 25%; } .content { width: 75%; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 8px; background-color: #33b5e5; color: #ffffff; } .menu li:hover { background-color: #0099cc; } .column.content {float: right;} .column.content > img {float: left; max-width: 25%; margin: 0 8px;} .column.content > div {max-width: 25%;} .column.content > div img {max-width: 100%;} .column.content > div.left {float: left; margin: 0 8px; } .column.content > div.right {float: right; } </style> </head> <body> <div class="clearfix"> <div class="column menu"> <ul> <li>The Flight</li> <li>The City</li> <li>The Island</li> <li>The Food</li> </ul> </div> <div class="column content"><img src="https://www.w3schools.com/w3css/img_lights.jpg" alt=""> <h1>The City #1</h1> <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> <p>You will learn more about web layout and responsive web pages in a later chapter.</p> </div> <div class="column content"> <div class="left"><img src="https://www.w3schools.com/w3css/img_lights.jpg" alt=""></div> <h1>The City #2</h1> <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> <p>You will learn more about web layout and responsive web pages in a later chapter.</p> </div> <div class="column content"> <div class="right"><img src="https://www.w3schools.com/w3css/img_lights.jpg" alt=""></div> <h1>The City #3</h1> <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> <p>You will learn more about web layout and responsive web pages in a later chapter.</p> </div> </div> <div class="footer"> <p>Footer Text</p> </div> </body> </html>
  4. 1 like
    Store the completed state of the form in the session, then check whether the session value is set before showing the panel. You can do this in Javascript with localStorage, sessionStorage or cookies. You can do it in PHP using sessions or cookies.
  5. 1 like
    Are you running the first cron job with the colons? /usr/local/cpanel/bin/jailshell: -c: /home/my_username/public_html/folder/file.php" Try removing the colons and also the double quote at the ends of the cron jobs.
  6. 1 like
    If they are child element of parent div, you need to add space before child elements. $( id + 'textarea') will look for an element with id '#letter_abstracttextarea' $( id + ' textarea') = '#letter_abstract textarea' will look for child textarea element whose parent element has this specific id.
  7. 1 like
    Depending IF the poster is already using jquery as all i see is plain vanilla JavaScript code, that would overkill just for one small line of code.
  8. 1 like
    Also, you're never going to see a request in the network console because you're not sending the file over the network, everything is being done in the browser. You're reading the local file and updating the page, not sending it to a server. That's why there's no request to a server.
  9. 1 like
    You can store anything in a PHP session. https://www.w3schools.com/php/php_sessions.asp
  10. 1 like
    IF you stringify the array you will simply get [ "AAAAAA" ] for single array value [ "AAAAAA","BBBBBB" ] for two array values, JSON.stringify(lsData) converts to ' [ "AAAAAA","BBBBBB" ] '. While when you use lsData = JSON.parse(localStorage.getItem("desSet"));it converts it back to a readable array of values with lsData[0] equallying "AAAAAA" and lsData[1] equallying "BBBBBB", that is what the loop does starting from 0 to less than total number of values (2) meaning 1.
  11. 1 like
    function lsCheck() { //Array to store Multiple values lsData = []; // if localstorage of desSet exists if (localStorage.desSet) { //get array stored in storage and apply to lsData, what was in storage is also in lsData now lsData = JSON.parse(localStorage.getItem("desSet")); //loop through array values creating elements for hold array content for (i = 0; i < lsData.length; i++) { var container = document.createElement("div"); container.className = "img_descrip_wrap"; //description var valDes = lsData[i] var des = document.createElement('p'); var tex = document.createTextNode(valDes); des.appendChild(tex); container.appendChild(des); document.body.appendChild(container); } } } //At the end of btn click function after appending new image and paragraph you have these values push into array (along with values from localstorage if exits which would have been populated by onload function) document.getElementById('btn').onclick = function() { //image var container = document.createElement("div"); container.className = "img_descrip_wrap"; //description var valDes = document.getElementById('idDes').value; var des = document.createElement('p'); var tex = document.createTextNode(valDes); des.appendChild(tex); container.appendChild(des); document.body.appendChild(container); // push (append) current value description input into array lsData.push(valDes); // apply the whole array to localstorage localStorage.setItem("desSet", JSON.stringify(lsData)); }; NOTE: this applies only to description value, and this has not been tested
  12. 1 like
    Use different id for second and just use same code to add content OR use classname instead and use var parentClass=document.getElementsByClassName("timeleftpay"); for(var i=0;i<parentClass.length;i++){ parentClass[i].innerHTML = dy + dytext + hr + hrtext + min + mintext + sec + sectext + eventtext; } Use <span class="timeleftpay"> </span>
  13. 1 like
  14. 1 like
    Here's the fix for MS kak, you would have thought they would have known better by now. // Close the dropdown if the user clicks outside of it window.onclick = function(e) { /*because of MS god complex thou shall do it how I WANT, and not how every else wants, which I thought they had finally begun to see the light, but apparently not! we have to allow for MS kak way of doing things*/ matches = e.target.matches ? e.target.matches('.dropbtn') : e.target.msMatchesSelector('.dropbtn'); if (!matches) { var myDropdown = document.getElementsByClassName("dropdown-content"); for (var i = 0; i < myDropdown.length; i++) { if (myDropdown[i].classList.contains('show')) { myDropdown[i].classList.remove('show'); } } } };
  15. 1 like
    function myFunction(elem) { elem.nextElementSibling.classList.toggle("show"); var myDropdown = document.getElementsByClassName("dropdown-content"); for (var i = 0; i < myDropdown.length; i++) { if (myDropdown[i].classList.contains('show')) { if (elem.nextElementSibling !== myDropdown[i]) { myDropdown[i].classList.remove('show'); } } } } BUT! you do realise, the window onclick example (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown) does not work in MS Edge, its so good of w3schools to give you an example that does not work in MS Edge and not tell you.
  16. 1 like
    I use Netbeans, because its not limited to just 1 or two server languages, but several, including frameworks Zend, smarty, Laravel, Java etc, It gives you traffic light indication to highlight errors in red and warnings in amber, it gives hints, in indicates what closing braces elements belong to. There is also Sublime, but I found Netbeans gives me what I want, and the ability to add more if I want.
  17. 1 like
    You will need an array to store the values, on page load you will check localstorage to see if values already exist, if yes, update the array with these values, then as more values are submitted, add to array and localstorage.
  18. 1 like
    If you're sending string values in the URL then you'll also want to use the encodeURIComponent function to make sure the values don't break the URL. Otherwise, if you're sending a lot of data you'll probably want to just switch to a post request instead of a get request.
  19. 1 like
    Misplaced ',' instead of ' ' in margin styling, and ending semi-colon ';' for 'src = val' document.getElementById('btn').onclick = function() { var container = document.createElement("div"); container.style.maxWidth = "270px"; /* just for testing purposes dsonesuk*/ container.style.backgroundColor = "red"; /* just for testing purposes dsonesuk*/ container.style.display = "inline-block"; /* just for testing purposes dsonesuk*/ container.style.verticalAlign = "top"; /* just for testing purposes dsonesuk*/ //image var val = document.getElementById('idImage').value; var img = document.createElement('img'); src = val; /* replaced ',' with ';' dsonesuk */ img.src = src; //document.body.appendChild(img); img.style.width = "150px"; img.style.height = "150px"; img.style.padding = "10px"; //img.style.float = "left"; img.style.margin = "0px 50px"; /* removed ',' dsonesuk*/ //description var valDes = document.getElementById('idDes').value; var des = document.createElement('p'); var tex = document.createTextNode(valDes); des.style.display = 'block'; des.style.backgroundColor = "green"; /* just for testing purposes dsonesuk*/ /* des.style.top = '0px'; des.style.left = '0px'; removed because obsolete without position used dsonesuk*/ des.style.height = "160px"; des.style.padding = "10px"; des.appendChild(tex); //also tried tex.appendChild(des); container.appendChild(img); container.appendChild(des); //container.appendChild(tex); also tried this document.body.appendChild(container); }; With css and class Name <style type="text/css"> .img_descrip_wrap { display: inline-block; max-width: 270px; vertical-align: top; } .img_descrip_wrap img {width:150px; height: 150px; padding:10px; margin: 0 50px; display: block;} </style> document.getElementById('btn').onclick = function() { //image var container = document.createElement("div"); container.className = "img_descrip_wrap"; var val = document.getElementById('idImage').value; var img = document.createElement('img'); src = val; img.src = src; //description var valDes = document.getElementById('idDes').value; var des = document.createElement('p'); var tex = document.createTextNode(valDes); des.appendChild(tex); container.appendChild(img); container.appendChild(des); document.body.appendChild(container); };
  20. 1 like
    IF you are talking about multiple selection dropdown the value would contain 'Griffin,Swanson,Quagmire', so you would not need to change JavaScript, only the php side to split those names from $_GET['q'] For passing second variable, you have to run a function to retrieve the two values and apply to variables 'str' sames as before, and lets say 'home', then in ajax querystring xmlhttp.open("GET","getuser.php?q="+str+"&hometown="+home,true); Then in php $homeTown = strval($_GET['hometown']);
  21. 1 like
    Here's how you created nested elements: /* Create a container */ var container = document.createElement("div"); /* Create children */ var image = document.createElement("img"); //... Set attributes var paragraph = document.createElement("p"); // ... Set attributes and content /* Add children to the container */ container.appendChild(image); container.appendChild(paragraph); /* Add the container to the body */ document.body.appendChild(container);
  22. 1 like
    Sure, you can do all of the layout math yourself that the browser would normally do when it positions elements. You can decide how large you want each thing to be, how much spacing between them, how large the canvas is, etc, and figure out the coordinates to draw everything. If you want to lay out everything yourself on a canvas then you can do that, you just need to do all of the math that the browser would normally do for you. If you want a border around the image and caption, for example, then you need to decide how thick the border is and account for that space, any space between the border and the inner contents, etc. The same thing goes for text, if you want the text to wrap to the next line then it's your responsibility to figure out how many pixels long the text is and where to wrap it, there's a description about that here. When you draw on a canvas you're not using CSS to position things on the canvas and then having the browser lay it all out, you're doing all of that manually and just telling the browser the coordinates to draw everything. Anyway, that's why I was wondering why you're using a canvas instead of just creating the div and img tags and adding them to the document, where the browser will handle layout, position, wrapping, etc.
  23. 1 like
    You should get in the habit of structuring your code like Ingolme mentions. Put your PHP code first that will decide what the page is even going to do, and output HTML and whatever later on. If you're just going to redirect there's no reason to output a bunch of HTML anyway, right? So figure out first if you're going to redirect or show HTML or whatever else, and then do that.
  24. 1 like
    You should have the PHP run first, then the HTML. Here's the general structure of my PHP applications: <?php // Form handling logic if(isset($_POST['submit')) { // If submission was successful // Do something header('Location: http://www.example.com/target.php'); exit; } // Set variables for use in templates $template = 5; // Include a template file include 'template.php'; ?>
  25. 1 like
    You can store the query results in a multidimensional array check this https://www.w3schools.com/php/func_array.asp "example 4" you can then return the array .
  26. 1 like
    Use block elements, or turn them into block elements using display: block; or display: inline-block;
  27. 1 like
    Any inline element, or block element using display: inline; turning it into a inline element will not respond to width, height applied, its width will be determined by content within it.
  28. 1 like
    header > h1, header > p{ color:red; } /*OR*/ header > h1, header > h1 + p{ color:red; } /*Give header class name */ .colour_version01 {color:red;} <header class="colour_version01"> <h1>Some text</h1> <p>Some more text</p> </header>
  29. 1 like
    That would be fine if you were coding for a website, but HTML emails need to be simple. if you want it random, you'll have to create several different images with the pictures in different orders.
  30. 1 like
    <span class="fruit">apple</span> <span class="fruit">orange</span> <img class="fruit_img" src=""> <img class="fruit_img" src=""> <span class="fruit">pear</span> <img class="fruit_img" src=""> <span class="fruit">pineapple</span> <img class="fruit_img" src=""> <script type="text/javascript"> $(function() { $('.fruit').each(function(i) { $('.fruit_img').eq(i).attr('src', "http://placehold.it/400x150?text=" + $(this).html()); }); }); Note even though not all images directly follow the span element, the are given the correct url of image in same sequence. i is the span index starting from 0 with class name 'fruit', img elements with 'fruit_img' class, using .eq() and index of 'i' will target these specific img elements in same sequence as they set out in within the page..
  31. 1 like
    Then all you require is to have images with the rank name that matches the written rank, then using same principle you just supply image path which can be set to a constant variable and then the img file extension. You probably need to be more specific on the img element targeted, but you could use 'fruits' class name index, to target a class name given to the rank img index ref.
  32. 1 like
    If you check the network tab of your browser's developer tools, each time you click a color you'll see a request go out for an image. Here's one of them. http://hanes.scene7.com/is/image/Hanesbrands/HNS_HO5944_ChiliPepperHeather?defaultImage=Hanesbrands/HNS_HO5944_AwesomeBlueHeather&id=Cd9S33&wid=490&hei=622&fmt=jpg
  33. 1 like
    Instead of individual ref for each, use the actual innerhtml text as the complete src ref $(this).next('img').attr('src', "http://placehold.it/400x150?text=" + $(this).html()); Equals repeating duplicate of text in src of image Equals the value that defines the complete src reference <span class="fruit">apple</span> <img src=""> <span class="fruit">orange</span> <img src=""> <script type="text/javascript"> $(function() { $('.fruit').each(function(i) { $(this).next('img').attr('src', "http://placehold.it/400x150?text=" + $(this).html()); /* if (document.getElementById("fruit").textContent == "orange") { document.getElementById("img").src = "http://placehold.it/400x150?text=orange"; } else if (document.getElementById("fruit").textContent == "apple") { document.getElementById("img").src = "http://placehold.it/400x150?text=apple"; } else if (document.getElementById("fruit").textContent == "pear") { document.getElementById("img").src = "http://placehold.it/400x150?text=pear"; }*/ }); }); </script>
  34. 1 like
    BUT! you are still going through multiple id references ('fruit' and img) when only one span and one image only can have the unique id
  35. 1 like
    An id reference must be unique within a page, only class names can be used multiple times, so you would have to loop through classnames and make changes to next sibling img src attribute.
  36. 1 like
    You can't have block element within paragraph, move opening p tag under h2 tag. It probably corrected by adding closing tag after opening tag, which means no opening tag for ending closing p tag.
  37. 1 like
    Then you would have to make tmp duplicate array, of the array of ordered selected items, loop though selected items from dropdown and if identical remove, you should end up with last item deselected. Then remove this item from original array of selected items. Use .indexOf() to find matching values.
  38. 1 like
    Using jquery, - $('*').removeAttr('style'); or - $('span, div, ...').removeAttr('style'); // Specify the list of tag names for which style attribute to be removed.
  39. 1 like
    Use "==" for comparison. A single "=" is the assignment operator, which changes the value of the variable you're operating with. You can use a switch() statement as well to make your code more readable.
  40. 1 like
    Had to make slight change, correct invalid html, which you should validate at https://validator.w3.org/ before posting <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <style type="text/css"> #mydropdown option:hover { background: #c8c8c8; } #mydropdown option { padding: 5px; } .mydivs1 { display: none; } br { display: block; content: ""; margin-top: 5px; } .mydivs1 { border: 1px solid black; padding: 5px; height: 211px; width: 172px; margin-left: 5px; background-color: #ff8080; } .mydivs2 { border: 1px solid black; padding: 5px; height: 199px; width: 35px; float: left; background-color: #b3e6b3; } .mydivs3 { border: 1px solid black; height: 199px; width: 103px; margin-left: 52px; padding-left: 10px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; background-color: #cce6ff; } </style> </head> <body> <input type="text" id="mytextbox" placeholder="Search Foods"> <p></p> <select id="mydropdown" multiple="multiple"> <option value="optionx_Fruits">Fruits</option> <option value="optionx_Vegetables">Vegetables</option> <option value="optionx_Nuts">Nuts</option> <option value="optionx_Meats">Meats</option> </select> <p></p> Results: <p></p> <div id="results"> <div class="mydivs1" id="optionx_Fruits"> <!--match="optionx Fruits"--> <div class="mydivs2"> <button class="button1">X</button> <p style="clear:both"></p> <button class="button2">C</button> </div> <div class="mydivs3"> <span class="myspan1">Fruits</span> <p></p> <span class="myspan2">1:</span> <br> <span class="myspan3">Avocados</span> <p></p> <span class="myspan2">2:</span> <br> <span class="myspan3">Blackberries</span> <p></p> <span class="myspan2">3:</span> <BR> <span class="myspan3">Raspberries</span> </div> <p></p> </div> <p></p> <div class="mydivs1" id="optionx_Vegetables"> <!--match="optionx Vegetables"--> <div class="mydivs2"> <button class="button1">X</button> <p style="clear:both"></p> <button class="button2">C</button> </div> <div class="mydivs3"> <span class="myspan1">Vegetables</span> <p></p> <span class="myspan2">1:</span> <br> <span class="myspan3">Beets</span> <p></p> <span class="myspan2">2:</span> <br> <span class="myspan3">Eggplants</span> <p></p> <span class="myspan2">3:</span> <BR> <span class="myspan3">Spinach</span> </div> <p></p> </div> <p></p> <div class="mydivs1" id="optionx_Nuts"> <!--match="optionx Nuts"--> <div class="mydivs2"> <button class="button1">X</button> <p style="clear:both"></p> <button class="button2">C</button> </div> <div class="mydivs3"> <span class="myspan1">Nuts</span> <p></p> <span class="myspan2">1:</span> <br> <span class="myspan3">Almonds</span> <p></p> <span class="myspan2">2:</span> <br> <span class="myspan3">Pecans</span> <p></p> <span class="myspan2">3:</span> <BR> <span class="myspan3">Walnuts</span> </div> <p></p> </div> <p></p> <div class="mydivs1" id="optionx_Meats"><!--match="optionx Meats"--> <div class="mydivs2"> <button class="button1">X</button> <p style="clear:both"></p> <button class="button2">C</button> </div> <div class="mydivs3"> <span class="myspan1">Meats</span> <p></p> <span class="myspan2">1:</span> <br> <span class="myspan3">Chicken</span> <p></p> <span class="myspan2">2:</span> <br> <span class="myspan3">Fish</span> <p></p> <span class="myspan2">3:</span> <BR> <span class="myspan3">Turkey</span> </div> <p></p> </div> </div> <p></p> <!-- Original script --> <script type="text/javascript"> /* jQuery.fn.filterByText = function(mytextbox) { return this.each(function() { var select = this; var options = []; $(mydropdown).find('option').each(function() { options.push({ value: $(this).val(), text: $(this).text() }); }); $(mydropdown).data('options', options); $(mytextbox).bind('change keyup', function() { var options = $(mydropdown).empty().data('options'); var search = $.trim($(this).val().replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&")); var regex = new RegExp(search, "gi"); $.each(options, function(i) { var option = options[i]; if (option.text.match(regex) !== null) { $(mydropdown).append( $('<option>').text(option.text).val(option.value) ); } }); }); }); }; $(function() { $('#mydropdown').filterByText($('#mytextbox'), true); });*/ /* $(document).ready(function() { function exists(elemt, arr) { return (jQuery.inArray(elemt, arr) > -1); } $('#mydropdown').change(function() { var $selected = $(this).val(); $('.mydivs1').each(function() { $(this).toggle()[ (exists($(this).attr('match'), $selected)) ? 'show' : 'hide'](); }); }); });*/ </script> <!--NEW Script --> <script> var SelOrderArray = []; $('#mydropdown').on('change keyup', function() { $('.mydivs1').hide(); var $selected = $(this).val(); if ($selected.length > 0) { $.each($selected, function(i) { //loop through selected possible multiple selected options if (SelOrderArray.indexOf($selected[i]) === -1) { //if current looped through $selected value not in array then add to array SelOrderArray.push($selected[i]); } }); } else { SelOrderArray.push($selected[i]); } // loop through ordered array of slected options $.each(SelOrderArray, function(i) { //clone element with specific id to temp storage variable var TmpDivClone = $("#" + SelOrderArray[i]).clone(); //remove current existing element with specific id $("#" + SelOrderArray[i]).remove(); // prepend temp cloned element to div #result wrapping mydiv1 elements so prepending remains below dropdown and show TmpDivClone.prependTo('#results').show(); }); }); </script> </body> </html>
  41. 1 like
    There are three aspects to take into account in a web page: Content: HTML Presentation: CSS Behavior: Javascript The same way we want to separate content from presentation, we also want to separate content from behavior. Javascript should only be inside <script> elements, CSS should only be in <style> or <link> elements and HTML should not be polluted with attributes concerning behavior and presentation. You wouldn't use align and bgcolor attributes, so why would you use onclick attributes? In your original code, otherTongue is restricted to the local scope of the function it was declared in, it's not accessible from outside. That's why the onchange event attribute can't find it, the event attribute is looking for a global function.
  42. 1 like
    var SelOrderArray=[]; $.each($selected,function(i){ //loop through selected possible multiple selected options if(SelOrderArray.indexOf($selected[i]) === -1){ //if current looped through $selected value not in array then add to array SelOrderArray.push($selected[i]); } }); // loop through ordered array of slected options $.each(SelOrderArray,function(i){ //clone element with specific id to temp storage variable var TmpDivClone = $("#"+SelOrderArray[i]).clone(); //remove current existing element with specific id $("#"+SelOrderArray[i]).remove(); // prepend temp cloned element to div #result wrapping mydiv1 elements so prepending remains below dropdown and show TmpDivClone.prependTo('#result').show(); }); Not tested, written on tablet
  43. 1 like
    First of all you can't have multiple id references, or spaces within id value, and as id must be unique within a page, you have to clone a element with unique id and temporarily apply it to variable, then remove original, then prepend temporarily cloned to a surrounding container which would make it easy to control placement and order. But first you will need an array that will store id references, that do not currently exist, in order they were selected, then looping this array you can temp clone, remove original, prepend clone.
  44. 1 like
  45. 1 like
    Buttons are inline elements, so they need to be centered by setting text-align on the parent element.
  46. 1 like
    .form-actions {width:200px; margin-left:auto; margin-right:auto; text-align:center;}
  47. 1 like
    Because they show as the order they are laid out from the beginning. There are several ways to do this, but will involve cloning the current hidden divs, in the order they were selected, removing the original hidden selected and then appending cloned divs in correct selected order.
  48. 1 like
    I don't think that it would be a bad thing personally, as a lot of popular frameworks like Angular 2 and React are using ES6 and TypeScript in their tutorials and so are a lot of the blogs and guides. That said, there will still be the requirement of needing a transpiler for the time being but, I certainly think there are lots of tutorials and guides around that too, however, at the risk of linking people off site to other tutorials (for Babel, TypeScript, Webpack, Gulp, etc) I could see W3Schools being hesitant in that regard as well. Either way, I firmly encourage any intermediate JS developer to start learning ES6 features now and consider taking the extra time to learn how to transpile that source code down to ES5 compatible JS. New features, like imports have fundamentally helped changes the language (for the better IMO) and I think the resulting source code is better for it too.