I developed a website with fullpage.js and everything seems to work ok
but on mobile it seems that it gets triggered the slide change event when the bottom or top of next slide hits the center of the viewport.
How can I trigger this action earlier like at 1/3 from bottom or top of the viewport?
$('#fullpage').fullpage({
licenseKey: '*****',
css3: true,
scrollingSpeed: 1100,
scrollBar: false,
scrollOverflow: true,
anchors:['s00','s01','s02','s03','s04','s05'],
animateAnchor: true,
responsiveWidth: 992
});
Related
I recently upgraded my jqGrid from an older version (4.4.5) up to (4.13.4-pre)
"autowidth": false,
"shrinkToFit": true,
"loadonce": true,
"scroll": 1,
FWIW - I'm using it inside a paneled layout (acheived via jQuery UI Layout )
Everything works great, both versions initially load up my data and display nicely - no need to change my startup grid options or colModel etc..
However, if I hover my mouse over the data region and use the wheel to start scrolling through the data, eventually the 4.13.4 version of the jqGrid will flicker or refresh to build up the next page of data and that's when it introduced the undesired scrollbar state shown here:
I have some resizing logic already in place so that when the parent panel is resized, the grid snaps into correct position - same for when the user resized the window. All of that functions just as well on both versions of jqGrid -
Just wondering if there was something I missed in the meantime - I feel like I've uncovered a bug, however.
UPDATE
I've been able to isolate the jqGrid control from the aforementioned jquery UI Layout scripts. The bad behavior persists.
When the page is finished loading, I call a script like this to "patch up" the width and size of my jqGrid so it fits inside a desired parent DIV:
function patchUpJQGrid_FitInParentDiv() {
var newWidth, newHeight, myGridCtrl;
myGridCtrl = $("#mainGridControl");
newWidth = $("#parentMainGridDiv").width() - 50;
newHeight = $("#parentMainGridDiv").height() - 50;
myGridCtrl.jqGrid('setGridWidth', newWidth, false);
myGridCtrl.jqGrid('setGridHeight', newHeight);
}
window.setTimeout(patchUpJQGrid_FitInParentDiv, 5000);//ensure jqGrid correctly sized
Thus, after the above script runs, the UI is all set and sized correctly.. but then you begin scrolling (either with mouse wheel or using scroll bar) and eventually the grid width disregards what was initially instructed via 'setGridWidth' and now the parent DIV is essentially masking or eclipsing the vertical scrollbar that you need if you want to continue scrolling..
SOLUTION
See the accepted answer below for more details. I'd like to mention that these add'l options (copied from another Oleg answer) are helping me acheive what I want in my jqGrid instances (see updated jsfiddle demo)
cmTemplate: { autoResizable: true },
autoResizing: { compact: true },
autoresizeOnLoad: true
Some jqGrid options, which you use in jqGrid are wrong in case of usage scroll: 1. You fixed the problems in old jqGrid by usage patchUpJQGrid_FitInParentDiv. To make the code working in free jqGrid you need just fix the original options of jqGrid.
The main problem in the options is the usage of height: 'auto' and specifying of no width options. It's wrong if you use scroll: 1. One should specify any fixed values for height and width options. You can modify the values later, but the initial values are very important and there modifies the behavior of resizing.
What you need to do is to change the options
...
pager: '#pager1',
altRows: true,
altclass: 'myAltRowClass',
rownumbers: true,
gridview: true,
rowNum: 50,
rowList: [50, 100, 250],
height: 'auto',
caption: "Test Queue",
scrollOffset: 2,
viewrecords: true,
sortorder: 'desc',
}
to
pager: '#pager1',
altRows: true,
altclass: 'myAltRowClass',
rownumbers: true,
gridview: true,
//rowNum: 50,
//rowList: [50, 100, 250],
//height: 'auto',
width: 450,
height: 404,
caption: "Test Queue",
//scrollOffset: 2,
viewrecords: true
//sortorder: 'desc',
}
After the changes one can remove the call of patchUpJQGrid_FitInParentDiv because it's no more required.
I want to stress that the above changes are strictly recommended event for the old jqGrid versions. The changes are required for free jqGrid.
I have a website where I am using several lightboxes on it. It works everywhere really good, also in IE7 :), but in mobile it doesn't show the close button.
My code is the following:
$(".fancybox").fancybox({
beforeShow:function(){
$('html, body').unbind("mousewheel", horizontalScroll);
},
'arrows':true,
'overlayShow': true,
'autoScale': true,
'autoDimensions': false,
'modal': true,
'autoSize' : false,
'width' : '90%',
'showCloseButton' : true,
'hideOnOverlayClick':true,
'keys': {
"next": [13, 32, 34, 39], // enter, space, page down, right arrow, down arrow
"prev": [8, 33, 37] // backspace, page up, left arrow, up arrow
},
afterShow : function() {
$('.fancybox-skin').append('<a title="Close" class="fancybox-item fancybox-close" href="javascript:jQuery.fancybox.close();"></a>');
},
afterClose : function() {
$('html, body').bind("mousewheel", horizontalScroll);
}
});
The website is: http://ahnenwand.hiltl.ch but not all of the pictures are linked to a lightbox. Click on the plus sign, from topleft go 3 to the right and 8 down and there is a image that opens a lightbox to test it.
I don't have any JS mistake and the sprite is also loading. On the topright corner of the lightbox (on mobile) is the area where I can click to close it, but the close button doesn't show up.
Here is a little fiddle, also here the close button doesn't show up on mobile (it works only once then it must be reloaded - sorry)
http://jsfiddle.net/bauralex/f2sx36gz/16/
I hope anyone has an Idea what could be wrong here
Thank you very much
Alex
I have the same problem with a nonmodal box (V 2.1.5). As I found out, the code for the close button is missing in the mobile context, and referencing the background-image doesn't work. My solution was to make the changes via the afterLoad callback:
afterLoad:function(curr, prev) {
if(!jQuery('a.fancybox-close').length) {
jQuery('.fancybox-outer').after('<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>');
jQuery('.fancybox-close').css('background-image','url(/js/fancybox2/fancybox_sprite.png)');
}
}
Make sure to adjust path to the fancybox_sprite.png in your environment.
I have a div with images scrolling throw responsive slides and next to this div I have navigation buttons to change pages.
I need that buttons to be centered vertically with the images and I have a function to do it:
function CenterArrow()
{
var posV=($("#slider1").height() - $("#navegacao").height())/2;
$("#navegacao").addClass(" visible-lg visible-md");
$("#navegacao").css('top',posV+'px');
}
$(function()
{
$("#slider1").responsiveSlides({
maxwidth: 400,
speed: 800,
timeout: 4000,
after: function(){
CenterArrow();
}
});
$("#slider1").show();
});
In the responsive slides there is an adjust of some image's height, so I need to call CenterArrow after resposive slides.
I tried to put it in the after callback, as you can see in the code above, but in the first slide the navigation buttons don't show.
I've also tried in the before callbakc, and although it shows a few seconds earlier it still doesn't show in the first slide.
Is there a ready callback, or something similar?
Thanks
I'm using the animation below to slide my toolbar up and it slides up, but it doesn't stay. It slides back to its original position. Is this normal behavior?......if so do I have to explicitly set the new top value for the toolbar? Also in my toolbar config , I specify: top: 1536.
Code:
Ext.Anim.run(toolbar,'slide',{
direction: 'up',
duration: 1000,
from:{top:1536},
to:{top:1432}
});
Try this. It should work
Ext.Animator.run({
element: toolbar,
duration: 1000,
easing: 'ease-in',
preserveEndState: true,
from: {top:1536},
to: {top:1432}
});
I have a draggable YUI Panel defined like this
new YAHOO.widget.Panel("parameters", {
fixedcenter: true,
constraintoviewport: true,
underlay: "shadow",
visible: false,
close: true,
draggable: true,
width: "350px" });
When the panel is shown, I want it to remain always visible, even when the window is scrolled.
This is also the case, thanks to fixedcenter: true. The problem is that when the window is scrolled the panel positions itself to the center of the window even if it was dragged somewhere else previously.
How should I modify the above definition so that the position of the panel remains constant relative to the window when the window is scrolled?
Wrap your panel container in a wrapper element that has fixed positioning, e.g.
<div id="wrapper" style="position: fixed">
<div id="parameters">
<div class="hd">Header</div>
<div class="bd">Hello, this is my awesome panel.</div>
<div class="ft">Footer</div>
</div>
</div>
Construct your panel without the fixedcenter configuration property, and center the panel immediately after you render it, e.g.
var panel = new YAHOO.widget.Panel("parameters", {
constraintoviewport: true,
underlay: "shadow",
visible: false,
close: true,
draggable: true,
width: "350px"
});
panel.render();
panel.center();
The panel should now stay in the same position when the window is scrolled. I only tested this in Firefox 3.0 and Internet Explorer 7 and 8.
I've posted the source of a self-contained example that will demonstrate this working.
As per the documentation, set the fixedcenter to:
"contained" To enable fixed center positioning, as with the true
option. However, unlike setting the property to true, when the
property is set to "contained", if the overlay is too big for the
viewport, it will not get automatically centered when the user scrolls
or resizes the window (until the window is large enough to contain the
overlay). This is useful in cases where the Overlay has both header
and footer UI controls which the user may need to access.
http://developer.yahoo.com/yui/docs/YAHOO.widget.Overlay.html