Jump to content

All Activity

This stream auto-updates     

  1. Past hour
  2. css references in w3schools template

    I am building a website using the following responsive web design template from w3schools (thanks!): https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_webpage&stacked=h The html references four css files: <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> I think I can just copy the first css files (w3.css and w3-theme-black.css) to my server, but the last two css files (googleapis and font-awesome) have me a little confused. Should I just leave the css links as they are (to googleapis.com and cloudflare.com) or is there a way to put them on my server, like the css files from w3? I believe the css from googleapis.com is just for providing a specific font, right? Is it common nowadays to use online fonts from google? It looks like the css from font-awesome only provides a single icon, the three bars for navigation on small screens. Am I correct about that? Does using css from outside domains slow down my site enough to matter? Thanks in advance, Ken
  3. Help modifying w3 template

    Completely remove 'w3-third' class column elements, then remove 'w3-twothird' class from remaining column so that 'w3-container' class only, remains.
  4. Today
  5. Help modifying w3 template

    I am building a website using a w3 responsive web design template. The template has top navigation, left side navigation, and the main content area is divided into two columns (on the template the right column is shown as being used for advertising. I would like to eliminate the right column in the main content area. Can anyone tell me what I need to change. Here is a link to the template on w3 ... https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_webpage&stacked=h Thanks, Ken
  6. CSS Required Field X Not Displaying Properly

    Perfect! Thank you!
  7. Get Checkbox Data error

    Many thanks. Works beautifully!
  8. multiple width/height values for modal images

    You need to check height against width using javascript, once images are loaded, then add class of landscape or portrait depending on outcome. Then use javascript to adjust modal to class of image.
  9. I found code for displaying thumbnails that open as full size images at w3schools here: https://www.w3schools.com/howto/howto_css_modal_images.asp This works really well but I have one problem: Some of the images are really wide panoramas. If I give a width of 60% for the modal content then the regular sized images display well on the screen, taking up the full vertical space, but the panoramas - while occupying the same horizontal space - are very short. And if I define the width as 90%, then while the panoramas fit beautifully on the screen, the regular size images do not fit vertically. I would like to have 2 different definitions for the 2 classes of images so both can optimally display - filling the screen top to bottom for the regular images and side to side for the panoramas. Is there any way to do this? Thanks.
  10. Get Checkbox Data error

    <?php $stove=""; if(isset($_POST['stove'])){ $stove=$_POST['stove']; }
  11. Get Checkbox Data error

    In my form file I have [<input type=\"checkbox\" name=\"stove\" id=\"stove\" value=\"y\">] I use [method=\"POST\"] on Submit. In my next file I have [$stove=$_POST['stove'];] which works fine if the box was checked but if the box was not checked, I get error "Notice: Undefined index: stove in...." How can I test if the checkbox has been checked? Tks
  12. Slideshow - No initial image

    You're getting a Javascript error on that page, it might be caused by including and running that Javascript code before the elements on the page are ready.
  13. Yesterday
  14. Slideshow - No initial image

    I used the code from this location.... https://www.w3schools.com/howto/howto_js_slideshow.asp And got it to work ok, for my purposes (with just a few changes) except the initial image doesn't show up. Clicking a dot will make it start, but how do I get it to show the first image automatically. See: https://www.audioanalogy.ca/studiotour.htm to see only the dots, but no start image. I hope someone can help narrow down the glitch. Thanks
  15. It would be good if the javascript used in certain W3 CSS components was unified in a .js file. And that the options that these components could have, currently very limited, could be passed as parameters to these functions, achieving many more versatility and power.
  16. Displaying Table Results on a page

    In general, you send a select SQL query to get the data you want, and you loop through the results to display each result however you'd like. WordPress should already have a database object you can use to interact with the database.
  17. Keep a form open to enter data

    You need to use event handlers. You can use a key event on the field itself, or a click event on the button or whatever, but that event handler should get the form data and set it in localstorage.
  18. Matomo: async, defer, and insertBefore()

    It's not magic, like all the rest of jQuery it's just a wrapper for existing vanilla Javascript. jQuery does not add any functionality, all it does it make certain things easier to use. The only scripting language all modern browsers understand is Javascript, so anything like jQuery is ultimately written in and uses vanilla Javascript. For the ready function, it's just a wrapper for the document.load event. More specifically, and recently, it probably just runs document.addEventListener if that's available. In terms of what it does, you just declare and pass a function to it which will get executed when the event happens. It's not about "permitting" things to run, things happen in a well-defined order, and as far as I know the event handlers do get executed in the order in which they're added but I believe they also get executed asynchronously. That's why I said to leave jQuery out of the discussion - if you want to understand what it does, you only need to understand the underlying Javascript concepts on which jQuery is built. If you understand that then you can review the jQuery source code to see how jQuery specifically uses the built-in functionality. The source code for that is here: https://github.com/jquery/jquery/blob/master/src/core/ready.js Lines 71 through 84 set up the actual DOM event to execute jQuery's own event handler, which is the completed function, which calls the internal ready function, which runs each handler on line 54.
  19. Validating Custom Form in Admin Panel

    There's some information here: https://codex.wordpress.org/Creating_Options_Pages https://codex.wordpress.org/Writing_a_Plugin
  20. Keep a form open to enter data

    I hope there is a simple solution to this. I want to use localStorage to remember a user, but if it's not there I want to open a form so the user can enter the info in the input box and press Submit. Then I would put that info into the localStorage for next time. I can get the form to open and display fine, but the code just continues to execute after I open the form ( display set to "block"). How can I get the code to stop and wait for the input to come in before continuing with the next line of code? I have looked at the <dialog> tag with '.showmodal' which would work I guess, but it says it is not supported in Internet Explorer or FireFox; I want it to work in all browsers. I have tried a while loop to wait until the 'submit' button is pushed, but the whole thing bombs out when I put it in and the modal form doesn't even show. If I assign a value to the input , and insert the line "userID = document.getElementById("enterUserID").value;" just b/4 the return statement, I get the value I assigned. I appreciate any help explaining it to me.... I have included my code if it helps. <!DOCTYPE html> <html> <head> <title>Schenectady Kettles</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- <link --> <style> #logInModal {display:none;z-index:3;width:80%;height:200px;margin:auto; color:purple;background-color:lemonchiffon;text-align:center; font-size:8vw;font-weight:bold;} </style> </head> <body> <h3>Testing for Log In</h3> <div> <button id="logInBtn" type="button" onclick="logInClicked()">Log In</button><br> </div> <!-- Log In Modal --> <div id="logInModal"> <div> Enter User ID<br> <input type="text" id="enterUserID" placeholder="User ID" autofocus> <!-- Check input !! --> <button type="button" id="getIDBtn">Submit</button> </div> </div> <p id="demo"></p> <script> function logInClicked() { var uID = "hello"; if (typeof(Storage) !== "undefined") { if (localStorage.userID) { uID = localStorage.userID; } else { uID = getUserID(); document.getElementById("demo").innerHTML = uID; } } } function getUserID() { var userID = "123"; document.getElementById("logInModal").style.display = "block"; document.getElementById("getIDBtn").onclick = function() {userID = document.getElementById("enterUserID").value;}; return userID; } </script> </body> </html>
  21. Matomo: async, defer, and insertBefore()

    They may be read and executed, but a executed code may not completely finish before other code is executed. Unless you specifically create the code to run after the previous is completed. The jQuery ready( ) function acts as a onload event itself and is mainly used for presetting, manipulation of elements, and adding events to specific elements after the pages html has been fully rendered.
  22. Matomo: async, defer, and insertBefore()

    JSG: But, you have set aside the very thing that I was trying to understand -- the jQuery ready( ) function. If I have understood this function correctly, it allows the Javascript contained within the function to be read as the rest of the page is being downloaded, but does not permit what is read to be executed until the rest of the page has been completed. My question, then: does the jQuery ready() function also insure that the Javascript thus read and loaded execute in the order that it is entered into the ready function? Roddy
  23. Hi I have created a WordPress plugin located in the Admin panel that contains a custom form. How would I go about adding the Javascript validation here?
  24. Displaying Table Results on a page

    HI In WordPress, I have created a simple plugin that allows the logged in user to: - Add a Tender - Update a Tender - Delete a Tender Now I need to be able to display a list of all the tenders to our visitors (in table format). I am new to this and am not sure how to accomplish this task. Could someone please point me in the right direction? Much appreciated.
  25. Last week
  26. Modals with combo boxes

    You have missed closing div's for second modal, the btn1 still refers to first class 'close' found using index of 0, the 'bin' variable which has onclick event in second modal code, should be 'bin1'. You also need to reduce number of window.onclick events to 1, and add 'else if' condition to check for modal1 target event.
  27. Modals with combo boxes

    Ok I have 2 types of files I want people to be able to get. Article and Calendar. The differences are 1) the file names are a bit different - Year month Article.ext and Calendar month year.ext and 2) the extensions are different - doc for articles, docx for calendar, htm for article, html for calendar. There's a bunch of files so I'd really not have to go changing the file names. Here's the code I have so far. <style> body {font-family: Arial, Helvetica, sans-serif;} /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } /* The Close Button */ .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } </style> </head> <body> <h2>Please Select Star or Calendar.</h2> <!-- Trigger/Open The Modal --> <button id="myBtn">Monthly Star</button> <!-- The Modal --> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close">&times;</span> <form> Select the year: <select id="mySelect"> <option>2018</option> <option>2017</option> <option>2016</option> <option>2015</option> </select> <br /> Select the month: <select id="mySelect1"> <option>January</option> <option>February</option> <option>March</option> <option>April</option> <option>May</option> <option>June</option> <option>July</option> <option>August</option> <option>September</option> <option>October</option> <option>November</option> <option>December</option> </select> <br /> Select PDF, Word or Webpage: <select id="mySelect3"> <option>pdf</option> <option>doc</option> <option>htm</option> </select> <br><br> <input type="button" onclick="myFunction()" value="Click Me!"> <br /> </form> <a id="myLink" href="http://www.bethlehemvinton.org/Star/April 2017 Bethlehem Star.pdf">Microsoft</a> <script> function myFunction() { var obj = document.getElementById("mySelect"); var obj1 = document.getElementById("mySelect1"); var obj3 = document.getElementById("mySelect3"); document.getElementById("myLink").innerHTML = "New Link"; document.getElementById("myLink").href = "http://www.bethlehemvinton.org/Star/" + obj1.options[obj1.selectedIndex].text + " " + obj.options[obj.selectedIndex].text + " Bethlehem Star." + obj3.options[obj3.selectedIndex].text; document.getElementById("myLink").target = "_blank"; } </script> </div> </div> <!-- Trigger/Open The Modal --> <button id="myBtn1">Monthly Calendar</button> <!-- The Modal --> <div id="myModal1" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close">&times;</span> <form> Select the year: <select id="mySelectC"> <option>2018</option> <option>2017</option> <option>2016</option> <option>2015</option> </select> <br /> Select the month: <select id="mySelectC1"> <option>January</option> <option>February</option> <option>March</option> <option>April</option> <option>May</option> <option>June</option> <option>July</option> <option>August</option> <option>September</option> <option>October</option> <option>November</option> <option>December</option> </select> <br /> Select PDF, Word or Webpage: <select id="mySelectC3"> <option>pdf</option> <option>docx</option> <option>htm</option> </select> <br><br> <input type="button" onclick="myFunctionC()" value="Click Me!"> <br /> </form> <a id="myLinkC" href="http://www.bethlehemvinton.org/Star/April 2017 Bethlehem Star.pdf">Microsoft</a> <script> function myFunctionC() { var objC = document.getElementById("mySelectC"); var objC1 = document.getElementById("mySelectC1"); var objC3 = document.getElementById("mySelectC3"); document.getElementById("myLinkC").innerHTML = "New Link"; document.getElementById("myLinkC").href = "http://www.bethlehemvinton.org/Star/Calendar for " + objC1.options[obj1.selectedIndex].text + " " + objC3.options[obj3.selectedIndex].text; document.getElementById("myLinkC").target = "_blank"; } // Get the modal var modal = document.getElementById('myModal'); // Get the button that opens the modal var btn = document.getElementById("myBtn"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } // Get the modal var modal1 = document.getElementById('myModal1'); // Get the button that opens the modal var btn1 = document.getElementById("myBtn1"); // Get the <span> element that closes the modal var span1 = document.getElementsByClassName("close")[0]; // When the user clicks the button, open the modal btn.onclick = function() { modal1.style.display = "block"; } // When the user clicks on <span> (x), close the modal span1.onclick = function() { modal1.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal1) { modal1.style.display = "none"; } } </script> </body> If I do just 1 modal (the first one) it works fine. But when I add the 2nd it breaks so I'm assuming I've got 2 variables somewhere with the same name. 1) is this the easiest way to handle this? 2) I'd rather not have the link "Current..." showing but if I delete it then I can't make it work. I know I could probably do some scripting to create it on button click but ... well, sad to say I'm running out of time to get this done. Any help would be appreciated.
  28. Populating link with combo box values

    Thanks. It doesn't matter when it changes as long it's before populating the link. I've decided to try a different approach as the file names are different for Calendar and Article beyond the extension. So I was thinking that I could do 2 modals. 1 for article and 1 for calendar. but they're not working. I'm starting a different topic for that.
  29. Thanks for your help with this dsoneuk. At this point in time it is the only option. It makes sense what you are saying, and can see how this is a less-than ideal scenario. I will continue to explore options...
  1. Load more activity
×