Advertise Here

JavaScript

119K

Solutions

Articles & Videos

41K

Contributors

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.

Adjust position of Picture file

Hi,
To relevant list below, to this

http://my-friend.co/Test_rec4/Default.aspx?userid=mc23

The picture file does not appear at the end of the row/record. What to adjust?

1 Comment

Hi experts, how to put comma in a number? The codes below didn't work. Any help please.

<!DOCTYPE html>
<html>
<body>
<button size="25" onclick="GetComma()">Get Comma</button><br/><br/>

<input type="text" id="Tx1" size="25" >

<script>
function GetComma(event) 
{
  var x = "10450382.75"
  x = Number(x).toFixed(2);
  document.getElementById("Tx1").value = x;
  //Result should be like, 10,450,382.75
}
</script>

</body>
</html>

Open in new window

10 Comments

Hi Experts, codes below are able to disable F5 or page refresh. However, I'm looking for a solution that the F5 will totally disable in the entire window. Any help please!

<!DOCTYPE html>
<html>
<body>
<input type="text" size="5" onkeydown="uniKeyCode(event)">

<script>
function uniKeyCode(event) {
    var key = event.keyCode;
    if (key == "116")
    {
    event.preventDefault();
    alert("you press f5");
    return false; 
    }
}
</script>

</body>
</html>

Open in new window

3 Comments

I'm using the Telerik Kendo UI TimePicker
http://demos.telerik.com/kendo-ui/timepicker/index

In my sql server database table my column called Time1 is a datetime data type.

I'm displaying this field in a Telekrik Kendo UI TimePicker.

But when I run the page

The Telerik TimePicker is displaying this: 6/24/2017 8:00:00 AM

Anyone know how to configure the TimePicker to only display the time like this? 8:00:00 AM

7 Comments

hi
i have a video stream that i capture an image from. and save it to localstorage like so:

localStorage.setItem('original',c.toDataURL("image/jpeg",1.0));

Open in new window

that works.
now i have a reset button that when clicked i want to draw the original to the canvas. sounds simple but doesn't work with the image saved on localstorage.

  reset(){
      let canvas = this.thecanvas;
      let context = this.thecontext;
      let imgpath; 

      console.log(localStorage.getItem('original'));
        if(!localStorage.getItem('original')){
          imgpath = localStorage.getItem('original');
        }else{
          imgpath = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
        }


      imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0,canvas.clientWidth , canvas.clientHeight);
      };
      this.renderer.setAttribute(imageObj,'src',imgpath);
    
  }

Open in new window

so in the if statement when i use ! it does draw the image. but in the log i do get the saved base64 image, which is insanely long!!! but it is there.

what am i missing?

5 Comments

Hi Experts, I want to avoid undefined message appeared in an alert box since the res[3] is blank. I can't remove the res[3] because it is a client option whether or not he's going to use it. I tried to use a condition like, If (res[3] == "Undefined") but it didn't work. Thank you!

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Go</button>
<input type="text" id="N1" value="Me/and/You"/>

<script>
function myFunction() {
    var msg = document.getElementById('N1').value;
    var res = msg.split("/");
    
    themsgs = res[0] + " " + res[1] + " " + res[2] + " " + res[3 ] ;
    alert(themsgs);
}
</script>

</body>
</html>

Open in new window

5 Comments

Hi experts, I'm trying to find a solution to remove extra space in a text. Thank you!

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">No space</button>
<input type="text" id="N1" value="   No    extra  space   at  all!"/>

<p><strong>Note:</strong> The trim() method is not supported in Internet Explorer 8 and earlier versions.</p>

<script>
function myFunction() {
    var msg = document.getElementById('N1').value;
    //The alert should be No extra space at all!
    alert();
}
</script>

</body>
</html>

Open in new window

11 Comments

Hi experts, I'm trying to dis-allow negative sign "-" on a text input. Is there anyone who can help me using the codes below? Thank you!

<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>

<input type="text" id="Txt1">


<script>
var elementInput=document.getElementById('Txt1');
elementInput.addEventListener('keypress', function(e)
{
    if(e.keyCode == "45")
    {
      //Negative sign shall not appear in the input text
    }
});
</script>



</body>
</html>

Open in new window

2 Comments

When scrolling down the document in an iframe, and reach bottom, if keep spinning down the mouse wheel, the parent document starts scrolling. Browsers call it a "dispatch" of wheel event to parent. So it's not bubbling, as it's not within the same document. A new wheel event is created on parent.

Can this "dispatch" be prevented? How? (I use plain JavaScript.)
Is there any sample script available?

7 Comments

