Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x

JavaScript

120K

Solutions

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.

Share tech news, updates, or what's on your mind.

Sign up to Post

I am playing with a puzzle program where certain puzzle pieces will have information to share, and those are the ones with a "dog-ear" on the upper corner.

Sample
Those with a dog-ear will respond differently to user interaction and each will have images, videos and/or help text, explaining what's so special about the selected  puzzle piece. There could also be a left-click or a right-click which opens an enlarged version of a given puzzle piece, so the user can get a close-up.

I need some ideas about how to present this information to the user. I am not sure what types of click or clicks would be used to bring up what probably would be a menu of options.


Suggestions?
0
Tech or Treat!
LVL 10
Tech or Treat!

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Here i the CSS I use to create the dark corner in the upper-right.


.dog-ear {
	position: absolute;
	top: 0;
	right: 0;
	height: 10px;
	width: 10px;
	background: linear-gradient(45deg, #333 0%, #333 50%, #fff 50%, #fff 100%);
}

Open in new window



But It sometimes looks choppy.

Choppy line
Is there a different way to do this?
0
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>

Open in new window

0
Hi,
I'm writing an API guide for an application that accepts input - and generates output - in JSON format.

Suppose I have the following (redacted) code:
{
   SSN :  "012-34-5678",
   DOB: "1986-10-27",
   Age: 30,
   name: {
      first: "Daffy",
      last : "Duck"
    },
   Department: "Sales"
}

Open in new window


1. Is this entire entity referred to as a block or object?
2. Same for the name element, which contains first/last name.

Also, is JSON syntax considered closer to Java? Or to JavaScript?  The reason I need to know the latter is that I'm showing code samples in Confluence. While Confluence has a Code Block Macro, it does not come with prepackaged JSON formatting.

Thanks,
Steve
0
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>

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());    
  }

Open in new window


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

Booleans Work OK

What am I missing?
0
Dear Wizards, I got this error when browsing vCenter; Adobe Flash player was installed with latest version but did not help.

Could you please assist? Many thanks in advance.
AppCrash.png
0
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
categorizing
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"
}, {
  

Open in new window

0
I the footer of my site I want to add a function that loads a script if the body has a specific class.
<script>
if($("body").hasClass("product")) {
 load  <script src="/js/product.js"></script>
}

Open in new window


I'm not 100% sure what the syntax is
0
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?
0
I have a page that is supposed to be categorized by sections.  My data is coming from a SharePoint list that has about 14 columns.  Each category needs to display on the page with associated items right beneath it.  Each category is a heading with a colspan=14.  As I loop through my items, I am able to successfully append items to the correct category but they take on the colspan instead of the heading of the 14 columns.  See below

by categoryThe data looks concatenated together instead being in their corresponding column.

Here's the code:
for(var i =0; i < data.d.results.length; i++) 
                                {              
                                                headingName = data.d.results[i].ContractType;
                                                //alert(headingName);
                                                if (typeArray.indexOf(headingName) === -1){
                                                                typeArray.push(headingName);
                                                                //console.log(typeArray);
                                                                
                                                                contractHeadHtml = "<tr><td colspan='14' id='" + headingName + "' style='background-color:#eeeeee'><b>" + headingName + "</b></td></tr>";
                                                                console.dir(contractHeadHtml);
                                 

Open in new window

0
Free Tool: Subnet Calculator
LVL 10
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Hi experts,
I am making a schedule program.
What I have:
Start date -> date input type
 Hours       -> dropdown with hours value 1,2, and 3
Start Time ->dropdown with hours in military time 00 to 24
End Time   ->Calculated field of Start Time + Hours

This much IS working. The issue I am having is trying to calculate end date. I am doing this entire part in javascript(shown below).
Example of the issue is if Start Date is 10/31, Start Time is 11, and Hours is 3, I have no way to get the End Date, which should be 11/1.

Does anybody have any suggestions on how I should handle this, or point me in the right direction?

JS Code for getting start date, start time, hours, and calculating end time:
var CHANNEL_SALES = new Array();
 CHANNEL_SALES["00"]=00;
 CHANNEL_SALES["01"]=01;
 CHANNEL_SALES["02"]=02;
 CHANNEL_SALES["03"]=03;
 CHANNEL_SALES["04"]=04;
 CHANNEL_SALES["05"]=05;
 CHANNEL_SALES["06"]=06;
 CHANNEL_SALES["07"]=07;
 CHANNEL_SALES["08"]=08;
 CHANNEL_SALES["09"]=09;
 CHANNEL_SALES["10"]=10;
 CHANNEL_SALES["11"]=11;
 CHANNEL_SALES["12"]=12;
 CHANNEL_SALES["13"]=13;
 CHANNEL_SALES["14"]=14;
 CHANNEL_SALES["15"]=15;
 CHANNEL_SALES["16"]=16;
 CHANNEL_SALES["17"]=17;
 CHANNEL_SALES["18"]=18;
 CHANNEL_SALES["19"]=19;
 CHANNEL_SALES["20"]=20;
 CHANNEL_SALES["21"]=21;
 CHANNEL_SALES["22"]=22;
 CHANNEL_SALES["23"]=23;
 CHANNEL_SALES["24"]=24;

  var HOURS = new Array();
 HOURS["1"]=1;
 HOURS["2"]=2;
 HOURS["3"]=3;

<!------Start time-->
function 

Open in new window

0
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,
0
I am using the code below to limit a text box to letters and dashes. Can someone tell me what to add to the regular expression to make it also allow spaces?

    $('.LetterDash').on('keydown keypress keyup paste input', function () {
		$(this).val($(this).val().replace(/[^a-z\-]/gi, ''));
		return true;
	});

Open in new window

0
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>');
});

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
0
dear all ,

i have a web user control that contains a combobox in asp web application.
inside this web user control i have a javascript function that return what is the value selected from the combo
on the other hand i have created a web page where i dragged inside 3 web user controls.
i realize that once page go the browser one html file will be created where javascript function exist 3 times for each control.
how can i have a javascript function in the user control with a certain id ion order to avoid this problem.
thank you in advance
0
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>

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);
}

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;
}

