We Keep Coding

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>

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

jQuery UI Layout and Constraining Dialogs to the Central Pane

I am trying to create a full page interface using the excellent jQuery UI Layout plugin.
I want the central pane to hold multiple dialogs and allow them to be contained within that pane. So far so good. However, I also want to be able to drag the dialogs "out of the way", and move them to the right or bottom so that the central pane develops scroll bars and allows the central pane to act as a scrollable desktop for dialog boxes. I want the other pane(s) to be always there for other UI purposes.
HTML:
<div class="ui-layout-center">
<div id="dialog1">dialog 1</div>
<div id="dialog2">dialog 2</div>
</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-west">West</div>
jQuery:
$('body').layout(
{
applyDemoStyles: true,
livePaneResizing : true
});
var dialog1 = $("#dialog1")
.dialog({})
.parent().appendTo( $(".ui-layout-center") );
dialog1.draggable( "option", "containment", $(".ui-layout-center") );
$("#dialog2")
.dialog({})
.parent().appendTo( $(".ui-layout-center") );
As you can see, it almost works, but the scrolling doesn't work horizontally. I've experimented with containing dialog1 but this makes things worse! Perhaps it's just a CSS issue or that combined with a setting. Any ideas?
jsFiddle

The solution turned out to me a case of manipulating the underlying draggable of the dialog box:
$("#dialog2").dialog("widget").draggable(
{
containment : [ 0, 0, 10000, 10000 ],
scroll: true,
scrollSensitivity : 100
});
Obviously, these values can be played with to achieve different results. I hope this helps anyone else in the same position!
jsFiddle

I looked over the documentation and apparently you are able to achieve this with using CSS and changing the overflow value.
http://jsfiddle.net/vnVhE/1/embedded/result/
As you can see the CSS applied is:
// disable scrolling in the other panes
.ui-layout-pane-north ,
.ui-layout-pane-west,
.ui-layout-pane-south {
overflow: hidden !important;
}
.ui-layout-layout-center {
overflow: auto
}
NOTE: Please keep in mind while this allows horizontal scrolling it is a bit tricky and hackish at best in my opinion. Under Chrome I could scroll just fine if I held the mouse near the edge of the vertical scroll bar and it moved properly.

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

jCarouselLite auto-scroll responsive changes

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