jCarouselLite auto-scroll responsive changes - javascript

I'm using jcarousel lite to display an auto-scrolling carousel of brand logos on one of my sites. I tried to make it responsive (max 6 images on largest display) using the following javascript. The carousel works fine using the original code without me trying to modify how many images are visible.
<script>
function carouselLogic(){
if ($(window).width() > 959 ){
visible = 6;
changeCarousel(visible);
}
else if($(window).width() > 767){
visible = 4;
changeCarousel(visible);
}
else if($(window).width() > 599){
visible = 2;
changeCarousel(visible);
}
}
carouselLogic();
$(window).resize(function(){
carouselLogic();
});
/* original function for first page load
$(function() {
$(".logoCarousel").jCarouselLite({
auto: 2500,
speed: 1000,
visible: 6
});
});
*/
function changeCarousel(visible){
$(".logoCarousel").jCarouselLite({
auto: 2500,
speed: 1000,
visible: visible
});
}
</script>
Images appear inline with a 20px margin left/right.
This code is supposed to change the visible number of logos to ensure they still fit on the page with each responsive change.
The result is the carousels auto scroll goes all crazy. It bounces back and forth all over the place, and much quicker than the default.
Any suggestions on how to improve this code?

The original jCarouselLite has been forked here;
https://github.com/kswedberg/jquery-carousel-lite#responsive-carousels
It's not quite as Lite as it originally was but it has many more methods, and is touch screen scrollable and responsive. You can add the following options which are working for me;
function changeCarousel(visible){
$(".logoCarousel").jCarouselLite({
auto: true,
speed: 1000,
visible: visible,
autoWidth: true,
responsive: true
});
}
As pointed out here,
Run jCarouselLite again, after an AJAX request
You might want to end the original carousel as well in your carouselLogic() function
$(".logoCarousel").trigger("endCarousel");

This is old but in case it helps, i'm pretty sure you need to "reset" jcarousellite. Otherwise you are instantiating it again and again after each window resize.
To initialize it properly after it has already been initialized, you need to call a reset method. I don't remember the syntax off the top of my head, but if you search the jcarousellite.js source for "reset" you should find the correct syntax

Related

Can i disable fullPage.js if depending on div size?

Sorry if this is stupid question, but i'm not the greatest coder alive (actually i design websites for a living).
My question is: Can i disable fullPage.js depending on a div size?
I've been trying to look this up, but with no luck. I found this, but i don't think i know how to tweak it right, or if it's even possible:
if(.scrollable.width < 480) {
$('#fullpage').fullpage({
autoScrolling: false,
fitToSection: false
}} else {
$('#fullpage').fullpage({
autoScrolling: true,
fitToSection: true
}}
.scrollable = div starting at 0vw and expanding to 50vw.
I want the scroll from fullPage.js to stop when this div is bigger than 1vw.
Is this possible? Much thanks in advance.
You should use the responsive options provided by fullPage.js, such as responsiveWidth and responsiveHeight. You can find all about those options in the fullpage.js docs. And you can find examples online.
Example of usage:
$('#fullpage').fullpage({
responsiveWidth: 900,
responsiveHeight: 600
});
Additionally you can make use of the fp-auto-height-responsive class as in this example, to allow sections bigger than the viewport once in responsive mode.
Also, you can make use of the Responsive Slides extension if you want to convert horizontal slides to vertical sections when reaching the responsive point.

Disabling a jQuery script in HTML for a specific window width

I know this is probably a very basic issue, but I'm building a website with the help of the fullPage.js script ( https://github.com/alvarotrigo/fullPage.js ), but with little jQuery/Javascript knowledge.
What I want to do is disable the script for window width of 800px and less, but have it enabled for higher. Alternatively, I'd want to set a certain variable to false inside the script with the same condition.
This is how the script looks like (I removed some settings to make it shorter):
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
responsiveWidth: 800,
continuousVertical: true
});
});
</script>
This was my attempt at making it work simply, but it doesn't appear to work:
<script type="text/javascript">
if ( $(window).width() > 800) {
$(document).ready(function() {
$('#fullpage').fullpage({
responsiveWidth: 800,
continuousVertical: true
});
});
}
</script>
Use the fullPage.js responsive options, such as responsiveWidth or responsiveHeight.
Example online
$('#fullpage').fullpage({
responsiveWidth: 800,
continuousVertical: true
});
As detailed in the docs:
responsiveWidth: (default 0) A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site.
responsiveHeight: (default 0) A normal scroll (autoScrolling:false) will be used under the defined height in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's height is less than 900 the plugin will scroll like a normal site.
Additionally you can make use of the class fp-auto-height-responsive to prevent fullPage.js to restrict the size of your sections to a 100% height. Read about it in the docs too.
Update
As detailed in the answers, now he wants to know how to disable verticalCentered on mobile devices.
It is as easy as making use of the responsive option detailed above (that will also disable autoscrolling) and its state class to overwrite the .fp-tableCell class applied to the sections when using verticalCentered:true.
.fp-responsive .fp-tableCell {
vertical-align: top;
}
The condition is switched around. $(window).width()<800 Try this:
<script type="text/javascript">
if ( $(window).width() < 800) {
$(document).ready(function() {
$('#fullpage').fullpage({
responsiveWidth: 800,
continuousVertical: true
});
});
}
</script>

