Maximize the browser using Typescript - javascript

In my Angualr2 application, i am using Typescript. I need to maximize the browser when the app is get to run. I have seen this. So in javascript it can be done with
window.moveTo(0, 0);
window.resizeTo(screen.width, screen.height)
but i don't know, how i can access to the window object in the typescript?

TypeScript is just a superset of JavaScript so any valid JavaScript is valid TypeScript.
First off, you mentioned installing jQuery. The code you linked to doesn't use jQuery so I don't understand why you would need it.
Second: window.resizeTo does not work in most cases. Unless you're making a pop-up, it's unlikely it will work at all. In fact, I just tested it in Chrome, Edge, Firerfox, and IE11. IE is the only one which worked.

Related

How to best Javascript code trace in browsers?

When I right-click an element in Internet Explorer or Chrome, it takes me to the code, but if there's Javascript referencing an object or function, I want to be able to easily click it some way to just bring me to that object or function where it's instantiated in the code. Right now I have to copy the code and search for it in another tab or section, and it's difficult in IE.
Is there some shortcut (like Ctrl+click in an IDE like Eclipse or PHPStorm) or some feature I'm missing that does this, or is there a plugin or something I can install that would do this or something like it (at least easier than what I have to do now)?
I've been looking around for hours and have tried a few things but it seems like a lost cause.
When I right-click an element in Internet Explorer or Chrome, it takes me to the code
I don't understand what you mean. What code?
but if there's Javascript referencing an object or function, I want to be able to easily click it some way to just bring me to that object or function where it's instantiated in the code.
F12 is not an IDE. If you want to find a declaration or reference, use your IDE.
Is there some shortcut (like Ctrl+click in an IDE like Eclipse or PHPStorm) or some feature I'm missing that does this, or is there a plugin or something I can install that would do this or something like it (at least easier than what I have to do now)?
Not that I'm aware of.
The title of your questions is
How to best Javascript code trace in browsers?
You can trace code to your heart's content in browsers. That's an entirely different issue from tracking down where functions or objects are declared.

Extending jQuery in Internet Explorer 11

My company recently launched a website and we're getting a JavaScript error often in IE11.
Object doesn't support property or method '[ext. func name]' [Internet Explorer 11.0]
In our code we're frequently extending jQuery with the following syntax:
$.fn.center=function() { ...... };
The error message always happens on those functions. Is there a solution to this? Or at least an explanation? I'm ok with changing the code but I'd like to understand why it is happening as well.
I have not been able to reproduce this issue in IE11 myself. The only reason we're able to see the errors is because we're AJAX'ing all clientside errors to ourselves via window.onerror.
I am not sure about jQuery, but if you use compilation for your project, you might consider to add at the top of your entry point
import 'core-js'
At the moment core-js polyfill library is the easiest way to make Cross Browser Support

Opening Bookmark Dialog from Javascript

The way I did it before with window.sidebar.addPanel() does not work for latest version of Firefox. I try to use PlacesUIUtils.showBookmarkDialog as adviced in How to call for Firefox bookmark dialog?
It is (in the advice) preceded by Components.utils.import("resource:///modules/PlacesUIUtils.jsm");
The problem is that documents tell that .import() may be called only on (local) file. I want the thing to work for a casual user (without requiring any plugins preinstalled).
Is this approach usable in general? Can I not import from elsewhere? Any other suggestions?
See https://support.mozilla.org/en-US/questions/985670 - the answer I got there is basically NOT IT IS NOT POSSIBLE to implement opening the Bookmarks Dialog in Firefox. So I have followed a simplified solution (though valid across browsers).

Authoritative JavaScript validation to a standard

