We help IT Professionals succeed at work.






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.

Nav is hiding when I scroll down but wont return when I scroll back up

let preYpos = window.pageYoffset;
window.onscroll = () => {
  let curYpos = window.pageYoffset;
  if (preYpos > curYpos) {
     document.querySelector('nav').style.top = '0';
  document.querySelector('nav').style.top = '-80px'
  preYpos = curYpos;

Open in new window

Here is a code pen with my code
Having trouble in my js

Essentially I am using Template Literal to create anchor buttons that when clicked should scroll to the respective section. However, in the test code in above codepen is not working
I just cant seem to see why its not scrolling
Also note the e.preventDefault is not working either as it is still cycling through the sections because of the Anchor href pointing to them

Here is the area I think is the concern const evListen = document.querySelector('#contactLink'); // getting contactLink

const evListen = document.querySelector('#contactLink'); // getting contactLink
evListen.addEventListener('click', (e) => {
   let contactEv = document.querySelector('#contact');  
   console.log('It clicked'); // It clicked is working
Here's the code that references CAMS. I've got all of it here, but you don't have to look any further than line #30:

$(document).ready(function () {

    /* ################################################################### */
    /* Global events for viewing a company's detailed overview in the */
    /* slide out screen from the right */
    /* ################################################################### */

    var $slider, recordId, route;

    // bind the load action to all links referencing a company id
    $(document).on('click', 'a.open-company-details[data-company-id], a.open-company-details[data-prospect-id]', function () {
        var $this = $(this),
            id = (typeof $this.attr('data-company-id') != 'undefined') ? $this.attr('data-company-id') : $this.attr('data-prospect-id');
        route = (typeof $this.attr('data-route') != 'undefined') ? $this.attr('data-route') : 'companies';

        recordId = id;
        openCompanyDetails(id, route);        
    // Datatable assign to (someone else)
    $(document).on('click', 'a.assign-to', function () {
        var $this = $(this),
            userId = $this.attr('data-user-id'),
            id = (typeof $this.attr('data-company-id') != 'undefined') ? $this.attr('data-company-id') : $this.attr('data-prospect-id');
        route = (typeof $this.attr('data-route') != 'undefined') ? $this.attr('data-route') : 'companies';

        recordId = id;


Open in new window

Can someone help me determine why the checkbox on https://www.gtraxc.com/login.asp is disabled?  I can't find the problem.

Is there a simple javascript function that will return the exact time of day on the click of a button?  Once I have that value, then I need to send it to a sql server db on my web server.  I want to get the time on the client side (rather than using the classic asp Now() function, which doesn't get the time until it reaches the server) so I know there is no lag if the internet is slow.  So here is what I need:
1) User clicks a button on their smart phone.
2) Javascript assigns system time to a variable.
3) Variable is passed to classic asp.

I can take it from there...
I'm following an example to create my first .Net Core with Angular.  hadn't added any code. Just the code that project created.

The project was running fine until I did npm install and installed TypeScript.

I want to use Angular 8

1. I created the project and I see this
2. I do ng --version and I see this

3. I ran the project and I get this error. How can I make it use Angular 8 and not 9?


I found this but I want to use latest Angular, I want to use Angular 8. Downgrade, not upgrade

Should I do this?

1. Install CLI 8.2.12   --> https://www.npmjs.com/package/@angular/compiler-cli/v/8.2.12
2. Change package.json  from
 "@angular/cli": "^9.1.0",
    "@angular/compiler-cli": "^9.1.0",

Open in new window

 "@angular/cli": "^8.2.12",
    "@angular/compiler-cli": "^8.2.12",

Open in new window

Or this one. I think I need to uninstall the CLI and reinstall version 8 --> https://appdividend.com/2019/06/03/how-to-update-angular-cli-to-version-8-angular-8-cli-upgrade/
Here's the code:I'm working on:

function bindTimeLine(targetElement, data) {
        $('#' + targetElement).html('Processing...');
        if (typeof data != 'undefined') {
            if (data.length > 0) {
                let html = '';
                data.forEach((row) => {
                    let timelineMonth = '<div class="timeline-month" title="' + row._id + '">' +
                        '<div class="timeline-time-view" >' +
                        '<div class="timeline-time-view-inner" title="' + row._id + '">' +
                        '<div class="left-view-time"> <span> ' + row.prettyDate + '</span> <span>' + row.activities.length + ' Entries</span></div> ' +
                        '</div>' +

                        '</div>' +
                        //'<div style="height:78px;"></div>'
                    let timelineSection = '', timelineIndex = 0;
                    row.activities.forEach((activity) => {
                        let activityMeta = '';
                        timelineIndex = row._id+'-'+( timelineIndex + 1);
                        for (var key in activity.meta) {
                            let val = activity.meta[key];
								activityMeta = activityMeta + '<div class="box-item"><strong>' + key + '</strong>:<span>' + "I want to format the date" + '</span></div>';	
							else {
								activityMeta = activityMeta + '<div 

Open in new window

I have a web site where the labels on each of the data entry fields on the data entry screens have an HTML link to a help pop-up with information about that particular data entry field. The pop-ups need to be non-modal and the pop-up mechanism needs to allow multiple pop-ups to be open at the same time and not necessarily within the parent viewport. The site is a Classic ASP application which runs under Windows on as variety of web browsers.

The site works fine with IE and Firefox. However, with Microsoft Edge, the pop-up window is about 400 pixels wide (instead of the specified 240 px) and cannot be made smaller by grabbing the right edge of the window and trying to resize it. With Google Chrome, the pop-up window is about the right size, but has scroll bars.

Yeah, I know that each browser's rendering engine is different, but why are the pop-ups for Edge and Chrome not behaving per the HTML spec, which says the minimum window with allowable is 100 px and a window calling parameter string specifying 'no scrollbars'.

What am I missing here? Do I need to build my pop-ups using jQuery UI?

Here is a VB Script code snippet for the typical situation:

<td height="17" valign="middle" class="formlabel">
      <a href="javascript:;" onClick="openBrWindow('../../popups/results_pop/summaryselect_co.htm' ,'', 'top=100,left=550,width=240,height=300,scrollbars=no)">
      Number of Selected Companies</a>:&nbsp;</td>

and here is the JavaScript code to open the window:

      function …
I'm on my first Angular 8 project, upgrading a side project I have.

I installed nmp and Angular 8.

Following a tutorial on learning Angular 8 (https://www.c-sharpcorner.com/article/learn-angular-8-step-by-step-in-10-days-day-1/)
 it mentions installing Typescript.

1. I checked package.json and I see this. Does this mean Typescript has been installed?

2. I checked this folder and I see this:

3. I did tsc -v, but get a message 'tsc' is not recognized as an internal or external command,
operable program or batch file.

4. I opened the project's file in notepad and I see this <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>

Do I have Typescript installed?
Good day Experts,

Need help with turn server and web rpc.. we are getting "ICE failed, add a TURN server and see about:webrtc for more details" and we trying to get our video chat application to work properly.  At moment it only works if i am on the same ISP with a user..if users are on different isps..the voice and video does not work.  We are running tests using this kink https://www.teledoctor.co.zm/livesmart/client.html

When it works we are on same service provider, but voice video stops on different..we are not experts on this and need help to get work across service providers for our application.  Is there a site where one can test a TURN/STUN server setup?

Kind regards
I'm coding my JavaScript phone games in Brackets. It claims Google Chrome browser must be used for test/preview.
But if I refresh in Safari, it seems to be fine.

I'm using a local XAMPP server for my project web-file-space.
Is there a good/convenient way to publish the files to a real web_space? How do I connect the (lightning) preview button in Brackets IDE properly?

It insists Google Chrome must be installed as a browser. Does this in any way complicate my install of Safari?

Here's the ticket I'm working on:

When the Prospects service queries for contacts, if values are undefined, the defaults are hardcoded and caught later on.

I.e in the backend:
phone number -> 000-000-0000
name -> . //Not kidding, it's literally a period
email -> noemail@email.com

Then in the front end, it checks for each of these hardcoded values before converting them to booleans. This seems very loose and confusing.

Basically, what's happening is if a user adds a contact to the database and they enter very little info (no email, no name or no phone number), the database will interpret those NULL values, in whatever combination they may be, and replace those NULLs with either a period, or what you see above.

The team member who's identified this anomaly is an exceptional programmer and I'm not cynical at all. My question: What would be the better approach?

I've got three fields available to me. The only required field is the, "name" - although I'm thinking that could also be left blank in light of there being the "period" accommodation mentioned above.

I've asked about making all three fields required and that was nixed.

So, what then, is the better approach to handling NULL values in this scenario?

Right now, rather than inserting a NULL value, things like "noemail@email.com" are being inserted instead. And then the system looks for "noemail@email.com" to determine whether or not there's a legitimate email address in the database.

It's a …
Here's the code:

return '<a href="javascript:void(0);" class="open-company-details" data-company-id="' + row._id + '" data-route="companies">' + escapeHtml(row.name) + '</a>';

Open in new window

What is this doing?

I'm looking all over the codebase for something that resembles ($('open-company-details').click(function() {... and I can't find anything like that.

Then I go back to the actual link and I'm wondering if there isn't more to this than just what I'm looking for.

What is this link doing? What's it accessing? I see "companies..." What's the "flow" of this thing?
I'm working on a Nodejs application. At one, a twig is rendered via the "companies? route. Part of that twig looks like this:

 <table id="main-dt" class="table custom make-datatable table-bordered table-striped dataTable no-footer" data-route="/companies/datatable" data-layout="tlipr" data-callback="initHeatMap();">
          <th scope="col" data-field=":checkbox" data-searchable="0" data-sortable="0">
            <div class="pretty p-default">
                <input type="checkbox" class="table-all" />
                <div class="state p-primary">
          <th scope="col" data-field="name" data-searchable="0" data-sortable="1">Company</th>
          <th scope="col" data-field="owner" data-searchable="0" data-sortable="1">Lead Owner</th>
            <th scope="col" data-field="contacts" data-searchable="0" data-sortable="1">Contacts</th>
          <th scope="col" data-field="addresses" data-searchable="0" data-sortable="1">Location</th>
          <th scope="col" data-field="meta.ftes" data-searchable="0" data-sortable="1">FTE's</th>
          <th scope="col" data-field="meta.premium" data-searchable="0" data-sortable="1">Premium</th>
          <!-- th scope="col" data-field=":actions">&nbsp;</th -->

Open in new window

Notice the "data-route="/companies/datatable" piece. That route is what's feeding the info the table is displaying.

That route looks like this:

router.post('/companies/datatable', async (req, res) => {
    let resp = await Company.datatable(req.body, { pipeline: { $ne: '' } });

Open in new window

If you do a 'console.log', you get an array which corresponds to what you see on the page:

screenshot of page
When you click on the name of any of the companies that you see listed and inspect that link, you see this:

<a href="javascript:void(0);" class="open-company-details" data-company-id="5e67f4287774fd397082de8b" data-route="companies">brucegust.com</a>

Open in new window

"open-company-details" is what will will open up a popup that has several tabs that you can scroll through and view the "details" that correspond to that company name.

Easy enough.

But when you look at the "company.html.twig" file, the one where the above table is housed, there's no mention of that link / class:

Open in new window

How do I add a "sign-up" form for my website? I would want a form for the user to fill-in, then the information goes to a database, I suppose. THEN a Thank You notice. I believe this has to be done in javascript.
My background is in Oracle development but currently I'm trying to learn and maintain a web app.  We are using the google geocoder location thingy to "find stores" based on the entered zipcode or address.  We have error messages that are initially hidden, but then go through logic to display the correct error message if the search is not successful.  

Initially we use something like
<li><div id="geocoder-error-zero-results" class="d-none">@Global.GeocoderErrorZeroResults</div></li>

Open in new window

to, I'm guessing, set up the page but leave the messages hidden.

Once the user enters a zipcode, such as 00000, the status is set to ZERO-RESULTS and goes through logic in a javascript file, but the error message is never displayed:
$('#geocoder-error-zero-results').css("display", "block");

Open in new window

I have tried the following:
Changing d-none to another class that we have defined as display: none (without !important)
Changing the above javascript to
("display", "block !important")

Open in new window

Changing the above javascript to

Open in new window

None of these have worked.  Any ideas?  

Thank you!

How can I alert the user if they enter From date greater than To date?

var StartCreateDate = $('#FromCreatedDate').val();
var EndCreateDate = $('#ToCreatedDate').val();

  if ((StartCreateDate != null && EndCreateDate != null) && (StartCreateDate > EndCreateDate)) {
            alert("From create date must be greater than to create date")
            return false;

Open in new window

I've been working w javascript Phaser for games, and one example isn't coming through. It is the 'colorzap' example.

It ads a state object to a window that only works on a device and not a browser. What should I change in main.js, or the first state .js. ?

The colorzap Github is here

Here's a screenshot of the page I'm working on:

screenshot of app
The field in the red box is what's got me baffled.

My task is to change the formatting of the "02/26/2020 - 03/26/2020" that's in there right now to "Last 30 Days."

The app is using "DateRangePicker..."

Here's the relevant portion of the twig file:

<div class="row">
    <div class="col">
        <div class="card">
            <div class="card-header">
                <form class="filter-form form-inline view-report inline-filters" action="/reporting" method="post">
                    <div class="form-group">
                        <input type="text" name="date-range" id="date-range" placeholder="Date Range" class="form-control"/>
                    <div class="form-group">
                        <select name="user" placeholder="Seller" class="form-control user-select "></select>
                    <div class="form-group">
                        <button type="submit" class="btn btn-md btn-success"><i class="fa fa-check fa-lg"></i> View Report</button>
                    <div class="form-group">
                        <button type="button" class="btn btn-md btn-primary btn-print"><i class="fa fa-print fa-lg"></i> Print</button>
                        <button type="button" class="btn btn-md btn-primary btn-pdf"><i class="fa fa-file-pdf fa-lg"></i> PDF</button>

Open in new window

I'm working on an app that's using DateRangePicker...

There's been more than one third party contractor involved and I say that because of the way the formatting changes from page to page. My task is to institute some uniformity and I'm stuck.

Here's the dilemma:

The Dashboard:DateRangePicker

screenshot of dashboard
The twig file that goes along the Dashboard looks like this (this is just the relevant part):

 <div class="row filter-widget">
                <div class="col"><h4>Most Active</h4></div>
                <div class="col right-padding">
                    <form class="form-inline float-right" action="/dashboard/activitychart" data-chart-target="activityChart">                       
                        <div style="cursor: pointer;" class="form-control text-muted date-range" data-saved="{{dashboard_settings.most_active.range}}" onclick="dateRangeSelect('index3')">
                            <div style="margin-top: 3px;">
                                <i class="fa fa-calendar"></i>&nbsp;
                                <span style="padding-right: 30px;"></span> <i class="fa fa-caret-down"></i>
                        <input type="text" style="display:none;"  placeholder="Date Range" name="date" required />

Open in new window

There's a JS file that goes along with this page. I have it here in its entirety ,but I'm looking at line #34.

Open in new window

For my javascript mobile game, I'll need to have hundreds of various pro-looking icons for in-game-choice buttons on my Phaser pages.

iconfinder.com has exactly the sort of pics I need. -- Polished.

Are there any subtleties to this choice? Will I regret it, legally, to be specific?
If I buy one of their membership packages, is it that simple? Credit them on the site?

Look around!
This page has an example of elephant icons. Ignore the childish ones! I'll prefer black and white.  here

I have the following function called from a selection in a grid:

I'd like to convert this to jquery. Is there a process or do people just know how this is done.

            function OnRowSelection() {
                var MasterTable = $find("<%=Grid.ClientID%>").get_masterTableView();
                var selectedItemsCount = MasterTable.get_selectedItems().length;
                    if (selectedItemsCount > 0) {
                        document.getElementById('btn1').disabled = false;
                        document.getElementById('btn2').disabled = false;
                        return false;
                        document.getElementById('btn1').disabled = true;
						document.getElementById('btn2').disabled = true;
						return false;

Open in new window

Also more generally the button doesnt look disabled, although the on click event doent fire in its disabled state. How would I achieve the diabaled style when disabled?
HI Experts,
 I have one Macro enabled file (Output_file) with VB code to read input excel file , align the cell and populate to output file. My VBA code is working file. I have some of small VBA modules which we have to migrate to Node.js and Javascript.

I need help from expert to convert my vb code or come up with good solution to read excel source file and populate to HTML table.

I am attaching input and output file and also attach code.

Can you please guide me for best module and solution?

Input File

Output File

Option Explicit

Const strSourceFolderPath       As String = "C:\Source\"
Dim fso                         As Object

Sub getDataFromFile()
Dim wbSource    As Workbook
Dim wbDest      As Workbook
Dim wsSource    As Worksheet
Dim wsDest      As Worksheet
Dim Rng         As Range
Dim rngToCopy   As Range
Dim LR          As Long
Dim DLR         As Long
Dim Company     As String
Dim SourceFile  As Object

Application.ScreenUpdating = False
Set fso = CreateObject("Scripting.FileSystemObject")

If Not fso.FolderExists(strSourceFolderPath) Then
    MsgBox "The Source folder for Input Files was not found!", vbExclamation, "Folder Doesn't Exist!"
    Exit Sub
End If

Set wbDest = ThisWorkbook
Set wsDest = wbDest.Worksheets("Output")

Set SourceFile = getRecentModifiedFile(strSourceFolderPath)

Set wbSource = Workbooks.Open(SourceFile)
Set wsSource =

Open in new window

Hi Experts,

How can I resize an image dynamically based on their original width or height, without distorting them?

Let me elaborate...

The images are logos that are uploaded by users, so their dimensions are unknown. Some squares, some vertical rectangles, others horizontal. In other words there are 3 possible shapes.

I'm only in the planning phase for this, but i'll have a container (div) for these images, with a fixed size, let's say 190 x 60px.

So based on the 3 shapes and on the known 190 x 60 container, I'd want to end up with the following if the shape is

  • Square
  • , then the display size would be
  • 60 x 60

  • Horizontal
  • , then the display size would be
  • 190 x calc

  • Vertical
  • , then the display size would be
  • calc x 60

In each scenario, the img would remain its original size if it is less than 190x60 I think

Now, I know calc would be proportional. For example, for vertical, calc (or width) would be 60/[orig_height]x[orig_width]

So, my first question is how to obtain the original dimensions of a given image file?

Secondly, what is the easiest way to do this, considering that I'm using PHP/jQuery/SCSS? I'm leaning towards doing it all on the  PHP side.

Thank you.
JQuery pop up window with Radio buttons

I have the following Jquery code for the pop up window

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js" type="text/javascript"></script>

Open in new window

<script type="text/javascript">
           autoOpen: false,
           height: 250,
           width: 250,
           modal: true,
         buttons: {
        "Ok": function() {
          $( this ).dialog( "close" );
          window.location.href = $("#YourDialog input:radio:checked").val();
           //Additional Code Here
       //Displays the dialog modal when the "YourButton" element is clicked

Open in new window

<div id="YourDialog" style="display: none;">
				Please choose an option : <br />
				<input name='choice' type='radio' value='MQG' checked >MQG<br/>
				<input name='choice' type='radio' value='DQG'>DQG

Open in new window

and then Im trying to call it from the following function and trying to replace windows.confirm box with above pop-up windows

if(fileExtension.toUpperCase()==="csv".toUpperCase() )
		    var isMQG = window.confirm("If this a MQG then" +
		    		"\n Please select OK for a MQG" +
		    		"\n or Cancel for a DQG");
			if (isMQG)
				document.form1.action = "getFile.jsp?grpType=M";
				document.form1.action = "getFile.jsp?grpType=D";

Open in new window

Im not sure how can i Call my pop-up code in above code so that when radio button MQG is selected on OK ,  this
document.form1.action = "getFile.jsp?grpType=M";

Open in new window

action gets called and when DQG radio button is selected on OK , this
document.form1.action = "getFile.jsp?grpType=D";

Open in new window

action is called

Thank you






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.