pracasify

Document.write Nested In Document.write

2023-10-07T10:50:00.001-07:00

I have an ad tag that a third party is trying to stuff inside of a 'document.write' function and it's not working because the ad tag itself also contains document.write's. Is ther

Solution 1:

document.write is often concidered a harmful method, as it directly inserts content into the document file itself. You should edit the innerHTML of the tag where you want to insert the code, although I've heard that directly using innerHTML isn't the correct way either. The method is called insertNode, If I'm remembering correctly, but I'm not sure, because I'm usually abstracting this type of problem away using frameworks such as jQuery, where it is as simple as

$("#myelement").html("<script>...</script>")

I hope that some of my fellow SO members can make this post more precise, I'll look some stuff up myself, but concider this to be my quick answer.

Why Does Debuggers Give You "undefined Is Not A Function" Instead Of Just Telling You The Name Of The Property/variable That Is Not A Function?

2023-10-07T10:05:00.001-07:00

What is the reason js debuggers gives you 'undefined is not a function' instead of just telling you the name of the property/variable that is not a function? example: a = { aFunc

Solution 1:

This is going to be changing very soon, it might already be in Canary too.

Improved exception messages: https://plus.google.com/+AddyOsmani/posts/DdWkiKsvbA2

Css Module @import Fails The Jest Test Suit

2023-10-07T09:28:00.001-07:00

I am using Jest and Enzyme to test my application. I am getting error: FAIL app/containers/Navbar/NavbarContainer.test.js ● Test suite failed to run app/components/Navba

Solution 1:

UPDATE who use create-react-app from feb 2018. You cannot override the moduleNameMapper in package.json but in jest.config.js it works, unfortunately i havent found any docs about why it does the trick. So my jest.config.js look like this:

module.exports = {
...,
  "moduleNameMapper": {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
    "\\.(scss|sass|css)$": "identity-obj-proxy"
  }
}

and it skips scss files and @import quite well.

I added to devDependencies identity-obj-proxy

Backing my answer i followed jest webpack

Solution 2:

So, I've found the solution to this problem. I was importing CSS without the extension in my components and Jest was confusing that import with JS file. Solution is instead of importing css like:

import * as styles from'./styles'

you should import it like:

import * as styles from'./styles.css'

Solution 3:

One quick gotcha that I found with this. If you have a jest.config.js file, then you need to set your moduleNameWrapper inside of that config file.

Solution 4:

I know this post is old but i solved this issue by adding jest-transform-css as a devDependency

npm i--save-dev jest-transform-css

and then adding the following inside jest.config.js

transform: {
                '^.+\\.js$': 'babel-jest',
                '.+\\.(css|styl|less|sass|scss)$': 'jest-transform-css'
    }

you can refer to this github issue for more information

Position: Sticky Is Not Working With Top Property?

2023-10-07T06:21:00.001-07:00

Position: sticky with bottom:10px on div with class sidebar is working as expected but with property top:10px is not working as expected? With position: sticky with bottom: 10px on

Solution 1:

In my case, the parent of the sticky element (the sidebar) had a smaller height than the content => the sticky element wasn't going down more than the sidebar's height.

The solution: I made the sidebar's height equal to the content's height (using display flex on the content's and sidebar's wrapper).

HTML:

<divclas="container"><divclass="content">This initially has a bigger height than sidebar.</div><divclass="sidebar"><divclass="sticky"></div></div></div>

CSS:

.container { dislay: flex; } // By using this I make the sidebar the same height as the content.sticky { position: sticky; top: 0; }

Remove Multiple Elements With Same Name Using Removechild?

2023-10-07T05:53:00.001-07:00

I have an elements with multiple elements inside. The elements inside all have the same name. Is there away to have a function remove all of them? (refer to this question for exam

Solution 1:

Here's a solution that removes the first level children with the specified name for the parent with the specified id. If you want to go deeper, you can recursively call it on the child elements you get inside (you'll have to add a parent parameter as well).

function removeChildren (params){
    var parentId = params.parentId;
    var childName = params.childName;

    var childNodes = document.getElementById(parentId).childNodes;
    for(var i=childNodes.length-1;i >= 0;i--){
        var childNode = childNodes[i];
        if(childNode.name == 'foo'){
            childNode.parentNode.removeChild(childNode);
        }
    }
}

And to call it:

removeChildren({parentId:'div1',childName:'foo'});

And a fiddle for testing:

Notes: You can only access the name element dependably in JavaScript when it supported on your element (e.g. NOT on DIVs!). See here for why.

UPDATE:

Here's a solution using className based on our conversation:

function removeChildren (params){
    var parentId = params.parentId;
    var childName = params.childName;

    var childNodesToRemove = document.getElementById(parentId).getElementsByClassName('foo');
    for(var i=childNodesToRemove.length-1;i >= 0;i--){
        var childNode = childNodesToRemove[i];
        childNode.parentNode.removeChild(childNode);
    }
}

Solution 2:

2021 Answer:

Perhaps there are lots of way to do it, such as Element.replaceChildren(). I would like to show you an effective solution with only one redraw & reflowsupporting all ES6+ browsers.

functionremoveChildren(cssSelector, parentNode){
    var elements = parentNode.querySelectorAll(cssSelector);
    let fragment = document.createDocumentFragment(); 
    fragment.textContent=' ';
    fragment.firstChild.replaceWith(...elements);
}

Usage: removeChildren('.foo',document.body);: remove all elements with className foo in <body>

Solution 3:

ok this should be easy. First get the parent element:

var theParent = document.getElementById("notSoHappyFather");

then get an array of the nodes that you want to remove:

var theChildren = theParent.getElementsByName("unluckyChild");

Lastly, remove them with a loop:

for (var i = 0; i < theChildren.length; i++)
{
  theParent.removeChild(theChildren[i]);
}

Solution 4:

A sample of your HTML would get you a more complete answer, but one can fairly easy call DOM functions to get the list of children and just remove them. In jQuery, remove all children would be something like this:

$("#target > *").remove();

 $("#target").html("");

And, you can see a demo here: http://jsfiddle.net/jfriend00/ZBYCh/

Or, not using jQuery you could also do:

document.getElementById("target").innerHTML = "";

If you're trying to only remove a subset of the children (and leave others intact), then you need to be more specific how one would determine which children to leave and which to remove. In jQuery, you could use a .find() select or a filter() selector to narrow the list of children to just the children you wanted to target for removal.

Is It Possible To Use Query Projection On The Same Collection That Has A $elemmatch Projection?

2023-10-07T03:30:00.001-07:00

I understand that you can limit the items in a subcollection array using $elemMatch as a projection. When using it as such it returns all fields of the subdocuments that match rega

Solution 1:

Yes there are two ways to do this. So you can either use the $elemMatch on the projection side as you already have, with slight changes:

Model.findById(id,
   { "comments": { "$elemMatch": {"created.by": "Jane" } } },
   function(err,doc) {

Or just add to the query portion and use the positional $ operator:

Model.findOne(
    { "_id": id, "comments.created.by": "Jane" },
    { "comments.$": 1 },
    function(err,doc) {

Either way is perfectly valid.

If you wanted something a little more involved than that, you can use the .aggregate() method and it's $project operator instead:

Model.aggregate([
    // Still match the document
    { "$match": "_id": id, "comments.created.by": "Jane" },

    // Unwind the array
    { "$unwind": "$comments" },

    // Only match elements, there can be more than 1
    { "$match": "_id": id, "comments.created.by": "Jane" },

    // Project only what you want
    { "$project": {
        "comments": {
            "body": "$comments.body",
            "by": "$comments.created.by"
        }
    }},

    // Group back each document with the array if you want to
    { "$group": {
        "_id": "$_id",
        "comments": { "$push": "$comments" }
    }}
],
function(err,result) {

So the aggregation framework can be used for a lot more than simply aggregating results. It's $project operator gives you more flexibility than is available to projection using .find(). It also allows you to filter and return multiple array results, which is also something that cannot be done with projection in .find().

I Am Using Jstree And Jstree Grid And Data In My Second Column Disppears

2023-10-07T02:34:00.001-07:00

I have one column in jsTree Grid representing my tree. The second column is used for displaying 'tags' associated with each node. It is displaying great until I click another level

Solution 1:

The problem is that the jsTreeGrid plugin redraws the cells when you expand a node. Since you only append your tags during the "loaded" and "select_cell" events, the tags disappear.

You can workaround this by re-appending the tags on more events:

.bind("open_node.jstree create_node.jstree clean_node.jstree change_node.jstree", function (event, data) { 
    doDisplayTags(mapNameTag);
})

Maximum Call Stack Size Exceeded - No Apparent Recursion

2023-10-06T21:59:00.001-07:00

I've spent about 12 hours looking through this code, and fiddling with it, trying to find out where there's a recursion problem because I'm getting the, 'maximum call stack size ex

Solution 1:

this.parent.draw.call(this,ctx);

is your problem. On a pip object, the parent will be circle.prototype. So when you now call spot.draw(), it will call spot.parent.draw.call(spot), where this.parent is still the circle.prototype…

You will need to explicitly invoke drawableItem.prototype.draw.call(this) from circle.prototype.draw. Btw, you should not use new for the prototype chain.

Solution 2:

Why would you write code like that? It's so difficult to understand and debug. When I'm creating lots of classes I usually use augment to structure my code. This is how I would rewrite your code:

varPoint = Object.augment(function () {
    this.constructor = function (x, y) {
        this.x = x;
        this.y = y;
    };
});

Using augment you can create classes cleanly. For example your drawableItem class could be restructured as follows:

var DrawableItem = Object.augment(function () {
    this.constructor = function () {
        this.size = 0;
        this.lineWidth = 1;
        this.dependencies = [];
        this.center = new Point(0, 0);
    };

    this.changeSize = function (toSize) {
        var fromSize = this.size;
        var ratio = toSize / fromSize;
        this.size = toSize;

        var dependencies = this.dependencies;
        var length = dependencies.length;
        var index = 0;

        while (index < length) {
            var dependency = dependencies[index++];
            dependency.changeSize(dependency.size * ratio);
        }
    };

    this.moveTo = function (x, y) {
        var center = this.center;
        var dx = x - center.x;
        var dy = y - center.y;
        center.x = x;
        center.y = y;

        var dependencies = this.dependencies;
        var length = dependencies.length;
        var index = 0;

        while (index < length) {
            var dependency = dependencies[index++];
            var center = dependency.center;

            dependency.moveTo(center.x + dx, center.y + dy);
        }
    };

    this.draw = function (context) {
        var dependencies = this.dependencies;
        var length = dependencies.length;
        var index = 0;

        while (index < length) dependencies[index++].draw(context);
    };
});

Inheritance is also very simple. For example you can restructure your circle and pip classes as follows:

var Circle = DrawableItem.augment(function (base) {
    this.constructor = function (filled) {
        base.constructor.call(this);
        this.filled = filled;
    };

    this.draw = function (context) {
        var center = this.center;
        var x = center.x;
        var y = center.y;

        context.moveTo(x, y);

        context.beginPath();
        context.arc(x, y, this.size, 0, 2 * Math.PI);
        context.closePath();

        context.lineWidth = this.lineWidth;
        context[this.filled ? "fill" : "stroke"]();
        base.draw.call(this, context);
    };
});

var Pip = Circle.augment(function (base) {
    this.constructor = function () {
        base.constructor.call(this, true);
    };
});

Now that you've created all your classes you can finally get down to the drawing:

window.addEventListener("DOMContentLoaded", function () {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var drawableArea = newDrawableItem;
    var spot = newPip;

    spot.changeSize(20);
    drawableArea.dependencies.push(spot);
    window.addEventListener("resize", drawScreen, false);

    drawScreen();

    functiondrawScreen() {
        var width = canvas.width = window.innerWidth;
        var height = canvas.height = window.innerHeight;
        spot.moveTo(width / 2, height / 2);
        drawableArea.draw(context);
    }
}, false);

We're done. See the demo for yourself: http://jsfiddle.net/b5vNk/

Not only have we made your code more readable, understandable and maintainable but we have also solved your recursion problem.

As Bergi mentioned the problem was with the statement this.parent.draw.call(this,ctx) in the circle.prototype.draw function. Since spot.parent is circle.prototype the this.parent.draw.call(this,ctx) statement is equivalent to circle.prototype.draw.call(this,ctx). As you can see the circle.prototype.draw function now calls itself recursively until it exceeds the maximum recursion depth and throws an error.

The augment library solves this problem elegantly. Instead of having to create a parent property on every prototype when you augment a class augment provides you the prototype of that class as a argument (we call it base):

varDerivedClass = BaseClass.augment(function (base) {
    console.log(base === BaseClass.prototype); // true
});

The base argument should be treated as a constant. Because it's a constant base.draw.call(this, context) in the Circle class above will always be equivalent to DrawableItem.prototype.draw.call(this, context). Hence you will never have unwanted recursion. Unlike this.parent the base argument will alway point to the correct prototype.

Solution 3:

Bergi's answer is correct, if you don't want to hard code the parent name multiple times you could use a helper function to set up inheritance:

functioninherits(Child,Parent){
  Child.prototype=Object.create(Parent.prototype);
  Child.parent=Parent.prototype;
  Child.prototype.constructor=Child;
};
functionDrawableItem() {
  this.name="DrawableItem";
}
DrawableItem.prototype.changeSize = function(newSize){
  console.log("changeSize from DrawableItem");
  console.log("invoking object is:",this.name);
}
functionCircle(isFilledCircle){
    Circle.parent.constructor.call(this);
    this.name="Circle";//override name
}
inherits(Circle,DrawableItem);
Circle.prototype.changeSize = function(newSize){
  Circle.parent.changeSize.call(this);
  console.log("and some more from circle");
};
functionPip(size){
    Pip.parent.constructor.call(this,true);
    this.name="Pip";
}
inherits(Pip,Circle);

var spot = newPip();
spot.changeSize();

For a polyfill on Object.create look here.

How To Combine Two Data Into One In Javascript?

2023-10-06T21:35:00.001-07:00

I'm getting the data from two different place. After getting the data, how to merge two into one. For example; //data structure looks like: //from url1 { 'data': [

Solution 1:

try this

const url1 = "https://reqres.in/api/users"; 
     const url2 = "https://reqres.in/api/users?page=2";

    //store the data from url1asyncfunctiongetData(){

        
    let response1 = awaitfetch(url1);
    let response2 = awaitfetch(url2);

    
    if (response1.status === 200 && response2.status === 200) {
        const data1 = await response1.json();
        const data2 = await response2.json();
        // handle dataconst data = [...data1.data, ...data2.data];  // it only get the data from data1, the data2 is missingconsole.log(data); 
    }




    }

    getData();

Solution 2:

My approach would be:

Put the urls in an array.
Use async/await to make the process easier.
map over the array to create a new array of promises.
await until all the promises have been resolved.
Parse the JSON to JS objects.
Return an object that combines all the data properties of the objects within one data property with flatMap.

const urls = ['https://reqres.in/api/users','https://reqres.in/api/users?page=2'];

// Pass in the array to the functionasyncfunctiongetData(urls) {

  try {

    // `map` over the array to create an array of promisesconst promises = urls.map(url =>fetch(url));

    // Wait for the responses to returnconst responses = awaitPromise.all(promises);

    // Use `map` again to parse the JSON// `.json()` returns a new promise so we have to//  use `Promise.all` again to wait for them all to resolveconst data = awaitPromise.all(responses.map(res => res.json()));

    // Finally return an object that combines the data// within one data propertyreturn { data: data.flatMap(obj => obj.data) };
  
  } catch(err) {
    return err;
  }

}

(async () => {
  console.log(awaitgetData(urls));
})();

Solution 3:

You are trying to merge promises resolving to arrays. You have to await the promise and can use the spread operator to merge the elements. You have to use the json method to read and parse the response. It also returns a promise. I wrapped the awaits in an async IIFE because you can't use await in a non-async functions or in global scope.

const url1 = "https://reqres.in/api/users"; 
const url2 = "https://reqres.in/api/users?page=2";

// store promise to data from url1const data1 = fetch(url1)
              .then(result => result.json())
              .then(result => result.data);

// store promise to data from url2const data2 = fetch(url2)
              .then(result => result.json())
              .then(result => result.data);

(async () => {
  const data = [...await data1, ...await data2];
  console.log(data); 
})();

Solution 4:

To combine all the elements of 2 arrays together, you can use the spread operator like

const data = [...data1.data, ...data2.data];

or you can use the concat function:

const data = data1.data.concat(data2.data);

Solution 5:

The way you fetch data is not complete.

This code below will give you a Response object that contain some infomation about response you got.

fetch('https://reqres.in/api/users').then(response =>console.log(response))

But to retrieve data correctly, You should do like this:

fetch('https://reqres.in/api/users').then(response => response.json()).then(data =>console.log(data))

Getting An Image To Appear On A Popup Window With Angular Js

2023-10-06T21:10:00.001-07:00

This is my first post on StackOverflow and I am teaching myself Angular, so I am a beginner and currently confused. I am creating a webpage with Angular and one of the pages involv

Solution 1:

In your instructionController.js -

self.showDetails = function(id) {
    for (var i =0; i < this.steps.length; i++) {
        if (self.steps[i].id === id) {
            self.name =self.steps[i].name;
            self.step =self.steps[i].step;
            self.description =self.steps[i].description;



    ## self.figure =self.steps[i].figure;
    ## self.alt =self.alt[i].alt;
    ## self.imageCaption =self.imageCaption[i].imageCaption

            self.showValue =true;
        }
    }
};

The lines starting with ## are the ones you need to add So basically you forgot to loop the above highlighted lines. Hope this helps.

Need To Find Or Count Duplicates In Multidimensional Array

2023-10-06T20:47:00.001-07:00

I need to count the no of duplicates in an multidimensional array and give alert if duplicates found. Arr =[[2,'sk'],[3,'df'],[7,'uz'],[3,'df'],[7,'gh']] Suggestions: Count can be

Solution 1:

My answer from the original question (except that I've got three items like [3, "df"] in the input array) is:

const input = [
  [2, "sk"], [3, "df"], [7, "uz"], [3, "df"], [7, "gh"],
  [5, "df"], [21, "sk"], [2, "1sk"], [3, "df"]
];

const duplicate_count = input.length - newSet( input.map(JSON.stringify) ).size;

console.log(duplicate_count);

If the count for [[3,"df"],[3,"df"],[3,"df"]] should be one instead of two then perhaps something like:

const input = [
  [2, "sk"], [3, "df"], [7, "uz"], [3, "df"], [7, "gh"],
  [5, "df"], [21, "sk"], [2, "1sk"], [3, "df"]
];

const duplicate_count = [
  ...input
    .map(JSON.stringify)
    .reduce( (acc, v) => acc.set(v, (acc.get(v) || 0) + 1), newMap() )
    .values()
].filter((v) => v > 1).length;

console.log(duplicate_count);

Solution 2:

You could map to concatenate the numbers and strings, then sort. Finally, reduce the array to the duplicates count.

const input = [
  [2, "sk"],
  [3, "df"],
  [7, "uz"],
  [3, "df"],
  [7, "gh"],
  [7, "df"],
];

const result = input
  .map(([number, string]) => number + string)
  .sort()
  .reduce(
    (acc, cur, i, { [i - 1]: last }) => (cur === last ? acc + 1 : acc),
    0
  );

console.log(`Count: ${result}${result && ' Alert duplicate data found'}`);

Solution 3:

let arr =[[2,"sk"],[3,"df"],[7,"uz"],[3,"df"],[7,"gh"],[2,"sk"],[7,"uz"]]
    
    functiongetNumDupes(a) {
       return a.length-
    arr.reduce((b,a)=>{if (!b.includes(a.join(""))) b.push(a.join("")); return b;},[]).length 
    }
    
    console.log(getNumDupes(arr) + ' duplicates found');

Solution 4:

You can use forEach to iterate the array and then filter and check length if found more than 1, set an entry into Map which holds a key value pair and will keep 1 entry for same key and then can check the size.

let arr =[[2,"sk"],[3,"df"],[7,"uz"],[3,"df"],[7,"gh"]];

let map = newMap();
arr.forEach(e1 => 
                 arr.filter(e2 => e1[0]===e2[0] && e1[1]===e2[1]).length > 1
                 ? map.set(`${e1[0]}-${e1[1]}`,1) 
                 : null
            );

console.log(`${map.size} duplicate found`);

Photoshop Move Layer Along Y-axis

2023-10-06T19:26:00.001-07:00

I'm working on a script that will move a layer, right, left, up, or down. This depends upon which edge of the layer is inside the canvas. I've managed to get the layer moving left

Solution 1:

The first thing you probably want to do in a situation like this is to check the documentation. For .translate() we can find the following:

so to move horizontally we would use deltaX and to move vertically deltaY, in your code you're giving to .translate() only deltaX, so as expected your layer is being moved horizontally. To fix this pass 0 as a first argument and your Height-Y1 as a second one:

activeDocument.activeLayer.translate(0, Height - Y1);

How To Handle Promise In Firestore

2023-10-06T18:54:00.001-07:00

here is my code to check a doc is there in the collections this.shopCollection = this.afs.collection('shops', ref => { return ref.where('fulladdress', '==', myStri

Solution 1:

I got it working with some changes

Here is my code

this.afs.collection<Shop>('shops').ref.where('fulladdress', '==', myString)
      .get()
      .then(res => {
        if(res.docs.length == 0){
          //no documents found
        }else{
          //you got some documents
          res.forEach(shop => {
            console.log(shop.id);
            console.log(shop.data());
          })
        }
      }).catch(err => {
        console.log('something went wrong '+ err)
      });

i am not sure this is the right way, works fine for me.

App Error Displaying Blank

2023-10-06T16:34:00.001-07:00

my app's idea is simple. a user inputs text and then it gets diplayed and saved into the db. The problem am having is that it displays blank. I have a lot of code so am going to pu

Solution 1:

I'm not sure what you mean by "displays blank", but there is likely an issue with these lines:

Meetup.query(function (results) {
  $scope.meetups = results;
});

$scope.meetups = []

If $scope.meetups is assigned results, you may be overwriting that value with $scope.meetups = []. Remember that the $resource will resolve asynchronously, so assignments won't exactly happen in the order they are written. Try removing the $scope.meetups = [] line.

Cannot Read Property 'sync' Of Undefined

2023-10-06T13:40:00.001-07:00

I am following a tutorial on how to set up a basic mvc in Nodejs using the hapi server and a few other packages. Tutorial: https://www.sitepoint.com/node-js-mvc-application/ Git fo

Solution 1:

I have got it working by moving my index.js file to the models folder.

This file has the necessairy scripts that dispatches sequelise in the model thus fixing the problem.

Solution 2:

Make sure you have exported the db in index.js

module.exports = db

and declared a db variable at the beginning of the file

var db = {}

How To Drop Down Programmatically A Select Menu By Clicking On Image Vuetify?

2023-10-06T12:20:00.001-07:00

I have my image property and select in template:

Solution 1:

Just add a callback handler for that event like :

this.$refs.select.onClick((e) => {

  });

Full example

var app = newVue({
  el: '#app',
  vuetify: newVuetify(),
  data: {
    currencySelect: ['a', 'b', 'c']
  },

  methods: {
    click_select() {

      this.$refs.select.onClick((e) => {

      });
    }
  }
})

<linkhref="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"rel="stylesheet"><linkhref="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css"rel="stylesheet"><linkhref="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css"rel="stylesheet"><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><divid="app"><v-appid="inspire"><button @click='click_select'class="v-btn-primary">
    select
    </button><v-select:items="currencySelect"ref='select' /></v-app></div>

How Can I Use Javascript To Get The Highest Value Of Two Variables

2023-10-06T10:50:00.001-07:00

I have two variables name var h1 and var h2 each holds some numbers. i want to get highest value to another variable

Solution 1:

Try this to get the maximum:

var result = Math.max(h1,h2)

Solution 2:

var highestNum = h1 > h2 ? h1: h2;

or if you dislike tertiary statements:

var highestNum;
if (h1 > h2) { 
    highestNum = h1;
} else {
    highestNum = h2;
}

Edit: Interestingly enough, it appears the if-else statement runs much faster than Math.max (on Chrome 21)

http://jsperf.com/jbabey-math-max

Solution 3:

~~Fancy way~~The only way it should be done :

var otherVar = Math.max(h1,h2);

Long way :

var otherVar=0;
if(h1 >= h2)
{
    otherVar = h1;
}
else
{
    otherVar = h2;
}

Javascript only, no jQuery.

Passing A Serverside Variable To A Javascript Function In Asp.net

2023-10-06T10:17:00.001-07:00

I need to pass a server side variable to my javascript function such as below:

Solution 1:

Got it working like this:

<asp:HyperLink ID="lnkIDNum" 
           runat="server" 
           NavigateUrl=<%# "javascript:ChangeLoc('ChangeView', '" + Container.DataItem("IDNum") + "')" %>>
     <%#Container.DataItem("IDNum")%>
</asp:HyperLink>

Solution 2:

Try using the Eval() function instead, and do something like this:

<asp:HyperLink ID="lnkEdit" runat="server" NavigateUrl="someFunc('ChangeView', '<%#Eval("SomeColumn")%>');"><%#Eval("SomeColumn")%></asp:HyperLink>

Solution 3:

You probably should set the attributes in the code behind.

string idNum = Container.DataItem("IDNum");
lnkIDNum.NavigateUrl = 
    "javascript:ChangeLocView ('ChangeView', '" 
  + idNum 
  + "'";
lnkIDNum.Text = idNum;

and in the aspx:

<asp:HyperLinkID="lnkIDNum"runat="server"></asp:HyperLink>

How To Get Element Under Mouse Cursor While Dragging Another Element?

2023-10-06T09:45:00.001-07:00

I googled and found several answers but they was all about click or mousemove events which are not suitable for my question. Basically I allow users to drag an item from a list and

Solution 1:

Apparently, the droppable has an hover function. http://jqueryui.com/droppable/#visual-feedback

$("#folderlist").droppable({
    hoverClass: "ui-state-hover",
    drop: function (event, ui) {
    }
});

Then add this to your css :

.ui-state-hover
{
    background-color: #1c70cf;
}

Pass Json Object To Array - Autocomplete

2023-10-06T08:24:00.001-07:00

I have two files. location.php, that outputs this: [['javascript'],['PHP']] and in another file: