Search Posts

Category: dom

How to use window.open(url,"_blank") without changing calling application’s url?

This is my js window.open() code. var url = “https://www.google.com” window.open(url, “_blank”, “menubar=no,location=yes,resizable=yes,scrollbars=yes,status=yes,width=640,height=480″, false); It opens a new browser window with the “url” as expected. But the issue is that, it also changes the current url in my main web application. For example before my window.open() call if I was on this url: https://example.com/#!/projects/56asda/view After the call the url redirects to this: https://example.com/#!/ How can this issue be prevented? I have not found any solution […]

Appending elements in Header using Javascript DOM and having it as a common header shared by all webpages in Angular JS

I created a json File with an array of “learnobjects”. Every object has an id, a name, and a link. Here is my plnkr example var myMessage = { “learnobjects”: [{ “id”: “1”, “name”: “Animation-Basics”, “link”: “animation_basics.html”, }, { “id”: “2”, “name”: “Interpolation”, “link”: “interpolation.html”, } ]} var jsonData = JSON.parse(myMessage); for (var i = 0; i < jsonData.learnobjects.length; i++) { var id = jsonData.myMessage[i].id; var name = jsonData.myMessage[i].name; var link = jsonData.myMessage[i].link; var mainPath […]

issues with onClick event not getting triggered on DOM

I’ve got an API that returns me {“html”, “Css” and “JS”} that i’d ideally like to render on client side. Issue: Looks like something’s failing for some reason and clicking on the button does not do anything. (I have accept button) JavaScript: function postAjax(success) { var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(“Microsoft.XMLHTTP”); xhr.open(‘GET’, ‘/myaccount/profile/api/accept’); xhr.onreadystatechange = function() { if (xhr.readyState > 3 && xhr.status == 200) { success(); } }; xhr.setRequestHeader(‘Accept’, ‘application/json’, […]

AngularJS: How can I get the DOM element from a filter

The problem is as follows: I have got several html sites where a filter (“myFilter”) is applied. angular.module(‘myApp’, []) .filter(‘myFilter’, function() { return function(input) { //do something with the input return input; }; }) The filter is applied within different tags with no special id’s or classes, like so: <span>{{‘some_string | myFilter’}}</span> or <div>{{‘some_other_sring’ | myFilter}}</div> I would now like to add classes or styles to the elements in which the filter is used (for […]

Access the DOM of the connected project from the Electron application?

how to Access the DOM of the connected project from the Electron application? I have a web application on AngularJS running on localhost. I want to open it on the Electron and add a pop-up window that should only be in the desktop version. How do I add a new functionality without touching the original project using only the Electron application? Actually I want to expand the guest page by adding a block with inspect […]

Which JS Framework or Library is better with JQuery for DOM manipulation [on hold]

I am working on a website project which is already using JQuery for animations and some other features and also JQ-plugins, But We want to use another JS Library or Framework for only DOM Manipulation like to update or change the data based on Ajax API Requests. I have studied about the KnockoutJS, BackboneJS, and AngularJS which do their work well then JQuery for DOM Manipulation and are better in performance for this tasks. While […]

AngularJS change currency display by manipulating the $locale

So I’m struggling with this issue for some time now and yet I couldn’t find an answer. Basically I’ve this: const formattedCurrency = $filter(‘currency’)(input); This returns me something like this $0.00 ($ seem to be the default angular curency CURRENCY_SYM:”$”) What I want to achieve is to make this return not $0.00but a dynamic currency, for example €0.00 or £0.00. So let’s assume that I have a html page with this text: I have $0.00 […]

Cannot bind event callbacks on DOM objects under a directive’s DOM element

I’m currently trying to refactor some very simple AngularJS code to move all functionality under a top-level directive. A parent element is given the directive, the directive binds the ‘mousemove’ event to that element, then goes through each child with a particular ID and binds ‘mousedown’ and ‘mouseup’ event callbacks to it. angular.module(‘DataStructureVisualizer’). directive(‘dragDrop’, function () { return { link: function ($scope, element, attrs) { var mouseLocX = 0; var mouseLocY = 0; var isElementHeldDown […]

Angular4: Create a Directive to Show a Profile card on Hover

For reference you can visit Twitter and hover a Profile name. That is what i’m trying to achieve. The Hover card does show correctly, But i’ve to add the ng-template each and everywhere I’ve to have this feature <div profilePeek class=”user-name cursor” (click)=”redirectProfile(item.type,item.id)”>{{ getProfileData(item.type, item.id).name }} <ng-template #preview> <app-hover-profile [type]=”item.type” [key]=”item.id”></app-hover-profile> </ng-template> </div> Can this be included in the Directive as well. Im pretty new to directives, so please guide if this is a blunder. […]

Next Page »