JavaScript Discussion Boards

First Prev Next

Re: Document.OnKeyDown

Richard MacCutchan2-Oct-17 6:01

Richard MacCutchan

2-Oct-17 6:01

#
if(e.keyCode=="39"){

Keycodes are numbers, not strings. See Control.KeyPress Event (System.Windows.Forms)[^].

How to upgrade apps from angular 1 to angular 4

GKP199220-Sep-17 22:15

GKP1992

20-Sep-17 22:15

Hi,

I am new to Angular js and I was trying to find out proven ways to upgrade an existing Angular 1 app to Angular 4.
What I wish to do is to be able to run the angular 1 and angular 4 components together since I do not want to migrate all at once and proceed gradually.
It will be a great help if some could point me in the right direction.

I am not the one who knocks. I never knock.
In fact, I hate knocking.

Re: How to upgrade apps from angular 1 to angular 4

Nathan Minier2-Oct-17 1:54

Nathan Minier

2-Oct-17 1:54

Hi GKP1992. I'm sorry your question has been dangling this long.

I don't know that what you're asking is really possible; Angular is pretty adverse to multiple instancing, as in it won't do it. Angular 1 business objects and Angular 2+ components are basically analogues of each other, but there is exactly zero compatibility between the two. You might be able to find shims on the interwebs, but it's not something I can make any solid suggestions about.

I'd love to help, as a former advocate for Angular 1, but the whole Angular 2/4 fiasco and the new ostensibly enforced development pipeline (NPM, Typescript, etc) has definitely cooled me on the framework and driven me to evaluate other frameworks to manage my bindings (I like RiotJS lately, since it's basically just a binding tool driven by Vanilla JS). I strongly suspect that I'm not alone in this regard.

My advice would be to start evaluating other things in the field and separating yourself from a technology whose development team has lost sight of that technologies purpose. There are many.

"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli

Re: How to upgrade apps from angular 1 to angular 4

GKP19923-Oct-17 23:50

GKP1992

3-Oct-17 23:50

Thanks for the response Nathan. I have realized how difficult it can be to achieve what I am trying to.

I looked at the ng-upgrade module and this controversial method of ng migration. Anyways, we have decided to upgrade all the project at once.

It can be a PITA, but that's the price we pay for a hot tech. Cry | :((

I am not the one who knocks. I never knock.
In fact, I hate knocking.

Javascript inner function,to which object does an inner functions belongs to

Member 1335414214-Sep-17 21:16

Member 13354142

14-Sep-17 21:16

JavaScript

var my_name_is = 'This is global!';
function f() {
    var my_name_is = 'This is local to f()';
    function print_name() {
         var print_name = 'This is local to print_name()';
        console.log(this.print_name); 
    }
    print_name();
}

function print_name() is an inner function of fucntion f();

In the above function,if function f() belongs to Window Object,then to what object function print_name() belongs to?

Re: Javascript inner function,to which object does an inner functions belongs to

Mohibur Rashid20-Sep-17 22:45

Mohibur Rashid

20-Sep-17 22:45

Every time you call f, it create a temporary function called print_name, execute it and then get rid off it. Still belongs to function f; on the other hand f belongs to window. f stays there as long as window is alive

I do not fear of failure. I fear of giving up out of frustration.

An Alternative To Confirm

mahfuzz12-Sep-17 1:59

mahfuzz

12-Sep-17 1:59

hello everyone.

i'm here to share and actually maybe to get a pro assistance about an alternative to confirm that i made.

ok. the problem is that "confirm" is not compatible with my web site's style. so i thought that maybe there is a way to make a confirm box with css. i design a box with w3css. and i loved it.

here is the code:

HTML