Open in new window


But I prefer a lower width, like 80%.

Full screen
Also, I'd like the image to maintain its integrity, and stay tight, even when the browser grows.
centered
Lastly, does the span style control the image style? Or does img need its own styling?
0
I am using the JS validate plugin to validate a form.  However, I am validating only sections of the form at a time.  I'm using a next and previous button to move through the form.
My first validation works but the second section does not. It sees it as valid and runs the next function.   Any clues will be greatly appreciated
$(function() {
	$.validator.setDefaults({
		errorClass: 'form_error'
	});
	$('#business_info_next').click(function() {
 var businessValidate = $("#sole-proprietor");
		businessValidate.validate({
			rules: {
				trade_name_doing_business_as: {
					required: true,
                                        minlength:1,
					maxlength: 256
				},
				address: {
					required: true,
					minlength: 1,
					maxlength: 150
				},
				city: {
					required: true,
					minlength: 1,
					maxlength: 36
				},
				state: {
					required: true
				},
				zip_code: {
					required: true,
					number: true,
					minlength: 5,
					maxlength: 5
				},
				county: {
					required: true,
					maxlength: 36
				},
				phone_number: {
					required: true,
					phoneUS: true,
					maxlength: 14
				},
				mailing_address: {
					required: function() {
						if ($("input[type='radio'][name='would_you_like_documents_sent_to_a_different_address']:checked").val() == "Yes") {
							return true;
						} else {
							return false;
						}
					},
					minlength: 1,
					maxlength: 150
				},
				mailing_city: {
					required: function() {
						if 

Open in new window

0
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++;
      }
    }
  }

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>

Open in new window


with the following properties created in the TS file
export class PuzzlePieceComponent implements OnInit {
  @Input() value:PuzzlePieceComponent;
  @Input() id:Number;
...

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?
0
I have 150 files with .pdf and .txt and ,png file extension in a folder.
I would like to move all non-pdf files to another folder.
0
Industry Leaders: We Want Your Opinion!
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Dear Experts,
I need to post the location ( lat and lng) variable to another page to save it.
how can I write the variable inside hidden input?
I use HTML5 and PHP.  My code is below

Thank you


<script>
      // Note: This example requires that you consent to location sharing when
      // prompted by your browser. If you see the error "The Geolocation service
      // failed.", it means you probably did not give permission for the browser to
      // locate you.
      var map, infoWindow;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 6
        });
        infoWindow = new google.maps.InfoWindow;

        // Try HTML5 geolocation.
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };

            infoWindow.setPosition(pos);
            infoWindow.setContent('Location found.');
            infoWindow.open(map);
            map.setCenter(pos);
          }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
          });
        } else {
          // Browser doesn't support Geolocation
          handleLocationError(false, infoWindow, map.getCenter());
        }
      }

      function handleLocationError(browserHasGeolocation, infoWindow, 

Open in new window

0
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) 
  }

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;
      }
    }
  }
}

Open in new window



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

But I have verified all 9 PuzzlePieceComponents are loading
Creation
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.
0
I use Chrome and wonder what I need to install into Visual Studio Code in order to debug inside of Visual Studio Code.

I do not want to use the Chrome debugger, since I waste so much time  searching for the file to debug. I wand to set breakpoints in Visual Studio Code.

Thanks.
0
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.
0
Using Angular alone, I have trouble setting the "left" and the "top" for the following image tag. But you can see I am successfully updating  the src value with a variable called "id."

 template: `<img id="#PuzzePiece{{ id }}" style="left:10px; top:10px; position:absolute; width:100px; height:100px;"
                  src="../../../assets/images/PuzzleCompleted_{{ id+1 }}.gif"/>`
})

So I am trying to use jquery with no luck. I am just doing a test, trying to get left and top set to 100. I verified the jquery is correct.

The page thrown no errors so I assume I installed jquery correctly.


  ngOnInit() {
    this.id = this.data.id;    
    this.updateImageCoordinates();
  }

  updateImageCoordinates()
  {
    var imageId = "#PuzzlePiece" + this.id.toString();
    $(imageId).css({"left":100,"top":100});
  }
 
What am I missing?

Thanks
0
when I update this:

constructor()
{
}
 
to be this:

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

I get the attached error:

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.
0

JavaScript

120K

Solutions

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.