Free Tool: IP Lookup

LVL 9

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Hi experts, I want to count number of slushes in the input text. Any help please!

<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>

<input type="text" id="T1" value="Dog/Cat/Chicken//">
<button onclick="return iCount()">Count slush</button>

<script>
function iCount()
{
  var X = document.getElementById("T1").value;
  alert() //Count the slushes on the input text, T1 
}

</script>


</body>
</html>

Open in new window

3 Comments

Hi experts, I wish to exclude "*" on a regex so that in my input text only letters, and numbers and asteres (*) are allowed. Thank you!

<!DOCTYPE html>
<html>

<body>

<input id="idno" type="text"/>

<button onclick="OnlyWordsAndNumbers(document.getElementById('idno'))">Check</button>

<script>
function OnlyWordsAndNumbers(el) 
{
  //If el is compose of any symbols like @ # ? ! and many others then an alert woulb be..
  //Only letters and numbers are allowed in the box.

    var regex = /^[a-zA-Z0-9]*$/;
    if (!regex.test(el.value)) 
    {
      
      alert("Only letters and numbers are allowed in the box.")
      return false;
    }
    else
    {
      alert("Okey");
      return false;
    }

}
</script>
</body>
</html>

Open in new window

3 Comments

Hi experts, I'm trying to implement JQuery here ($("Qty").change();) where I can be able to compute the result between the two fields upon adding row on a table. My goal here is to have the result bet the two input, the id="Qty" and the id="rd". I want to have an auto answer to be filled in the result, id="utotal". The codes below won't work.., any help please! Thank you.

<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
tfoot {color:red;}
</style>
<table id="Tab1">
<tr>
  <th>Quantity</th>
  <th>Price</th>
  <th>Total</th>
</tr>
</table>
<br/>
<button onclick="return AddNow()">Add row</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
function AddNow() {
   var q = parseInt("2.00");
   var p = parseInt("2.50");
  
  var table = document.getElementById("Tab1");
  var row = table.insertRow(table.rows.length);
  
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  
  cell1.innerHTML = '<input type="text"  id="Qty" value="' + q + '"' + 'onchange="myRowTotalPOS(this.parentElement.parentElement)"/>';
  cell2.innerHTML = '<input type="text" id="rp"  value="' + p + '"' + ' readonly/>'; 
  cell3.innerHTML = '<input type="text" id="utotal" />';
}