<div id="msgBox" class="w3-modal">
	<div class="w3-modal-content w3-card-4 w3-animate-top w3-light-gray w3-border w3-border-black" style="max-width: 600px;">
		<header class="w3-bar w3-black">
			<div class="w3-bar-item" id="msgBoxCaption"></div>
			<span onclick="document.getElementById('msgBox').style.display='none'" class="w3-bar-item w3-button w3-hover-red w3-display-topright" title="Close">×</span>
		</header>
		<div class="w3-container w3-padding-16" id="msgBoxMessage">
		</div>
		<footer class="w3-container w3-gray w3-border-top w3-border-black w3-padding-16 w3-right-align" id="msgBoxButtons">					
		</footer>
	</div>
</div>

and a function to fill the fields and create buttons and of course show it:

JavaScript

function msgBoxModal(caption, message, buttons = ['Close'], buttonscmd =
 ["document.getElementById('msgBox').style.display='none'"])
{
	window.parent.document.getElementById('msgBoxCaption').innerHTML = '<b>'+ caption + '</b>';
	window.parent.document.getElementById('msgBoxMessage').innerText = message;
	btnNode = window.parent.document.getElementById('msgBoxButtons');
	while (btnNode.firstChild) {
		btnNode.removeChild(btnNode.firstChild);
	}
    for(var i = 0; i < buttons.length; i++) {
		newButton = window.parent.document.createElement('button');
		if (typeof buttonscmd[i] == 'undefined') { buttonscmd[i] = "document.getElementById('msgBox').style.display='none'"; }
		if (buttonscmd[i] != "document.getElementById('msgBox').style.display='none'") { buttonscmd[i] += ";document.getElementById('msgBox').style.display='none'"; }
		newButton.setAttribute('onclick', buttonscmd[i]);
    	newButton.classList.add('w3-button', 'w3-blue-gray', 'w3-hover-green', 'w3-margin-left');
    	newButton.setAttribute('name', 'button' + i);
    	newButton.innerText = buttons[i];
    	btnNode.appendChild(newButton);
    }	
	window.parent.document.getElementById('msgBox').style.display = 'block';
}

calling from javascript:

btnCmd = "window.frames['I1'].document.getElementById('hdnDelSubmit').setAttribute('value', 'yes');";
btnCmd += "window.frames['I1'].document.getElementById('frmRefs').submit()"
msgBoxModal('Delete', 'Are you sure you want to delete the selected items? This action can not be undone!', ['Yes', 'No'], [btnCmd]);

and maybe from php:

function jsAlert($jsCaption, $jsMsg)
{
    echo "<script type='text/javascript'>msgBoxModal('$jsCaption', '$jsMsg');</script>";
}
jsAlert('It Works!', 'Hello World!');

modified 13-Sep-17 4:47am.

Re: An Alternative To Confirm

ZurdoDev12-Sep-17 3:35

ZurdoDev

12-Sep-17 3:35

Did you have a question?

There are two kinds of people in the world: those who can extrapolate from incomplete data.

There are only 10 types of people in the world, those who understand binary and those who don't.

database connection

Member 133907602-Sep-17 17:00

Member 13390760

2-Sep-17 17:00

how connect data base connection in asp.net and back end sql server..

Re: database connection

Mycroft Holmes2-Sep-17 22:40

Mycroft Holmes

2-Sep-17 22:40

Try some research how connect data base connection in asp.net and back end sql server. - Google Search

Why someone would up vote such a question is astonishing. Displays a complete lack of initiative.

Never underestimate the power of human stupidity
RAH

Re: database connection

ZurdoDev12-Sep-17 1:28

ZurdoDev

12-Sep-17 1:28

Connect to what? Do you want to get data in C#? Do you want to bind a control? You need to give a lot more details.

There are two kinds of people in the world: those who can extrapolate from incomplete data.

There are only 10 types of people in the world, those who understand binary and those who don't.

Re: database connection

ZurdoDev12-Sep-17 1:29

ZurdoDev

12-Sep-17 1:29

Also, why did you post this in JavaScript? You are asking a sql, c#, and asp.net question. Should have put it in asp.net.

