Chrome JQuery Not Getting Height Correctly - javascript

I'm having a problem with http://taxlienagents.com/ and how it is displaying in Google Chrome. When I open the site in Google Chrome, the center Tab Area seems to cover the main text above it. If you take a look at http://img651.imageshack.us/img651/8869/taxliensite.jpg, you should be able to see what I am talking about versus when opening the site in FireFox. When I debug the site in Chrome the height is automatically set to 58px for some reason, however in FireFox it is set to 397px. I am using
setHeight : function (el) {
if (this.options.autoHeight)
this.$content_container.stop(true, true).animate({
height : this.getHeight(el)
}, this.options.animSpeed * 2 / 3, this.options.animation);
},
to get the height. I've gotten the site to be as XHTML 1.0 Transitional Compliant as I could, however I am not the original developer and I know that the site has some problems.

Well, first you should've mentioned that this is a Wordpress page :)
Check your WP version and make sure the plug-in want to use is actually supported from your version.
Otherwise this bit -
Unsafe JavaScript attempt to access frame with URL http://taxlienagents.com/ from frame with URL http://player.vimeo.com/video/32340130?title=0&byline=0&portrait=0&color=067fc0. Domains, protocols and ports must match.
causes your problems. But as I've said check your versions first.
If that's your own code, make sure it's in the right place, 'cause after 2 or 3 refreshes I can see your entire content. I mean the bits you can't.

Related

IE10 IE11 displays "This page can't be displayed" On large DOM - works in firefox

I am working on an web application in MCV asp.net that needs to work in IE. Loading the application with data for some customers we get the "The page can not displayed" using IE10 and IE11.
More details are
It works in Firefox.
The error is only there for large pages = larger DOM
An exampel of a large page is a body of 4.6MB measured by Fiddler
For small pages there are no problems
The error page apears instantly when loading a customer
We have tried the following, but with no luck:
Removing stepwise elements from a big page and at some point it will start working, since it just removing sets of the same elements, nothing is being removed that could couse the problem - maybe its something with the size of the http-response?
Changed some IE settings
Stripping away all Jquery and CSS, to see if it was some DOM traversal issues
Tjekking the http-response to look for any bugs - non found
Google around seams that IE will show this page in some situations, but not found anything to fix this problem, where the application works on some pages but not on others.
Any suggestions?
The answer to why it does not work in IE is that you can not have more then about 200 AntiForgeryTokens, above that will make IE not load the page.
The quick solution: reduce the number of AntiForgeryTokens, we could do it by not having a delete form per element.

Internet explorer browser effective area

Given a complex JS application produced by GWT I need to use the complete browser area WITHOUT let scrollbar compare but not disabling them because there's a couple of exception to the rule, i need then to calculate the client area and since the tool selected it would be better directly in GWT but as it is supported also pure JS solution are acceptable.
as usual all browsers (chrome, safari, ff) except IE11 works fine with a standard solution of
rootPanel.setPixelSize(Window.getClientWidth()-1, Window.getClientHeight()-1);
but when it's used in IE11 on a screen 1440x900
the value of getClientHeight is 1440x845 (seems ok) but after rendering using this space scrollbars compare wasting space, exactly 10pixels..
rootPanel.setPixelSize(Window.getClientWidth()-1, Window.getClientHeight()-10);
seems to solve..where are gone this 10 pixel comparing the result with other browsers?
I think contents are not relevant since the size is set on body and first div
<html>
<head>...
<body style="width:1439;height:xxx;">
<iframe out of visibility (position absolute and visible false
<table style="width:1439;height;xxx">
and so on
Any guess where 10pixel can be lost?
Edit: I was forgetting an important detail: all happens when browser is maximised, if the browser is n't all seems working as expected!!!
Edit: looks like something close if not the same of
$(window).height() issues in IE and FF
change just the origin of my JS code that comes from GWT but at the last stage should be the same, but still not solution
Solved: when maximized the actual size is available late...the resize must take the size in a deferred moment, the module load usually implemented in GWT isn't the right time for this browser in the specific state..

Spoofing / faking screen-resolution?

While browsing the web, I need to fake my screen resolution to websites I'm viewing but keep my viewport the same (Chrome's or FF's emulating doesn't solve my problem).
For instance, if I go to http://www.whatismyscreenresolution.com/ from a browser in full screen mode which has 1920x1080px resolution I want that site to think I am using 1024x728px but still be able to browse in full screen mode.
One of my guessess is I need to override js variables screen.width and screen.height somehow (or get rid of js completely but the particular site won't work with js disabled), but how? And would that be enough?
It's for anonymous purposes I hope I don't need to explain in detail. I need to look as one device even though I am accessing the site from various devices (Tor browser not an option - changes IP). The browser I'm using is firefox 30.0 and it runs on VPS (Xubuntu 14.04) I'm connecting to remotely.
This thread (Spoof JS Objects) brought me close but not quite enough, it remains unanswered. I've struggeled upon this question for quite a long time so any recommedation is highly appreciated!
The site you provided uses the following Javascript to determine which width/height values to show:
height = screen.height;
width = screen.width;
res = document.getElementById ('resolutionNumber');
res.innerHTML = width + " X " + height;
If all you care about is ensuring that these values change, you can do the following before their code is executed:
screen = new function() { this.width = 1; this.height = 2 }
If you care about other attributes of the screen object, you'll need some extra Javascript to preserve those.
To see this in action, load their page, then use Firefox or Chrome dev tools to put a debugger in their Javascript (line 116, where it says height = screen.height;), execute the above override, then press play!
If you want to do this for every page you visit, you'll need to incorporate this into a Chrome or Firefox Extension (I've made custom Chrome extensions, super easy).
Found a way, with firefox.
Go to the desired website
Access the tool by going to Tools -> Developer -> Responsive Web Design
Enter the resolution you preferred, then refresh the current tab, the website will reload the site according to the screen resolution you've set

