Jump to content

Search the Community

Showing results for tags 'javaScript'.

The search index is currently processing. Current results may not be complete.
  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

  1. 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.
  2. 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>
  3. 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"; } }); }
  4. <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);
  5. 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!
  6. 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!
  7. <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
  8. 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?
  9. 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>
  10. 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>
  11. 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.
  12. 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.
  13. 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.
  14. 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
  15. 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
  16. 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
  17. 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?
  18. 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?
  19. 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
  20. Hello I'm pretty new to coding and I'm wondering how to stack these image slideshows. https://www.w3schools.com/howto/howto_js_slideshow.asp The issue I get is once I try to put 2 of these image slideshows one underneath the other the slide arrow buttons remain in the same place instead of going next to the second image slider, they remain as if they were a part of the first one except the new arrow buttons are wider apart (which is intended except they should be 5 inches lower on the screen next to the second image slideshow) and also all the arrow buttons only affect the second image slideshow instead of the first arrow buttons affecting only the first slideshow and second arrow buttons affecting only the second slideshow. Hopefully I explained my issue well.
  21. var curDoc = app.documents[0]; var allTables = curDoc.stories.everyItem().tables.everyItem().getElements(); for ( var i = 0; i < allTables.length; i++ ) { var curTable = allTables[i]; if ( curTable.columns.length == 5) { curTable.columns[-2].verticalJustification = VerticalJustification.CENTER_ALIGN; //HERE SHOULD BE THE CODE FOR ALIGNING TEXT IN SECOND LAST COLUMN TO RIGHT } } Hello W3Schools community, I need your help on a final step in my Javascript code for an Adobe InDesign document. In the InDesign document there are many tables that have all five columns. My script (.jsx file, executed in InDesign) works fine by vertically aligning all second last columns in every table in the whole document to center. I just tested if it works, the vertical alignment is not needed. I'm glad about this success, because I'm a newbie to JS in InDesign and did a lot of 'try and error' in order to locate and aligning the cells. What I'm really looking for is to align the text horizontally in all second last columns from left to right alignment. A simple operation certainly, but I'm totally stuck with the correct JS syntax... I tried all functions I could find at W3Schools and on the web, e.g. 'text-align: right' or 'Justification.RIGHT_ALIGN' referring to the working 'verticalJustification' function but nothing works to align the text in the cells. There are many examples for easy alignment in HTML and it's 'divs', respectively CSS, but nothing seems to work in JS code. Thank you in advance – i would highly appreciate your help because this script saves a lot of time in my projects! Regards
  22. Hello, I am pretty new in JavaScript. These days I am implementing slideshow on my project. But I am facing with two problems: Problem number 1: I would like my slideshow to have two options : - option number 1: arrays with user can slide images manually - option number 2 I want images to slide automatically for (lets say) 5 seconds. My problem is that I can`t implement these two options to run together. On w3schools.com they are codes for option number 1 and option number 2 but are separately, and I can`t implement to run together. Is there any way there options to run together? Problem number 2: It will be much better for my project if I can implement some cool slides when my images slides. For now, they are sliding normal from right to left, but as I can see, they are options for images to slides on very cool way. Here there are some cool slides: https://amazingslider.com/examples/ My code is here: CSS: .slideshow-container { position: relative; max-width: 1200px; box-sizing: border-box; margin: auto; } .number { position: absolute; color: white; margin: 15px; font-size: 18px; } .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } .prev { position: absolute; top: 50%; color: white; font-size: 35px; left: 0; padding-left: 15px; padding-right: 15px; background-color: black; } .next { position: absolute; top: 50%; color: white; font-size: 35px; right: 0; padding-left: 15px; padding-right: 15px; box-sizing: border-box; background-color: black; } .prev:hover, .next:hover { background-color: gray; cursor: pointer; } .dot { width: 15px; height: 15px; background-color: lightgray; border-radius: 50%; margin: 5px; display: inline-block; cursor: pointer; } .active { background-color: #717171; } .container { position: relative; width: 50%; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; bottom: 0; left: 0; right: 0; background-color: transparent; overflow: hidden; width: 100%; height: 10%; transition: 0.5s ease; } .container:hover .overlay { height: 100%; } .text-overlay { color: #333; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } .images-overlay { display: flex; margin-left: 15%; margin-right: 15%; } Javascript 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("dot"); 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"; setInterval(showSlides, 1000); }
  23. I have referenced the W3 slideshow tutorial here and added two slideshows to my web page using Dreamweaver. I understand that the Javascript needs to be edited to accommodate 2 slideshows (divs vs. classes i think?), and I have tried to follow the instructions given here in order to edit it. Both of my slideshows seem to work independently now, but i can't figure out how to edit the Javascript to make the dots work right. The hover color works (red), but on the second slideshow, the dots do not turn red as the slideshow is advanced. I know very little about Javascript and I have gone through the Javascript tutorial, but I haven't landed on a solution. I've also searched the forums for an answer, but haven't found one that works for my specific situation. If anyone could point me toward a solution to have two slideshows on the page that both work pretty much like the one on the W3 tutorial page (with dots and arrows), I'd greatly appreciate your help — ANY guidance about how to fix the code is greatly appreciated. ~bex Here is my code: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing:border-box} body {font-family: Verdana,sans-serif;margin:0} .mySlides {display:none} /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } /* 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); } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor:pointer; height: 13px; width: 13px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #f44336; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .prev, .next,.text {font-size: 11px} } </style> </head> <body> <div id="wrapper"> <div class="slideshow w3-container w3-half"> <div class="w3-content w3-display-container"> <img class="mySlides fade" src="img_nature_wide.jpg" width="100%"> <img class="mySlides fade" src="img_fjords_wide.jpg" width="100%"> <a class="prev" onclick="plusDivs(-1, 0)">&#10094;</a> <a class="next" onclick="plusDivs(1, 0)">&#10095;</a> <!-- Extra plusDivs parameter refers to first (0) slideshow (start from 0) --> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentDiv(1)"></span> <span class="dot" onclick="currentDiv(2)"></span> </div> </div> <hr> <div class="slideshow w3-container w3-half"> <div class="w3-content w3-display-container"> <img class="mySlides fade" src="img_nature_wide.jpg" width="100%"> <img class="mySlides fade" src="img_fjords_wide.jpg" width="100%"> <a class="prev" onclick="plusDivs(-1, 1)">&#10094;</a> <a class="next" onclick="plusDivs(1, 1)">&#10095;</a> <!-- Extra plusDivs parameter refers to second (1) slideshow (start from 0) --> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentDiv(1)"></span> <span class="dot" onclick="currentDiv(2)"></span> </div> </div> <script> var slideIndex = 1; var z = document.getElementsByClassName("slideshow"); for (i = 0; i < z.length; i++) { //set custom data attribute to first current image index z[i].setAttribute("data-currentslide", 1); showDivs(z[i].getAttribute("data-currentslide"), i); } function plusDivs(n, j) { //get custom data attribute value of current image index to slideshow class index j slideIndex = parseInt(z[j].getAttribute("data-currentslide")[0]); showDivs(slideIndex += n, j); } function currentDiv(n,j) { showSlides(slideIndex += n, j); } function showDivs(n, j) { var i; var z = document.getElementsByClassName("slideshow")[j]; var x = z.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > x.length) { slideIndex = 1 } if (n < 1) { slideIndex = x.length; } //set custom data attribute to current image index z.setAttribute("data-currentslide", slideIndex); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } x[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; } </script> </div> </body> </html>
  24. I am following the tutorial here, and I would like to add more than two slideshows on a page. I tried this: <h4>10 Shot Photo Challenge #1</h4> <div class="slideshow-container"> <div class="mySlides1"> <div class="numbertext">1 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_BlackAndWhite.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">2 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Contrast.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">3 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Emotion.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">4 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_FavoriteColor.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">5 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Misc.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">6 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Numbers.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">7 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Outside.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">8 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Rule_of_Thirds.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">9 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_StartingWithB.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">10 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_UpClose.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a> <a class="next" onclick="plusSlides(1, 0)">&#10095;</a> </div> <br> <br> <h4>10 Shot Photo Challenge #2</h4> <br> <div class="slideshow-container"> <div class="mySlides2"> <div class="numbertext">1 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/Gutowski_happy.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">2 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/Gutowski_January.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">3 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_2873.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">4 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_2931.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">5 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_2985.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">6 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_2986.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">7 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_3031.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">8 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_3037.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">9 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_3041.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">10 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_E3040.JPG" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 1)">&#10094;</a> <a class="next" onclick="plusSlides(1, 1)">&#10095;</a> </div> <br> <br> <h4>10 Shot Photo Challenge #3</h4> <br> <div class="slideshow-container"> <div class="mySlides3"> <div class="numbertext">1 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0139.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">2 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0144.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">3 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0157.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">4 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0158.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">5 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0159.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">6 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0160.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">7 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0192.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">8 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0199.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">9 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0936.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">10 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0945.JPG" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 2)">&#10094;</a> <a class="next" onclick="plusSlides(1, 2)">&#10095;</a> </div> <script> var slideIndex = [1,1]; var slideId = ["mySlides1", "mySlides2", "mySlides3"] showSlides(1, 0); showSlides(1, 1); showSlides(1, 2); function plusSlides(n, no) { showSlides(slideIndex[no] += n, no); } function showSlides(n, no) { var i; var x = document.getElementsByClassName(slideId[no]); if (n > x.length) {slideIndex[no] = 1} if (n < 1) {slideIndex[no] = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex[no]-1].style.display = "block"; } </script> This made 2 slideshows, but the third one didn't work. How can I get a third slideshow onto this webpage? ZIP file attached with all website files. 10shot.html is the file I am having trouble with. Alex's Website.zip
  25. Formatting dates seem to be not working in the examples of W3 schools. Any ideas why? https://www.w3schools.com/js/js_date_formats var d = new Date("2015-03-25"); results in: Wed Mar 25 2015 01:00:00 GMT+0100 (Central European Standard Time)
×
×
  • Create New...