There are two kinds of people in the world: those who can extrapolate from incomplete data.

There are only 10 types of people in the world, those who understand binary and those who don't.

java script

Mehrnaz-Pi24-Aug-17 6:42

Mehrnaz-Pi

24-Aug-17 6:42

I want to write a code to sent me client's IP with java script only, but when write this ; return me undefined. Please help me

Re: java script

Richard Deeming24-Aug-17 7:53

Richard Deeming

24-Aug-17 7:53

Javascript cannot access the user's private IP address, except in rare cases where there is a security vulnerability. Those vulnerabilities are quickly patched, and your code will be considered malicious.

Also, the private IP address won't do you any good, since it doesn't have any meaning outside of the user's network.

The user's public IP address will be sent to your server without any Javascript required. If they're using a VPN, then you'll get the IP address of the VPN service; but again, there's no way around that, and any attempt to "unmask" your users will be considered malicious.

And if you want someone to help you fix your code, then you need to show us the relevant parts of your code, and the full details of any errors. You haven't done that, so there's no way we can help you.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: java script

Mehrnaz-Pi24-Aug-17 22:29

Mehrnaz-Pi

24-Aug-17 22:29

Thank you for your complete description
I just wanted to find out the statistics for my websiteوAnd I know the client IP from every region.
Anyway, thank you for your help

I want to make bat file to run my .jar file withot jdk or jre in the pc

Member 1335949322-Aug-17 10:20

Member 13359493

22-Aug-17 10:20

I want to make bat file to run my .jar file withot jdk or jre in the pc.

I wanna make file including jre + bat + jar

that jar file should be run in windows 7 32 bit or 64 bit and XP and vista also

Re: I want to make bat file to run my .jar file withot jdk or jre in the pc

Richard MacCutchan22-Aug-17 21:25

Richard MacCutchan

22-Aug-17 21:25

1. This is the Javascript forum, and Javascript is not Java.
2. You cannot run Java programs without having Java (jre) installed.

Java Script If Then Statement

Member 978550522-Aug-17 8:38

Member 9785505

22-Aug-17 8:38

Help please,

I want to have a form with two fields one is height one is width the results to execute a java script in an i frame on same page as form.

The coding i want to use for example in an if then statement is :

If height = 720 and width = 500 then (statement goes here)

Once code is set up i want to be able to add further statements for example :

if height = 720 and width = 500 then (statement 1 goes here)
if height = 720 and width = 600 then (statement 2 goes here)
if height = 720 and width = 700 then (statement 3 goes here)

i can keep adding different statements all run from the height and width in the form input fields

Any help would be appreciated in setting up this page including all coding.

Thank You

Re: Java Script If Then Statement

Richard MacCutchan22-Aug-17 21:23

Richard MacCutchan

22-Aug-17 21:23

See JavaScript If...Else Statements[^].

input as dtae field,edit and delete buttons.output as a table format in the same page.When we press edit the date will come to the datefield and submit button become as update.when we press update new date has to come in the output.for each and every

Member 1336332215-Aug-17 23:24

Member 13363322

15-Aug-17 23:24

input as dtae field,edit and delete buttons.output as a table format in the same page.When we press edit the date will come to the datefield and submit button become as update.when we press update new date has to come in the output.for each and every row the same format has to work?How by using javascript.

Re: input as dtae field,edit and delete buttons.output as a table format in the same page.When we press edit the date will come to the datefield and submit button become as update.when we press update new date has to come in the output.for each and e

ZurdoDev22-Aug-17 9:12

ZurdoDev

22-Aug-17 9:12

If you read this, does it make sense to you? We have no knowledge of what you are doing and cannot see your computer so you'll need to be much more clear.

There are two kinds of people in the world: those who can extrapolate from incomplete data.

There are only 10 types of people in the world, those who understand binary and those who don't.

dynamically loaded angular material renders to one md pseudo checkbox regardless of what is my template

