Showing results for tags 'javascript'.

Suggestion for "How TO - Scroll Back To Top Button" page

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>

December 10, 2020
- #html
- javascript
- (and 1 more)
  Tagged with:

Create an Image Magnifier Glass

adcoding posted a topic in JavaScript

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>

Merge multiple rows of data based on ID

Petra posted a topic in JavaScript

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.

Converting a String data to Array in java script

sambedas posted a topic in General

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.

How to make a switch button useful?

clay posted a topic in JavaScript

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.

April 19, 2020
2 replies
- html5
- html
- (and 6 more)
  Tagged with:
  - html5
  - html
  - css
  - js
  - javascript
  - help
  - switch
  - on-off

child_process and async/await

jdauthre posted a topic in JavaScript

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

September 25, 2020
- javascript
- node.js
- (and 2 more)
  Tagged with:

Finding the Angle between two points ?

aekantak vashistha posted a topic in JavaScript

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

Antivirus software blocks Server Side Events (EventSource)

tomcatmwi posted a topic in Web Servers

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

September 6, 2020
- javascript
- server side push
- (and 4 more)
  Tagged with:

looking for a way to input window size into css

otakublade posted a topic in CSS

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 © 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?

September 5, 2020
9 replies
- css
- javascript
- (and 2 more)
  Tagged with:
  - css
  - javascript
  - var
  - height

TypeScript type checking is really usefull?

Raktim posted a topic in JavaScript

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?

How to install jQuery on Linux?

Raymond Herrera posted a topic in JavaScript

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

August 2, 2020
2 replies
- javascript
- node.js
- (and 1 more)
  Tagged with:

Stacking image sliders

Umusa posted a topic in JavaScript

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.

June 25, 2020
2 replies
- javascript
- stacking image slider shows
- (and 1 more)
  Tagged with:

InDesign table text alignment

Buford T. Justice posted a topic in JavaScript

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

Heed help with my slideshow on my project

Peter1990 posted a topic in JavaScript

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); }

Need Two Slideshows — Both with Arrow and Dots

bexterinni posted a topic in JavaScript

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)">❮</a> <a class="next" onclick="plusDivs(1, 0)">❯</a>  </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)">❮</a> <a class="next" onclick="plusDivs(1, 1)">❯</a>  </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>

August 21, 2017
10 replies
- javascript
- html
- (and 1 more)
  Tagged with:

Date Format in JS doesn't work as expected

Ramonkos posted a topic in JavaScript

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)

May 9, 2020
2 replies
- date/time
- date
- (and 3 more)
  Tagged with:
  - date/time
  - date
  - time
  - javascript
  - js

query string Search query string

Devine97 posted a topic in JavaScript

Hi all, I’m learning to code and building a site to push my learning along. However, I am having a frustrating issue. On my site I would like to have search functionality, but for the search to be completed on a different URL. I understand this requires query parameters, but I'm a bit lost. For example, if my site is “www.mysite.com” I would like a user to be able to input their city (could be any city in the world) and then select an option from a dropdown menu, say ‘running’ or ‘cycling’ and then the combination of the two querys added together and executed on “www.fitnessbuddies123xyz.com” (for example) and if someone had added a listing for a fitness buddy on “www.fitnessbuddies123xyz.com” and the string matched a URL on that site then the results would appear. My current HTML is below: Firstly, I have a text box: <input type="text" class="form-control-lg form-control" id="inputText12" placeholder="City"> And then there is a drop-down menu, with three set options: <select class="form-control form-control-lg" id="exampleFormControlSelect1"> <option>Running</option> <option>Cycling</option> <option>Walking</option> </select> I then have a button: <a href="url" class="btn btn-lg btn-block btn-primary">Search</a> Any help on how I can create the query string for the text box and dropdown menu and then execute on an external URL would be much appreciated. Thanks in advance!

Getting and using data from js function explode not working

Reinoud posted a topic in PHP

I am able to retrieve data from a js like this: <!DOCTYPE html> <html> <body> <script> var a=[1,2,3,4] </script> <?php $ap= "<script> document.write(a) </script>"; print_r ($ap); $b=explode(',',$ap); print_r($b); ?> </body> </html> Result: 1,2,3,4Array ( [0] => 1,2,3,4 ) Why is the array not explode

April 16, 2020
- php
- javascript
- (and 2 more)
  Tagged with:
  - php
  - javascript
  - pass variable
  - explode

javascript examples

hamedamini846 posted a topic in JavaScript

Where can I find real examples and codes of javascript? Is there any references for: javascript calculator , form validate , javascript sliders , and...

simple calculator using html css and js

Akash Fulari posted a topic in HTML/XHTML

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

April 4, 2020
- html
- js
- (and 5 more)
  Tagged with:
  - html
  - js
  - calculator
  - javascript
  - simple calci
  - simple calculator
  - akash fulari

relation between JS and node.js

erfan shaigani posted a topic in Web Servers

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

March 20, 2020
1 reply
- node.js
- javascript
- (and 1 more)
  Tagged with:
  - node.js
  - javascript
  - js

html How does the w3 school website's menu stopped from scrolling up?

studiodv posted a topic in HTML/XHTML

Hi, I was wondering how I could 'copy' the way w3 schools website menu from scrolling up and disappearing? I am using w3css for my projects. I was wondering if the feature I mentioned can be done using w3css. Thanks, Ben

Wordpress Javascript Blob insert mysql

Atilla posted a topic in PHP

Hello everyone, i have created a html form and a button. Javascript reacts to the button click sends the html values to functions.php and there i have a function to insert into the wordpress database. Every field is working and is being inserted into the database but i have some problems to upload and save a image file with these steps. Iam not using a html form i wanted to go the javascript way. Is there any option/solution to insert an image file as blob into mysql using php without form submit just via javascript ajax ? Thanks and best regards, Atilla

February 16, 2020
- blob
- mysql
- (and 2 more)
  Tagged with:
  - blob
  - mysql
  - php
  - javascript

skipping CSS

JordanETH posted a topic in Suggestions

I finished studying html, and i started CSS but its same as html. should i skip css and just go to JS? i have a background in c (arduino and raspberry pi ), am not interested in the whole front-end code (its like making a power-point presentation more than coding). when am going through css its like a am going through html yet again. i could finish it in a week probably (since i finished studying html and since it seems like css is the style sheet of html). am just feeling like am wasting my time. I have this bad habit, if i start reading something, i don't feel completed if i don't go from cover to cover. PS: even if i got a comment to skip CSS, i would probably do the contrary and finish it (i just don't feel its that important for a person who is interested in the back-end programming ). i have got this bad habit of following numbers and steps even if its so repetitive.

November 2, 2019
3 replies
- css
- html
- (and 1 more)
  Tagged with:
  - css
  - html
  - javascript

Search the Community

Search By Tags

Search By Author

Content Type

Forums

Calendars

Find results in...

Find results that contain...

Date Created

Start

End

Last Updated

Start

End

Filter by number of...

Minimum number of comments

Minimum number of replies

Minimum number of reviews

Minimum number of views

Joined

Start

End

Group

AIM

MSN

Website URL

ICQ

Yahoo

Jabber

Skype

Location

Interests

Languages