Javascript acting differently on different hosts - javascript

I'm using Lightwindow v2 in a Symfony project to create a modal window (here is the plugin I'm using). The modal window works perfectly on my local wamp server. But when I access the page from my remote AWS server, the "greyed out" background element of the lightwindow is too short--it covers the part of the screen that is initially visible but if you scroll down then the rest of the screen isn't greyed out (which makes it look quite crappy).
Using Firebug I'm able to see that the greyed out overlay is given a different height value, which explains why it's too short. But I'm puzzled by this, since one would imagine that the Javascript would render the same, regardless of the host, since it's a browser-side scripting language.
Can anyone imagine a reason this problem could be occurring?

Due to loading time differences between your local WAMP server and your remote server, the page rendering may be happening at different speeds. Your overlay may be getting rendered prematurely, before the browser fully renders the page to its maximum height.
Are you rendering the modal window as soon as the page loads? If so, can you try adding some delay to see if that helps?

I'm not sure, but maybe your JS code tries to read browser window size which could be possible for local HTML pages but not for external websites?

Related

jquery and css rendering different based in the same browser window based on whether loaded via django or statically

I have a strange situation. For a web page written using html, jquery and css, on the same browser but in 2 different tabs, I am getting different renderings of the page.
Case 1: Loading the html file directly from the file system: In this case the code renders correctly. This code uses $window.width() which returns 2273. The code also uses setTimeout() and $timeout to perform certain jQuery operations after the DOM is loaded
Case 2: Serving the html/images/css from a django site (locally hosted): In this case $window.width() comes out to be 2067. Some of the jQuery portions don't work well. All images and the overall page is "bigger" in size.
Same browser (Chrome) different tabs.
Any clues?
If text and images look bigger on one page than on another, while they shouldn't, the zoom factor is the first thing you should check.
It's easy to quickly zoom in or out a bit with the keyboard, and then to forget about it, but Chrome has per-page zoom settings, so that when you revisit a page that you once zoomed in on, it will use the same zoom factor again.
And of course, to a browser a page at file:///var/www/file.html is not the same page as the one at http://localhost/file.html, even if you know they are.

What possible uses are there for: onresize="window.location.reload(false);"?

I ran across this code in some HTML and I am unsure what the point of it is:
onresize="window.location.reload(false);"
I am not very proficient in JavaScript, but it looks like it basically just... reloads the browser window when it is resized? Does that even work? It seems odd.
It does reload the page as you suspect, although the argument false that is passed to reload indicates that the page should be reloaded from the cache if possible, to minimize load time. See Mozilla's window.location documentation for more details.
I suspect this is to force the browser to re-layout the page in case resizing the window changes how it renders. Typically that should not be necessary, especially if the site is employing responsive web design techniques, but some sites may do it anyway.
I agree with Stuart. Do you own this code? In other words can you make changes to the code and deploy it to some test environment? If so, try commenting that line and see what happens. May be this line was added way back when some particular browser couldn't handle window re-size events correctly. May be it's not needed anymore.

Minimize popup window

How can I move my popup window back or minimize it? The following code snippet doesn't work:
w = window.open('asdasd');
w.blur();
window.focus();
I need the same effect as in http://www.filesonic.com/file/2959312855/CoreczkaArena.rar, when you Click "SLOW DOWNLOAD" the popup with ad moves back under the main window.
Got You Then - Here The Solution
var newWindow = window.open('Default.aspx');
newWindow .opener.window.focus();
You should not do this.
The reason for that is that your users' experience will suffer and that this type of behaviour is often considered harmful.
If you want to put some content "in the background", just do it within current page by implementing CSS and JavaScript scripts that make site behave as it would contain multiple "layers" or "windows". Try using jQuery UI for example.
If you insist on doing what you asked (creating new window and moving it in the back), someday it will probably stop working and your content will be blocked by popup blockers. But before that happens, you will probably receive negative feedback from the users of your site.
There is not necessarily only bad intentions to want this type of behavior of the browser.
My web application is running on Chrome.
I need to launch http requests to call a web service in localhost for document management from the document server.
And I would like to avoid cluttering the user's desktop with extra windows.
With Window.open you can reduce to the size 100/100 but you can't minimize totally when launching the window.
On the other hand, manually, you can do it afterwards.
I don't see why it can't be done directly when the calling site is in https
Cpf

