How can I remove the button and make it that if $_POST['a'] == 1
Then display the pop up? else dont? Is this possible?

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Select all Open in new window

I added a class to a div, and verify the booelan's working.  But, the ng-class is failing.

    <div ng-class="{ 'dog-ear' : isDogEared }"></div>

Select all Open in new window

Inside the Typescript template I have:

@Output() isDogEared:boolean;

  dogEarIndexes: number[];

  constructor() 
  { 
    this.dogEarIndexes = [ 1,3,5 ];
  }

  ngOnInit() {
    this.imageFilename = "PuzzlePiece_Maps_" + (this.value.id + 1).toString() + ".gif";
    
    this.id = this.value.id;
    this.isDogEared = this.dogEarIndexes.indexOf(this.id) > -1;
    console.log('Id:'+this.id+" - " + this.imageFilename + " isDogEared="+ this.isDogEared.toString());    
  }

Select all Open in new window

and the page does not generate any errors, and I verified the boolean values are properly set in ngOnInit()



What am I missing?

Hello All

As you can see from the image below, categorizing my data based on Program Type isn't working very well.  Some of the Program Type values are under the wrong category/section.  See below

Here's the code

var jsonData = [{
  "ProgramType": "Construction",
  "Contracts": "27d:bbc1:80db:ea0f:728a:d5db:2651:2681/93",
  "ProjectNumber": "00-438-1489",
  "Award": "Yuan Renminbi",
  "Date": "6/15/2017"
}, {
  "ProgramType": "Construction",
  "Contracts": "ce6b:e4a8:ebb8:8b01:e07f:14f9:8eed:6a6a/11",
  "ProjectNumber": "48-710-7372",
  "Award": "Manat",
  "Date": "8/13/2017"
}, {
  "ProgramType": "Design",
  "Contracts": "dfba:c157:1ec:b60f:4329:91e7:5bdb:316f/114",
  "ProjectNumber": "51-508-3050",
  "Award": "Real",
  "Date": "3/16/2017"
}, {
  "ProgramType": "Study",
  "Contracts": "9c3c:6047:cfc3:1301:b92b:fd6f:87b6:3de7/89",
  "ProjectNumber": "68-285-8596",
  "Award": "Rupiah",
  "Date": "3/21/2017"
}, {
  "ProgramType": "Design",
  "Contracts": "afcf:befe:d329:c6d:8a5e:b528:75b9:9d0b/14",
  "ProjectNumber": "02-108-8005",
  "Award": "Yuan Renminbi",
  "Date": "6/21/2017"
}, {
  "ProgramType": "Commissioning",
  "Contracts": "6e90:bafb:1806:92b7:80aa:911c:b6d7:eadc/32",
  "ProjectNumber": "90-824-1407",
  "Award": "Peso",
  "Date": "9/30/2017"
}, {
  "ProgramType": "Design",
  "Contracts": "b410:353b:d353:1c4d:7924:676:5260:7656/40",
  "ProjectNumber": "70-912-7446",
  "Award": "Denar",
  "Date": "12/13/2016"
}, {
  

Select all Open in new window

…

I hope to post a sample application which displays a problem I am having and need to find what aspects I need to create for this. It would mainly be for posts on EE but could be used to share my code for other purposes.

Can you suggest one?

I create a GitGub account and use Git to put the latest version of my site to GitHub.

What if two people want to make an alteration to the code I post there? When someone makes a change, is there a way to auto-fork the repo?

Hi All,

We use Dynamics CRM 2011 with IE 11. If I want to write Javascript using Local Storage, can anyone tell me that it is working or not?

Thanks,

Hi , I am trying to Wrap the div with a link using Jquery. I have tried using the below code but it seems not to be working.

$('div.wpsl-search-btn-wrap::after').each(function() {
  var link = $(this).html();
  $(this).contents().wrap('<a href="http://nixnine.com.au/janome/find-a-dealer/"></a>');
});

Select all Open in new window

how can I make this work in the following page, The button was added as Content using ::after. but haven't been able to figure out the link part... can this be using Javascript not Jquery

http://nixnine.com.au/janome/
get-sample-link.png

I am unsure about how to change the styling on my PuzzlePiece Component. I draw an image inside of a span.

<div class="puzzle-piece">
    <span><img src="{{ imageFilename }}" /></span>
</div>

Select all Open in new window

with the following styling...

.puzzle-piece {
    width: 12.5%;
    float: left;
    box-sizing: border-box;
    background-color: #007acc;
    position: relative;
    padding-bottom: 12.5%;
    border-right: 2px solid blue;
    border-bottom: 2px solid blue;
    text-align: center;
    z-index: 10;
}
.puzzle-piece span {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 3em;
    font-family: 'Arial';
    transform: translateX(-50%) translateY(-50%);
    color: rgba(255,255,255,5);
}

Select all Open in new window

In order to make the edges touch for each of the puzzle pieces, I needed to make the width of the puzzle 100%:

.puzzle {
    width: 100%;
    margin: 0 auto;
    border-top: 2px solid blue;
    border-left: 2px solid blue;
}

Select all Open in new window

But I prefer a lower width, like 80%.


Also, I'd like the image to maintain its integrity, and stay tight, even when the browser grows.

Lastly, does the span style control the image style? Or does img need its own styling?

Code snippet from PuzzleCanvasComponent where I fill the PuzzlePieceComponent array.

ngOnInit() { 
    let index = 0;
    for(let row = 0; row < this.rows; row++) {
      for(let column = 0; column < this.columns; column++) {
        this.pieces[index] = new PuzzlePieceComponent();
        this.pieces[index].id=index;
        index++;
      }
    }
  }

Select all Open in new window

I want to set the "id" property there, but this line does nothing:
        this.pieces[index].id=index;


So I tried to use the HTML template for PuzzleCanvasComponent, but have the syntax wrong.

<div class="puzzle">
    <puzzle-piece *ngFor="#piece of pieces; #i=index" [value]="piece" [id]="i"></puzzle-piece>
</div>

Select all Open in new window

with the following properties created in the TS file

export class PuzzlePieceComponent implements OnInit {
  @Input() value:PuzzlePieceComponent;
  @Input() id:Number;
...

Select all Open in new window

I'd prefer if the first method could be made to work, especially since I want to expand the number or properties set in
ngOnInit() beyond just the id.

Is method #1 fixable? Or must iI use the second method? If so, what is the syntax?

I have a little Angular app with two small Components, PuzzleCanvas and PuzzlePiece. I have a sample number of 9

PuzzlePieceComponent with a style CSS I just can not update. So, as a result, all PuzzlePieceComponents are drawn over the other.

import { Component, OnInit, Input } from '@angular/core';
declare var jquery:any;
declare var $ :any;

@Component({
  selector: 'puzzlepiece',
  styles: [ ],
  template: `
     <img id="#PuzzePiece{{ id }}" 
     style="position:absolute; display:block; width:100px; height:100px; left:12px; top:12px;"
     src="../../../assets/images/PuzzleCompleted_{{ id+1 }}.gif"/>
  `
})


export class PuzzlePieceComponent implements OnInit {
  title = 'Puzzle Piece';
  @Input() data:PuzzlePieceComponent;
  @Input() id:Number;
  //pieceStyling:string=this.getPieceLocation();
  constructor() { }

  ngOnInit() {
    this.id = this.data.id;   
    console.log("ID:" + this.id) 
  }

Select all Open in new window

PuzzleCanvasComponent is constructing the PuzzlePieceComponents correctly

import { Component, Input, OnInit } from '@angular/core';
import { NgFor } from '@angular/common';
import { PuzzlePieceComponent } from '../puzzlepiece/puzzlepiece.component';

@Component({
  selector: 'puzzlecanvas',
  styles: [`canvas { width: 800px; height: 500px; border: 2px solid black; }`],
  template: `<canvas></canvas>
             <puzzlepiece *ngFor="let piece of pieces" [data]="piece" [id]=index></puzzlepiece>`
})

export class PuzzleCanvasComponent implements OnInit {
  title = 'Puzzle Peace';
  @Input() piece:PuzzlePieceComponent;
  pieces = [];
  columns:number = 3;
  rows:number = 3;

  constructor() { }

  ngOnInit() { 
    let index = 0;
    for(let row = 0; row < this.rows; row++) {
      for(let column = 0; column < this.columns; column++) {
        this.pieces[index] = new PuzzlePieceComponent();
        this.pieces[index++].id=index;
      }
    }
  }
}

Select all Open in new window

The PuzzleCanvasComponents are being written one over the other...


But I have verified all 9 PuzzlePieceComponents are loading

I feel like I have tried everything. Notice I can use the {{}} for property binding when it comes to setting the ID and the src for image.

I have a jquery (Plan B) solutin that also does not work. That question is here:
https://www.experts-exchange.com/questions/29062600/Angular-CSS-need-to-resort-to-jquery.html

It seems like I reached a limiting factor in the Javascript methodology. Is that possible?

Is there a different place in the page life-cycle, besides ngOnInit(), where I can place update logic?

My project is stuck until I can get past this.

Thanks.

I want to make it easy to run my Angular app so it's easier to show the problem I am having. But I just noticed the repo contains tons of node packages, brining the size of this little Angular program (with two Components) to 172 MB.

I did not want to commit and push this without asking how Plunker works and what options I have regarding all those node modules.

Thanks.

when I update this:

constructor()
{
}
 
to be this:

constructor(public _id:Number, public _X:Number, public _Y:Number)
{
}

I get the attached error:


and the page fails to load.

Clearly, the declaration of PuzzlePieceComponent in the app.module.ts Module is setting up the expectation for a version with no parameters. How do I et around this?

Are these params needed if I use:

  @Input() id:Number;
  @Input() X:Number;
  @Input() Y:Number;

Thanks.