Member 1103130414-Aug-17 2:36

Member 11031304

14-Aug-17 2:36

Hy,

I create website using angular 4. I try to create component at runtime. The component have angular material tags in string, but only

JavaScript

md-pseudo-checkbox

renders regardless of what tags I use. I don't understand why exact this one is being rendered.

app.module.ts:

@NgModule({
    imports: [
       
        TreeviewModule.forRoot(),
        BrowserModule, FormsModule, HttpModule,
        MaterialModule,
        FlexLayoutModule,
        RouterModule.forRoot([
            { path: '', component: aboutComponent, pathMatch: 'full' },
            { path: 'about', component: aboutComponent }
           

        ]
            ,            { useHash: true }
        ),
        TranslateModule.forRoot({

            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps:[Http]
            }

        }),

      
        Ng2FilterPipeModule,
        LoadingModule.forRoot({
            animationType: ANIMATION_TYPES.threeBounce,
            backdropBackgroundColour: 'rgba(0,0,0,0.1)',
            backdropBorderRadius: '4px',
            primaryColour: '#0000ff',
            secondaryColour: '#0000ff',
            tertiaryColour: '#0000ff'
        })
        ,
        BusyModule
        , BrowserAnimationsModule
        ,OTFModule
  
    ],


    declarations: [AppComponent, DclWrapper, SanitizeDirective, aboutComponent, LibComponent,  Menu, ReplacePipeComponent, OrderPipeComponent, aboutComponentLoader],
 
    bootstrap: [AppComponent]
   

})

about.component.ts:

import { Component, OnInit,ViewChild,ViewContainerRef,Compiler,Injector,NgModuleRef,AfterViewInit,NgModule} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HttpService } from '../servizai/http.service.component';
import { Cookie } from 'ng2-cookies';
import { MaterialModule,MdCard,MdCardModule,MdCardContent } from "@angular/material";
import * as GLOBALUS from '../globalus/globalus';

import {Observable, Subscription } from 'rxjs';

import { List } from 'linqts';

import { MdMenuModule } from '@angular/material';


import { DomSanitizer, SafeHtml } from '@angular/platform-browser';








@Component({

    templateUrl: '../../app/templates/about2.component.html',

    selector: 'about',
    providers: [HttpService],
  
    styles: [`
  .titel {text-transform: uppercase;
    color: #00467f;
    font-weight: bold;
    font-size: 14px;
}
`] 
    
})

export class aboutComponent implements OnInit {

    public puslHTML: any;

    public loading = false;

 

    busy: Subscription;


    constructor(private http: HttpService, private activatedRoute: ActivatedRoute, private _sanitizer: DomSanitizer,

        private _compiler: Compiler,
        private _injector: Injector,
        private _m: NgModuleRef<any>
    
        ) {

    }

   

    ngOnInit(): void {

  

    }


    

}

about.component.html:

<div class="my-container">
    <ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '10px' }"></ngx-loading>
</div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-around start" fxLayoutGap="2%" style="background-color:#e8e8e8;padding:2%;">
  
   <otf-a-component></otf-a-component>
</div>

a.component.ts:

import { Compiler, Component, Injector, NgModule, NgModuleRef, ViewChild, ViewContainerRef } from "@angular/core";
import { MaterialModule} from '@angular/material';

@Component({
    moduleId: module.id,
    selector: 'otf-a-component',
    template: 'I am A component that inserts dynamic B component below: <div #vc></div>'
})

export class OTFAComponent {
    @ViewChild('vc', { read: ViewContainerRef }) _container: ViewContainerRef;

    constructor(private _compiler: Compiler,
        private _injector: Injector,
        private _m: NgModuleRef<any>) {
    }

