Jump to content

Ingolme

Moderator
  • Content count

    13,177
  • Joined

  • Last visited

  • Days Won

    342

Everything posted by Ingolme

  1. For a popup you can use fixed position and vh units, which refer to percentage of the viewport height. .popup { position: fixed; top: 5vh; height: 90vh; /* Center horizontally */ left: 50%; transform: translateX(-50%); width: 900px; max-width: 95vw; }
  2. multiple sql queries for tab navigation UI

    Yes, using the technique in the second half of my post, select all rows in the table and use the while() loop to separate it into the four different arrays.
  3. Where can I find the demo database?

    I don't think that's public anywhere, but you can create a table with the same structure and contents yourself. Clicking on a table name in this editor will show all of its fields and records https://www.w3schools.com/sql/trysql.asp?filename=trysql_select_columns
  4. multiple sql queries for tab navigation UI

    One query should be enough, since the letter is a parameter, add it in a WHERE condition as such: SELECT * FROM table WHERE letter = ? Where "?" is a placeholder for the letter you're searching for. What does your code look like? If what you're saying is that you're loading all the data at once and having Javascript change the tabs, then it can be done with one query. While looping through the rows, check to see that an array with the specified key exists and, if it doesn't, create it. Sorting by letter would probably make things more efficient. $output = []; while($row = $query->fetch()) { $key = $row['letter']; if(!isset($output[$key])) { $output[$key] = []; } $output[$key][] = $row; }
  5. How to get smooth filtering to this?

    The display property is not animatable. If you would like to use transitions you'll have to use Javascript to modify properties you want to change like height or opacity and then, once the animation finishes playing, change the display property to "none" or "block". You can use setTimeout to wait for the animation to finish.
  6. This is going to be more complicated. The image onload method is also asynchronous, so when the "Do something" line of code begins not all images will have been loaded yet. Since the images seem to be the same for all of the requests, you shouldn't load them in the handleResponse function, just load them outside. // Load POST data var complete = 0 for (var i = 0; i < arr.length; i++) { $.post().then(handleResponse); } // Load images var images = { 'title1' : 'http://url-to-img-1', 'title2' : 'http://url-to-img-2', 'title3' : 'http://url-to-img-3' }; var imagesAmount = Object.keys(images).length, var imagesLoaded = 0; for(var img in images) { var imgObj = new Image(); imgObj.src = images[img]; imgObj.onload = handleImages; } // POST handler function handleResponse() { complete++; testProcessComplete(); } // Image handler function handleImages() { imagesLoaded++; testProcessComplete(); } // Check to see if everything is complete and, if so, run some code function testProcessComplete() { if(complete == arr.length && imagesLoaded == imagesAmount) { // Do something } }
  7. You can use the value property to get the selected option: https://www.w3schools.com/jsref/prop_select_value.asp
  8. The variable imagesLoaded has not been initialized anywhere, so its value is probably NaN (Not a Number). The onload property must be a reference to a function, currently you're assigning a number to it.
  9. Breaking a line of text in the middle

    There is no way to do that. You could manually break it into pieces and put each piece into a <span> with the CSS white-space property set to "nowrap" but it's not a good idea since it needs to be done manually for any block of text. A possibly better solution is to specifically set the max-width of the div for different breakpoints, so that when the screen reaches the breakpoint it becomes small enough to wrap almost two full lines, or three full lines. There is no perfect solution, try to be creative with the properties that CSS provides.
  10. Multiply File Upload

    If I remember correctly, if you change the name of the input to "fileToUpload[]" it should arrive as an array in PHP. If that worked correctly, on the server side the $_FILES array actually has the indices on the second component. Instead of $_FILES["fileToUpload"][0]["size"] you actually have to access $_FILES["fileToUpload"]["size"][0].
  11. You probably should read through the PHP tutorial, there's a full section of the tutorial dedicated to form handling: Form Handling Form Validation Form Required Form URL/E-mail Form Complete This is just the basics of building a server application. If you intend to make a mailing list, you'll need a database to store e-mail addresses and probably an admin panel to create the e-mail templates to be sent to the subscribed users. What you're trying to do is not a simple task that can be solved by just copying and pasting code.
  12. Drop-Down Menu without CSS

    It has to be between <style> tags.
  13. Drop-Down Menu without CSS

    Yes, CSS code goes in the <head> section of the document.
  14. Question on forcing update to 'include' statement

    The act of submitting a form is refreshing the page. If you want to do this without submitting a form you will need a Javascript program to change the document. You will need to use AJAX if you want to make permanent changes to the server in addition to changing the currently displayed page on the browser.
  15. Favourite html editors...

    Without syntax highlighting, brace matching and auto indentation, a simple editor like that is not very useful.
  16. WRITE a file upon hard disk of customer

    No, you cannot just put files on clients' computers, that would be such an easy way to install viruses onto the device of anybody visiting a website. Browsers do not, and never will, provide a method to write files on the computer. ActiveX hasn't been used in IE in over a decade because it was a big security vulnerability.
  17. Drop-Down Menu without CSS

    You should have your CSS in a separate file, it only has to be one file. With that said, you can put CSS code anywhere. If an example has the CSS in another file, you can just copy the code and put it in your HTML document between style tags.
  18. Anywhere where you see function() {} can be replaced with the name of a function, and that's actually the best practice since it keeps code organized.
  19. When you use a while loop like that you cause the whole browser to freeze until all the code is finished executing. The correct way to do this is to use setTimeout() or setInterval() to send requests when needed. var characterID = "Something"; var numRequests = 30; var interval = setInterval(sendRequest, 1000); var sending = false; sendRequest(); function sendRequest() { if(!sending) { // Make sure no more than one request is happening at the same time sending = true; $.post('scripts/rcon_queue.php', {cID: characterID}, handleResponse); numRequests--; if(numRequests <= 0) { // If we've sent 30 requests then stop sending requests clearInterval(interval); interval = 0; } } } function handleRespose(response) { sending = false; if(response == "1"){ console.log("Queue is not cleared."); } else { console.log("Queue is clear."); if(interval > 0) clearInterval(interval); } }
  20. In Javascript it is correct to use a hyphen for a CSS property if it's inside a CSS string, but setting the style property as a CSS string is not a common way to set styles, I'm not certain if it will work properly. It would be better to set the Javascript property as such: cnv1.style.zIndex = "2"; cnv2.style.zIndex = "1";
  21. Links inside :after CSS

    The :after pseudo-element has been replaced with the <span> element, so you will not need it anymore. Put all the properties from your :after selector on the .label element instead. This is more advanced CSS, if you're new to CSS you probably should get more familiar with regular CSS before moving on to things like this.
  22. How to Automate an HTTPRequest with PHP

    verify_email() is just an example function, which I would expect you to declare in a file that will be included on any page that needs to make use of it. I don't know what's supposed to go in that function or even if the number of arguments I created is correct, since I don't know the full requirements of your application. It's up to you to break your program into reusable parts that each work on their own.
  23. Links inside :after CSS

    These rules need to be removed: nav ul li:nth-child(1):after { content: "BIO"; line-height: 69px; } nav ul li:nth-child(2):after { content: "DISC"; line-height: 69px; } nav ul li:nth-child(3):after { content: "VIDEO"; line-height: 69px; } nav ul li:nth-child(4):after { content: "SHOWS"; line-height: 69px; } There should be a space between "li" and ".label" here: nav ul li.label { position: absolute; background: black; color: crimson; top:0; left: 70px; width: 70px; height: 100%; opacity:.5; transform: perspective(400px) rotateY(90deg); transform-origin: 0 100%; transition:all .5s ease-out; } These selectors need to be changed to take the new <a> element into account: nav ul li:hover { transform: translateX(-69px); } nav ul li:hover:after { opacity: 1; transform: perspective(400px) rotateY(0deg) scale(1) ; } nav ul li > div { display: inline-block; padding: 24px 0; background: transparent; } Do you understand the concept of what is trying to be done here? The structure we're working with is very simple: One <a> element, with a <div> and a <span> as children. The list surrounding it is not important.
  24. Links inside :after CSS

    The <a> element is by default an inline element, you need it to be a block to be styled correctly. Read about inline and block elements here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes
  25. Links inside :after CSS

    What I was saying is that there is no such thing as a "link" property in CSS. Change your structure to be like this: <li> <a href="#"> <div style="font-size: 1.25rem;" class="icon-notebook"></div> <span class="label">BIO</span> </a> </li> Then change the selectors, replacing references to nav ul li with nav ul li a and replacing nav ul li:after with nav ul li .label. Be sure to set the display of the <a> element to "block"
×