freeMode not working in mobile browser using Swiper - javascript

I'm trying to use Swiper in a mobile hybrid app and I noticed the freeMode option wasn't responding which I wanted it do. I couldn't figure out what I did wrong until I tried one of the demos on idangero.us that uses freeMode and I ran it on my desktop browser (FireFox, latest) in mobile view and it didn't work.
I tried it on my phone as well and it didn't work there either which to me suggests that this feature isn't supported on mobile browsers.
This is kind of a deal-breaker for me and I need to know if there is any kind of known workaround? I tried Swipeshow as an alternative and they make it work, but it's a jQuery plugin and I want to avoid using jQuery since I'm not using it in the rest of the app.
Edit
To clarify, I want freeMode to be false, I want freeMode to be set to false but in the demo linked above freeMode kicks in on mobile devices, it only sticks on desktop devices.
Edit 2
I've found that if I change to mobile mode in firefox (ctrl+shift+m) and then back again it works. What seems to happen when I do that is that something is triggered and the swipe-slides (the slider content) get their width set explicitly. After that it seems to work. Setting the width manually in my developer tools doesn't seem to be doing very much though.

Well, I figured out the problem. It was a bit tricky.
At the time of initiating Swiper the div containing my swiping stuff was not showing (display: none). The solution was to wait with the Swiper initialization until I'd actually shown the div containing my swipe stuff.
The thing that really bugs me though is that Swiper didn't fail in any way, it just tried to do its best and gave me semi-functionality. I would've preferred a crash stating something like "Could not compute slide-sizes" or something like that. Instead it fails silently :(

Related

The javascript of bootstrap v 4.3.1, is not working properly in firefox v 65.0.1, has anyone had this problem yet?

When accessing the bootstrap v 4.3.1 documentation in firefox v 65.0.1, I noticed that the javascript is not working properly, for example, the carousel component is not following its normal flow, which is to move to the next slide with the its transition animation, other components have the same problem. I noticed that in version 4.0.0 of bootstrap this problem does not occur. I recorded a video with the carousel example, follow the link:
https://youtu.be/ksT7KgZZXhY
I have a site with this version of bootstrap, which is not working because of this problem, and in other browsers it works normally and in the console does not present any problem, I do not know exactly if the problem is in firefox or javascript bootstrap, I tested in other machines with old versions of firefox and worked normally, but after updating firefox gave this problem again.
I've been able to solve the problem. What happens is that in the performance settings of my computer the "Animate controls and elements in Windows" option was cleared, I do not know if this is a bug, as this is the first time I see a windows customization setting influencing loading of a website, anyway I left the link of the video with the solution.
https://youtu.be/9NhlpJpKpuQ

Elements dissappearing in safari on ipad

Ive made a simple project with html and jquery. It works great in all browsers except for safari on ipads. Since apple doesnt have a windows version of safari i cannot check if the error is explicitly for ipad but i think so.
The problem is the photoboxes wich get their width from the jquery, they dont appear at all on the ipad. Chromes developer tools device mode shows everything correctly and i have css queries that take care of smaller screens so its only the ipad thats the problem. I havent found any way to do a web debug on the ipad either. Its hard to give a code example due to i dont really know what the error is but i have a live demo you can check out. For you on ipads, its supposed to be photos before the winter background.
http://www.mj-bygg.se/ipad/default.aspx
I am also getting the same error on desktop Chrome on the first load. If I refresh, then the pictures load fine but on first visit to the link I only get the footer image (trees.)
On the first load, none of your jQuery heights/widths are being applied. No errors in the console and if I rerun the function it works as it should (without reloading the page.)
I suggest either pushing the script further down the page or using $(window).load(function() {}
instead of
$(document).ready(function() {}
That is the only thing I can assume is wrong if it fails first time but works with the page being cached.

JQuery Mobile and Firefox don't play well together?

Having some teething issues with jQuery Mobile. Was wondering if anybody else is experiencing a smattering of errors when they're using Firefox (desktop) and have the jQuery Mobile script includes in their <head> like so:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
In both Chrome and Firefox I get a host of CSS errors, which I presume are negligible. But in Firefox I get a couple of JS errors on top of that, which also seems to break my page (responsive elements not rendering like they would when I remove the jQuery Mobile script).
The JS errors:
Empty string passed to getElementById(). # http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js:11100
Use of getPreventDefault() is deprecated. Use defaultPrevented instead. # http://code.jquery.com/jquery-1.9.1.js:3346
I know the errors seem pretty verbose, but I'm not familiar with bloaty javascript plugins and their policy on graceful degradation. Anyone else having this issue?
Update
As per Tim's answer, I've snapshotted evidence that these jQuery Mobile 'warnings' are actually effecting the page. Below is the page when I comment the jQuery Mobile script tags out:
And here is what the page looks like when the jQuery Mobile script tags are left in:
Note that the reason I wanted to use jQuery Mobile is purely for it's mobile touch/swipe events. I have no interest in adopting it's hash/ajax linking functionality.
What Firefox is giving you are warnings, not errors :)
Taking a look at the jQuery Mobile source :
// find present pages
var path = $.mobile.path,
$pages = $( ":jqmData(role='page'), :jqmData(role='dialog')" ),
hash = path.stripHash( path.stripQueryParams(path.parseLocation().hash) ),
hashPage = document.getElementById( hash );
Setting a breakpoint on that line using the Chrome Development Tools (Firefox and Firebug seemed unable to load the entire script), we can see that path.parseLocation().hash will be nothing when there is no hash in the URL, so document.getElementById( hash ) will throw the warning you saw in Firefox.
If it bothers you, you can turn off warnings in the Firefox Development Console, but if you're going to use jQuery Mobile I'm afraid the warning will be displayed for URL's with no hash. It isn't Firefox trying to tell you something IS wrong, it's just Firefox telling you something COULD be wrong, which is not true in this case.
Regarding the other warning, this discussion might be useful. It seems jQuery uses the deprecated getPreventDefault() for compatibility with Android 2.3.
Yes, jQuery Mobile does "mess with the DOM" when it's loaded. For example, jQuery Mobile will wrap your content in a "page" div:
Behind the scenes, the framework will inject the page wrapper if it's
not included in the markup because it's needed for managing pages
(Pages - jQuery Mobile Docs)
But you could see if it's the CSS or the Javascript that's breaking your site by including only one of the jQuery Mobile bits at a time.
I too am getting the same warning regarding the call to getElementById(), and I can confirm that it is just a warning and does not impact layout. I have asked specifically about getting rid this warning, but to no avail.
Finally, have you tried using jQuery Mobile's custom builder to get just the parts you are interested in (i.e. the touch features)?
My stuff often gets thrown out of format when using Firefox (many other small bugs too) If its just for testing, I suggest Google Chrome or Safari for best performance...

When "zoom in" at Facebook, the chat sidebar got hidden, but how?

I am not sure does anyone notice that Facebook can detect users zoom-in level when it hits a level, it will dynamically add .hidden_elem classname onto .fbChatSidebar to hide it. (Check the attachments below)
I have searched a lot about this feature and found the repo in github called detect-zoom, but it seems that there are still some problems especially in latest version of FF & Chrome.
So I am really curious about how does Facebook detect this with JavaScript and I have tried it with latest FF & Chrome and it seems that Facebook can detect it correctly and hide the sidebar at the right zoom-in level.
Does anyone know anything about how they implement this feature ? or even possible solutions are welcome.
Thanks.
I'm not sure about the exact solution Facebook is using but I discovered they hide the sidebar on both window resize and zoom.
My research shows that all browsers, including IE8 and up fires the window.resize event when zooming as well. So by setting some breakpoint when you wish to hide something you should be able to implement some similar functionality.
Quick and dirty example: http://jsbin.com/ofufer/1/

jScrollpane is working but not creating the container

I have jScrollpane working on my mac at home, however I have just uploaded it to my CentOS web server and I am having issues. The scroll bar appears as it should, however I have set "showArrows: true" but I am not getting any arrows. Also, when I inspect the element in either firefox or chrome, both on windows and mac the class="jspContainer" and all of the other elements, jspPane, jspVerticalBar etc do not appear in the html. Giving this is the case it would make more sense if there were no scrollbar at all.
I am using this in drupal, so I am not sure if this is because there are other javascripts running. The major issue is, that without the containers etc being created by the javascript, I can't theme the scroll bar as the divs aren't created for the css to act upon.
I had the same issue initially on my mac, I commented out some other js I had running in jQuery(document).ready then it started to work. I put back all of the other stuff I have running in jQuery(document).ready after starting jScrollpane and it kept on working. I have restarted apache, cleared caches etc on the mac to make sure it isn't just working from cache and I've done the same on the server.
Any ideas?
I have just installed the jScrollPane module from drupal instead of adding the scripts manually, solved the problem. I should remember to look for a module first before trying to do it my self, it is a lot quicker.

Categories