I'm trying to customize the w2ui sidebar's scrollbar with JScrollPane jQuery plug-in, but I fail all the times and by saying that I mean that I couldn't make JScrollPane to change the sidebar scrollbar style. So, could you please share snippet code here that shows how to get it done ?
Thanks.
It is what I've tried:
$(w2ui['sidebar'].box).find('.w2ui-sidebar-div').jScrollPane({
horizontalGutter:5,
verticalGutter:5,
'showArrows': false
});
Well, I tried several libraries and at the end 'slimScroll' was actually the one which worked perfectly :
onRefresh: function(event) {
event.onComplete = function () {
$('.w2ui-sidebar-div').slimScroll({ height: '100%' });
}
}
Related
I have example at
$(function () {
$('#scroller').slimScroll({
height: 600,
});
});
[codepen](https://codepen.io/anon/pen/xyyoPe)
My problem is that i cant get the scroll to work with the mouse wheel and slimscroll in this example. I dont know if the css is the issue or if the whole div setup is wrong.
I am looking to develop a page where i can have a vertical slide show (cointaining images and text) which changes on scrolling down and once the last slide is reached, parent page starts to scroll. You can see the example on the following page
https://www.mi.com/in/redmi-note5/
I tried with various examples, but all of them are for full page examples. So here I would like to have the vertical slides inside a section on the page.
Hope someone can help me out here.
I am trying to use FSVS code.
You can check the attempted code here
Trial page
you can use slick slider.check the demos you'll get your answer.
http://kenwheeler.github.io/slick/
you can use wheel event and make sure you set infinite: false in slick options.
var $sliderElm = $('.slider');
$sliderElm.on('wheel', function(event) {
event.preventDefault();
if (event.originalEvent.deltaY < 0) {
$(this).slick('slickPrev');
} else {
$(this).slick('slickNext');
}
});
I am having a problem with the SKrollr.js plugin for Parallax and smooth scrolling. Everything works fine except Bootstrap carousel's, and im sure any carousel for that matter. It's clearly a display:none problem when the plugin is setting itself up on load and can't see any of the .item classes. But I can't figure out how on earth to get Skrollr to see all of the slides/.item classes when it's rendering.
I even tried this kinda stuff. My Skrollr markup isn't the problem that code always works for me.
Skrollr Markup
data-10p-top-bottom="background-position-y: 100%;" data-bottom-top="background-position-y: 0%;"
CSS
.displaying {
display: block !important;
}
JS
var sk = skrollr.init({
forceHeight: false,
beforerender: function(data) {
$(".item").addClass('displaying');
},
render: function(data) {
$(".item").removeClass('displaying');
}
});
EDIT
I made a JSFiddle for it here or you can see it fullscreen for debugging here
Sorry I was being vague and general because I know my HTML is solid. Check the fiddle. The slider functions just fine it's Skrollr not being able to see the hidden slides at runtime that is the problem. I just need a better solution to solve this.
I'm guessing that you need to do a refresh since I notice it works if I resize the browser.
Try this code:
setTimeout(function () {
skrollr.get().refresh();
}, 0);
You can change the timeout to 1000 if necessary to ensure everything loads.
I am trying to write a module for Drupal which would have the functionality to handle images using isotope. What I am trying to do is taking an input link from user, then loading that image in #content-images div. I am facing problems in implementing isotope plugin on those images.
Here is the jsfiddle: http://jsfiddle.net/xu4k7/1/ for my code.
When I change the above code to the following code, images do not show up.
(function ($) {
$(document).ready(function () {
$("#input-box-to-obtain-image-links").change(function() {
var value = $(this).val();
$('#content-images').append('<div class="image"><img class="isotope-images" src="'+value+'"></div>');
});
$('#content-images').isotope({
itemSelector: '.image'
});
});
})(jQuery);
I just want to know how can I implement isotope on those images so that when I resize my browser, images align themselves.
Thanks
Your isotope wrapper has a 0px height, that's why images are not visible. Maybe isotope init is done too early, so it can't compute its wrapper height ? See
Isotope jquery plugin doesn't show properly on chrome
or
Isotope intermittently returns 0px height on div
(first link really seems to be your solution : put isotope init in a callback fired after the actual DOM update)
I have a responsive site using jQuery mobile.
At a certain size, I swap out the header and footer (moving from a mobile like look and feel to a more traditional design) by showing the high res header and hiding the low res one.
The problem that I'm faced with is that JQM's styles don't seem to apply to the elements that are hidden, so when I adjust the screen size then the styles are all messed up.
I tried this...
$(window).on('resize', function() {
$.mobile.activePage.trigger('create');
});
Which doesn't seem to do anything at all. From hunting around all the examples I've seen mention refreshing or triggering on specific elements, but I'm looking for something more page wide to allow me to use my media queries properly.
It doesn't do anything at all because you are calling trigger with incorrect parameter.
It should be:
$(window).on('resize', function() {
$.mobile.activePage.trigger('pagecreate');
});
Create will only enhance page content, pagecreate will enhance page header, content and footer.
Working example: http://jsfiddle.net/Gajotres/PMrDn/52/
Try something like:
$(window).on('resize', function()
{
jQuery.mobile.changePage(window.location.href,
{
allowSamePageTransition: true,
transition: 'none',
reloadPage: true
});
});