I have fullpage.js working perfectly as I want it to. Also already got my header to be sticky. It starts transparent and when you scroll its background turns white. Thing is that when I enable fullpage.js it is as if the header was not detecting any scroll and therefore even though it stays sticky the background color does not change.
I have tested various settings to see if they work but none have yet worked. Im completely new to coding.
jQuery(document).ready(function($) {
$('#fullpage').fullpage({
//options here
scrollingSpeed: 1000,
autoScrolling: true,
navigation: true,
slidesNavigation: true,
css3: false,
fitToSection: true,
fitToSectionDelay: 0,
scrollBar: false,
lazyLoading: true,
menu: true
});
//methods
$.fn.fullpage.setAllowScrolling(true);
$("#navigation").sticky({topSpacing:0}).css({'background':'#000'});
});
I want that when the fullpage.js scrolls the header changes color. It currently does not detect any scrolling. Im sorry if this is too basic. Im just trying to learn and thanks!
As detailed in the fullPage.js FAQs you'll need to use scrollBar:true or autoScrolling:false if you want to rely on the scroll event.
Otherwise, you should be using fullPage.js callbacks or state classes to deal with those changes of state.
You can check my video tutorial regarding how to use the fullpage.js state classes to trigger changes in state.
Related
It appears that if a RadListView swipe action is disabled then it simply disappears from the swipe actions list, although the action's space is still consumed. It's as if both the color and backgroundColor properties were set to white.
Is there a way to control this? I tried several :disabled css options but none seem to take effect.
OK, so this underscores why it's useful to post the code in question - my bad. I noticed I had spelled the css color "grey" instead of "gray". Now the styling is being applied as expected.
KendoUI version 2013.3.1119
Using Kendo MVVM
I have a color selector that I have build that uses a flat color picker and a color picker using a palette. They both function correctly but the layout of the flat color picker is off where the track for the slider does not render to the appropriate width.
If the flatcolorpicker is loaded directly in a page and not in a kendo window it renders correctly.
There are not any special settings I am applying.
<div id="flatColorPicker"
data-role="flatcolorpicker"
data-bind="value: colorPaletteValue, enabled: enableColorSelection, events: { change: colorPaletteChange }">
</div>
What I have tried
Removed all other html around it, same result within the window.
Tried to forcefully set the size of the track.
Used Chrome dev tools to manipulate the CSS.
Stepped through the Kendo UI javascript to see where it renders initially.
What worked, but not a resolution
Manually re-size the window using the mouse after initial load, it then corrects itself.
Has anyone else experienced this or has any other ideas to try?
KendoUI Window settings:
{
title: "Set Color",
resizable: false,
draggable: false,
width: 550,
height: 300,
actions: ["Close"]
}
Ran in to the same issue:
I don't know if this will fix it for you, but I fixed it by making sure the picker's container element was visible before instantiating it. My code used to look like:
$picker.kendoFlatColorPicker({
// config
})
$container.show(); // $container contains the $picker
Turns out if I just reverse the order it started working:
$container.show(); // $container contains the $picker
$picker.kendoFlatColorPicker({
// config
})
I'm trying to use the 'up' and 'down' buttons for 'longClick' in a scrollable Card. First, I created the Card and set scrollable to true
var main = new UI.Card({
title: '',
subtitle: '',
body: '',
scrollable: true
});
As stated in the pebble.js documentation: "When true, the up and down button will scroll the content of this Card" http://pebble.github.io/pebblejs/#window
But is there anyway to still use the up and down button in a longClick event such as:
main.on('longClick','down', function(){
console.log('long click');
});
I've tried testing it and making a Card scrollable basically sets up and down to only scroll.
The scroll in Pebble.js windows is Pebble OS's standard scroll. It is able to do a continuous scroll when the button is held down, so long clicks are also inaccessible.
When it comes to displaying huge amounts of texts, having a second window similar to the Pebble's Notification modal window when a notification comes in should help. So if you need to display a huge amount of text, have a second card animate in that shows the large body of text. You can bind the second card's select button to hide the window for the user's convenience, even though back will already back the user out.
I should update the documentation to also note that longClick up and down are also inaccessible when scrollable is enabled, thanks for pointing that out!
The new mini-site for iPhone 5s has a special page scroll:
http://www.apple.com/iphone-5s/
Every time you flick the page, it glides and stops at the next full page, not halfway, and not any more than required. How do they do it?
I had to do a similar site and I created a plugin for it:
http://alvarotrigo.com/blog/fullpage-jquery-plugin-for-fullscreen-scrolling-websites/
Living demo
In mine you can also:
Use it over IE 8 and old browsers with no CSS 3 support.
Slide throw the page using the keyboard arrows.
Add horizontal sliders.
Resize of texts when resizing the window.
Mobile and Tablet detection enabling the scrolling on them. (as there are usually problems to visualize big contents and texts)
It is in its first version, simple but working well :)
I will keep improving it as far as I can. Suggestions will be more than welcome.
OnePageScroll may be what you're looking for: http://www.onextrapixel.com/2013/09/18/onepagescroll-js-creating-an-apples-iphone-5s-website/
I've been fiddling with a solution to a similar problem.
All my solution does is monitor when the window scrolls.
if ($(window).scrollTop()+$(window).height()>=$("#page"+(nextpage)).offset().top+100) {
If it scrolls past the end of the "page" by more than 50px jquery animates the scroll to the next "page".
$('html, body').animate({ scrollTop: pageheight }, 500, function() { currentpage = nextpage; animatingdown = false; document.location.hash = currentpage;});
It does the same for scrolling up. This covers scrolling by mouse, keyboard or javascript.
Check out the full code at http://jsfiddle.net/dLCwC/1/
Maybe it'll be of some use to someone (let me know if it is, or isn't).
Im using the latest iscroll script for a site viewed on an ipad. It works but you have to pressed down and scroll slowly for it to scroll properly. Is there anything I can change in the iscroll script or settings that would allow for better sensitivity to the touch and the scrolling itself is faster?
It is a bit hard to really suggest the solution. But here are some pointers.
Attach the global touchmove event (and prevent defaultbehavior).
document.attachEvent('touchmove', function(e) { e.preventDefault(); }, false);
Keep the html elements inside the scroller to a minimum.
You can add -webkit-transform: translate3d(0,0,0) to force the elements through the hardware acceleraion.