function myRowTotalPOS( row )
    {
		Qty = row.cells[0].firstChild.value;
		if( Qty != '' && Qty != null ) Qty = Qty.replace( ',', '' );

Open in new window

…

9 Comments

Hi experts, I have some issue in my project where I need to use the button to calculate the two "input text" automatically upon pressing the button. Is it possible to activate any key function by filling it thru command or function in a button? I tried to use onchange, onkeyup, onkeydown but they won't work. Please note that I need a solution base on the given codes below where the sequence is filling data thru commands and once the input text receive the date it will trigger the function iCalulate. Any help please. Thank you!

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" id="A1" onkeyup="return iCalulate()" readonly/>
<br/><br/>
<input type="text" id="A2" readonly/>
<br/><br/>
<input type="text" id="Sum" readonly/>
<br/><br>
<button onclick="return fillAll()">Go</button>

<script>
function iCalulate()
{
  var a = parseInt(document.getElementById("A1").value);
  var b = parseInt(document.getElementById("A2").value);
  
  document.getElementById("Sum").value = (a + b);
  //var c = (a + b);
  //alert(a + b)
}

function fillAll()
{
  document.getElementById("A1").value = "2"
  document.getElementById("A2").value = "3"
}
</script>
</body>
</html>

Open in new window

8 Comments

HI experts, I'm having trouble with my code below where I need to get the date of the day and put it in an input text. The code below will not show the correctly - the date will always lesser than one day than our local dates. However, The alert message i put will display the correct dates. Any help please! Why the alert message shows the correct date and in an input text will not.

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<input type="date" id="date1"/>
<button onclick="NowDate()">Check Date</button>

<script>
function NowDate()
{
  var myDate = new Date();
  alert(myDate);
  document.getElementById("date1").valueAsDate = myDate;
}
</script>

</body>
</html>

Open in new window

7 Comments

LVL 5

Question by

Isaac

3d agoSolved

TR appendChid() rendering problem

I have the following piece of code that is needed to build and add rows under the right headings in an html table.

var mileStoneHtml="";
		var typeArray = [];
		var headingName = "";
		for(var i =0; i < data.d.results.length; i++) 
		{	
			headingName = data.d.results[i].Milestone_x0020_Type;
			
			if (typeArray.indexOf(headingName) === -1){
				typeArray.push(headingName);
				
				
				tableRow = document.createElement("tr");
				tableRow.id=headingName;
				tableRow.style.backgroundColor = "#EEEEEE";
				tableCol = document.createElement("td");
				tableCol.colSpan = 5;
				tableCol.textContent = headingName;
				tableRow.appendChild(tableCol);				
				console.log(tableRow);
				tbl = document.getElementById("tblMilestone");
				console.log(tbl);
				console.dir(tbl);
				tbl.appendChild(tableRow);
			}
					mileStoneHtml = "<tr>"+
					"<td>"+data.d.results[i].MilestoneDescription+"</td>"+
					"<td>"+data.d.results[i].Planned_x0020_Date+"</td>"+
					"<td>"+data.d.results[i].Revised_x0020_Date+"</td>"+
					"<td>"+data.d.results[i].Actual_x0020_Date+"</td>"+
					"<td>"+data.d.results[i].Milestone_x0020_Type+"</td>"+
				"</tr>";		
				
				var newRow = $("#"+headingName).append(mileStoneHtml);
				console.log(newRow);
//				document.querySelector("#tblMilestone").appendChild(mileStoneHtml);					
		}

Open in new window

It needs to look like this

but it looks like this

25 Comments

Hi Experts

Could you point how to obtain the values from the Javascript Objects?

Javascript

console.log(Object.values(where));

Open in new window

Produced

So, what's needed to obtain these Object's values?

Thanks in advance!

5 Comments

Dear Experts,
I am creating an online database portal that requires a user login. Once logged in, the user has access to various pages, one of them will jump to a payment center of a bank. (In my case, Union Bank, https://www.hoabankservices.com/Services.aspx)

Is there anyway that I can inject the userID from before jumping to this payment center, and have it automatically show up in User ID box?
Please advise. Thank you.

4 Comments

I have a multiple choice quiz that is either correct or incorrect. Right now the code works so that correct or incorrect is shown, but I need to add logic that shows that the choice was correct because that was the right answer or if it was correct to not select it, or the choice was incorrect because that was the correct answer to choose.
Below is the code I am currently using and the HTML that has the question.
Any help or pointing in the right direction is appreciated.

Javascript

// JavaScript Document
//Function to show all explanations and tell if the user was correct. 
function show_all()
{  
  var 	
 answers = document.getElementsByClassName("explanation"),
		checkboxes = document.getElementsByName('field'),
		corrects = document.getElementsByClassName("correct"),
		incorrects = document.getElementsByClassName("incorrect");
		
		
  for(var i = 0; i < answers.length; i++)
  {
        
answers[i].style.display = 'block';
	
	// check the checkbox selection
	if (checkboxes[i].checked) {
		//If the answer and choice is incorrect
		if (checkboxes[i].getAttribute('value') === 'incorrect') {
			incorrects[i].style.display = 'block';
			
		}
		else {
			corrects[i].style.display = 'block';
		}
	}
	else {
		if (checkboxes[i].getAttribute('value') === 'correct') {
			corrects[i].style.display = 'block';
		}
		else {
			incorrects[i].style.display = 'block';
		}
	}
  }
 

}

Open in new window

HTML

<form id="submitform">
    <div id="main" class="container-fluid">

Open in new window

…

4 Comments

Hi

See my code: https://codepen.io/petewinter/pen/weqWeq

Can you please help with the following...

1) My list should be sorting alphabetically. I assume this is not happening correctly due to the tags within the <li>, but I'm not sure how to edit the code?
2) When a checkbox is checked I would like selected checkboxes to go to the top of the list alphabetically, then when unchecked go back back down and sort alphabetically again.

Help would be much appreciated.

9 Comments

Hi,

I am looking at a few different things. I am using ASP.NET 4.0 and VB.NET code-behind.

The main situation is this.

I have a page with an iFrame. We'll call that Page 1 and the page in the iFrame as Page 2. The page of the iFrame on Page 2 is a URL location is external and that page cannot change.

Page 1 is polling the database running on reload of the page which invokes the Page_Load on the reload. That Page_Load is executing the stored procedure to check certain values in a table. Page 2 (the one in the iFrame) is where certain information is entered and will have a submit button. After a period of time, information from the Page 2 will go into the same table that I am polling on Page 1.

What is going on is every time Page1 reloads (based on like 10 second interval) the data in Page 2 (in the IFrame) is lost.

How can I keep that from happening?

