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.
Related
I implemented a navigation menu on this website. While the menu works very well in desktop mode, it will not work in mobile viewing. I think there is an issue with connecting to the JavaScript - https://alexandrachel.org/scripts/script.js
The navigation menu should work like this website
How I can get the navigation menu in mobile viewing to work?
Your whole site is not responsive, so either write media query to make it responsive , or else for minimal responsive you can use bootstrap framework which is lightweight and easy to use and for more responsive mobile menus also you can use smart menus . So, its your choice either you write raw custom code or use the resources.
What the script does, is it changes the CSS for the small displays, so the menu is transformed to become a drop-down on handheld devices. However, the current problem is that the script cannot start, because it cannot find jQuery. And thus, on small displays, the CSS is incorrect and your menu is not visible (however it is there, and functional).
If you load your webpage over HTTPS (as in https://alexandrachel.org/), then the scripts and CSS files should also be requested via a secure protocol.
Try changing a request to jQuery to (note https://):
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
And you can remove the second request of version 1.10.2 from googleapis.com, since you are already pulling the latest version from jquery.com.
Errors in loading your website ref: Chrome Dev Tools
jQuery can't be found plus a lot of your content is being served over http whereas the main website loads on https so just fix those requests and import jQuery.
And this should work
Ref: to the attached image for the errors
I've been working on a CSS / HTML drop down navigation for my blogspot.com site. After coding it a few hours I had accidentally closed the tab to find out no matter what or where I tried the CSS on blogspot, the CSS wouldn't work again. Now, the HTML/CSS works anywhere else, just not on blogspot anymore.
These are the things I did:
1. Created a entire new blog under the same account, then applied
html/css
2. Cleared cookies, cache and restarted browser
3. Tried multiple browsers
4. Used stylish extension to override
5. Used console in firefox to edit HTML on other sites and added my
code to see if it worked elseware
6. Used a different computer
7. Used mobile network instead of ISP
Despite doing everything pretty much to get the css/html to work blogspot, it will refuse it now no matter what. I am guessing it is obviously an issues with blogspot.com such as a glitch or bug that I may have now caused. It also shows a lot of CSS code struck out in the styles inspector when you inspect a site via right-click.
I dab in javascript / jquery sometimes and I am wondering if there is a way to force my CSS to force override.
CSS/HTML http://jsfiddle.net/rpksx66u/
My blogspot site: https://vitalintel.blogspot.com/
Im about to pull my hair out.
update: so I moved the css/html/script element to another part of the page and it works. When the element is placed in the Cross-Column's sections in layout, it refuses to use any CSS.
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 :(
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.
I cannot get JScrollpane to work when I save a page containing JScollpane onto my machine.
The problem is easy to reproduce (for Firefox 11.0, IE 8 and Opera) by saving down a copy of the following example page locally and loading the local page into a browser:
http://jscrollpane.kelvinluck.com/basic.html
This example works perfectly online, though, and looks great! I really like JScrollpane so am very keen to use it in my website - JScrollpane looks excellent!
Using the Firebug debugger I have tracked the problem down to line 164 of JScrollpane.js (unminified version) as follows:
contentHeight = pane[0].scrollHeight;
It appears to be a javascript, not a JScrollpane issue. For the local version of the example page (i.e. loaded from a file), the pane[0].scrollHeight appears to reflect the height of the div, not the height of the content that is enclosed within the div. This prevents the vertical scroll bar from initialising in JScrollpane and so the JScrollpane does not scroll.
Does anyone know why the scrollHeight does not work in this case? Please excuse if this is a question with an obvious answer as I'm very new to javascript and JQuery. Is there an easy work-around apart from modifying the JScrollpane javascript file?
I just want to be able to develop a web page containing JScrollpane locally without access to the internet.
Firefox does not save a 1:1 copy of a webpage. For example the link to the google cdn is converted etc.
I did a "git clone github.com/vitch/jScrollPane" and opened the basic.html example locally... Works fine...