Jump to content

Search the Community

Showing results for tags 'javascript'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








  1. After doing some research, I found out that the JavaScript Reserved Words table in the JavaScript Reserved Words article needs to be revised. What I see is a merge between ES2 and ES5. I see "let" in the list, which wasn't added until ES5, yet has no asterisk. I also see keywords that are no longer considered reserved like "int", "long", and "native". So, if the asterisk indicates newly added words, then perhaps we should include a separate indicator for words that are no longer reserved or remove those words from the table entirely. Here is a table summary of what I found Sources: ECMAScript 1 ECMAScript 2 ECMAScript 5 ECMAScript 5.1 ECMAScript 6 Mathias Bynens' Blog
  2. Hello, I found a function called fnGetSibling on https://msdn.microsoft.com/en-us/library/ms533043(v=vs.85).aspx#navigate and I was hoping to understand what it does return and why. var oPrevious = fnGetSibling(); function fnGetSibling(){ var oParent=oNode.parentElement; var iLength=oParent.children.length; for(var i=0;i < iLength;i++){ if(oParent.children[i]==oNode){ return oParent.children[i - 1]; break; } } } I have three possible options: 1. Finds and returns a reference to all childs of a node of DOM Tree. 2. Finds and returns a reference to one of the children of a node of DOM Tree. 3. Finds and returns a reference to a father of a node of DOM Tree. You are not solving any homework (it's summer), it's just from a quiz.
  3. I have a cordova/phonegap project and I want to navigate in the same index.html but give the impression to the user that he opened a new page? (Without ionic framework). I do not know if this can be done using simple HTML, CSS or javascript but appreciate if someone can provide me a help I put the following code in index.html but it does not give that impression: <div id="page_01"> <a href="#page_02">Press for Next step</a>> </div> <div id="page_02"> <p>New page for the user but it is in the same index.html</p> </div>
  4. Hello internet. I am trying to use the following code and my webpage is not accepting my fadeOut function I'm using <link> to grab the jquery library from my server. CODE: $("div").click(function() { $(this).fadeOut("slow"); }); However, if I replace <script type="text/javascript" src="jquery.min.js"></script> WITH <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> It works just fine. Why is this? NOTES: 1. I am placing jquery code within my <head> tags. 2. jquery.min.js is the 3.1.0 compressed file I have on my server
  5. I have an image stored at the server end. Whenever client connects to the server, it sends the image through sockets. The received image I am able to display it on canvas, however I am unable to save the received image in the local disk. I am trying to use fs.writeFile(), but maybe I am not sending the right parameters. How can file handling be done at client end? Any leads to this issue will be helpful. Thank You. [i want to implement this as a basic communication client-server]. To optimize it, is there any way can I achieve same operation in a much faster way? Any working code would also he helpful. Client side programming: <script> var socket = io(""); var ctx = document.getElementById('canvas_win').getContext('2d'); var fs = require('fs'); socket.on("image", function(info) { if (info.image) { var img = new Image(); img.src = 'data:image/jpeg;base64,' + info.buffer; ctx.drawImage(img, 0, 0); var end = new Date().getTime(); document.getElementById("demo").innerHTML = end; fs.writeFile('logo.jpeg', img.src, 'data:image/jpeg;base64,', function(err){ if (err) throw err console.log('File saved.') }) } }); Server side programming: var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); var fs = require('fs'); // required for file serving http.listen(6969, function(){ console.log('listening on port 6969'); }); // trying to serve the image file from the server io.on('connection', function(socket){ start = new Date().getTime(); console.log(start); console.log('a user connected'); fs.readFile(__dirname + '/image.jpg', function(err, buf){ socket.emit('image', { image: true, buffer: buf.toString('base64') }); console.log('image file is transmitted'); }); });
  6. Hello All, I am stuck trying to filter results of a json response. I have a sample json response: [ { "id":0, "commentText":"Test", "createdBy":"User1", "isImportant":false }, { "id":1, "commentText":"Hello World", "createdBy":"User2", "isImportant":true }, { "id":2, "commentText":"Testing", "createdBy":"User2", "isImportant":false }, { "id":3, "commentText":"This is another one", "createdBy":"User2", "isImportant":true }, { "id":4, "commentText":"Hello World!", "createdBy":"User2", "isImportant":true } ] I am attempting to filter out results that "isImportant" are not true. I have tried multiple ways of doing it with no luck. IE. var response = $(jsonSample).filter(function (i,n){ return n.isImportant===true }); var response2 = $.grep(Object(jsonSample), function(j){ return j.isImportant !== false; }); var response3 = $.map(jsonSample, function (n,i){ $.each(n, function(j){ return n.isImportant !== false; }) }); console.log(response); //jquery-2.2.4.min.js:2 Uncaught Error: Syntax error, unrecognized expression: ... console.log(response2); //logs every individual character in the jsonSample ["[", "{", """, "i", "d", """, ":", "1", ... console.log(response3); //jquery-2.2.4.min.js:2 Uncaught TypeError: Cannot use 'in' operator to search for 'length' in ...
  7. i want to introduce my first open source framework. its name is tedjs(easy elemen definer) . a library oriented framework. with this you will can design your html in your way. you can create elements , attributes , text nodes and comment nodes. you can control every thing. could you please visit its documents and tell your comments? i write a complementary library for it. its name is aml. it has some functions to help you. you can use it as a sample. tedjs documents: https://tedjs.org/#page:doc tedjs github: https://github.com/poryagrand/tedjs aml github: https://github.com/poryagrand/tedjs.aml.std thank you in advance
  8. I am working on a project for my job. I have php that creates multiple radio button lists through an array. There are 6 categories that that a list of radio buttons for each of the categories. I am trying to add an onclick javascript function to just one of the radio buttons. There is a text box on the very bottom, I want that to only show up if a certain radio button is clicked. I have the code attached below <?php $form_fields = array( "id" => array( "bsc_id", "fname", "mname", "lname", "email", "grad_id", "major_id", "grad_date", "deg_id", "age_id", "ethn_id", "res_id", "assist_id", "assist_other" ) , "name" => array( "Banner ID", "First Name", "Middle Name", "Last Name", "E-mail Address", "Status", "Major", "Graduation Date<br/>(mm-yyyy)", "Degree", "Age Group", "Ethnicity", "Residency", "Greatest Assistance", "If Assistance Other" ) , "type" => array( "age_id" => "radio", "grad_id" => "radio", "major_id" => "select", "deg_id" => "radio", "ethn_id" => "radio", "grad_date" => "date", "res_id" => "checkbox", "assist_id" => "radio" ) , "option" => array( "age_id" => "sql:select * from age_code", "grad_id" => "sql:select * from grad_code", "major_id" => "sql:select * from major_code ORDER BY major_text", "deg_id" => "sql:select * from deg_code", "ethn_id" => "sql:select * from ethn_code", "grad_date" => "fields:m-Y", "res_id" => "sql:select * from res_code", "assist_id" => "sql:select * from assist_code" ) );
  9. Hi! I am using the exif.js library to detect the input image's EXIF, to cope with the mobile devices camera orientations. The trouble I am encountering is that I don't seem to be able to override EXIF case "0", the standard portrait mode for both front and back camera. This is my relevant code: var orientation; EXIF.getData(profileImg, function() { orientation = EXIF.getTag(this, "Orientation") }); context.save(); orientateContext(); (function animationLoop(event) { renderProfileImg(event); context.restore(); renderBadgeImg(); requestAnimationFrame(animationLoop, profileImg); })() ... function orientateContext(orientation) { switch (orientation) { case 2: // horizontal flip context.translate(canvas.width, 0); context.scale(-1, 1); break; case 3: // 180° rotate left context.translate(canvas.width, canvas.height); context.rotate(Math.PI); break; case 4: // vertical flip context.translate(0, canvas.height); context.scale(1, -1); break; case 5: // vertical flip + 90 rotate right context.rotate(0.5 * Math.PI); context.scale(1, -1); break; case 0, 6, 90: // 90° rotate right context.rotate(0.5 * Math.PI); context.translate(0, -canvas.height); break; case 7: // horizontal flip + 90 rotate right context.rotate(0.5 * Math.PI); context.translate(canvas.width -canvas.height); context.scale(-1, 1); break; case 8, -90: // 90° rotate left context.rotate(-0.5 * Math.PI); context.translate(-canvas.width, 0); break; default: break; } }
  10. Hello guys! I want a little help! I want to take all HTML form div container, to put it in a value in hidden field and then to show it to the users with the same CSS style but without textareas tags. Instead of textareas, I want to show the value which came from the text fields (textarea)! So far so good! But when a change the information in textareas my javascript code do not take the new information from that field. What is wrong with my code? <!DOCTYPE html> <html> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> </head> <body> <?php if(isset($_POST['save'])){ $scrita = $_POST['hid']; $scritaInsert = strip_tags($scrita, '<p><n><nz><font><bl><br><r><chh>'); echo $scritaInsert; exit; //just for the test } ?> <form method="POST"> <input type="submit" name="save" class="btn-style" value="Save" id="submitContainer"/> <input type="hidden" name="hid" id="hid"/> </form> <div id="container"> <p style="text-align: center;font-weight: bold;font-size: 23px;color: black;">CocaCola</p> <p style="text-align: center; color: black; font-size:16px; text-decoration: underline;"> The address </p> <p style="font-weight: bold; color: black;"> To: <textarea name="do" style="width: 920px; max-width: 100%; height: 18px;">CocaCola Company</textarea> </p> <p style="font-weight: bold; color: black;"> Attention: <textarea name="vnimanieto" style="width: 830px; max-width: 100%; height: 18px;">CocaCola Company</textarea> </p> <p style="text-align: center;font-weight: bold;font-size: 19px;color: black;"> CONTRACT<br> <n style="text-align: center;font-size: 16px;color: black;"> For transport </n><br> <nz style="text-align: center;">№<textarea name="nomer" style="width: 60px; max-width: 100%; height: 18px;">1737</textarea> Date:<textarea name="date" style="width: 90px; max-width: 100%; height: 18px;" id="date">25.05.2016</textarea> </nz> </p> </div> </body> </html> <script type="text/javascript"> $('#submitContainer').click(function(){ $('.picker').html(''); var content = $('#container').html(); $('#hid').val(content); }); </script>
  11. I was reading the tutorial for creating an accordion here: http://www.w3schools.com/howto/howto_js_accordion.asp Does anyone know how I could add this accordion or something similar to the mobile view of a responsive menu. I want to add it only when there is a 'submenu'. The code I currently have is (index.html): <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Resposive Multi Level Horizontal Nav?</title> <!--nav styles--> <style> .show { display: block; } nav { width: 100%; float: left; font-family: 'Oswald', sans-serif; font-size: 100%; color: #252525; border-bottom: 4px solid #0069d4; border-top: 4px solid #0069d4; background-color: #fff; } ul { list-style: none; margin: 0; padding: 0; } li { display: inline-block; position: relative; } a { text-decoration: none; color: #fff; } li a { height: 60px; line-height: 60px; background-color: #fff; width: 120px; text-align: center; color: #252525; display: block; } li a:hover { background-color: #0069d4; color: #fff; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } /* submenu desktop */ ul.submenu { position:absolute; top:100%; display:none; } ul.submenu li { display:block; } ul.submenu li a { display:block; float:none; font-size: 100%; line-height:40px; height:auto; } ul li:hover ul.submenu { display:block; } /* open close mobile nav*/ #i-nav { display: none; float: right; padding: 20px 20px; } .expand_sub { display: none; float: right; } @media (max-width: 1024px) { nav { width: 100%; padding: 0; margin: 0; } ul li { display:block; } ul { width: 100%; display: none; } li a { width: 100%; text-align: center; float: left; } #i-nav { display: block; } .expand_sub { display: block; } ul.submenu { position:relative; top:0%; display:block; } ul.submenu li { display:block; } ul.submenu li a { width: 100%; float: left; } } </style> <!--google fonts--> <link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'> <!--font awesome--> <link href="font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css" /> </head> <body> <nav> <div><a id="i-nav" href="#"><i class="fa fa-bars fa-2x" aria-hidden="true" style="color:#0069d4;"></i></a></div> <ul id="menu"> <li><a href="#">HOMEPAGE</a><li> <li><a href="#">PROGRAMS</a> <ul class="submenu"> <li><a href="#">Program 1</a></li> <li><a href="#">Program 2</a></li> <li><a href="#">Program 3</a></li> </ul> </li> <li><a href="#">MEMBERSHIP</a><li> <li><a href="#">NEWS</a><li> <li><a href="#">GALLERY</a><li> <li><a href="#">CONTACT</a><li> </ul> </nav> <!-- jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <!-- script to toggle mobile menu --> <script> $(document).ready(function(){ $('#i-nav').click(function(){ $('#menu').toggleClass('show'); }); }); </script> </body> </html>
  12. I was reading the tutorial here http://www.w3schools.com/howto/howto_js_slideshow.asp and I understand how the examples work. What I was wondering is how would you combine these examples to build a slideshow that is automatic AND the user can navigate? Anyone know how to do that? Cheers
  13. I'm building a simple according from a w3 guide and I can't seem to get it to work on my wordpress website. Guide: http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol I continue to get this error: (index):474 Uncaught TypeError: Cannot read property 'classList' of nullacc.(anonymous function).onclick @ (index):474 var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function () { this.classList.toggle("active"); this.nextElementSibling.classList.toggle("show"); } } I'm just learning javascript so I'm new to this but I can't see what is wrong with this code. Active works just fine but the stuff highlighted in red keeps giving me errors and nothing drops down.
  14. The code provided for 'Javascript Automatic Image Slideshow' code is weak and not optimal. It is bit confusing and does n't reflect the best of W3schools. Please check the link attached here(http://www.w3schools.com/w3css/w3css_slideshow.asp) I suggest an edit. Please compare the current code shown in w3schools(1) and my edited code(2): 1. ------------------------------------------------------------------------------------------------------------------------------------------------------------------ <script> var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x.style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1;} x[myIndex-1].style.display = "block"; setTimeout(carousel, 2000); // Change image every 2 seconds } </script> ------------------------------------------------------------------------------------------------------------------------------------------------------------------ 2. <script> var myIndex = 0; var x = document.getElementsByClassName("mySlides"); carousel(); function carousel() { if(myIndex!=0){x[myIndex-1].style.display="none";} if (myIndex > (x.length-1)) {myIndex = 0} x[myIndex].style.display = "block"; myIndex++; setTimeout(carousel, 2000); // Change image every 2 seconds } </script> ------------------------------------------------------------------------------------------------------------------------------------------------------------------
  15. Hello everyone. I am new to this forum. I have build my first parallax website based on Petr Tichy's very good tutorial. I recommend it (https://ihatetomatoes.net). Here is my new site. The idea was to get an attractive intro for this new project using altered-perspective images in full width. http://www.ticket2utopia.com/Alpha/zHome.php I struggle a bit especially that I want to control the ratio of the images in a certain way. They must always be full page but depending on the width of the browser window, I apply a certain correction to the height. As the whole project is about "changing your perspective"... it's great... IMO. However, I would like to change the height of the picture when the browser window is square or taller than wide. I have tried so many different things... but nothing does not work. The problem is that the background-attachment must be fixed to work with parallax and I can not change that. At the moment I just resize the browser window to the ratio of the image (16/9) but this is not ideal at all. I control the situation when the browser window is wide, but in the case it's not I would like to force the image to its exact ratio... Any idea? There is also a section at the bottom of the page (#20 - visual meditation) which I can not control properly... the text box should fade in and out later. I used the code : data-100-top="opacity: 1" data-center="opacity: 1" data-center-top="opacity: 0" data--100-bottom="opacity: 0;" data-anchor-target="#slide-20". What should be changed to achieve that? Greetings from Cape Town, Paul
  16. Hi, I need your help please, I have created a button element in the HTML file, to which assigned the "click" event with a jquery code in a java script file. The problem is that.. when the page is loaded for first time and I open the login form when I press the login button my form close suddenly and it shows "?#" at the end of the URL, I don't know why happens this and I appreciate your help. thanks a lot.
  17. Hello, I'm trying to make a spinner that spins randomly on click (see example below). I've been messing around with this for hours, but I just cannot make this work like I want it to. This is my code, but it is unfinished and buggy: var myArray = ['360', '330', '300', '270', '240', '210', '180', '150', '120', '90', '60', '30']; var Spinner1 = sym.$('Spinner1'); // spinner 1 = wheel.jpg Spinner1.click(function(){ // randomize the degree of spin. var mySpin = myArray[Math.floor(Math.random() * myArray.length)]; sym.getSymbol('Spinner1').play(); Spinner1.css({ '-webkit-transform': 'rotate(' + mySpin + 'deg)', '-moz-transform': 'rotate(' + mySpin + 'deg)', '-ms-transform': 'rotate(' + mySpin + 'deg)', '-o-transform': 'rotate(' + mySpin + 'deg)', 'transform': 'rotate(' + mySpin + 'deg)', }); Spinner1.css('-webkit-transition','all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000)'); // calling alert pop-up on number if (mySpin > 330 && mySpin < 360) { alert("Winner is number 1!"); } }); What I am actually trying to achieve is the following: The spinner only spins clockwise (not clockwise and counter-clockwise) The spinner always spins 360 degrees + the random number/degrees defined in myArray (added on top of 360deg) The spinner randomly picks a number/degrees from myArray - but does not repeat that number again until all numbers have been spinned (resets after all spins) The spinner calls an alert pop-up when the pointer has landed on a number (between 1-12) If anyone can help me out or perhaps make my code work properly, I would be very happy. I really want to know what I am doing wrong so I can learn from it in the future. Help is sincerely appreciated! Regards, Entity_101 TestSpinner.zip
  18. I'm using the W3Schools Slideshow example here: http://www.w3schools.com/howto/howto_js_slideshow.asp I have links on a different page, and I'd like each of those links to open the slideshow page on a specific slide. Is there a simple way to do this without rewriting much of the existing HTML/JavaScript/CSS?
  19. I was wondering if there is a way to detect when a certain image is in a certain area on a page. I'm making a little game where you move a character around (which is an image), and when any part of the character is over a certain 100x200px area, it activates a function. Is this possible with JavaScript? If not, can I do it with another language that works with JavaScript and html? I'd prefer JavaScript. Thanks!
  20. Is it possible to update a prefix URL dynamically using Javascript? Looking to implement it in SharePoint 2013 Webpart.
  21. What is the use of 'window' object? I really didn't understood anything about the window object.
  22. Hello, i'm trying to create file upload box which is activated by both, file drag & drop and onclick. Currently drag & drop works fine for me, but i have no idea how to implement the feature for the click with automatically uploading the image when file area is changed. Heres my code so far <script> $(function() { var dropzone = document.getElementById('upload_area'); var upload = function(files) { var formData = new FormData(), xhr = new XMLHttpRequest(), x; for (x = 0; x < files.length; x++) { formData.append('file[]', files[x]); } xhr.onload = function() { var data = this.responseText; console.log(data); } xhr.open('post','script/php/iupload.php?fid=gallery'); xhr.send(formData); } dropzone.ondrop = function(e) { e.preventDefault(); this.className = 'dropzone'; upload(e.dataTransfer.files); } dropzone.ondragover = function() { this.className = 'dropzone dragover'; return false; } dropzone.ondragleave = function() { this.className = 'dropzone'; return false; } }); </script> <div id='upload_area' class='dropzone'>Drag & Drop or click to upload files</div> I was able to try dropzone.onclick event, but didn't get anything to work without $("#upload_area").submit(); function. Any tips guides / tutorial videos are welcome, since im trying to improve as developer.
  23. Hi all, I would like to understand how JS/jQuery can interact with PHP to upload a status and a picture from the HTML5 canvas to Twitter. I set up a similar thing for FB and it works. I don't get how to do it for Twitter and I haven't found much about it. Could you explain to me how it works? I currently have this JS/jQuery code as a starting point: var formData = new FormData(), mimetype = canvas.toDataURL().substring(canvas.toDataURL().lastIndexOf(":") + 1, canvas.toDataURL().lastIndexOf(";")), blob = dataURItoBlob(canvas.toDataURL().split(',')[1], mimetype); formData.append('source', blob); $('#twitter').click( function() { $.ajax({ url: '', type: 'POST', data: formData, processData: false, contentType: false, cache: false, success: function() { $('#twitter').addClass('twitter-success'); setTimeout( function() { $('#twitter').removeClass('twitter-success'); }, 3000); } }); } ); Thank you!
  24. Hi, I don't understand how to pass the value of profileImgX and profileImgY to the spot indicated below: function drawProfileImg() { profileImg = new Image(); profileImg.onload = function() { profileImg.x = canvas.width - distanceFromRightSide - ((profileImg.width - 183) / 2); profileImg.y = canvas.height - distanceFromBottomSide - ((profileImg.height - 242) / 2); profileImgAnimation(); } } function profileImgAnimation() { setInterval(function() { // I would like to pass the value of profileImgX and profileImgY here context.drawImage(profileImg, profileImgX, profileImgY, profileImg.width, profileImg.height); } } Thank you
  25. Hi everyone, I am trying to find source or tutorial how to create the random. I will like to learn how to create the random in poker card, but i need to make sure it must show the display that card is used. For example, I click on back of card to draw card, then show number or royal on card, then click it, moved to left-top or right-top to keep tracking those random poker card...do you have any idea? those card can't be repeated. Thank you so much
  • Create New...