Jump to content

Search the Community

Showing results for tags 'JAVASCRIPT'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








  1. The project has a number of huge word wall pages where its desirable to tag various persons with a popup with their extended info, several dozen per page. After I finish my work on the site, I expect less skilled operators to add content at a later time, so I want to automate as much of the process as I can to prevent typos breaking the pages. There ought to be a way... There really ought to be a way where I can put this.... <button class='w3-button w3-round [Lookup color from argument 3] [lookup hover-color from argument 3]' onclick="document.getElementById('[argument 1]').style.display='inline'">[argument 2]</span> into a shortcut function call like.... <script> nameTag(john_doe123, John, A); </script> Where the output sent to the browser engine is this: <button class='w3-button w3-round w3-red w3-hover-blue' onclick="document.getElementById('john_doe123').style.display='inline'">John</span> There really must be a viable way to not hand code every single instance of those button calls... How do I do it? Every method I've devised so far doesn't work. I feel like the solution is mockingly close too. <script> funtion nameTag(a, b, c) { //assume code here for taking 'C' above and calculating what colors to use// let color1 = "w3-red"; let color2 = "w3-hover-blue"; let result = "\"<span class='w3-tag w3-round\"" + color1 + color2 + "' onClick=\"document.getElementById('" + arg1 + "').style.display='inline'\">" + arg2 + "</span>"; } </script> Which isn't returning anything. I've thought myself into a corner and need help.
  2. Hello, I would be very grateful for any help with this. Javascript is run on a page which grabs this code from remote and inserts it at the very bottom of the page (see attachment if necessary): How can I change attributes in the highlighted line, for example override the background value of #000 to be #FFF (especially because I am also not sure how to make any extra code execute after the above code since it's forced to the bottom of the page and not sure how that works). I have tried a number of approaches from other online forums but have not had success yet. Thanks so much for any advice you may have! Kind regards
  3. Hello, Is it possible at all that when a cookie is created, either on a subdomain or domain, that it places a copy of it on all other subdomains, compared to passing a query string from page to page with a view to achieving the same? Kind regards
  4. Hello, How may I take the contents of a cookie and append it to a URL so it is passed to the next page? The reason is so that its contents are available so a cookie can be made from it (that code already works on the site). Also, if the page sent to has a URL forward to a different page, can the query string still survive and go all the way to the final destination page? Kind regards
  5. The JavaScript table sort algorithm on the page "How TO - Sort a Table" is quite inefficient. Not only does it use the infamous quadratic "bubble sort", but is also updates the table unnecessarily often. I was just learning JavaScript and HTML and was frustrated to find no reasonable example anywhere on the internet; so I made one myself 😁. Please use the attached algorithm, which is basically the same, but with three improvements: - Faster sorting by using binary insertion; - updates the table only when needed; - uses textContent instead of innerHTML so it is not distracted by invisible data. Feel free to adjust the program to your style. If you are interested, I am happy to spice it up with some comments for legibility, but it is quite trivial anyway. Jurjen tablesort.js
  6. I'm attempting to pass a text string from a javascript process to a php process, using XMLHttprequest, and am getting an 'undefined array key' error. The php process should save the string to a file. It appears to pass the string to the php code okay as it returns the message 'File saved', but it also gives the error message 'undefined array key' on 'data' on line 2 of the php code. I appears to be saving a blank string to the text file as it overwrites any previous saved text in the file. So it looks like no data is being passed to the php codebut it is still try to save it. I'm no sure whether the problem is on the javascript side or the php side. The attached files are test code which reproduces the error. Clicking on the button in 'TestProgram.php will attempt to pass the test string to 'saveGame.php which should save the text string to 'test26.txt :- Any help would be much appreciated. TestProgram.php saveGame.php test26.txt
  7. Hello. I have a table in W3CSS. Ive got 4-5 lines / sections, and in each section I have one line of SELECT fields (along with other information). i am wondering I have 4-5 SELECT fields in a table line/row, and one TEXT field. Is there a way that if a person a) keeps all values blank (nothing selected) - no messages come up. b) when they select one value in that row, or adds a number in the text field (I guess i'll use classes), a script checks all values in that row & gives a warning if any value is blank.
  8. Hello! Newbie here. I'm OK with HTML and CSS, but seriously lack knowledge on JS. Wanting to learn, but I am under the gun to complete a new web site first and I'm stumped on some JS requirements. W3 Schools is a great source of info and learning for me, but I can't seem to find a complete and useful answer yet to this problem. I am making a Products page for my business where I want to show 4 - 6 pictures in a LightBox mode for each of four separate product lines, with all of the products lines shown on one page. Similar to how this company did it on their page: https://sonicenclosures.com/products/. I've come to W3Schools and, to ensure that my first try would be successful, simply copied and pasted their LightBox code from the How To sections into my site. Everything worked fine for the first product line section. I even increased the number of images from four in the sample to six without any issues. Then I added another product line section a few DIVs down the page, and tried to recreate the Lightbox code using the original sample, and this is where everything fell apart. Now, when I click on any picture in my first product line row, the LightBox modal opens, and I can cycle through the images in that product line using the forward/reverse buttons, but when I reach the last image in that product line, it automatically jumps and cycles through the next six pictures of the following product line, which is not what I want it to do. If I try to click on any of the images in the second product line row, it opens the LightBox modal starting with the images from the first product line images, and then scrolls trough to the second line of images. I want each Lightbox to only show it's correlating product line images. I'm sure that there must be some way to do this, as the referenced company's web site seems to work the way I'm looking for. Must be in my unique "IDs" or placement of my code snippets?? I have my CSS called from a separate CSS page, and I've got my JavaScript code at the end of the HTML for the LightBox sections. Can anyone please show me the correct coding to allow me to have multiple separate LightBoxes on one page for individual product line imagery? Hoping someone's out there with the correct info and kind enough to take pity on a poor wretched sole under a demanding deadline, like me! Here's the code that I used - straight out of W3 Schools: CSS: body { font-family: Verdana, sans-serif; margin: 0; } * { box-sizing: border-box; } .row > .column { padding: 0 8px; } .row:after { content: ""; display: table; clear: both; } .column { float: left; width: 25%; } /* The Modal (background) */ .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; } /* Modal Content */ .modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 90%; max-width: 1200px; } /* The Close Button */ .close { color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; } .close:hover, .close:focus { color: #999; text-decoration: none; cursor: pointer; } .mySlides { display: none; } .cursor { cursor: pointer; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } img { margin-bottom: -4px; } .caption-container { text-align: center; background-color: black; padding: 2px 16px; color: white; } .demo { opacity: 0.6; } .active, .demo:hover { opacity: 1; } img.hover-shadow { transition: 0.3s; } .hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } HTMIL: <h2 style="text-align:center">Lightbox</h2> <div class="row"> <div class="column"> <img src="img_nature.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"> </div> <div class="column"> <img src="img_snow.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"> </div> <div class="column"> <img src="img_mountains.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor"> </div> <div class="column"> <img src="img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor"> </div> </div> <div id="myModal" class="modal"> <span class="close cursor" onclick="closeModal()">&times;</span> <div class="modal-content"> <div class="mySlides"> <div class="numbertext">1 / 4</div> <img src="img_nature_wide.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">2 / 4</div> <img src="img_snow_wide.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">3 / 4</div> <img src="img_mountains_wide.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">4 / 4</div> <img src="img_lights_wide.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> <div class="caption-container"> <p id="caption"></p> </div> <div class="column"> <img class="demo cursor" src="img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise"> </div> <div class="column"> <img class="demo cursor" src="img_snow_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Snow"> </div> <div class="column"> <img class="demo cursor" src="img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords"> </div> <div class="column"> <img class="demo cursor" src="img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights"> </div> </div> </div> JavaScript: <script> function openModal() { document.getElementById("myModal").style.display = "block"; } function closeModal() { document.getElementById("myModal").style.display = "none"; } var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); var captionText = document.getElementById("caption"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; captionText.innerHTML = dots[slideIndex-1].alt; } </script>
  9. Hello, I'm trying to update a rather basic site I've written, it's intended to be rather basic, however i can't for the life of me figure out how to retain the state of the collapsible on browser refresh. Any pointers would be helpful, although i feel i may just be being stupid! I did a rather lengthy researching exercise and came up with all sorts of contradicting information and suggestions, some refer to writing cookies, so writing to the local storage and others embedding the state directly into the JS. Whichever is simplest would be ideal, but I'm slightly confused as to which i should be looking into. Thanks, HTML: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css.css"> <link href="chrome.css" rel="stylesheet" type="text/css"> </head> <body> <button type="button" class="collapsible">Show ALL Tickets</button> <div class="content"> <p> <img src="Image1.JPG" alt="ALL TICKETS" class="center"> </p> </div> <button type="button" class="collapsible">Show Tickets without Sick/Leave</button> <div class="content"> <p> <img src="Image2.JPG" alt="PEOPLE IN TICKETS" class="center"> </p> </div> </div> <button type="button" class="collapsible">Show Just InProgress/Open without Sick/Leave</button> <div class="content"> <p> <img src="Image3.JPG" alt="PEOPLE IN ACTIVE TICKETS" class="center"> </p> </div> </div> <button type="button" class="collapsible">Show Who's Absent</button> <div class="container"> <div class="row"><div class="col-sm-6"><table id="t01" class="table" style="float: left; width: 50%;border: solid black 1px;"><tr><th>Sick</th><th>PersonA</th><th>PersonB</th></tr></table> </div> <div class="col-sm-6"><table id="t02" class="table" style="float: left; width: 50%;border: solid black 2px;"><tr><th>Leave</th><th>PersonC</th></tr></table> </div> </div> <script src="js.js"></script> </body> </html> ChromeCSS: @charset "utf-8"; /* CSS Document */ .center { display: block; margin-left: auto; margin-right: auto; width: 86%; } CSS: /* Style the button that is used to open and close the collapsible content */ .collapsible { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; } /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ .active, .collapsible:hover { background-color: #ccc; } /* Style the collapsible content. Note: hidden by default */ .content { padding: 0 18px; display: none; overflow: hidden; background-color: #ADD8E6; line-height: 2.5em; } table, th, td { border: 1px solid black; border-collapse: collapse; padding: 15px; text-align: left; border-spacing: 5px; } #table tr:nth-child(even) { background-color: #eee; } #table tr:nth-child(odd) { background-color: #fff; } #table th { color: white; background-color: black; } #t01 tr:nth-child(even) { background-color: #eee; } #t01 tr:nth-child(odd) { background-color: #fff; } #t01 th { color: Black; background-color: White; text-align: center; vertical-align: middle; } #t02 th { color: white; background-color: Teal; text-align: center; vertical-align: middle; } * { box-sizing: border-box; } /* Create a two-column layout */ .column { float: left; width: 50%; padding: 5px; } /* Clearfix (clear floats) */ .row::after { content: ""; clear: both; display: table; } JS: var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }); }
  10. <script> function myFunction() { var a = Math.min(5, 10); var b = Math.min(0, 150, 30, 20, 38); var c = Math.min(-5, 10); var d = Math.min(-5, -10); var e = Math.min(1.5, 2.5); var x = a + "<br>" + b + "<br>" + c + "<br>" + d + "<br>" + e; document.getElementById("demo").innerHTML = x; } </script> What about adding something like one of the follow examples to show how to use the spread operator on an array with Math.min? var myArray = [0, 150, 30, 20, 38]; var f = Math.min(...myArray); or var f = [a, b, c, d, e]; var g = Math.min(...f);
  11. Hi! I'm new on all this javascript coding world, and currently I am working on a gaming review website. The question I have, is that i've implemented autocomplete on my search field (works great: How To Create Autocomplete on an Input Field (w3schools.com)) and I would like to add that when the user clicks an option the "enter key" is triggered. This is beacause I made my web in a way that you have to write things down, and if you click one of the elements and it writes itself does nothing for me, instead if you press enter when hovering above the item you can select it as if it was a "click" but actually detects also the enter effect as a key so it works fine! So to express myself a bit better: My goal is to click an item of the autocomplete list, and when I do it, the enter key will trigger and my search field will detect the keyboard input. Thanks in advanced!
  12. Hello, I attached the code that I used for the slider. I'm using p5.js. It doesn't work if I insert separately the JS code in the sketch.js page. HTML: <input type="range" min="1" max="100" value="50" class="slider" id="myRange"> <p id="demo">Value: </p> Javascript: var slider = document.getElementById("myRange"); var output = document.getElementById("demo"); slider.oninput = function() { output.style.fontSize = slider.value + "px"; } Thank you all!
  13. <div class="topnav" id="myTopnav"> <div class="topnav-centered"> <a href="index.html">JACQUELYN MCGARRY</a> </div> <div class="topnav-right"> <a href="shop.html">SHOP</a> <a href="work.html">WORK</a> </div> <a href="about.html">ABOUT</a> <a href="contact.html">CONTACT</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i> </a> </div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> .topnav { position: fixed; top: 0; width: 100%; padding: 0px; } .topnav a { float: left; display: block; text-align: center; padding: 14px 24px 12px 24px; } .topnav a:hover { padding: 12px 22px 10px 22px; } @media screen and (max-width: 600px) { .topnav a{ float: none; display: block; } .topnav-centered a { position: relative; top: 0; left: 0; transform: none; } .topnav-right a{ float: none; position: relative; } } .topnav .icon { display: none; } @media screen and (max-width: 500px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: left; display: block; } } .topnav-centered a { float: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .topnav-right { float: right; } @media screen and (max-width: 500px) { .topnav.responsive {position: fixed;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; /* text-align: left;*/ } } My float right menu items don't nest in the hamburger menu. I tried float:left on mobile for topnav-right with no luck. I have no idea how to fix it. Code has been personalized from w3schools tutorials
  14. I have used this gallery from W3Schools https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp and i want to add function arrow keyboard keys to change pictures in the gallery. Can someone here help me out?
  15. Hi, This suggestion is about this article I think it's important to encourage people to use more HTML options over js ! It's more lightweight and use less"resources", isn't it ? So I took the example and just change "<button>" into a "<a>" with href to "top" and added id="top" to the first, maybe we can recommend to use an already existing id, the one of the header for example And after some research I saw that using an "<a>" to go to the top is write as a tip in this article What do you think ? Have a nice day <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: Arial, Helvetica, sans-serif; font-size: 20px; } #myBtn { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; font-size: 18px; border: none; outline: none; background-color: red; color: white; cursor: pointer; padding: 15px; border-radius: 4px; text-decoration:none; } #myBtn:hover { background-color: #555; } </style> </head> <body> <div id="top" style="background-color:black;color:white;padding:30px">Scroll Down</div> <div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible <strong>when the user starts to scroll the page</strong>.</div> <a href="#top" id="myBtn" title="Go to top">Top</a> <script> //Get the button var mybutton = document.getElementById("myBtn"); // When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } </script> </body> </html>
  16. I used the W3 Tutorial to make an image Magnifying Glass https://www.w3schools.com/howto/howto_js_image_magnifier_glass.asp I use Bootstrap and I created a carousel. The Magnifying effect works perfectly on the first slide. When I change the slide I still see my cursor and the zoom option changes: zoom in and show me a different part of the photo and not the exact point where my cursor is. This is the code of the carousel (for the moment only the first 2 slides are set with the magnifying effect) <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleFade" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleFade" data-slide-to="1"></li> <li data-target="#carouselExampleFade" data-slide-to="2"></li> <li data-target="#carouselExampleFade" data-slide-to="3"></li> <li data-target="#carouselExampleFade" data-slide-to="4"></li> <li data-target="#carouselExampleFade" data-slide-to="5"></li> <li data-target="#carouselExampleFade" data-slide-to="6"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <div class="img-magnifier-container"> <img id="myimage" src="carousel/01.png" class="d-block w-100" alt="..."> </div> </div> <div class="carousel-item "> <div class="img-magnifier-container"> <img id="myimage2" src="carousel/02.png" class="d-block w-100" alt="..."> </div> </div> <div class="carousel-item"> <img src="carousel/03.png" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="carousel/04.png" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="carousel/05.png" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="carousel/06.png" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="carousel/07.png" class="d-block w-100" alt="..."> </div> </div> </div> <script> magnify("myimage", 3); </script> <script> magnify("myimage2", 3); </script>
  17. Hi, I need some help with converting multiple rows of data, where the rows have the same ID, into one row. Small screenshot below of the data set I am using. The rows of data are duplicating where multiple "Impact" values are selected on a form. I want to merge the Impacts into one row, by matching the ID.
  18. i am a string as below: var x = "[{date:May-2020,value:40.52}, {date:Jun-2020,value:40.52}, {date:Jul-2020,value:69.58}]"; it needs to convert as an array in javascript. Expected output : [{date:May-2020,value:40.52}, {date:Jun-2020,value:40.52}, {date:Jul-2020,value:69.58}]; How to do this? please explain in detail since i am new to javascript.
  19. Hello guys, I´m currently creating a website and have to use some kind of a switch button (in iOS-Style). I already implemented the switch button, however I want the user to switch with the button between two upcoming photo galleries. Because documentation in the www is lacking, I would need your support. Because I´m pretty unexperienced in website coding, I used the W3school switch button (https://www.w3schools.com/howto/howto_css_switch.asp) I hope you could help and I´m sorry for being such unexperienced but having high demands.
  20. I want to feed some input files stored in an array to a ffmpeg childprocess , but it needs to be asynchronous because I want to capture std.err live. However I need to feed one input at a time waiting for the previous one to finish. I think I need to use promises or async await but I cannot work out how. my code (simplified) is: var inputArray =['"'+"firstFile"+'"' ,'"'+"secondFile"+'"' ,'"'+"third"+'"' ]; var spawn = require('child_process').spawn; for(i=0;i<inputArray.length;i++){ child = spawn("ffmpeg",["-y", "-i",inputArray[i],+i+".ts"],{ shell: true}); child.stderr.on('data', function (fdata) { var datastring = fdata.toString(), lines = datastring.split(/(\r?\n)/g); for (var b=0; b<lines.length; b++) { document.getElementById("show").innerHTML = lines[b]; } }); child.on('exit', function (code) { console.log("code "+i+" "+ code); }); } Thanks in advance
  21. Hey Guys i have been trying to find angle between to points now these points are landmark on a face i calculated the landmark for eyebrows on a face left eyebrow is rendering perfectly but as soon as i come to the right eyebrow using same method as the left one its not rendering right a little bit off? can someone help how to get it right and rotate it accordingly see in this line 438 upload.php
  22. Hi, I'm trying to implement a Server Side Event connection between a Node.js backend and the frontend with EventSource. It works perfectly... as long as I turn off my antivirus. As soon as it's on, it's silently blocking incoming responses. It doesn't matter if I try it on localhost or my Heroku VM. It just doesn't work. However, the example provided by W3Schools works: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_sse What's the magic? I've looked at the HTTP headers and replicated them... but to no avail. I offered a bounty on Stack Overflow for a solution: https://stackoverflow.com/questions/63716882/server-side-events-blocked-by-antivirus
  23. I am looking for either in css a way to take data from the device used to input as an attribute or a way to combine css and javascript to do the same thing. there may be a variable in css now but it isn't a true variable as far as I have found so far in the tutorial and the info I want I have only seen accessed using javascript so wanted to try combining it with the css I already have. I am looking to basically create a title page with css at the top of a website or in my case an actual ebook. I have this most of the way done. I want it to survive multiple devices so I want a variable height and width and I found that but the height is not quite perfect yet. I am using 100vh for 100% viewport height meaning the entire screen height but what I really want is the full window height. there is a javascript function in the tutorial that gives you the window.innerheight but I don't know how to input that number into my height attribute. right now that 100vh height is making it so that the footer is just beyond the screen and I have to scroll down a little to see it. but what I want it to do is that there is no scrolling needed because it fits perfectly on the screen. here is the code as is. <html> <head> <title>Title Page Template</title> <style> .title { display: flex; position: absolute; height: 100vh; width: 100vw; flex-direction: column; align-items: center; justify-content: center; z-index: -1; } .title > div { width: 100%; margin: 10px; text-align: center; } .copy { display: flex; height: 100vh; width: 100vw; align-items: flex-end; justify-content: center; } .copy > div { width: 100%; text-align: center; } p.large { font-weight: bold; margin-top:1em; font-size: 200%; text-indent: 0em; text-align:center; } p.medium { margin-top:1em; font-weight: bold; font-size: 150%; margin-top:1.0em; text-indent: 0em; text-align:center; } p.small { font-weight: bold; margin-top:1em; font-size: 125%; text-indent: 0em; text-align:center; } </style> </head> <body> <div class="title"> <div><p class="large" id="start">Title</p></div> <div><p class="medium">The Sub-title</p></div> <div><p class="small">By <i>Author</i></p></div> </div> <div class="copy"> <div><p class="small">Publisher &#169; 2019</p></div> </div> </body> </html> and here is the javascript code I found that gets the info I want <html> <body> <p>Click the button to display this frame's height and width.</p> <button onclick="myFunction()">Try it</button> <p><strong>Note:</strong> The innerWidth and innerHeight properties are not supported in IE8 and earlier.</p> <p id="demo"></p> <script> function myFunction() { var w = window.innerWidth; var h = window.innerHeight; document.getElementById("demo").innerHTML = "Width: " + w + "<br>Height: " + h; } </script> </body> </html> is there a way to get the innerheight and innerwidth into my css to finish this title page design?
  24. Okay, first I want to say you I'm very new in TypeScrpt. Now I have a question. TypeScript is a static type checking language. But, when TS code is transpile to JS code this features got loss. Here is my code. demo.ts function add(x:number , y:number) { return (x+y); } add(5,"Raktim"); In the above TS code x and y only capable to accept number and it will perform addition. But, I callback this function and pass number and string intentionally to the function. So, TS compiler obviously give error as a result. But, now look the generated JS code. demo.js function add(x, y) { return (x + y); } add(5,"Raktim"); So, in the JS code x and y are capable to accept any value. So, here this code perform string concatenation not addition. My question is when TypeScript type checking features got loss on JS then why we use it? Then, what the actual benefit behind of TypeScript type checking? Is It really useful?
  25. Newbie alert... I am an experienced Un*x sysadmin and programmer. However, JavaScript and its huge ecosystem can be overwhelming. My main target now is Node.js. I have been locating, downloading and installing a lot of packages: npm install this npm install that npm install the-other npm install one-more The input is always whole directories. I just found out that jQuery is very important, so I decided to install it. The problem is that in the official site they offer one single file. It is ASCII with the extension *.js https://jquery.com/download/ That doesn't feel right. A rather large system, contained in one text file? TIA, -Ramon F. Herrera JFK Numbers
  • Create New...