All Activity

I think to make your web app work offline on your iPad, you can utilize the capabilities of service workers. Service workers allow your web app to cache resources so they can be accessed offline. You'll need to register a service worker in your HTML file and define caching strategies for your assets like HTML, CSS, and images. And one thing do ensure your iPad's Safari browser supports service workers. By implementing service workers, your web app will be able to function offline seamlessly. You can find detailed tutorials and examples on service workers on resources like MDN Web Docs or Google Developers.

JavaScript Object Protection : https://www.w3schools.com/js/js_object_protection.asp (I think this page is recently added?) For the sub-topic "JavaScript Object.isExtensible()", two links from 3rd and 4th example links give errors : "The file you asked for does not exist". 3rd Example : https://www.w3schools.com/js/tryit.asp?filename=tryjsref_object_isextensible 4th Example : https://www.w3schools.com/js/tryit.asp?filename=tryjsref_object_isextensible2 Also, is it just me? Some times the arrow keys and enter key stop working when typing in forum topics/posts.

あなたのコンテンツに出会ったことで、私の言語力が大幅に向上しました。 と同様に ielts スコア 私たちは読者にチャンスを増やす機会を提供します。 もっと素晴らしい情報を得るために必ず戻ってきます。 乾杯 Whatsapp... +44 7529 691593 EMail... Databasecertified@gmail.com https://bulldogsbytj.com/ielts-とは/

あなたのコンテンツに出会ったことで、私の言語力が大幅に向上しました。と同様に <a href="https://bulldogsbytj.com/ielts-%e3%81%a8%e3%81%af/">IELTS スコア</a> 私たちは読者にチャンスを増やす機会を提供します。もっと素晴らしい情報を得るために必ず戻ってきます。 乾杯

Creating a web app for offline use on your iPad sounds like a cool project. Reminds me of when I was tinkering with coding for the first time, trying to figure out how to make my own little creations come to life.

I think it's hard to enforce those rules in other countries (e.g. China or India)

I have a sample here: https://kendawson.online/swatch/ If you're unfamiliar with Swatch Internet Time, check this out: https://en.m.wikipedia.org/wiki/Swatch_Internet_Time The code is here: https://github.com/kendawson-online/swatch I'm still working on it, trying to turn it into a PWA (Progressive Web App) which can be used offline as well. Stay tuned. [Posted at @662]

Great! If you already have a language under your belt, learning front end stuff will be easier. I do a lot of PHP coding as well. Sometimes I know how to do something in PHP, but not Javascript. So, I'll ask Perplexity.ai and provide a sample PHP snippet of code and ask: "Is there a way to do this functionality in Javascript?" and it will provide sample code to test. I'm at a point now, where I want to focus on the logic of the code, and not get bogged down doing low-level UI stuff. That's where 3rd party libraries and frameworks like node.js or vue.js come in handy. My next big leap is to learn how to use these tools. I'm also looking into Socket runtime https://socketsupply.co/guides/ for networking my apps. Keep going with your coding! You'll get there.

To whom it may concern (lol). Even though the forum is not that much populated (partially thanks to the tiny plain-text forums link, all the way at the bottom of tutorial pages!). But I think the almost-proverbial "Mother of All Modern Programming Languages" should be given a section of her own, also catering inclusively for her siblings.

Thank you so very much for detailed reply and suggesting/sharing many of these tips... appreciated!!! I learned C just as a hobby over a course of several years. Moving on to HTML/CSS/JS was a weird experience because of the vast difference in the obvious domains (system + general programming versus front-end web dev etc). But now having learned it around 60~70%, it starts making sense. Thanks for suggesting perplexity.ai, these tools really save a lot of time. With C, I never needed to use any thing else and it is really enjoyable doing every little bit on your own. But front-end is just way too much raw syntax to deal with, esp when we may have to implement other stuff too (db and back-end etc). "No need to re-invent" kinda logic! And yes, w3shools have been a tremendous help and joy to learn. I started with MDN guides but I quickly got fed up. It kinda felt random to me at times (the reference section is awesome though). W3 is more direct, systematic and easier, plus the forums! Thanks again for taking your time to write back, I will definitely stay in touch.