I can think of one way, off the cuff, and that is to use the Page 1 and Page 2 as a frameset. And one Frame (for the Page 1) is doing the polling and reloading... The other frame is doing the Page 2 but in an iFrame.

When the user hits the "Submit" button on the second frameset (Page 2) then break out of the frameset and only have the Page 1.

Break out of the Frameset from the code behind of Page2 with JavaScript like? Or is there another way?

Page.RegisterClientScriptBlock("ResetPage", "<SCRIPT>top.location.href=" + Page1URL + "</SCRIPT>");

Open in new window

That is one option. Is there another …

9 Comments

HI experts, codes below are able to calculate profit percentage. However, when it comes of writing comma "," in a number it will no longer calculate. For example, if i write 1,000.00 as the capital price (CP) and 1,200.00 as the selling price (SP), the solution will not work. However, if I write 1000.00 as the (CP) and 1200.00 as the (SP) the solution will answer. Any help please! Thank you.

<!DOCTYPE html>
<html>

<body>
<p>Capital Price</p>
<input type="text" id="A9" onkeypress="CalculateProfit()" onkeyup="CalculateProfit()"/>
<br/>
<p>selling Price</p>
<input type="text" id="A8" onkeypress="CalculateProfit()" onkeyup="CalculateProfit()"/>
<br/>
<p>result</p>
<input type="text" id="A10"/>

<script>
function CalculateProfit()
{
	var 	sp = parseFloat(document.getElementById("A8").value);
			sp=sp.toFixed(2);
			sp=sp.replace(/\,/g,'');
			
	var 	uc = parseFloat(document.getElementById("A9").value);
			uc=uc.toFixed(2);
			uc =uc.replace(/\,/g,'');
			
	var 	prt = (sp /(.01 * uc) - 100);
	var 	n = prt.toFixed(2);
	
	document.getElementById("A10").value = n + "%";  
}

</script>
</body>
</html>

Open in new window

3 Comments

If i have the following, are there any issues using a relative path for s.src? I've tested and it works fine but didn't know if there were any gotchas with this?

var scripts = document.getElementsByTagName('script')[0]; 
	    var s = document.createElement('script'); 
	    s.async = true; 
        s.src = "/scripts/bk.js"; 
	    scripts.parentNode.insertBefore(s, scripts);

Open in new window

Thanks!

4 Comments

Hello
I am using a script that backups and restores mysql databases. The script works fine until I include an external JS file, which is when I get the title error in firebug. There is a lot of code but I think I can narrow the error to line 692 but what ever I try, I keep getting the error.

I must add I never created the script so cannot give any further info on it's content, but it does what I want it to do, apart from this error.

I would be grateful if somone could help with this. Many thanks

<?php

// Report errors

error_reporting(E_ERROR | E_PARSE | E_NOTICE);

// error_reporting(E_ALL);	//Debug purpose

$host = 'localhost'; //HOST;//eg:localhost
$username = 'root'; //USER;//self explanatory
$passwd = ''; //PASSWORD;//self explanatory
$charset = 'utf8'; //charset keeps preferred character encoding
$port = '3306'; //self explanatory
$dateformat = 'd-m-Y H-i-s-A'; // will be appended to database backup file name eg:test_2016-Oct-25-10-30-54-AM.zip

// small utility function to detect whether secured server or not

function isSiteSSL()
{
  return (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') || $_SERVER['SERVER_PORT'] == 443;
}

$url = (isSiteSSL() ? 'https://' : 'http://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];

if (isset($_SERVER['QUERY_STRING'])) {
  $url = str_replace('?' . $_SERVER['QUERY_STRING'], '', $url); //removing query string to get exact url
}

$url2 = $url; //$url2 used for building download url
$url.=

Open in new window

…

10 Comments

1. I followed examples in the link below and coded a map. It works. You can see a map here:

http://leafletjs.com/examples/choropleth/

You see if you zoom out, you'll see Hawaii and Alaska.

2. I've been asked to make it look like this...Have Alaska and Hawaii next to the US
https://www.highcharts.com/maps/demo/us-counties

3. The Leaflet link in step 1 has the "us counties.js" file

4. I looked at Highchart's JS file (you can see the link in JSFiddle that comes with Highcharts, step 2 above).
Looks like they have Alaska and Hawaii bundled in a separate section of the JS file and then they have the rest of the states.

Anyone has worked with Leaflet.Js and got Hawaii and Alaska moved next to the US?

20 Comments

First
Prev
1
2
3
4
5
6
7
Next
Last

JavaScript

119K

Solutions

Articles & Videos

41K

Contributors

Course Of The Month

JavaScript

Related Topics

JavaScript

Related Topics