I'm using Skel.js and Skel-layers.js on a website I'm working on, I'm working on a modified HTML5Up template: http://html5up.net/escape-velocity
The problem I'm facing is that the collapsable navigation doesn't work on iOS (I've tried both Safari and Chrome). The collapsable nav works in every other web browser and mobile device. The original template works on iOS.
The HTML structure, and JS are the same. All the alterations within the CSS have no impact that I have found. I've been removing elements in the style-mobile.css and testing the alterations in the iOS Emulator on my Macbook.
The website I'm working on is http://havenlea-farms.co.uk/
When the collapsed nav icon is clicked, there is no response in iOS.
Has anyone got any ideas on what the cause could be? I'm aware that the question structure isn't great.
After much frustration I've found the problem. After manually unloading my stylesheets and javascript files, the problem was with an Arc Text lib I was using. https://github.com/codrops/Arctext
Once I removed the reference to the lib the navigation worked on iOS. I'll report this as a issue on GitHub for both Skel and Arctext.
Related
I have an issue with Firefox. In both responsive mode and Firefox Mobile to be accurate.
The touch scrolling isn't working on my website. (But the scroll with the mouse is working on Responsive mode)
It works fine on Chrome mobile & Safari mobile.
I checked online and I already tried the dom.w3c_touch_events.enabled set to 1. It was actually set to 1 by default.
I think it's an issue on the JS/CSS side but I can't see where.
I use SASS and Pleeease to compile it and it's a React app compiled with webpack.
Also I use the method fetch to call my webservices if it can have any influence but I doubt it. (and have a polyfill for it)
I tried to nuke totally my CSS and it still didn't work.
Happy to share URL if people want to see the actual problem. I just don't want to be seen as a spam. Also I will share a test server and not the live one. (problem is the same anyway)
Found the (stupid) solution and posting it as it might be helpful to someone.
I had a overflow:hidden; added by mistake in html, body { into my SASS.
For some reason the responsive mode in Firefox is still not working (bug? cache? I don't know...). But once I tried again on my Firefox mobile it was gone.
Looks like Chrome and Safari are ignoring this CSS but not Firefox.
For the record I am on last versions on all my browsers.
I am having a bit of a problem here.
I am trying to make a collapsible div (think a folder tree-like thing) using the code at jsfiddle.net/cpkDg/
The code is working fine there, but when I try to integrate it into my site (a webapp) it's not working - http://dev.brandeer.ro/consins/standard/home.php
I am using Pushy (christopheryee.ca/pushy/) for the side menu, and I suspect that this is the culprit, but I have no idea how to test it in JSFiddle (copy-pasting the script - Modernizr et al) in JSFiddle didn't work).
I am only interested in this working on Chrome, since it is a webapp which will run only in Android WebView. In the near future I hope to implement it as a native app.
Do you have any idea how I could solve this ? I have been looking for a few days on a pure css version of a collapsible menu but it seems that everyone prefers JavaScript/jQuery implementations.
My website hosted at kylehb
The website works as intended on both Chrome and FireFox, but in iExplorer it automatically loops the slides(pages) and reverts to the first one if you try navigate to any other slide.
Im using fullPage.js
Does anyone know what is causing this?
You are using an old version of fullpage.js which contained a bug. (1.6.8)
Please download the latest one fullpage.js 1.7.8.
The internal functions addTouchHandler and removeTouchHandler have changed since then and sounds to be the cause of your problem.
I'm fairly competent with HTML and am working with Bootstrap for the first time, but I can't seem to get the mobile collapsible menu working on Chrome on the desktop (and presumably some other browsers).
Safari on iOS 7 with default mobile responsiveness shows the menu fine when clicked, but nothing happens when you click it in Chrome on the PC when the browser is resized to a mobile-like width.
Sorry if it has been said before - just went through the code and couldn't really understand why it wasn't working! :(
First time on SO and can't figure out how to put my HTML in here, so here it is.
Thanks peeps :)
You have linked jQuery from Google CDN and hosting your website from Dropbox. Dropbox does not allow external linking of script and font files.
So you are getting an error on your page:
Host the jQuery file on your website and link (internal linking). Like for example put jQuery in JS folder and link:
<script src="js/jquery.min.js"></script>
Problem will be gone. Hope this helps!
I am working on a new site, currently hosted here. I am implementing a single page design using the Ascensor plugin, found here. It works fine in Chrome and Firefox, and IE10 and IE9. However, in IE8, the home page loads and then if I click on any of the navigation icons, the page starts shaking, literally shaking left and right very fast, and the browser crashes after a few seconds. I have used Ascensor in IE8 before, and it had worked. I can't even debug as it just crashes without any warning in IE8. I've been trying to figure out what's wrong for the past few hours, with no success.
I checked the behavior in IE8 by:
Changing the document mode to IE8 in IE10.
Using a Win7-IE8 VM
If it helps, I am also using the following jQuery plugins on the page.
CarouFredSel and FancyBox for the gallery.jQuery custom content scroller
Also, I am using jQuery 1.8.3 as Ascensor does not run correctly using later versions.
Someone please point me in the correct direction. Thanks.
The issue was related to the scrollbar (not sure why it was occurring though). Using the following CSS on the body fixed the issue.
body
{
overflow: hidden;
}