I want to be able to force visitors to my website to visit and acknowledge a disclaimer on the first time they visit, after which they will never see it again. Searching, I have found a couple of examples, neither of which seem to do what I want. <script> $(document).ready(function(){ if(!$.cookie('welcomeMsg')){ $(".top").show(); $.cookie('welcomeMsg', 'Y', { expires: 365*3 }); } }); </script> and <script> if (localStorage.getItem("visited")) { window.location.href = "OneTimePage.html"; } localStorage.setItem("visited", "true"); </script>

Hi, You're welcome. I'm glad that the code was helpful. I wrote this code over a period of a few weeks (on and off). I would just work on it a little at a time. I started by studying the To Do List on the W3 Schools example. I liked it a lot. But, I wanted to make some changes. So, I began by downloading their code and then adding my own functions to it to make it do the things I wanted to see. I have also been learning Bootstrap so it was a good chance for me to practice with that too (e.g. layout and modal windows). I'm still around on the forums occasionally, but, I get busy with stuff. If you have any questions you can post them here and I'll try to help when I see it. Other people in the forum might chime in and help answer your questions too. Javascript, like any other skill, is something you learn over time and build on. When you are studying math, you can't jump right into advanced level mathematics and expect to know how to do it. You start with the basics (addition, subtraction, multiplication) and work your way up slowly. Each concept you learn builds on the previous concepts you've learned. Believe it or not, I knew almost nothing about Javascript or front-end UI development 3 years ago. I decided I wanted to learn how to do it and have worked my way through all the HTML / Javascript / CSS lessons on W3 Schools. I think that the trick is to just do it. Start off with some sample code. Then, keep working on that sample code and changing it until you get it to do what you want. Studying text lessons is great for overall knowledge and understanding. But, until you get your hands dirty and dive into the code, it won't make any sense. Once you start writing the code then the things you've read will make sense. "OH! So, that's why I can't do it this way! I get it now!" I am one of those people who is very anti-library and anti-framework. I don't really use Node.js or external 3rd party libraries. I try to do everything in HTML with vanilla Javascript. But, as I have gotten more advanced in my coding, I can see how certain things save time. (Example: Jquery, or Bootstrap, or 3rd party libraries like "Sortable.js"). I started writing the drag-and-drop functionality in my To Do List so that it works on mobile. But, it was very complex and taking a lot of my time. I eventually decided to look and found that Sortable.js already existed and worked well. So, I implemented it into my To Do List rather than writing all the code myself from scratch. But, try some ideas of your own! I would begin with the original example from here: https://www.w3schools.com/howto/howto_js_todolist.asp Make sure you understand how it's working. And what's going on with the code. Then, after you understand that, you can expand your knowledge to focus on things like "reading / writing to local storage", "working with JSON data", etc. I would start with one feature at a time though. Pick something you want the To Do List to do. (Example: "I want to be able to have categories for my To Do items") Then, start with the original HTML / Javascript / CSS and try to add that one feature. If you can do that, then you can add other features. But, just try to break it down to smaller components and focus on one thing at a time. Don't get overwhelmed by looking at everything all at once. There are also great AI tools like https://perplexity.ai out there you can use to help you find resources. I like to use AI tools like this to prototype apps. I describe my idea to the AI tool which generates a basic framework to start from. Then, I expand and improve on the code. But, be careful, because AI tools are not "smart" nor do they really understand things. You have to know enough about HTML / Javascript / CSS to know when the AI tool is making a mistake (or suggesting something that won't work). Use logic and deductive reasoning on your own and don't rely on the AI tool to do all the work for you. If it says something wrong -- tell it that it's wrong and ask it to fix the problem. Using tools like this, I am able to quickly go from idea to working code. Then, I just keep refining and improving it. Also, DON'T FORGET TO MAKE BACKUPS! I like to do a lot of iterations of my code. I have "test1", "test2", "test3", etc. Back up your work regularly so that if you accidently undo or break something you had that was working you can go back and find the back up copy and restore it. Sometimes my dev folders are a giant mess because I like to test a lot of different ideas. The best thing to do is create a new sub-folder and give it a descriptive name (e.g. "category-test"). Having a good dev environment makes things easier too. On my Windows 10 laptop, I'm running: 1. Uniform Server Zero (WAMP server) 2. Visual Studio Code I also prefer Chrome-based browsers (e.g. Vivaldi) for developing. But, I also test in Firefox and Microsoft Edge. I hope this helps? Good luck with your coding. Let me know if you have any specific questions about my To Do List code.

