Long time user/lurker, but this is my first time asking a question. Here goes...
The sidr menu on http://jonathanfanndesign.com/lowsleep/ works on my home laptop on IE, works on my iPhone, works on my work computer in Chrome, and works on my wife's Mac, but simply gives me http://jonathanfanndesign.com/lowsleep/#sidr as the result with no menu being pulled out on my home laptop (HP running Windows 8).
The Developer area returns the following errors:
GET http://jonathanfanndesign.com/lowsleep/dist/js/slider.js 404 (Not Found) (index):128
Uncaught ReferenceError: MM_preloadImages is not defined (index):29
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
The slider javascript error is there because it is not being used anymore and I need to remove that from my code when I get to work tomorrow, so I didn't upload it to my site, but this shouldn't affect the sidr menu. Could it be the deprecated event.returnValue? Why would this not work only on ONE computer? I'm sort of freaking out about this because I don't want my sites not working on random people's computers with me not knowing about it.
Thank you for any input you can offer.
I was having this exact same issue that you were having. My Sidr menu was working in just about every browser except Google Chrome on PC (but Chrome on Mac was fine). I also noticed I was having issues opening the menu on mobile also. I would have to very delicately press the menu button for it to work.
I found a solution to both issues here:
https://github.com/artberri/sidr/issues/97
Essentially the solution is basically putting the menu icon within a jQuery click function below your original Sidr function call:
jQuery("#id_of_my_btn").click(function() {
jQuery.sidr('toggle', 'name_of_the_sidr_panel');
});
You'll notice that I used "jQuery" instead of "$". That could also be a possible issue, especially if you have a CMS like WordPress installed with plugins that conflict with the "$". I have had to use "jQuery" instead of "$" on most of my WordPress sites.
Another thing to note is that I also had to put all of my Sidr code into the footer of my website, due to loading issues, which could also be another possible issue.
Related
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
UPDATE #2
So we found out how to debug our application utilizing the safari debugger. For those of you interested, here's the link on how to do this:
http://appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari/
Using this, we figured out that our issue was actually related to CSS that we were using in our code. In our body class, we had the attribute "overflow-y: auto". Upon deletion of this line of code, everything worked again in mobile safari.
~~~~~~~~~~~~~~~~
UPDATE: Upon further testing. It looks like if I go to the web version of this application (hosted on our server) from the safari app on our iPad, this bug still happens. If I do the same on the mac version of safari though, then this bug does NOT happen. Hopefully this information might be helpful.
~~~~~~~~~~~~~~~~
So we have a javascript hybrid application that's compiled using the trigger.io toolkit. Jquery, backbone.js, and marionette.js are use in this project. We just started testing on iOS devices.
Everything works fine on both the web / android versions of this app, but on iOS (both simulator and device), the following bug is occurring:
Upon loading up the application, on the first view, when you first tap into a text field the application freezes briefly. After the application unfreezes, the following error code is output into the trigger.io console:
_BSMachError: (os/kern) invalid capability (20)
_BSMachError: (os/kern) invalid name (15)
Everything looks fine, but then if you type more than one letter into the textfield, the entire application disappears except for the background view. You can tap out of the text field, and everything returns into view, but obviously this is something customers shouldn't be experiencing.
I've researched a bit, and some suggestions have said to try and edit the info.plist file. I've looked everywhere, but I can't seem to find this file. It's seeming like trigger.io hides this from the developer somehow.
Does anybody have any ideas as to what might be causing this issue or how to fix it?
Thanks!
So we found out how to debug our application utilizing the safari debugger. For those of you interested, here's the link on how to do this:
http://appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari/
Using this, we figured out that our issue was actually related to CSS that we were using in our code. In our body class, we had the attribute "overflow-y: auto". Upon deletion of this line of code, everything worked again in mobile safari.
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.
I'm trying to build a site a using the jQuery Kwicks plugin for the nav, and everything is working great in Chrome (my default browser), but when I open the site in IE, which is what the customer uses, the navigation gets spaces between the menu items and I cant seem to find a solution.
Here is the site:
http://www.webexplosive.com/pb_design
Side note:
I've used this plugin for another website, http://www.webexplosive.com/accu1, and it works and looks correct in every browser...very confused!
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.