    ngAfterViewInit() {
        const template = `<md-card class="example-card">
  <md-card-header>
    <div md-card-avatar class="example-header-image"></div>
    <md-card-title>Shiba Inu</md-card-title>
    <md-card-subtitle>Dog Breed</md-card-subtitle>
  </md-card-header>
  <img md-card-image src="assets/img/examples/shiba2.jpg">
  <md-card-content>
    <p>
      The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
      A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
      bred for hunting.
    </p>
  </md-card-content>
  <md-card-actions>
    <button md-button>LIKE</button>
    <button md-button>SHARE</button>
  </md-card-actions>
</md-card>`;

        const tmpCmp = Component({ template: template })(class {
        });
        const tmpModule = NgModule({imports:[MaterialModule], declarations: [tmpCmp] })(class {
        });

        this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
            .then((factories) => {
                const f = factories.componentFactories[0];
                const cmpRef = f.create(this._injector, [], null, this._m);
                cmpRef.instance.name = 'B component';
                this._container.insert(cmpRef.hostView);
            })
    }
}

otf.module.ts:

import { NgModule } from "@angular/core";
import { OTFAComponent } from "./a.component";

@NgModule({
    declarations: [OTFAComponent],
    entryComponents: [OTFAComponent],
    exports: [OTFAComponent]
})

export class OTFModule {

}

package.json:

{
  "name": "bus-vgtub",
  "version": "1.0.0",
  "description": "BUS",
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080",
    "test": "karma start",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
    "postinstall": "typings install"
  },
  "keywords": [],
  "author": "vgtub",
  "license": "MIT",
  "dependencies": {
    "@angular/animations": "^4.1.3",
    "@angular/common": "^4.1.3",
    "@angular/compiler": "^4.1.3",
    "@angular/compiler-cli": "^4.1.3",
    "@angular/core": "^4.1.3",
    "@angular/flex-layout": "^2.0.0-beta.8",
    "@angular/forms": "^4.1.3",
    "@angular/http": "^4.1.3",
    "@angular/material": "^2.0.0-beta.2",
    "@angular/platform-browser": "^4.1.3",
    "@angular/platform-browser-dynamic": "^4.1.3",
    "@angular/platform-server": "^4.1.3",
    "@angular/router": "^4.1.3",
    "@ngx-translate/core": "^6.0.0",
    "@ngx-translate/http-loader": "0.0.3",
    "angular-in-memory-web-api": "~0.2.4",
    "angular2-busy": "^2.0.4",
    "core-js": "^2.4.1",
    "ng-dynamic-component": "^1.0.8",
    "ng-pipes": "^0.1.2",
    "ng2-cookies": "^1.0.6",
    "ng2-filter-pipe": "^0.1.10",
    "ngx-loading": "^1.0.5",
    "ngx-treeview": "0.0.5",
    "rxjs": "^5.0.2",
    "systemjs": "0.19.40",
    "tslib": "^1.7.1",
    "typescript": "^2.3.4",
    "zone.js": "^0.8.11"
  },
  "devDependencies": {
    "@types/jasmine": "2.5.36",
    "@types/lodash": "^4.14.64",
    "@types/node": "^6.0.46",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^3.1.2",
    "canonical-path": "0.0.2",
    "concurrently": "^3.2.0",
    "delegated-events": "^1.0.2",
    "extract-text-webpack-plugin": "^2.1.0",
    "html": "^1.0.0",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "jasmine-core": "~2.4.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "linqts": "^1.8.2",
    "lite-server": "^2.2.2",
    "lodash": "^4.16.4",
    "ng-dynamic": "^3.0.2",
    "ngx-dynamic-template": "^2.1.24",
    "protractor": "~4.0.14",
    "rimraf": "^2.5.4",
    "tslint": "^3.15.1",
    "typescript": "~2.0.10",
    "typescript-collections": "^1.2.3",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.2",
    "webpack-merge": "^4.1.0"
  },
  "repository": {}
}

JavaScript canvas sprite and movement

Muzafferkadir3-Aug-17 15:35

Muzafferkadir

3-Aug-17 15:35