That is awesome! I tried another approach - delete the footer framework and align footbar and logger with the first 3 divs, each with absolute position on where is top and where is bottom, problem also solved.

Good Day, I am a VERY beginner in HTML/Javascript programming, but I am trying to create a custom RPG character sheet for personal use with my friends in HTML file. After several weeks of work, the sheet is complete, and I included several javascript to create automatic calculations. Only 2 points I am missing to be perfect: a)in the sheet there are several DETAILS tags with SUMMARY that includes an input field for the user. Now, every time the user is editing the field and the space button is pressed, the DETAILS section is opened. There is a way to prevent this and limit the pressing of space key to only add a space in the text? I know that probably I should use keydown event but I cannot find any correct way to do so. Here is what I did, but this is preventing also the actual space to be inserted in the field: addEventListener('keydown', function(e) { if(e.keyCode === 32) { e.preventDefault(); } }); b)I would like to create a button that once pressed will open the "Save as" dialog so the user can click there instead of opening the browser menu. Any suggestion in this is also appreciated. Sorry again for the (probably) stupid questions (and for the English) but as I said, I am a complete beginner in this, so any help from experts is really appreciated. By the way, W3 is helping me A LOT with the examples, great repository of information!

Here, I've updated the code to use flexboxes. Replace your CSS file with this. The part that was causing trouble was the logger, because it needs to fit properly within the height of the footer at the same time that the footer has to fit in to body, so they each need their own flexbox arrangement. *{ box-sizing: border-box; overflow-wrap: anywhere; } html, body{ width: 100vw; height: 100vh; padding: 0; margin: 0; } body{ --hdheight: 1.5em; --navheight: 1.5em; --ftheight: 6.5em; --wth: 40em; display: flex; flex-direction: column; align-items: stretch; } #header{ font-weight: 600; height: var(--hdheight); background-color:yellow; flex: 0 0 auto; } #nav{ height: var(--navheight); background-color:greenyellow; flex: 0 0 auto; } #main{ overflow: auto; flex: 1 1 auto; height: 100%; } #footer{ height: var(--ftheight); flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; } #footbar{ width: inherit; height: 1.5em; text-align:center; background-color:forestgreen; flex: 0 0 auto; } #logger{ background-color: #111; color:antiquewhite; overflow: auto; height: 100%; flex: 1 1 auto; } button{ background-color:coral; border-color: coral; border-radius:0.5em; box-shadow: 0.2em 0.2em #ccc; text-indent: 0.25em; vertical-align: middle; } .btn{ display: inline; background-color:antiquewhite; border-color:beige; border-radius:0.25em; box-shadow:none; text-indent:0; font-weight:500; height: 1.5em; box-sizing: border-box; vertical-align: middle; line-height: 0.25em; } .inputbox, .outputbox{ width: var(--wth); padding: 0.5rem; margin:0rem 0rem 0.5rem 0rem; } .inputbox{ border:1px solid black; border-radius:0.25rem } .outputbox{ background-color:darkblue; border:medium dashed chocolate; color:bisque; }

I think it's a good idea to add some PHP code like registration and login system, shopping cart, pagination, CRUD, etc.. to the How-To page so it'll be easier for the new learners to get an easy understanding how all these code work and how they all connected to one and another.

