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.
Related
We have been looking for a while now but still haven't found the solution to this matter.
We are designing the site in wordpress
URL: http://jouwdesign.be/fontanella/site/lunchmenu/
The golden menu (.submenu) has a script linked to it wich should add the class 'test' when scrolling vertically past 100 pixels. For some reason it wouldn't even display a classchange when inspecting in chrome or any other browser. We already tried to disable all custom js and plugins but no luck so far.
Here is the jQuery:
jQuery(document).ready(function($) {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if ($(window).scrollTop() >= 100) {
$(".submenu").addClass("test");
}
});
});
Anyone who has experienced the same problem in wordpress or any other ways?
Thanks!
Found the solution. I had to remove 'height 100%' on my body tag in css
All works fine now!
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%' });
}
}
I'm working on creating my own responsive JavaScript/jQuery slider. It seems to be working pretty awesome for the most part, however, when I click on the arrows or navigation circles the timeout / animations seem to bug out. It is not consistent. When the arrows/nav circles are clicked, it should just reset the timeout and go to the corresponding slide.
For example if you click on a nav circle when it gets to the last slide it quickly goes right back to the first slide without the 5000 pause.
Here is the fiddle with all the code: http://jsfiddle.net/23712cwb/2/
Why is the timing bugging out like that? How do I fix it? As you can see I added clearTimeout($timeout); to the top of the nextSlide() function, but that didn't totally resolve it and I'm unsure this is the correct approach to the problem. However, before I added this line of code it was even more buggy.
Also if anyone has any tips they can give me or suggestions on how to make this even better that would be awesome. I am not very familiar with jQuery plugins so I am just kind of winging it here.
I figured it out. This code was causing the issue:
$('.slider .slides li .caption, .slider .slide-arrows li, .slider .slide-nav').mouseout(function () {
$timeout = setTimeout(function () { nextSlide('right', $slides, $height, $caption_speed, $slide_speed, 'null'); }, $slide_speed);
});
So every time I took my mouse off of the arrows or nav or caption it was doubling up on executing the nextSlide function.
I removed that code and it's all gravy now.
Actually, your code doesn't work on Firefox, because he is less forgiving than Chrome about errors.
You should define the functions captionActive and nextSlide you use outside of $(document).ready block
With your example it gave me this error on the console :
captionActive is not defined
Working fiddle
Edit : I guess you should be careful with the scope of $timeout : as you use it in the block document.ready and in functions, you should make use of global variables and work with window.$timeout instead of $timeout
That might solve some of your problems.
I have an image carousel built using knockout & jquery.
To animate the slides I really want to use CSS transitions and NOT jquery animate.
I have this nearly working but I have an issue.
In the code below, the 'slideRight' part doesn't work, however the else part works fine. What's happening is the transition to margin-left 0 is being skipped, even though the transition class has been added.
if (slideRight) {
$(requestedElement).insertBefore(currentElement);
slideContainer.css('margin-left', -$(self.carousel).width());
slideContainer.addClass('transition');
slideContainer.css('margin-left', 0);
} else {
$(requestedElement).insertAfter(currentElement);
slideContainer.addClass('transition');
slideContainer.css('margin-left', -$(self.carousel).width());
}
I've created a JSFiddle here: http://jsfiddle.net/vnw57nx0/2/
As you'll see in the fiddle, the carousel transitions nicely between slides going right to left.
But if you find this line in the javascript:
self.setIndex(self.currentIndex() + 1);
and change it to:
self.setIndex(self.currentIndex() - 1);
the slides should cycle in reverse.
They do, but they're not being animated.
Interestingly, if I debug the script and step through it works fine.
This made me think it was a timing issue and maybe I need to use a callback function but jquery .insertBefore, .css and .addClass are all synchronous.
Any ideas how I can fix this code that works if I debug but doesn't if I don't?
It seems that the browser doesn't make a transition when you revert a style value within the same context. You need to do it in a new context using something like setTimeout:
if (slideRight) {
$(requestedElement).insertBefore(currentElement);
slideContainer.css('margin-left', -$(self.carousel).width());
setTimeout(function() {
slideContainer.addClass('transition');
slideContainer.css('margin-left', 0);
});
} else {
http://jsfiddle.net/vnw57nx0/3/
I found this question because of the Knockout tag, and although you've got Knockout references in your question, the problem has nothing to do with Knockout. In fact, your code is very anti-Knockout since you're using jQuery selectors within your "view model" and using observables where none are needed or even useful.
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
});
});