Hi everyone today i lost my hope about jscript . Frown | :(

i tried many different thing but i could not be success and i decided to ask .
i am working HTML 5 and jscript i want build a basic game: "there will be a square in canvas and i move with a,s,d,w or up ,down ,right , left" But there is a problem i have been worked 2days Frown | :(

if you can help me and explain codes i'll appreciate ... Thanks.

Re: JavaScript canvas sprite and movement

Richard Deeming4-Aug-17 1:18

Richard Deeming

4-Aug-17 1:18

If you want someone to help fix your code, then you need to show us the relevant parts of your code, and explain what the problem is.

On the other hand, if you were expecting someone to write the code for you, then you've come to the wrong site.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Menu not closing when an href is clicked.

NickG227-Jul-17 17:02

NickG2

27-Jul-17 17:02

Hello, I have a problem that's been racking my brain for a while now. I have drop-down navigation that I would like closed when I click on an href link. My code works fine if viewed in a desktop but it's in mobile I have problems. If links are clicked that are within my site, the links will be followed, but the menu will not close, however any links that are not on my domain will act fine, the menu will close and the link will be followed. This happens only on mobile. This has been stopping me from opening my site for a while so any help is greatly appreciated.

//JS

JavaScript

<pre>jQuery(document).ready(function($){
	//if you change this breakpoint in the style.css file (or _layout.scss if you use SASS), don't forget to update this value as well
	var MQL = 1170;

	//primary navigation slide-in effect
	if($(window).width() > MQL) {
		var headerHeight = $('.cd-header').height();
		$(window).on('scroll',
		{
	        previousTop: 0
	    }, 
	    function () {
		    var currentTop = $(window).scrollTop();
		    //check if user is scrolling up
		    if (currentTop < this.previousTop ) {
		    	//if scrolling up...
		    	if (currentTop > 0 && $('.cd-header').hasClass('is-fixed')) {
		    		$('.cd-header').addClass('is-visible');
		    	} else {
		    		$('.cd-header').removeClass('is-visible is-fixed');
		    	}
		    } else {
		    	//if scrolling down...
		    	$('.cd-header').removeClass('is-visible');
		    	if( currentTop > headerHeight && !$('.cd-header').hasClass('is-fixed')) $('.cd-header').addClass('is-fixed');
		    }
		    this.previousTop = currentTop;
		});
	}

	//open/close primary navigation
	$('.cd-primary-nav-trigger').on('click', function(){
		$('.cd-menu-icon').toggleClass('is-clicked'); 
		$('.cd-header').toggleClass('menu-is-open');
		
		//in firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden
		if( $('.cd-primary-nav').hasClass('is-visible') ) {
			$('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
				$('body').removeClass('overflow-hidden');
			});
		} else {
			$('.cd-primary-nav').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
				$('body').addClass('overflow-hidden');
			});	
		}
	});
});

    $('.cd-primary-nav li a').on('click', function(event){
      var href = $(this).attr('href');
      event.preventDefault;
      $('.cd-menu-icon').removeClass('is-clicked'); 
      $('.cd-header').removeClass('menu-is-open');
      $('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
       $('body').removeClass('overflow-hidden');
       document.location = href;
      });
    });

//HTML

HTML

<pre>	<header class="cd-header">
		<div class="cd-logo"><img src="img/cd-logo.svg" alt="Logo"></div>

		<a class="cd-primary-nav-trigger" href="#0">
			Menu
		</a> 
	</header>

	<nav>
		<ul class="cd-primary-nav">
			<li class="cd-label">About us</li>
			<li><a href="http://mysite.com">Home</a></li><pre><!-- This link will not close the menu --><pre>

Our services

<!-- This link will work fine because it's not on my domain. -->

Last Visit: 31-Dec-99 18:00 Last Update: 19-Apr-24 13:06

Refresh

ᐊ Prev 1...52 53 54 555657 58 59 60 61 Next ᐅ

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.