Disabling a jQuery script in HTML for a specific window width - javascript

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>

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.

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

Jquery Fancybox draggable issue with Scrollbars

I am using a fancybox with plugin jquery.easydrag.js. The reason for this is to be able to drag the fancybox around.
It seems to be working fine, but the problem comes when the fancybox has scrollbars. I.e. for example when clicking on submit and not entering any fields the valdidation on screen causes scrollbars. Which is fine normally but the scrollbars causes all sorts of issues with the draggable feature so that when I am trying to click the scrollbar up and down, it actually moves the entire windows. So it seems to be confused as to what content can be moved and what to do with a scrollbar.
claimLink.fancybox({
'width': 500,
'height': 590,
'autoDimensions': false,
'onCleanup': function (e) {
var modelClaimFormId = $j(e).attr("href").replace("body", "");
var modalClaimForm = $j(modelClaimFormId);
if (!($j(modalClaimForm).valid())) {
$j(claimForm).remove();
$j(e).parents("tr").remove();
}
}
});
$j("#fancybox-wrap").easydrag(true);
EDIT :
I managed to add something for input and textareas to ignore the scrolling see below...just wondering what I can do for scrollbars.
$j("#fancybox-wrap").easydrag(true);
$j("#fancybox-wrap input,textarea").click(function(){
$j("#fancybox-wrap").dragOff();
});
$j("#fancybox-wrap input,textarea").mouseover(function () {
$j("#fancybox-wrap").dragOff();
});
$j("#fancybox-wrap input,textarea").blur(function () {
$j("#fancybox-wrap").dragOn();
});
$j("#fancybox-wrap input,textarea").mouseout(function () {
$j("#fancybox-wrap").dragOn();
});
This is the link to JS for easydrag plugin
I posted the first example about how to make fancybox draggable back in 2009 for v1.2.1. Then I posted some notes to make it work with v1.3.1 as seen here but when fancybox v1.3.4 was introduced, the easyDrag plugin was not working as smooth as with the previous versions and started behaving buggy. I didn't have the time to find a workaround ... so I just drop it.
The solution was simple though: the easyDrag plugin provides a way to set a "handler" as explained here so instead of holding and dragging the whole #fancybox-wrap container, which blocks access to the scroll bars if any, you just drag the lightbox from a specific defined element. Such handler can be appended to #fancybox-wrap selector and set it within the EasyDrag plugin using the onComplete callback API option like:
'onComplete': function(){
// append the handler on the top-left corner of fancybox
$("#fancybox-wrap").append("<button id='handler'>Drag me</button>");
// set the handler using the handler's element ID
$("#fancybox-wrap").setHandler('handler');
}
Notice that you can use any element as handler, in my example I used a html button but you may use an image if preferred. The important thing is to assign the minimum important css properties to the handler so it can be appended to the #fancybox-wrap container without issue like:
width: 80px; /* or whatever needed */
height: 24px;
position: absolute; /* important to position the handler into the fancybox wrap */
top: 0; /* top-left corner of the box but can be anywhere */
left: 0;
display: block;
z-index: 1120; /* important to be over the box */
other properties can be cosmetic.
See it working here!!!
Once you complete and submit the form, the response will be a new fancybox with scroll bars that you can use independently from the easyDrag handler.
Please feel free to analyze the code and customize it to your own needs (and don't forget to grant me the bounty ;)
UPDATE: Notice that since we are appending the handler to the #fancybox-wrap container every time we fire fancybox, then we need to remove it once we close fancybox using the onClosed callback, otherwise we will duplicate the handler if we open fancybox again with unexpected results:
'onClosed' : function() {
$("#fancybox-wrap #handler").remove();
}
I updated my DEMO too.
LAST NOTE: This solution is for fancybox v1.3.4.
I haven't tested it with v2.x but I don't see why it wouldn't work. Just make sure that you bind EasyDrag and append the handler to the .fancybox-wrap selector instead
$(".fancybox-wrap").easydrag();
You may use the afterShow callback to append the handler to it and afterClose to remove it.
Using the above solution to add a handler for the #fancybox-wrap selector along with the EasyDrag plugin using the onComplete callback API, I found this works nicely with the fancybox 1.3.4 title element to create a dragable fancybox with scroll functionality. Using the title, there is no need to remove it after close.
<script type="text/javascript" src="#Url.Content("~/fancybox/jquery.mousewheel-3.0.4.pack.js")"></script>
<script type="text/javascript" src="#Url.Content("~/fancybox/jquery.fancybox-1.3.4.pack.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.easydrag.handler.beta2.js")" type="text/javascript"></script>
<script>
//Fancybox
$(document).ready(function () {
$("#iframeVideoPop").fancybox({
'width': 890,
'height': 595,
'type': 'iframe',
'autoScale': 'false',
'hideOnContentClick': false,
'onComplete': function() {
//Style the title where and how you want it
$("#fancybox-title").css({'top':'-20px', 'bottom':'auto'});
//Set the fancybox-title as the handler
$("#fancybox-wrap").setHandler('fancybox-title');
}
});
$("#fancybox-wrap").easydrag();
}); //ready
<script>
In order to eliminate the scrollbar problem caused by combining Easydrag with Fancybox, you'll need to eliminate the scrollbars. By default, the Fancybox CSS stylesheet applies the overflow:auto rule to the element -- generated by Fancybox -- that wraps around the content displayed inside the Fancybox.
To override it, include your own CSS rule that supersedes the one that Fancybox applies to the wrapper. Place this style block in the <head> section of your web page:
<style>
/* id of the element generated and used by Fancybox as a wrapper around
the generated content. */
#fancy_ajax {
/* Use the important identifier to ensure the overflow:auto is suppressed */
overflow:none !important;
}
</style>
This will eliminate the scrollbars and allow the easy drag plugin to work smoothly.
After testing these solutions I ran into the problem with dragging an iframe. To resolve, I switched to the jQuery 1.9.1 UI plugin for dragging and created a transparent image while dragging. Remove the image after dragging to access the content. Works great with fancybox iframe and enables fast dragging over the iframe. See sample code below.
$("#iframePop").fancybox({
'width': 890,
'height': 430,
'type': 'iframe',
'autoScale': 'false',
'hideOnContentClick': false,
'onComplete': function() {
$("#fancybox-title").css({'top':'-2px', 'left':'15px', 'bottom':'auto', 'cursor':'move'});
$("#fancybox-wrap" ).draggable({ handle: "fancybox-title", iframeFix: true,
start: function(ev,ui){$("#fancybox-wrap").append("<img src='#Url.Content("~/Content/Images/transparent.png")' id='hidenImg' style='border: 1px solid black; width: 640px; height: 400px; top: 20px; position: absolute; z-index: 10000;' />")},
drag: function(ev,ui){},
stop: function(ev, ui){$("#fancybox-wrap #hidenDiv").remove()}
});
}
});

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