We Keep Coding

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.

Getting WOW.js and fullPage.js to work together when not using scrollbar?

So, I'm using the fullPage.js to create a one page style site. I decided I wanted to add some animations, however not having any knowledge of jQuery, I decided to opt for animate.css and WOW.js to go with it.
As I understand, however, fullPage.js removes the scrollbar and so WOW.js can't see when I've scrolled past a point. so I used
scrollBar: true
and
body,html{
overflow: hidden !important;
}
to remove the scrollbar. This method works, however for some reason the animation when I'm scrolling to the first section (top of the page) is gone. I still get the animation when scrolling down. How can I fix this? (GIF: http://i.imgur.com/pom46OF.gifv)
EDIT: here's the site by the way - https://farooq.gq/portfolio/#top

The anchor option seems to mess with animations, remove it. And also make sure you initialize wow on section or slide leave:
JS:
$(document).ready(function() {
$('#fullpage').fullpage({
'navigation': true,
'navigationPosition': 'right',
navigationTooltips: ['Top', 'Who Am I?'],
scrollBar: true,
onLeave: function(){
new WOW().init();
}
});
});
Codepen: http://codepen.io/leonlaci/pen/WxoNqN

Owl carousel customised image preview pagination not working

I am taking a look at this neat creation by Yunus Gaziev but there is one major problem with it - the pagination is removed as soon as you adjust the viewport, which seems to be caused by Owl, and I do not know why.
var owl;
$(document).ready(function() {
owl = $("#owl-demo");
owl.owlCarousel({
navigation: false,
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,
afterInit: afterOWLinit
});
function afterOWLinit() {
...
}
});

I have tried debug the javascript but could not find the cause. I do think that this pagination is not recreating on the changes of viewport in owl.carousel.js
This is where it tries to recreate the pagination
base.updatePagination();
base.checkNavigation();
Check it out. I hope this will help you and others to find the root cause.

The problem was that the owlCarousel initialiser needed to have afterUpdate: afterOWLinit declared so that whenever the viewport was resized, it would fire the customised pagination script again.
I have refactored the existing code thoroughly, an example may be viewed here - my version can be cloned from here.

Carousel inside tabs

I have 4 tabs, each containing a carousel. The problem is that only the carousel in the first tab works fine. If you activate the second tabs, the carousel divs are all collapsed.
Here is an example with bootstrap 3 tabs and 'slick' plugin for the carousel: http://www.example.design-way.ro/
I tried multiple tabbing scripts and it's the same problem no matter what I use.
The carousel works fine in the second tab if you try to move it a bit..then it somehow activates.
Is this a plugin initialization problem? Here's how I do it:
$('.carousel').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
arrows: true
});
Please give me some solution or idea to get this carousel working properly. I tried tweaking the css but I got no result.

I have meet this issue When have 3 tabs, each containing a carousel.
PROBLEM:
The problem is that only the carousel in the first tab works fine.
If you activate the second tabs, the carousel divs are all collapsed.
SOLUTION:
After mail to auther of script for help. We have the resolve:
Moved all CSS files first, followed by all js files
Started javascript of Carousel first and Tabs next
For my sample has used script from:
+ TABs script: Simple-Tabbed-Content-Slider-Plugin-For-jQuery-tabbedcontent
demo: http://www.racotecnic.com/tutorials/tabbedcontent/demo.html
download: http://www.jqueryscript.net/demo/Simple-Tabbed-Content-Slider-Plugin-For-jQuery-tabbedcontent/#tab-1
+ Carousel script: als.musings.it

I'm not familiar with the tabs plugin you used, but you should enable carousel only on active (and visible) tabs only (you should have a callback for tab switching)

I also faced the same problem. The best ever solution I have found in this: http://jsfiddle.net/phpdeveloperrahul/bejFM/
Not only that. bxSlider offers a lot of options those are easy to understand and use. Some of the options I am mentioning in the following section:
mode: 'horizontal',
auto: true,
autoControls: true,
pause: 2000,
maxSlides: 4,
minSlides: 1,
controls: true,
infiniteLoop: true,
moveSlideQty: 1,
slideWidth: 200,
responsive: true,
Hope this will fulfill your need.

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