Web Browser Kiosk - Recover From Network Outage

I am running Firefox as a non-interactive kiosk type application that iterates through several web pages on different sites. For implementation, I have a page that uses JavaScript to iterate through an array of location.hrefs.
I want my kiosk page to be able to auto-recover when there is a network outage between my kiosk application and my web server. Currently, the application has to be restarted if there is an outage. Is there any way to implement this in ANY browser?
It really depends. If the application is non-interactive it should be pretty simple. Just use two frames, load your application in one and have it change the URL in the other frame periodically. This way, the first frame never refreshes, so in case of a network outage it will keep cycling through the pages (although they will appear as errors) until the network is back (at which point the app will be back to normal on the next refresh).
Note that you don't have to show two frames. The first frame that only contains the required JavaScript to cycle through your pages can easily be invisible.
You could probably do more complicated stuff, such as polling with Ajax before a page change to see if you have a connection, but it's up to you to decide whether that is necessary.
Set your page as home page and add Firefox to the Autostart folder.
For the kiosk mode, I found an addon that claims to be helpful of this. Haven't tested it myself though...
EDIT (Thought it was your site that should restart)
For the problem with sites in your switcher that stops responding I would do something like doing an ajax call to the page first and checking the http status. If it's ok - load the page in the content area (iframe?), if not, move on to the next page. The pages will be checked every time in the loop, which means a down page will be displayed when it comes back up.
Quite sketchy, but I hope you get the point?
I have a similiar setup. I used Tab slideshow ( https://addons.mozilla.org/sv-se/firefox/addon/tab-slideshow/ ) in combination with ScrollyFox ( https://addons.mozilla.org/sv-se/firefox/addon/scrollyfox/ )
I have Slideshow setup so that it reloads the tabs every 30 second or so. I have one tab for each site that I want to demonstrate, and tab slideshow will cycle through them at a certain interval. Upside with this approach is that they will usually be fully loaded all the time.
For fullscreen in firefox 4, just F11 and then Alt + F4 and it will start up in full screen the next time it will load. I used Full Fullscreen for this before, but it hasn't been upgraded to support FF4 yet. It works in 3.6 though.

How to open file dialog in Flash 10 "without" user interaction

I want to open a file dialog via FileReference.browse() but I get #2176 error which means that this action can only be invoked upon some user interaction. I'm aware of security considerations but in my scenario I have a thin flash movie which merely displays an image and the whole UI is in javascript (I heavily use javascript <-> actionscript communication).
So the question is - do you think it would be possible to invoke FileReference.browse() upon the user interaction coming from javascript?
No. If it is anything like accessing the clipboard, then you are stuck out of luck. I have tried all sorts of hacks to get around that, from setIntervals to using apply, I even tried using a ByteArray to manipulate code directly. No soap.
For that matter, you'll have to upload the file to a server using FileReference (unless you're using AIR). This is really annoying if you need to have Flash look at it.
The problem is that when Flash makes this type of decision, they are not making those aspects of the classes accessible by code directly. The code responsible for actually accomplishing these things is locked in the native code which is built into the FlashPlayer. We're black-boxed out.
Back when Adobe first updated their security model, and in turn broke quite a few running flash based upload services, there was a
pretty
big
stink.
I believe that some people were working around the new limitation by essentially creating a transparent flash movie, and overlaying on top of an otherwise normal HTML element, to 'trick' the user into giving the flash app input from which to trigger the interaction (where they think they are clicking on a simple html button labeled 'upload' they are actually clicking on the invisible flash element sitting on top of it.)
I've not tried this method myself, but it may give you a direction in which to search for a solution that might work for you.
Isn't this the purpose of object and embed tags in html? When you say the whole UI is in javascript I am assuming you are using html markup as well, though I guess this may not necessarily be the case.
How to embed a flash file in html
How to start a flash file with javascript
Ok. I've found this link: Flash Player 10 FileReference Changes. Apparently there's no workaround for this limitation. I guess I'll have to display a prompt for the user from within the flash movie, so that he/she can "interact" and allow to open the dialog.

Categories

Resources