It is simple as this: Two bars on top, then content window, then one foot bar followed by a logger window at the bottom. I want the 5 div's height all together add up to 100vh - meaning there will be no scrollbar on the right side of a browser. So I arranged each div's dimension by a constant or a variable: body{ --ftheight: 6.5em; --navheight: 1.5em;} #header{height: 1.5em;} #nav{height: var(--navheight);} #main{ top: calc( 1.5em + var(--navheight) ); bottom: var(--ftheight);} #footer{ bottom: 0; height: var(--ftheight);} #footbar{height: 1.5em;} #logger{height:inherit;} I played a lot of combinations, position:relative, position:absolute, position:fixed, but All of them result in an overflow total with a browser scrollbar, or two bars with one at the bottom! I also tried flexbox, with flex-grow:none and flex-grow:1, which did not work either. So in the world of CSS, 1+1>2! common.css two_sections.html

Hi Ingolme! Thanks for your reply. What I really want to scroll is the #logger inside #footer, while I want to keep #footbar visible. I don't want it to get hidden because it is the top of #footer. So I made a small adjustment to the #logger, adding ` height:inherit;` #logger{ background-color: #111; color:antiquewhite; width:inherit; height:inherit; overflow-x: hidden; overflow-y: scroll; /* margin-right: calc(100vw - 100%);*/ } But a strange thing happened, the last half line is chopped off, together with the downward button of the scrollbar: This bug disappears after I chopped off overflow:hidden of body. But the third scrollbar appears, the browser scrollbar. Also the horizontal browser scrollbar appears too:

The #logger element doesn't have a fixed height, so the scroll bar on it doesn't do anything. If you remove the overflow from #logger and put "overflow: auto" or "overflow:scroll" on the #footer instead then it will scroll correctly.

In the webpage two_sections.html I tried to use two scrollbars and cancel the browser scrollbar. However the lower scrollbar does not work at all. I know the bug might rest in the body section `overflow:hidden` But it is the only way I know to split the two sections without a scrollbar on browser. Any walk-around? common.css two_sections.html

Hi! I'm using a slightly modified version of this (https://www.w3schools.com/howto/howto_css_modals.asp) to have a section of a page with image links to text pop-ups. It works great with just one image. However, I need to have multiple images with different text in the popups. I know it must be a simple fix by using an id or something, but I'm just not figuring it out. I've spent hours on this trying suggestions from different sites around the internet, including this one. None of them work. Part of the issue, perhaps, is that I have to put JavaScript at the top of the page for the Modal script. (No access to the head section.) I do use external CSS and that part seems to be working fine. I'm not using image captions, btw. Can anyone PLEASE tell me where I'm going wrong? ************************ Here's the Javascript at the top: <script type="text/javascript">// <![CDATA[ $(document).ready(function(){ modalRun(); }); function modalRun() { // Get the modal var modal = document.getElementById("myModal"), // Get the image and insert it inside the modal img = document.getElementsByClassName("imgCB"), srcImg = document.getElementsByClassName("srcImg"); $(img).click(function(){ var source = $(this).attr("src"); $(modal).css("display", "block"); $(srcImg).attr("src", source); }); // Get the <span> element that closes the modal var close = document.getElementsByClassName("closeModal")[0]; $(close).click(function() { $(modal).css("display", "none"); $(captionText).empty(); }); // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } } // ]]> </script> ************************ <div class="imgPicsRow"> <div class="imgPic"><img alt="Graphic title." class="imgCB" src="/imagesource.jpg" onclick="document.getElementById('id01')" /> <!-- The Modal --> <div id="id01"> <div id="myModal" class="modal"> <!-- Modal content - - > <div class="modal-content"> <div class="modal-header"> <span class="closeModal">&times;</span> <h2 style="color: #FFFFFF">Header Title</h2> </div> <div class="modal-body"> <p>Text here</p> <p>Text here</p> </div> </div> </div> </div> <div class="imgPic"><img alt="Graphic2 title" class="imgCB" src="/otherimagehere.jpg" onclick="document.getElementById('id02')" /> <!-- The Modal --> <div id="id02" class="modal"> <!-- Modal content - - > <div class="modal-content" > <div class="modal-header"> <span class="closeModal">&times;</span> <h2 style="color: #FFFFFF">Header2 Title</h2> </div> <div class="modal-body"> <p>Text 2 here</p> <p>Text 2 here</p> </div> </div> </div> </div> </div> </div>

