I have the problem that the application take all browser space events if I set the size of the RootLayoutPanel. This problem appears only when a go through DNS, not when I connect directly to the machine:
For example, http://10.10.3.1:8080/MyApp/ works fine. The main screen is according to the size(1024x768).
http://nameOfMachine:8080/MyApp/ (nameOfMachine is set to 10.20.3.136). The widget appears, but they are in the wrong place. The bottom element move according to the browser size.
If in IE8 or IE9, check the browser mode and document mode from the Internet Explorer Developer Tools.
In most cases, you'd want to force IE=8 (or IE=9, or IE=Edge) mode by adding a <meta http-equiv="X-UA-Compatible" content="IE=8"> to your page.
See http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx for more on "document compatibility".
Related
I have a problem with smooth scrolling, but only when website is opened with github page link... It's really weird, cause if I open it with live server, smooth scroll works... Does someone know what is it about? Everything is updated, code is the same, both on my computer and on github.
Link to the project: https://github.com/Beko44/M-M-Website .
Github page where smooth scroll doesnt work - after clicking on smth in the menu (left upper corner) it kind of jumps instead of going smooth: https://beko44.github.io/M-M-Website/
Thanks!
If you open the browser console you could see an error:
Mixed Content: The page at 'https://beko44.github.io/M-M-Website/' was
loaded over HTTPS, but requested an insecure script
'http://code.jquery.com/jquery-3.4.1.min.js'. This request has been
blocked; the content must be served over HTTPS.
Since jQuery is not loaded because of this error your script for smooth scrolling will not work.
To solve your problem just change the src from jQuery to be served by https in your index.html.
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
I´m setting the title of a popup window on ie9, but it´s not getting updated.
Strange thing is that inspecting the elements, the title is correctly setted, but the browser displays the url regardless.
Also, if I open the window like this:
window.open(url,"_blank") then it works
However:
window.open(url,"_blank",'height=200, width=400') (i.e with any specs setted) triggers that strange behaviour
Anyone has any clues on it? any workaround appreciated.
It only happens if the site is marked as trusted, and this solves it:
Trusted Site in IE - html title is ignored
I'm developing an app that loads a form from another website into an iFrame. The iFrame is set to 100% width and height while displayed. That website has JQTouch.
When I touch an input field in iOS 7 on the iPhone, the keyboard pops up and covers the input fields. It doesn't scroll, resize, or even let me scroll down to see the input field. If I type and then close the keyboard, nothing happens.
I've tried everything I've come across. Adding/removing height=device-height in the meta viewport tag didn't do anything. The thing that came closest to a solution was adding the preference "KeyboardShrinksView = true" in config.xml. That made it scroll (but not enough), and permanently pushes the site up about 20px or so.
I've been working on this for the last couple days with no solution in sight. Is this a bug? Is it the way JQTouch is interacting with PhoneGap Build?
UPDATE: Still no fix, but to test I took the form's page out of the iframe and set it using window.location.href="www.mywebsite.com"; They keyboard works in that situation. This is not a valid solution for me (yet), but may provide info on why it's not working.
UPDATE 2: I'm restructuring the app to use window.location.href, rather than an iframe or html object. This creates some small issues, but these are better than the keyboard not working. If anyone has an answer, I'd still like to see it.
Major Edit: I just realized the InAppBrowser plugin does NOT fix the keyboard bug alone. I did some more research, and this topic helped. I had to add "height=device-height" to every meta viewport tag. "width=device-width" should fix any problems viewing the site in mobile Safari. The final result is this:
<meta name="viewport" content="initial-scale=1, minimum-scale=1,
maximum-scale=1, user-scalable=0, height=device-height, width=device-width"/>
One of these also had a semicolon thrown in there, so be sure to check and double-check for syntax errors, as they may cause the problem.
If this doesn't work, there is another solution that you might try in place of or in addition to the meta viewport fix. It's several comments down in that topic I linked and involves some changes to the CSS. Changes to this didn't fix anything in my code, but it helped at least one person, so it's worth checking out if you still need a solution.
I tested this fix with iframe and object, and it didn't work--InAppBrowser is still necessary.
/Major Edit.
Here are some workarounds that worked for me:
Use the InAppBrowser plugin. This allows the app to interact with loadstart/loadstop/loaderror events in the loaded page within the InAppBrowser. This is the solution I suggest. However, with iOS 7, you will need to hide the status bar manually, the solution for which is here
OR Load the page using window.location.href = [website url]. If you don't need to worry about interacting with or returning to the app or linking to external sites (both of which I needed), this is the way to go. It's pretty simple, but lacks some of the functionality of the first solution.
OR Get rid of JQTouch. I wasn't able to do this, but much of it is redundant when you're building an app with PhoneGap.
I'm having some strange issues on <li> elements when viewing my webpage on an iphone.
There appears to be a mysterious padding added to the left of ALL <li> elements on the page (almost like a padding-left:30px) when viewing the webpage over 3G/Edge/GPRS. However, when viewing the page over wifi, the padding disappears, and the page renders as expected.
I use Eric Meyers reset.css stylesheet to reset my styles. This issue has happened to me on previous sites I've built so I know it's not localised just to this particular site. Perhaps O2 (my network provider) are modifying the css before sending it over to my iphone?
If you want to try and replicate this for yourself, my site is at http://www.pyre7.com
Any insight would be appreciated.
I've just found this article. It appears o2's proxy cache is in fact modifying content.
http://startupcafe.co.uk/2010/07/23/o2-compression-on-mobile-devices/
It could have something to do with slow speed of 3G and how you render CSS
I have an iPhone webapp that uses a cache manifest to work offline. I add the webapp to my home screen, use it (say scroll to a certain location on a page), then go back to homescreen.
When I open the app again, for a brief moment I see where I used to be (at that scrolled location on that page), but then the app "reloads" and I get scrolled to the top of the mainpage. Is there a way to prevent this "reloading"? This happens even in airplane mode (ie everything is working off the cache).
You're just seeing the default startup image, which is just a screenshot of the last place you were at. It's not "reloading"; the app wasn't loaded to begin with.
Search for "apple-touch-startup-image" to set a real loading image.
What I'm struggling with here is that the app actually seems to stay "in memory" longer if I use regular Safari as opposed to running in "apple-mobile-web-app-capable" mode. In the later case something as simple as pressing the home button, then task-switching back to the app causes a reload. Doing the same thing just in Safari often does not reload. So I'm worse off by using "apple-mobile-web-app-capable".
I don't believe there is a real 'reload' event. onload and onunload are all we get.
the onload handler starts up as if it is your first time coming to the page.
the onunload handler is the key to clearing out old content.
I like to provide alternate content for people who are coming back to my web app.
window.onunload=function(){
document.getElementsByTagName('body')[0].className+=' unloading'
}
And let the CSS do the dirty work to hide most of the body and show alternate content.
(this answer does not rely on jQuery or other frameworks)
// on load
window.scroll(0,0);
To ensure no old content is displayed while launching I use this in my page:
window.addEventListener('unload', function() { $('body').hide(); } );
Thus the last state of the page is empty and is what is shown to the user when the page is opened again.