I am trying to validate the JavaScript on my website. The scripts do not throw any errors and run fine on Chrome and Firefox (latest stable version). However, the animated parts absolutely do not work on IE (9)[*1][*solved]. I have used jQuery and jQueryUI for the animation and had hoped that it would be cross browser compatible.
Usually I would not have cared abut IE users, but liked the idea of folks at anybrowser.org and thought of sticking to a standard instead of using the lowest common denominator and leave the graceful degradation to the browsers / JS engines. My page is HTML5 compliant according to the w3c validator and I wanted to do the same with JavaScript, but could not find an acceptable way to do it.
Why JSLint did not work -
It will not take the page and check it like w3c validator.
So there is no way to check jQuery referenced script. (There are a few SO posts on this).
I did find an ECMA-264 test page that would check the browser, but not my JavaScript.
The question after all the preamble is: How do I validate the Javascript on my webpage? Is there an authoritative validator for JavaScript?
*1 Added: The minification has nothing to do with the script not working on IE9. Even the unminified version does not work.
*Solved: The problem with the specific page was solved by this comment.
This started as "What is Javascript?" got closed here and migrated to Programmers. Thanks to YannisRizos for helping me to split the original question to something that was acceptable between Programmers and SO.
A test suite. No really.
If you want to ensure your javascript runs perfectly in every target environment, then you write a test suite for your code and make sure it passes in all your target environments.
A test suite helps find where your code breaks when run on different platforms. And therefore helps you fix it.
But assuming you want something that is less work, http://www.jshint.com/ is your best bet.
Or http://www.jslint.com/ if you like getting yelled at.
But honestly, no validator will ever be able to ensure that your code runs without error and exactly how you expect everywhere. Simply because your code follows best practices correctly, that doesn't mean it will work in an old version of IE.
Standards evolve, but an old browser that never updates get stuck with whatever standard was out at the time that the browser maker may or may not have even implemented successfully or accurately.
Testing, automated or manual, is the only way to ensure things work universally.

How to deal with IE when writing Javascript

This is kind of a two-part question.
Why does IE require so much special treatment when handling Javascript? And are there any tricks, resources, and/or systems you have picked up for making your js IE-compatible, besides Firebug lite?
Using standardised libraries like J-query so you don't have to jump through all the hoops yourself works on the javascript side!
Also Yahoo User Interface (YUI) is good for making websites look extremely similar over different browsers. Their Grids library works really well.
Could you please elaborate little what you're referring to?
JavaScript in it's core is have mainly been the same the last 10 years. If you're worried about older IE versions (IE6-7) you can remain calm. IE6 was released with JavaScript 1.5 support so all JS code should run fine. Mozilla has a very good JS ref document at their MDC site. At the bottom of each page there's usually a list of what version of each browser that supports that specific function.
However the difference between browser usually lies in the DOM implementation or event handling. Where properties may have different names, at the top of my head these properties mainly are related to element/scroll positions.
To find the correct property to use, check in the developer tool (Firebug in IE, Developer Tools in Webkit or Developer Toolbar in IE) for that browser to find what you are looking for. If you're unsure set at JavaScript breakpoint in your code using the debugger;keyword or send something to the console using console.log(). In IE Developer Toolbar is available from IE8+ (I think).
Most of these problems are already resolved in the major JavaScript frameworks like jQuery, MonoTools and so on.
The two main "special treatment" things that come to mind are:
Events. Including assignment of event handlers, the way the event object is made available to the handler function, and some of the properties of the event object. See this page for more info: http://www.quirksmode.org/js/introevents.html
Ajax. Use of XMLHttpRequest versus ActiveXObject("Microsoft.XMLHTTP").
Most everything else should be fine.
You can write yourself some (relatively) simple helper functions to get around these issues, or use a library like jQuery that normalises the differences for you. If you do write it yourself, be sure to test for feature support rather than try to test for which browser - see this (long) article for an explanation: http://jibbering.com/faq/notes/detect-browser/ (I'm sure there are shorter explanations around but I can't be bothered finding one.)
If you using jquery in your page then you can check for ie with this code
if ($.browser.msie && $.browser.version == '6.0') {
//do IE specific code
}
This code will only run when the user browser will be IE 6.0 or you leave this condition

Categories

Resources