Google Chrome Extension and NPAPI/FireBreath embed webpages

I am developing a project where i intend to open multiple webpages in the same one but not using <iframe>. I have tried in the past using <iframes> but i usually end up with the browser UI locking the webpage, so i have been trying to find alternatives.
I developed a small google chrome extension where instead having opening webpages, i open chrome.windows in the position i want and it works fine, but i wouldn't want any UI around them like the title bar and the buttons like a sort of 'fullscreen' for the dimensions i defined.
chrome.windows.create({ url: app.src, left: wleft, top: wtop, width: wwidth, height: wheight, focused: false, type: "popup" }, function(tab) {
self.windowid = tab.id;
console.log('Window ID is: ' + self.windowid);
//chrome.windows.update(tab.id, { focused: true, state: "maximized" })
});
While looking into chrome extension API i read something about NPAPI and with a little more research i have found about FireBreath. Since i have never did anything with this i have doubts if there is any way or possibility, by developing a plugin npapi/firebreath to do 1 of the following:
When opening a window with chrome extension, somehow remove the UI from it?
With the development of a plugin and having an index.html with 3 <object id="plugin"...> instead of the <iframe>, and inside those 3 object embed on the index, make them open webpages with url that i define and make it change the url after X time that is set on javascript?
This is all assumptions, idk if i am saying anything stupid regarding the possibility to do this with npapi or if i should look somewhere else.
Thanks in advance.
Basically the answer is no, you can't do any of that.
To be more accurate, however, you can do #2 but it's a huge amount of work and may not work how you expect. The only way to load an html page inside an npapi plugin is to actually embed a web browser of some sort into that plugin; FireBreath has an undocumented library called WebView that will do this for you, but it uses the IE engine on windows and on Mac it uses a lot of hacks to make it work which end up only working correctly in certain cases.
Your #1 can't be done in any consistent or reliable; npapi plugins know nothing about the browser itself, only the page. It might be possible using windows APIs to essentially hack into the browser window and change things but it would be very fragile and implementation specific to that version of chrome; if something changed later it'd just break.

"c.defaultView.getComputedStyle() is null" issue in Firefox

I'm using jquery in a page on domain "abc.com", and this page opens an iframe on domain "def.com", which also uses jquery (same version, and I tried different ones from 1.5.2 to 1.6.4). The frame is opened using the jquery library thickbox (not maintained anymore...).
My problem occurs in Firefox (any version from 3.X to 8.0), where I get the javascript error "c.defaultView.getComputedStyle(a, null) is null" the first time I load the iframe, and thus can't access any jquery initialization method:
$(function() {
/* Does not pass here in firefox */
});
On any other browser (chrome, ie, opera...) the code works, but in firefox I have to reload manually the iframe (right click -> this frame -> reload)... I have read some posts here on SO about similar issues, and each time the problem is a conflict between the two jquery libraries. In my case I can't remove one of the JS because the two pages are on different domains.
Thanks for your help.
This is related to the following Firefox bug:
Bug 548397 - window.getComputedStyle() returns null inside an iframe with display: none
Possible solutions include setting the iframe's width and height to 0 or visibility to hidden, rather than using display: none.

Categories