Jump to content

Search the Community

Showing results for tags 'JS'.

More search options

  • 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


  • Community Calendar

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 107 results

  1. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow So I basically copied this whole thing but the css and js are externally because my school project requires it to be. When the website loads, it is supposed to display the first image in the slideshow. However, when I loaded it up with everything linked, it is just blank with no image shown. It makes me click one of the dots/one of the arrows to see an image. Can anyone help me fix? gallery.htmlgallery.cssgallery.js
  2. Hello Community! Here’s a conundrum… I have two elements that I need on a page that just won’t play nice with each other: a mega-menu (required for the main site navigation) and a simple mailchimp signup form (in the footer). See them both on this page here: https://cms.ucd.ie/geary2020/research/ The problem is that the mailchimp form (in the footer) won’t accept submissions unless the following line is removed: <script>var plugin_path = '/t4cms/';</script> This code is however is needed by the mega-menu, so I have to keep it there. If I remove the above line - then the Mailchimp form will accept submissions BUT the mega-menu is broken! I have tried reordering the sequence of the .js files - that didn’t work. Also, I have downloaded and stored locally the mailchimp js file: mc-validate-geary.js - so I can make any suggested edits directly in this file. I suspect the solution will be found by editing this file. Any advice much appreciated!
  3. Hello, to my experience the following does not work (tryit-editor w3School), but it does with a "while" loop instead. Are "for" loops not allowed within classes? <p id="demo">result</p> class Test{ counter(){ var result=0; for(i=0;i<10;i++){ result++; } return result; } counter2(){ var result=0; while(result<10){ result++; } return result; } } var obj=new Test(); document.getElementById("demo").innerHTML=obj.counter(); //document.getElementById("demo").innerHTML=obj.counter2();
  4. 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)
  5. 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.
  6. I have this little program: <!DOCTYPE html> <html> <body> <?php echo "why can not I explode array like 0->1, 1->2, 2->3 ..".'<br>'; ?> </body> </html> The output: why can not I explode array like 0->1, 1->2, 2->3 ..input script var total = [1,2,3,4,5];what I got with \ document.write(total) \ :1,2,3,4,5exploded array var_dump: array(1) { [0]=> string(40) "1,2,3,4,5" } so why does not explode the string in an array? This says it all!
  7. html,body{ padding:0; margin:0; background:whitesmoke; } .cont{ position:relative; width:100%; padding:0; margin:0; text-align:center; } .calsi{ width:350px; padding:0; margin:100px auto; text-align:center; background:#d82ed8; box-shadow:0px 0px 6px 0px #0006; } .calsi h1{ font-size:40px; font-family:calibri; font-weight:bold; color:white; text-transform:cepitalize; padding:8px 0px; text-align:center; width:100%; background:#222; margin:0 auto; } #inp{ position:relative; width:100%; padding:8px 0px; text-align:center; font-size:16px; font-family:arial; font-weight:normal; color:#222; outline:none; border:none; background:white; } .btns{ position:relative; width:100%; padding:10px 0px; } .btns button{ border:none; outline:none; width:50px; height:50px; font-size:30px; color:#222; vertical-align:middle; border-radius:5px; background:white; margin:10px 5px; display:inline-block; } button{ border:none; outline:none; width:100px; height:50px; font-size:20px; color:#222; border-radius:5px; vertical-align:middle; background:white; margin:10px 5px; display:inline-block; } <div class="cont"> <div class="calsi"> <h1>Calculator</h1> <input type="text" id="inp" placeholder="Enter Value..." readonly=""> <div class="btns"> <button onclick="AT_add(1)">0</button> <button onclick="AT_add(1)">1</button> <button onclick="AT_add(2)">2</button> <button onclick="AT_add(3)">3</button> <button onclick="AT_add(4)">4</button> <button onclick="AT_add(5)">5</button> <button onclick="AT_add(6)">6</button> <button onclick="AT_add(7)">7</button> <button onclick="AT_add(8)">8</button> <button onclick="AT_add(9)">9</button> <button onclick="AT_add('+')">+</button> <button onclick="AT_add('-')">-</button> <button onclick="AT_add('/')">/</button> <button onclick="AT_add('*')">*</button> </div> <button onclick="exe()">=</button> <button onclick="cancel()">⌫</button> <button onclick="cls()">c</button> </div> <script>var val=document.getElementById("inp"); function AT_add(v){ val.value+=v; } function cls(){ val.value=""; } function exe(){ val.value=eval(val.value); } function cancel(){ val.value=val.value.substr(0,val.value.length-1); }</script> ApakaTechnology@128953.html
  8. Hi , I am not familiar with javascript at all , I am going to learn node.js (I have a good background in python , c ) now , I don't know where to start, should I master js then go for nodejs , or a basic learning of js is adequate for nodejs or... I will appreciate if you suggest useful sources and websites to learn . Thanks in advance
  9. i want my code to be work as when i press arrowkey at checkbox 4, it should focus the submit button element in the next div. but now it is focusing the first checkbox.How to modify it? <!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> </head> <body> <div> <input type="checkbox" autofocus/>1 <input type="checkbox" />2 <input type="checkbox" />3 <input type="checkbox" />4 <br/> <input type="button" value="mycheckbox"> <input type="button" value="mycheckbox"> </div> <script> $(document).ready(function () { $('input').keydown(function (event) { var keycode = (event.keyCode ? event.keyCode : event.which); if (keycode == 13) { clickCheckBox(this); } if (keycode == 39) { if($(this).nextAll('input').length === 0) { $('input:enabled:first').focus();// first textbox } else { $(this).nextAll('input:first').focus(); } } if (keycode ==37) { if($(this).prevAll('input').length === 0) { $('input:enabled:last').focus(); } else $(this).prevAll('input:first').focus(); } event.stopPropagation(); }); }); function clickCheckBox(box) { var $box = $(box); $box.prop('checked',!$box.prop('checked')); } </script> </body> </html>
  10. Hi The guide on making a scrolling header is great, but it relies on javascript running every time you scroll. That is really expensive (resource-wise) and contributes to a laggy an unresponsive website. I think the guide should be updated to use sticky css-elements instead of js. This method does not have the same performance issues, and I'd argue it's an easier and more elegant solution. The new guide is pretty much already written here. The support for sticky elements is not perfect, so there is a discussion to be had about whether to prioritize browser support or performance, but i think at the very least the page should have a yellow box, mentioning that the sticky element is a better solution.
  11. This code gives an error that x[m] is undefined when it calls show(i) but it works fine if I call like show(0). What happens? I already declare x and m then why it gives an error? My code... <html> <head> <style> .myslides{margin: 0px;} </style> </head> <body> <div class="myslides"></div> <div class="myslides"></div> </body> <script> var x = document.getElementsByClassName("myslides"); var i = -1; function show(m) { x[m].style.display = "block"; } function hide(n) { x[n].style.display = "none"; } while(i<x.length) { i = i+1; show(i); setTimeout(hide(i), 3000); if(i==x.length){i = -1;} } </script> </html>
  12. Hi everyone, On a new project, i would like to prevent users from entering a date earlier than the first day of the month preceding the current month. To be more precise, today (dd/mm/yy -> 19/11/19) i would like to prevent entering a date earlier than 01/10/19 (dd/mm/yy format). When using following code. It works. <!DOCTYPE html> <html> <body> <p>Click the button to display first day of preceding current month.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { var dateMin = new Date(); dateMin.setFullYear(dateMin.getFullYear(), dateMin.getMonth() - 1, 1); document.getElementById("demo").innerHTML = dateMin; } </script> </body> </html> When i click on Try it button, on 19th november 2019, i've got Tue Oct 01 2019 (+ time) displayed. But when using following code in my .js file : var dateMin = new Date(); dateMin.setFullYear(dateMin.getFullYear(), dateMin.getMonth() - 1, 1); $(function () { $("input[InputTypeCheck='DateSaisieMin']").datepicker({ onSelect: function () { }, dateFormat: 'dd/mm/yy', minDate: dateMin, changeYear: true, changeMonth: true }, $.datepicker.regional['fr']).attr('readonly', 'readonly'); }); and following code in my .aspx file : <p> <label class="LblLibelle">Date</label> &nbsp;&nbsp; <asp:TextBox ID="txt_dateDeclaration" runat="server" InputTypeCheck="DateSaisieMin" AutoPostBack="true"></asp:TextBox> <asp:RequiredFieldValidator ID="rfv_dateDeclaration" runat="server" ControlToValidate="txt_dateDeclaration" Display="Dynamic" ErrorMessage="La date de l'absence est obligatoire" ValidationGroup="ajout"> <label class="zoneObligatoire">&nbsp;*</label> </asp:RequiredFieldValidator> </p> I was expecting to be unable to select a date in the datepicker prior to 01/10/2019, but this is not the case. The datepicker shows every month since August. Can someone tell me where I made a mistake ? Many Thanks to all.
  13. buraana623

    Overlaping NavBar

    Hey y'all I have a problem with my code. It overlaps parts of my design. Here is the css for the navbar. Can anyone help? script.js style.css
  14. Hey, I am a beginner in desperate need of help. I tried to build a slideshow using the code that dsonesuk provided here: http://w3schools.invisionzone.com/topic/55499-combine-the-manual-and-automatic-slideshow-script-into-one-script/page/2/ I wanted to strip it of parts that I don’t need and add some small modifications. What’s the goal? (See image below) An automatic slideshow with „index indicators“ that can manually be triggered. The active one is highlighted and if you hover over any of the indicators, the slideshow stops until unhovered. So far all features are provided by dsonesuk’s code. I wanted to add a few visual tweaks, animations, a bigger hitbox for the indicators and throw out the code that I don't need. What are the problems? I have been trying to build this slideshow for two days now and my motivation has taken a little bit of a hit. While working on it, some of the elements seem to behave unexpectedly. It might also have to do with the Firefox browser developer tool I am using since some issues don't occur if I scale the browser window by hand but only when mobile presets of the browser are used (using Firefox Quantum 68.0.1, 64-Bit). The version I am showing you right now has some bugs I just don’t know how to fix: The whole .slideshow is not positioned in the center as it should be (visible in screen sizes wider than 1280px). This is because the .slideshow is an inline-block element. But if I set it to just inline or block, the slideshow glitches into the following div (in larger screen sizes). The smaller you make the browser size, the more #myslideFrame expands in height, messing with the positioning of the whole slideshow. I think the JS is responsible for that, but I don’t know how to fix it. Strangely, reloading fixes the issue (until browser window gets resized from big to small again). I can’t get the index indicators back „over“ the img. Any thoughts on the hitbox for the index indicators? I can’t get them to work either. What's the code? You can find the HTML, CSS and JS files attached beneth. The download section doesn't seem to manage folders very well (or at all). But the files "img1.jpg", "img2.jpg" and "img3.jpg" need to go into a folder called "img" in order for the code to work properly. There are a few bits of code that I am not entirely sure if they are still necessary (remaining from dsoneuk's code). As I said I am still learning and this thing grew over my head quickly. Thanks! fact.html script.js style.css .DS_Store
  15. Full2018AF.zip Hey this is a very simple mern APP for beginner to refer for. On this example I have used a past paper of a college
  16. I'm basically a coding amateur and need help! I used this page to find an accordion that works well for what I need (I'm looking for an accordion that can have all open at once) and am basically using this permutation, edited only for content & style. Is there a way to start with them all open instead of all closed? The simpler the better for this frustrated amateur! Thanks!
  17. Hi I have a page with multi-column rows, and I want to filter the rows. This is what I have right now <div class="container-fluid"> <div class="row"> <div class="col-md-2"><button class="timebutton" disabled="disabled" type="button">7:30am</button> </div> <div class="col-md-10"><div class="description-container"><details> <summary><span class="txt-lg" style="font-weight: bold;">Registration and Breakfast</span> <span style="color: #f37322; font-weight: bold;">Main Room</span> &nbsp; Continental breakfast served at registration.</summary> </details></div> </div> </div> <div class="row"> <div class="col-md-2"><button class="timebutton" disabled="disabled" type="button">4:30pm</button> </div> <div class="col-md-10"><div class="description-container"><details> <summary><span class="txt-lg" style="font-weight: bold;">Name of the First Session at the Event</span> <span style="color: #f37322; font-weight: bold;">Room 27363</span> | <span style="color: #36454f; font-weight: bold;">Joe Bloggs</span> &nbsp; <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit ante magna, id fringilla ex venenatis vitae. Etiam fringilla placerat lectus non tempus. Suspendisse sollicitudin, lorem quis finibus eleifend, velit risus ornare magna, et tristique tellus est ac purus...</summary> Sed vel felis nibh. Phasellus auctor, ante vestibulum egestas placerat, nunc nulla aliquam tellus, non posuere sapien erat ut nibh. Cras iaculis mollis pretium. Duis ante enim, interdum ac nulla nec, euismod accumsan libero. Cras a condimentum dolor. Donec porttitor et sapien vel pretium. Vestibulum porta laoreet massa, a luctus eros rhoncus ac. Duis viverra turpis in lectus eleifend, quis iaculis.</p> </details></div> </div> </div> </div> </div> So each row is a time element and a descriptive text area element. Both need to be counted as one element, so that when a filter is applied, both are included. Mainly, I'm wondering where I put the div class for the filter. Thanks! Thanks
  18. I am trying to switch two divs on an onclick command to a search button. One div should replace the other entirely. I have tried to do this two ways: 1) make Div 1 width = 0 when Div 2 width = 100%, and vice versa 2) make Div 1 display = none when Div 2 display = block, and vice versa. My problem is that while both make Div 1 disappear when Div 2 is visible, and Div 2 disappear when Div 1 is visible, in both cases Div 2 remains stacked below the area designated for Div 1, and it should replace its position entirely. Any suggestions why this might be doing this and/or, is there a better way to accomplish this than just changing the CSS? I am including the JS, HTML, and CSS attending this problem. Thanks ahead of time: JS (from Option 2) function getSearch() { document.getElementById("searchcontainer").style.display = "block"; document.getElementById("blogcontainer").style.display = "none"; } HTML <div id="rightcontainer"> <div id="searchbox"> <form> <input type="text" placeholder="Search..." required> <input id="cardib" type="button" value="Search" onclick="getSearch()"> </form> </div> <button id="down" onclick="scrollDown()" onmouseenter="Highlight1()">&#9660</button> <button id="up" onclick="scrollUp()" onmouseenter="Highlight2()">&#9650</button> <div id="blogcontainer" onmouseover="RollOff1()" onmouseout="RollOff2()"> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">Valentines and Rats</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">Valentines and Rats</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">Valentines and Rats</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">Valentines and Rats</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div id="searchcontainer" onmouseover="RollOff1()" onmouseout="RollOff2()"> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">OMG</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">OMG</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">OMG</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">OMG</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> </div> </div> CSS #blogcontainer{ width: 100%; height: 90%; float: left; overflow-y: hidden; padding: 0; position: static; float: left; margin-left: 0; margin-right: 0; margin-bottom: 0; } #searchcontainer{ width: 100%; height: 90%; float: left; overflow-y: hidden; padding: 0; position: static; float: left; margin-left: 0; margin-right: 0; margin-bottom: 0; } #rightcontainer { height: 100vh; width: calc( 100% - 20vh - (.678*(100%-20vh))); position: fixed; overflow: hidden; background-color: gray; margin-left: calc((.678*(100%-20vh)) + 20vh); float: left; margin-right: 0; }
  19. hi add please MutationObserver source mozilla
  20. Hello potential helpers, im currently having issues with firing an ajax request inside of another ajax request. Heres my code: Im not getting "alert(content)" Condition if(shop[1] == "gserver") and if(name.includes(shopname) == true) are definetly true. The function is correctly called as well. No Im not using jquery for reasons. Anyone has an idea why the 2nd requests isnt fired? Is it not waiting for the first one to finish? function initiate_shop_game(shopname) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if(this.readyState == 4 && this.status == 200) { var obj = this.responseText; var array = eval("[" + obj + "]"); var r = 1; for(var i = 0; i < array.length; i++) { for(var x = 0; x < array[i].length; x++) { var shop = array[i][x] + ''; shop = shop.split(","); if(shop[1] == "gserver") { var name = shop[2]; var imgname = shop[7] var shopvalues = shop[3].split("{%TEND%}"); var minslots = parseInt(shopvalues[1]); var maxslots = parseInt(shopvalues[2]); var minram= parseInt(shopvalues[3]); var maxram = parseInt(shopvalues[4]); var pricea = (parseFloat(shop[5]) / 30); var priceb = (parseFloat(shop[6] / 30)); var content = [name,imgname,minslots,maxslots,minram,maxram,pricea,priceb]; if(name.includes(shopname) == true) { var div = document.createElement('div'); div.id = name; var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { alert(content); }; xmlhttp.open('POST',"/template_shop.php", true); xmlhttp.send(); } } } } } } }; xmlhttp.open('POST',"/get_shop_data.php", true); xmlhttp.send(); }
  21. Hello, so at the store page, when in mobile view the top dropdown menu doesn't work. When I delete parts bit for bit in the footer PHP file the menu will still not work. If I delete everything in the footer PHP file it will still not work. But if I completely change the PHP file name so it isn't linked to the store page at all, the dropdown menu works perfectly fine. I find this really weird and I can't figure out how to fix it. Can somebody help?
  22. First of all, I'm no way near any skilled "programmer" or website builder, I mostly just copy things and modify the styles and stuff! So this is probably a nooby question, you have been warned. I've this website I'm building for a school project and I've a few problems left and I've given up trying to fix them, I need to start working on other stuff. First of all so am I trying to get this slider between the three pictures and the navigation bar in the supposedly start page, but the animation disappear when you put it in and I don't think the autoplays work either. This is the main thing I'm trying to do. Secondly, When you go on mobile view and press the dropdown menu it doesn't seem to find the script, which i don't understand why. In the header I have <script src="/online-store-header/js/flertdown.js"></script> and the body I've the code <a href="javascript:void(0);" style="font-size:25px;position: absolute; top: 65px; right: 0; border: 0;" class="icon" onclick="specificName()">☰</a> The console returns this error: Uncaught TypeError: Cannot read property 'className' of null at specificName (flertdown.js:3) at HTMLAnchorElement.onclick (final.html:195) Dropdown js code Any help would be really appreciated, i really need to be done this site soon :)) And I'm really sorry if the index file is totally chaos, elements seems to have a life of their own and come back and reproduce to multiple of the same element after I've deleted them, I've lost control of what i've created (or copied)
  23. So I've searched the web and tried for hours now and I'm just giving up. I've this header, and I want it so when you're on mobile it looks like something like this. So when you're on desktop the full menu is in the header and if your're on mobile you get a dropdown menu. Can someone tell me how I do this? Thank you
  24. I want to use a gif I made for my sprite (it would be nice if the gif only played when the character moved) So far, I have a rectangle with choppy character movements. (It would also be nice if I could make the character movement smoother. I watched tons of tutorials but I couldn't find anything that shows how to do what I want to do. Here is the code <!DOCTYPE html> <html> <head> <style type="text/css"> #backgroundColor { width: 100px; height: 100px; background-color: white; animation-name: backgroundChange; animation-duration: 45s; animation-iteration-count: infinite; } @keyframes backgroundChange { 0% {background-color: white;} 3.3% {background-color: #ffc5c5;} 6.6% {background-color: #f78a8a;} 10% {background-color: #f95d5d;} 13.3% {background-color: #f73737;} 16.6% {background-color: red;} 20% {background-color: #b70303;} 23.3% {background-color: #8c0202;} 26.6% {background-color: #5a0202;} 30% {background-color: #310101;} 33.3% {background-color: black;} 36.6% {background-color: #292929;} 40% {background-color: #3c3c3c;} 43.3% {background-color: #757575;} 46.6% {background-color: #d0d0d0;} 50% {background-color: white;} 53.3% {background-color: #ffc5c5;} 56.6% {background-color: #f78a8a;} 60% {background-color: #f95d5d;} 63.6% {background-color: #f73737;} 66.6% {background-color: red;} 70% {background-color: #b70303;} 73.3% {background-color: #8c0202;} 76.6% {background-color: #5a0202;} 80% {background-color: #310101;} 83% {background-color: black;} 86.6% {background-color: #292929;} 90% {background-color: #3c3c3c;} 93.3% {background-color: #757575;} 96% {background-color: #d0d0d0;} 100% {background-color: white;} } #canvas{ height: 540px; width: 6350px; position:absolute; top:50%; left:52%; transform: translate(-50%,-50%); box-shadow: 0 0 16px 2px rgba(0,0,0,0.4); background-color: #FFF; } </style> <title>Bermuda Triangle</title> </head> <body id="backgroundColor"> <img id="character" style="height: 40px; width: 40px;" src="https://piskel-imgstore-b.appspot.com/img/9478ea0f-79c8-11e8-b58c-67762e4a73c8.gif"> <canvas id='canvas' style="background-image:url(https://preview.ibb.co/fEanjo/realroom.jpg); height: 540px; width: 635px;"></canvas> <script> var canvas = document.querySelector('#canvas'); var context = canvas.getContext('2d'); var xPos = 0; var yPos= 0; context.rect(xPos, yPos, 40, 40); context.stroke(); function move(e) { //alert(e.keyCode); if(e.keyCode==83){ yPos+=10; } if(e.keyCode==87){ yPos-=10; } if(e.keyCode==65){ xPos-=10; } if(e.keyCode==68){ xPos+=10; } canvas.width=canvas.width; context.rect(xPos, yPos, 40, 40); context.stroke(); } document.onkeydown = move; </script> </body> </html>
  25. I found w3schools' tutorial for "Image Magnifier Glass" and want to use it on my website for multiple images. But I can only get it to work for one, presumably because it uses document.getElementById(imgID) in the js; I tried changing this to document.getElementsByClassName(names) but that didn't work. I'm not an experienced javascript user so don't know how to resolve, but assume something different needs to go where (names) is at the least. Can anyone help? The only thing I changed in the code is to add a little padding to the img-magnifier-container class. Thank you. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * {box-sizing: border-box;} .img-magnifier-container { position:relative; padding: 20px; } .img-magnifier-glass { position: absolute; border: 3px solid #000; border-radius: 50%; cursor: none; /*Set the size of the magnifier glass:*/ width: 100px; height: 100px; } </style> <script> function magnify(imgID, zoom) { var img, glass, w, h, bw; img = document.getElementById(imgID); /*create magnifier glass:*/ glass = document.createElement("DIV"); glass.setAttribute("class", "img-magnifier-glass"); /*insert magnifier glass:*/ img.parentElement.insertBefore(glass, img); /*set background properties for the magnifier glass:*/ glass.style.backgroundImage = "url('" + img.src + "')"; glass.style.backgroundRepeat = "no-repeat"; glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px"; bw = 3; w = glass.offsetWidth / 2; h = glass.offsetHeight / 2; /*execute a function when someone moves the magnifier glass over the image:*/ glass.addEventListener("mousemove", moveMagnifier); img.addEventListener("mousemove", moveMagnifier); /*and also for touch screens:*/ glass.addEventListener("touchmove", moveMagnifier); img.addEventListener("touchmove", moveMagnifier); function moveMagnifier(e) { var pos, x, y; /*prevent any other actions that may occur when moving over the image*/ e.preventDefault(); /*get the cursor's x and y positions:*/ pos = getCursorPos(e); x = pos.x; y = pos.y; /*prevent the magnifier glass from being positioned outside the image:*/ if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);} if (x < w / zoom) {x = w / zoom;} if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);} if (y < h / zoom) {y = h / zoom;} /*set the position of the magnifier glass:*/ glass.style.left = (x - w) + "px"; glass.style.top = (y - h) + "px"; /*display what the magnifier glass "sees":*/ glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px"; } function getCursorPos(e) { var a, x = 0, y = 0; e = e || window.event; /*get the x and y positions of the image:*/ a = img.getBoundingClientRect(); /*calculate the cursor's x and y coordinates, relative to the image:*/ x = e.pageX - a.left; y = e.pageY - a.top; /*consider any page scrolling:*/ x = x - window.pageXOffset; y = y - window.pageYOffset; return {x : x, y : y}; } } </script> </head> <body> <h1>Image Magnifier Glass</h1> <p>Mouse over the image:</p> <div class="img-magnifier-container"> <img id="myimage" src="http://bartonlewisfilm.com/img_157-229.jpg" width="33%" height="33%"> </div> <div class="img-magnifier-container"> <img id="myimage" src="http://bartonlewisfilm.com/img_287-145.jpg" width="33%" height="33%"> </div> <p>Feel free to change the strength of the magnifier glass when initiating the magnify function.</p> <script> /* Initiate Magnify Function with the id of the image, and the strength of the magnifier glass:*/ magnify("myimage", 3); </script> </body> </html>
  • Create New...