Smooth scrolling doesn't work on github page - github

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>

Related

Keyboard hides iOS input fields in PhoneGap Build 3.1 with an iFrame/object and JQTouch

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.

Facebook like button flyout appears then disappears on a page with no other content

I have added a facebook like button to my page, however when it is clicked the flyout appears, and then disappears.
At first I thought it was other elements on the page hiding it, but the problem persisted even on blank pages.
Tried both the iframe and html 5 codes that were generated by facebook and neither seems to work.
iframe - http://jsfiddle.net/aDK95/1/
Html 5 - http://jsfiddle.net/L9nZZ/1/
In both cases it seems to been hidden by the hidden_elem class:
#facebook .hidden_elem {
display: none !important;
}
It seems very similar to this bug reported at FB that was reported in May. However there doesn't seem to be much movement on it.
Has anyone else come across this? Know of any work arounds?
I came across this bug and it flummoxed me for quite a while. The steps I took to rectify it are as follows:
Ensure that you have put in the Javascript SDK initialization
Make sure that the #fbroot div is not inside a hidden div
In the Open Graph tags on the page, the og:url has to be set to a https protocol
and not a http protocol
Run your page through the Facebook Debugger at https://developers.facebook.com/tools/debug to check for any errors. Another interesting point which helped me resolve this was that when you put in your "URL to Like" value in the Like configurator, the dynamic like button generated shows whether that url would work well or not.

Opening URI in overlay, not main page

On my page, overlays are loaded by inserting their content with jQuery and then fading in.
What I want to do is this:
When you click to open an overlay, an URI is loaded (e.g. news/12, where news is the category and 12 is the id of the item to load).
Except, instead of loading it in body, it should be loaded in the overlay.
In other words, I want to achieve something like on facebook, where you open an overlay, the url changes, but the main page stays the same.
I'm guessing you need ajax for this, but I have no idea whatsoever how to do it.
Thanks
It sounds like you want to use the new history.pushState(...) and history.popState(...) browser API.
This SO post might help you out: Change the URL in the browser without loading the new page using JavaScript
Use Boxy. See http://onehackoranother.com/projects/jquery/boxy/tests.html#
AJAX example:
<a href='#' onclick='Boxy.load("test-1.html");'>Test 1</a>
See this question: Ajax - How to change URL by content
I solved it thanks to Lethargy's answer.
.pushState() is exactly what I need to have the URL reflect the contents of the overlay that is dynamically created with jQuery.
With some tweaking around and debugging I managed to get it all working.
Now my overlays (or popups, dialogs, whatever) are search engine ready, and the url is copy-pastable for users :)

GWT doesn't properly display in Internet Explorer when passing through DNS

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".

<li> elements have some mysterious left padding added on iphone over 3G but not over wifi

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