I am trying to implement the JScrollPane plugin on my website. Having taken a look through numerous FAQ/tutorials for this and double checked my scripts but cannot see where something is going wrong.
All of the scripts are being correctly referenced, I am calling the latest version of the JQuery library and I have the CSS being called before the scripts.
The page I am trying to implement this on is:
http://theindiecinema.com/walking-backwards/99 (click on the rate button on the right side of the tv)
To see the scrolling box that the JScrollPane should be being applied I have set up a duplicate page but with the JScrollPane stuff removed:
http://theindiecinema.com/testing-nopane
Please can I get some advice of how I can get this working.
Much Appreciated
Francis
Call jScrollPane on .commentslist when it's revealed (by clicking Rate), not on $(document)ready. jScrollPane is having trouble initializing while the target element's parent is hidden. You should only have to do this once, but it won't really even matter if you re-call it every time you show #comments.
Alternately, you could un-hide #comments in your external CSS, then on document-ready, first initialize jScrollPane on .commentslist and then hide #comments.
Related
I'm using Zurb Foundation 6.3.1 on this site: https://www.brill.blog
On the home page, I'm using Foundation's Toggler plugin to hide/show a 'Featured posts' panel at the top of the page.
Lower on the page, I'm also using Foundation's Sticky plugin to control the scroll position of the sidebar for desktop window sizes.
Independently both these plugins work well.
However, after the Toggler’s hide button has been activated, the Sticky sidebar's positioning is still based on the original pageload, before Toggler was run, so it gets positioned too low on the page, overlapping the footer.
I believe that I need to either: 1. add a ‘mutation observer’ to the Sticky plugin to watch for changes in window height, or 2. add code at the end of the Toggler plugin to re-init the Sticky plugin.
Unfortunately, I don't yet have any JS skills, so I'd be really grateful for any help that explicitly tells me where to add the code, and what code to add!
I'm using CodeKit to prepend each plugin's js into my app.js from: /foundation-sites/dist/js/plugins/foundation.toggler.js etc.
Do I hack these original plugin files, or add some code to my app.js?
I note that there is an open issue that could affect this: https://github.com/zurb/foundation-sites/issues/8394 (Re-initialization of a sticky element after it is destroyed does not get height), and there a couple of workarounds in the comments that I could try (if I just had a clue where to put them!)
Many thanks for any help!
I'm developing a theme for an online store from scratch, I used underscores and Bootstrap and now I want insert a slider with the MetaSlider Plugin.
The problem is that I have no controls, and also the slider is not working, get stuck in the first image.
The curious thing is that in the admin page when I click on "save and previsualize" it works perfectly.
I inspected the code and I realized that the <ul> element that contains the controls is not there, so is not a css problem.
Check if there is no any conflict with another plugin. It may cause if there is another version of jQuery library that embedded in the page.
I have a fullpage.js site setup here.
The first section has no scrollOverflow, but the second section is a grid (generated using gridify), which requires (on certain screen sizes), for it to be a scrollable section.
The problem is it refuses to scroll. However, if I resize the window (even by a single pixel in any direction), then the fullpage.js scrollbar will appear for that section.
Does anyone have any idea why fullpage.js is acting this way? And how can I get the scrollbar to appear in that section without having the resize the window manually?
It's worth noting, I've been able to get the same thing working using the fullpage.js example page for scrollOverflow. That is setup right here. However, I haven't been able to figure out why it works there, but not in my original page!
That's probably because the content of your section or slide is being generated (or modified somehow) after fullPage.js gets initialized.
You should have used that javascript code inside the afterRender callback as fullPage.js documentation details:
afterRender()
This callback is fired just after the structure of the page is
generated. This is the callback you want to use to initialize other
plugins or fire any code which requires the document to be ready (as
this plugin modifies the DOM to create the resulting structure).
In any case, I believe you can solve it by calling the method reBuild provided by fullPage.js.
You can try to use it in the afterRender callback or directly after the code you use to generate the layout/content of the section to which you want to apply the scrollOverflow option.
$('#fullpage').fullpage({
//your options
});
//code used to generate the content of your section
//...
//re-building fullPage.js to detect the current content of each section
$.fn.fullpage.reBuild();
If that doesn't work, you can always try to use a timeout which should also solve it with some delay:
setTimeout(function(){
$.fn.fullpage.reBuild();
}, 1000);
I'm using the slidedeck jquery plugin which basically puts slides on my page. Everything works fine, but the problem is with the css loading part. Below these slides i have an import statement for another page. This page which i'm importing fetches quite a bit of data from the database before being completely displayed.
So whenever i open my page for a second or two the display for my page goes hay wire. The probable cause of this may be that i'm putting most of my jquery including the one for these slides in the document.onready function. So since the document is not loaded completely for that period of time slides are also not displayed. (as in they are displayed but in a weird manner......they are all over the page!!!!)
Is there some way i can make sure that my css and jquery get loaded first and then a call is made to this page which i'm importing or something like that. i just want that my display comes fine right in the beginning.
this is the slidedeck jquery plugin i'm using
slidedeck : http://www.slidedeck.com/
ahh i actually found a solution for my problem. Now what i'm doing is that i'm keeping the div (say id="slideDeckContainer") containing this slidedeck initially as hidden (using css style=display:none). Only after the page is done loading inside the $(document).ready(function(){....}); i call $('#slideDeckContainer).show(); on the div. (since the $(document).ready(function(){...}) is callled only after the page is loaded)
Definitely not the best solution but for now it works :).
instead of $(document).ready(function() { //code here }); you can use $(document).load(function() { //code here}); The load function fires after everything in the selector has loaded. In this case, we are selecting the document, so this function will run only after the CSS, javascript, and DOM have finished loading. Another suggestion is to give the DOM elements that you are loading content into a defined width and a height. This way, before the loading finishes, there will be space reserved for the loading content and it won't mess up your page layout.
I may be missing something completely obvious here but when I call $("#zoom_slider").slider() I get no slider appear.
If you goto this url you can replicate the issue by click on any of the images in the main window, this will then load a larger image (currently of a watch). The slider should appear to the top right underneath where it says "Zoom" but it does not...
I include the jQuery UI from google via this call:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
I can't say for sure, but what I would try to do would be to put all of your script declarations in the <head></head> section of your HTML. Also, make sure you are using the most up to date versions of jQuery UI and jQuery.