Get scroll position in JQuery when using onepage_scroll plugin

I'm using the great onepage_scroll plugin for a site. Below a set threshold the page reverts to normal scroll behaviour. However at this point - when I try to use scrollTop() to get the distance from the top of the page it always returns 0.
var vph = $(window).height();
var responsiveThreshold = 640;
$(".onepage_scroll").onepage_scroll({
sectionContainer: "section", // sectionContainer accepts any kind of selector in case you don't want to use section
easing: "ease", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in",
// "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
animationTime: 1000, // AnimationTime let you define how long each section takes to animate
pagination: false, // You can either show or hide the pagination. Toggle true for show, false for hide.
updateURL: true, // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
beforeMove: scrollCatchBefore, // This option accepts a callback function. The function will be called before the page moves.
afterMove: scrollCatchAfter, // This option accepts a callback function. The function will be called after the page moves.
loop: false, // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
keyboard: true, // You can activate the keyboard controls
responsiveFallback: responsiveThreshold // You can fallback to normal page scroll by defining the width of the browser in which
// you want the responsive fallback to be triggered. For example, set this to 600 and whenever
// the browser's width is less than 600, the fallback will kick in.
});
// Fix menu if page is too small
if(vpw<responsiveThreshold) {
$("#navigation").hide();
/* Every time the window is scrolled ... */
$('body').scroll( function(){
var scrollPos = $('html').scrollTop();
console.log(vph);
console.log(scrollPos);
if(scrollPos > vph) {
$("#navigation").fadeIn();
} else {
$("#navigation").fadeOut();
}
});
}
I've also tried both of the following:
$('body').scrollTop();
$('.onepage_scroll').scrollTop();
$(window).scrollTop();
Looking at how onepage_scroll works, it is not moving the body or the divs in a typical manner. So scrollTop is not the solution here.
It is using translate3d on the following div in question...
<div class="main onepage-wrapper">
With the following modified styles as the plugin operates...
-webkit-transform: translate3d(0px, -100%, 0px);
This answer may be of use to you...
Get translate3d values of a div?
To know current index of section:
var nCurSect = $("section.active", ".main").data("index");
Then you can just multiply it to the screen height and get offset.

Responsive setting creates page scrolling issues

