Code Monkey home page Code Monkey logo

javascript-demos's Introduction

JavaScript Demos

by Ben Nadel

This is a collection of online JavaScript demos based on my blog posts on my blog, BenNadel.com. Basically, all the code is already on my blog; but, I wanted a way to easily create interactive demos that my readers could play with.

My JavaScript Demos - I Love JavaScript!

Want more JavaScript goodness? Check out the JavaScript blog entries on my website.

javascript-demos's People

Contributors

bennadel avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

javascript-demos's Issues

Intersection Observer

I highly appreciate sharing this .
I tried to discover how to detect the entry intersection in the middle of the screen ,yet unsuccessfully .
Lets say I want to highlight the div in the middle of the screen in some distinct way than the div(s) that are marginal.
....pseudocode ........entry intersection detect when in the middle of the screen ?

For matInput?

Curious if this could be enhanced to support inputs that have matInput so that they can be used inside a ?

My full draft tag looks like this:

<input matInput [type]="col.type" [(ngModel)]="element[col.key]" observeFiles
class="file-input" (change)="onFileSelected($event)" #fileUpload accept="video/,image/">

trackBy doesn't work as expected

Hallo!

if ( Array.isArray( propertyNames ) ) {
cacheKey = propertyNames.join( "->" );
// Ensure cached identity function.
if ( ! cache[ cacheKey ] ) {
cache[ cacheKey ] = function trackByProperty<T>( index: number, item: T ) : any {
var values = [];
// Collect the item values that will be aggregated in the resultant
// item identity
for ( var propertyName of propertyNames ) {
values.push( item[ propertyName ] );
}
return( values.join( "->" ) );
};
}

This part for a list of properties doesn't work correctly.

the list will be re'rendered each time if I click on refresh button with the same data. If I move the code into separate function and use directly on trackBy, then the list will be never re'rendered...

any Idea?


Outputs:

on start:
image

after click on refresh button:
image

About idsvr.session cookie

Hi,
I am new to identity server so any one can share about the below

What is the main job of 'idsvr.session' cookie and what are the information it has.

Thanks
Thomas

How to Avoid/ remove inline css style in jquery ?

Hi Ben,

here i want to avoid the inline style in jquery, in my jquery file lot of inline styles are there like below.
if (rate > 100)
{
pos = "inline";
}
else{
pos = "none";
}

$(".container-side").css("display", @pos);

I want to remove this inline style, how can i remove it

Could you please share your thoughts.

Regards,
Thomas

I don't think you are comparing apples to apples.

The issue is that your generateGrid (https://github.com/bennadel/JavaScript-Demos/blob/master/demos/render-large-datasets-angular2-reactjs/angular.htm#L238) method creates new set of objects each time it runs. Angular 2 then has to remove the DOM and recreate all of the items for the purposes of animation. So the Angular perf test is doing a lot more then it should.

There are two ways to fix it:

  1. change gerenerateGrid to return an array with same identities.
  2. change *ngFor (https://github.com/bennadel/JavaScript-Demos/blob/master/demos/render-large-datasets-angular2-reactjs/angular.htm#L88) to use trackBy See: https://github.com/angular/angular/blob/master/modules/angular2/src/common/directives/ng_for.ts#L86 (It will be in beta4)

Tho above should make Angular significantly faster.

More reading: mathieuancelin/js-repaint-perfs#19

[textSelect] handling lists

Is there any way I could apply this directive into a list?
At the moment you don't carry information of which element is clicked so *ngIf="hostRectangle" would trigger for all elements when highlighting one.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.