in CSS example of Grid is as under: .grid-container { display: grid; grid-template-columns: auto auto auto auto; gap: 10px; background-color: #2196F3; padding: 10px; } .grid-container > div { background-color: rgba(255, 255, 255, 0.8); border: 1px solid black; text-align: center; font-size: 30px; } The above example's HTML shows as under: <div class="grid-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div> If you prepare your HTML div and then display: grid, gap, will not work in your practical example <div class="main"> <div class=1><p>Some Content</p> <p>Some Contet</p> </dv> <div class=2> <p>Some Content</p> <p>Some Cotent</p> </div> </div> Now if you use CSS Shown as per the example then any browsers will not catch the CSS shown in the example at all. If you the user want to display two div side by side it will not display side by side at all. that is it will not display as a grid, it will not catch the coloumn, nor your specified column width nor auto; Please if somebody can post real life example Sunil pandya

I tried to edit the HTML for a Google page, I guess you can only do so much there. I plugged it into a real editor and it worked. Thanks.

It works in my browser. What happens when you try to run it? There's more than just HTML here, you would need to learn Javascript to understand what this is doing.

Can someone explain to me what's wrong with this choose your own adventure code? I asked Claude (AI), to write me the HTML for a choose your own adventure site, this is that it came up with: <html><head> <title>Choose Your Own Adventure</title> <style> body { font-family: Arial, sans-serif; text-align: center; } button { padding: 10px 20px; font-size: 16px; margin: 10px; } </style> </head> <body> <h1>Choose Your Own Adventure</h1> <div id="storyBox"> <p>You wake up in a dark forest. It's nighttime, and you can barely see anything around you. What do you do?</p> <button onclick="choiceA()">Look for a way out of the forest</button> <button onclick="choiceB()">Stay put and wait for daylight</button> </div> <script> function choiceA() { document.getElementById("storyBox").innerHTML = "<p>You start walking through the forest, trying to find a way out. After a while, you come across a small cabin. Do you:</p><button onclick='endA()'>Investigate the cabin</button><button onclick='endB()'>Keep moving through the forest</button>"; } function choiceB() { document.getElementById("storyBox").innerHTML = "<p>You decide to wait for daylight. As the sun rises, you realize you're not far from a small town. Do you:</p><button onclick='endC()'>Head towards the town</button><button onclick='endD()'>Stay in the forest</button>"; } function endA() { document.getElementById("storyBox").innerHTML = "<p>You approach the cabin and peek through the window. Inside, you see a group of people sitting around a table, playing cards. They seem friendly enough. You decide to knock on the door and introduce yourself.</p><p>The End</p>"; } function endB() { document.getElementById("storyBox").innerHTML = "<p>You continue walking through the forest, hoping to find a way out. After a few hours, you come across a small stream. You decide to follow the stream, which eventually leads you out of the forest and back to civilization.</p><p>The End</p>"; } function endC() { document.getElementById("storyBox").innerHTML = "<p>You head towards the town, hoping to find help or directions. As you enter the town, you realize it's abandoned and in ruins. You decide to keep moving, hoping to find a more prosperous settlement.</p><p>The End</p>"; } function endD() { document.getElementById("storyBox").innerHTML = "<p>You decide to stay in the forest, feeling more at home in the wilderness than in civilization. You build a small shelter and start foraging for food, living off the land.</p><p>The End</p>"; } </script> </body></html> The button functions don't work, but I see the results are coded in. Do any of you guys know how to fix it? If you could plug it in yourself and edit it for me I would really appreciate it. I've learned a bit about HTML but I am still an amateur. Thank you!