I'm having issues with my CarouFredSel carousel.
I have a (tall) one pager with a carousel inside. If I scroll below it, any browser resize will make the page scroll back up about one page (I'm estimating the height of the carousel). I understand a few pixels of twerking, but now that's about 1000...
The problem is, I'd be 'fine' with it if it was only on resize, but this problem reproduces on reaching the bottom of the page on mobile, without any kind of resizing, no screen rotation (on Android, at least, cannot test iOS right now..). And like I explained, I reproduced the problem with slightly resizing a desktop browser on reaching the bottom of the page.
On disabling CarouFredSel, the problem goes away. It also goes away on disabling the responsive option on it.
carouFredSel is initiated like so :
$("#modeles").carouFredSel({
responsive: true,
scroll: {
fx: "crossfade",
duration: 500
},
direction: "left",
items: {
visible: 1,
width: 868
},
auto: false
}, {
transition: true
});
I have created a JS fiddle reproducing the issue here.
Okay so I get alot of these few 'tricky' stuff and what I oftenly do, I back it up with javascript.
In your case, what causes all the problem is Google Maps and the content of the iframe to be more specific.
What I would do in your case - of which does works perfectly - I would set an attribute of the scroll position on scroll, and on resize get me to that scroll position.
That said, we have this:
$(window).scroll(function () {
$("body").attr("xheight",$(document).scrollTop());
});
$(window).on("resize", function(e){
e.preventDefault();
$(document).scrollTop($("body").attr("xheight"))
});
And that's all you need.
Given example:
jsFiddle

Disable superfish on resize event

I'm trying to combine the Superfish jQuery plugin with Nathan Smith's adapt.js snippet, which dynamically loads in different CSS files depending on browser width. I want to disable/replace/something the Superfish menu when in mobile mode, because drop-downs don't make any sense there. I've attempted to detect the change and disable the menu, but I need it to re-enable when the window is resized wide again.
Here's what I have:
function htmlId(i, width) {
document.documentElement.id = 'pagesize_' + i;
}
var ADAPT_CONFIG = {
path: '/css/',
dynamic: true,
callback: htmlId,
range: [
'0px to 760px = mobile.css',
'760px = 960_12.css'
]
};
function sfMenu() {
$("#pagesize_1 ul.sf-menu").superfish({
delay: 800,
animation: {opacity:'show'},
speed: 'fast',
autoArrows: true,
dropShadows: true
});
}
$(document).ready(function(){
sfMenu();
});
The rationale was to change the id of the html element on resize (between pagesize_0 and pagesize_1 - which works) and to use descendent selectors in CSS to disable the menu, but that doesn't work. I tried rerunning sfMenu() on resize (code not shown above), but it doesn't seem to inspect the changed DOM, realise pagesize_1 no longer exists, then fail gracefully (which I think would achieve the effect I'm after).
Any thoughts? Ideally I'd like to destroy the superfish function on resize-to-mobile, then re-instate it when the screen is large again.
SuperFish has a 'destroy' method (certainly in latest 1.7.3 version) that you could call depending on screen size to disable it and then re-style the navigation using CSS media queries. You could also then call the 'init' method of SuperFish when you wanted to enable it again:
var sf, body;
var breakpoint = 600;
jQuery(document).ready(function($) {
body = $('body');
sf = $('ul.sf-menu');
if(body.width() >= breakpoint) {
// enable superfish when the page first loads if we're on desktop
sf.superfish();
}
$(window).resize(function() {
if(body.width() >= breakpoint && !sf.hasClass('sf-js-enabled')) {
// you only want SuperFish to be re-enabled once (sf.hasClass)
sf.superfish('init');
} else if(body.width() < breakpoint) {
// smaller screen, disable SuperFish
sf.superfish('destroy');
}
});
});
This should hopefully explain what I'm talking about :)
http://cdpn.io/jFBtw
I've been playing around with the same thing, going from horizontal nav-bar style (window wider than subnav) to vertical drop-down style (subnav wider than window) to just plain-ol-list (main nav wider than window).
Not sure how elegant it is, but in the end unbind() and removeAttr('style') disabled the dropdowns for me:
$(window).resize(function() {
if ($(this).width() < maxNavigationWidth) {
$('#neck .navigation').removeClass('sf-menu');
$('.navigation li').unbind();
$('.navigation li ul').removeAttr('style');
} else {
$('#neck .navigation').addClass('sf-menu').addClass('sf-js-enabled');
applySuperfish();
}
});

Categories