When I log myScroll.y and myScrollPagesY, I get this:
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', {
snap: 'div',
momentum: false});
console.log(myScroll.y);
console.log(myScroll.pagesY);
}
Output:
0
0, -422, -465
So, the default numerical value is 0, but while I scroll I don't see the number change in the console.
Do I have to somehow incorporate the iScroll refresh(); method to constantly update the Y coordinate?
How would I write an if statement that basically said:
if myScroll.y = a certain number then add the class "selected" to the nav button.
Basically, as you are scrolling down the page I want the nav bar at the top to highlight when you hit a new section.
Thanks in advance!
You can use the onScrollMove-event. Attach a method to this iScroll-property. The first argument is the scrollerobject. Now read the y-value.
function onScrollMove(scroller, e) {
//read scroller.y or scroller.currPageY, or whatever property you want to use :)
};
Related
I have an XML view that contains a TileContainer which is bound to a model that is used to create StandardTiles. The XML snippet is:
<TileContainer id="tilelist" tiles="{Applications}">
<tiles>
<StandardTile name="{ID}" icon="{Icon}" title="{Name}" press="doNavigation" info="{Description}"
number="{path : 'Number', formatter: 'linxas.com.fiori.launchpad.util.Formatter.formatUsingURL'}"
numberUnit="{NumberUnit}"/>
</tiles>
</TileContainer>
This is working perfectly, the correct tiles are getting displayed etc. When I click on a tile, there is navigation that occurs and I want to "remember" which tile was clicked (by index) so when returning I can scroll to that tile. This is done on the tile's press event handler (doNavigation function) and stores the index in sessionStorage. This is also working properly.
doNavigation : function (evt) {
if (sessionStorage && this.getView().byId('tilelist')) {
sessionStorage.setItem("selected_tile", this.getView().byId('tilelist').indexOfTile(evt.getSource()));
}
...
}
The proper value is stored. So when navigating back, within the onAfterRendering function of the page that contains the TileContainer I have the following code. It is attempting to see if there is a "selected_tile" value stored in sessionStorage, if so it calls scollIntoView passing in the tile index. The issue is that this code is executed, but doesn't work and I suspect it is because at the time of calling this function, the TileContainer's tiles aggregation is returning 0 length.
onAfterRendering : function (evt) {
var theList = this.getView().byId("tilelist");
if (sessionStorage && theList) {
var tile_index = sessionStorage.getItem("selected_tile");
console.log(tile_index + " of " + theList.getTiles().length);
if (tile_index) {
theList.scrollIntoView(+tile_index, true);
sessionStorage.removeItem("selected_tile");
}
}
}
My console output looks something like this (based on the tile that was clicked):
5 of 0
Any help would be appreciated. I assume that there is somewhere else that I need to execute this last bit of code as the TileContainer does not seem to be finished processing its tiles at this point, at least that is my assumption of why the tiles aggregation is 0.
Are you using Routing in your project?
If yes, you can try to register a method to handle the routePatternMatched event of the router. This method will be called after the onAfterRendering method - if the proper route pattern is matched.
To achieve this, just create the following:
onInit: function() {
sap.ui.core.UIComponent.getRouterFor(this).getRoute("NameOfYourCurrentRoute").attachPatternMatched(this._routePatternMatched, this);
},
_routePatternMatched: function(oEvent) {
//do your stuff here
},
Hopefully the TileList is ready at this point to navigate to the correct tile.
I need to manipulate the text elements of the first and last tick of an axis to bring them more towards the center.
I am trying to select them, one at the time, with something like svg.select('.tick:last-child text') but it doesn't work. I'd then apply .transform('translate(4,0)')...
Am I doing something wrong? How can I achieve this?
One thing you could do is to create custom sub-selections by adding methods to d3.selection.prototype. You could create a selection.first() method that selects the first item in a selection, and a selection.last() method that selects the last item. For instance:
d3.selection.prototype.first = function() {
return d3.select(this[0][0]);
};
d3.selection.prototype.last = function() {
var last = this.size() - 1;
return d3.select(this[0][last]);
};
This would let you do the following:
var tickLabels = svg.selectAll('.tick text');
tickLabels.first()
.attr('transform','translate(4,0)');
tickLabels.last()
.attr('transform','translate(-4,0)');
Of course, you need to make sure that you only have one axis if you do it that way. Otherwise, specify the axis in your initial selection:
var tickLabels = svg.selectAll('.axis.x .tick text');
HERE is an example.
Here's the cleanest method I've found:
g.selectAll(".tick:first-of-type text").remove();
g.selectAll(".tick:last-of-type text").remove();
As google brought me here, I also want to add a cleaner method to what Adam Grey wrote.
Sometimes you just want to do it without taking a reference of selectAll .
svg.selectAll('.gridlines').filter(function(d, i,list) {
return i === list.length - 1;
}).attr('display', 'none');
the 3rd parameter of the filter function gives you the selected List of elements.
They don't exist in d3 specifically, but you can use the .firstChild and .lastChild methods on a node.
You can first select all of the parents of the node, and then operate within the scope of a .each() method, like so:
d3.selectAll('.myParentElements').each(function(d,i){
var firstChild = this.firstChild,
lastChild = this.lastChild;
//Do stuff with first and last child
});
Within the scope of .each(), this refers to the individual node, which is not wrapped by a d3 selection, so all of the standard methods on a node are available.
Using .filter() with a function also works selection.filter(filter) :
var gridlines;
gridlines = svg.selectAll('.gridlines');
gridlines.filter(function(d, i) {
return i === gridlines.size() - 1;
}).attr('display', 'none');
It's for D3.js v4
d3.selection.prototype.first = function() {
return d3.select(
this.nodes()[0]
);
};
d3.selection.prototype.last = function() {
return d3.select(
this.nodes()[this.size() - 1]
);
};
Example:
var lines = svg.selectAll('line');
lines.first()
.attr('transform','translate(4,0)');
lines.last()
.attr('transform','translate(-4,0)');
Here is another, even though I used Fered's solution for a problem I met.
d3.select(d3.selectAll('*').nodes().reverse()[0])
I am developing iphone application.
need to display 5 records at a time
and when i reached page end then the next 5 records will need to load using automatic scrolling.
initial 5 records display done.
Scroll not working when i reach page end.
Can any one.
I found the solution. my code as follows,
myTable.addEventListener('scroll', function(e){
if (Ti.Platform.osname === 'iphone')
{
var offset = e.contentOffset.y;
var height = e.size.height;
var total = offset + height;
var theEnd = e.contentSize.height;
// this condition will check whether the scroll reach end or not?
if (theEnd == total)
{
//call the function once again.
loadContents();
}
}
});
I hope... some one will use it.
#Suresh.g
You Can use "ScrollView" with property "contentHeight :Ti.UI.Size (or "Auto")".
When you use "ScrollView" it set default height on your requirement.
You can also enable for
showHorizontalScrollIndicator : true,
for more information read this blog
I've created an app that is a set size (around 2,000 px tall) and have a menu that calls FB.Canvas.scrollTo in order to help the user navigate the long page.
Is there any way to add a smooth scrolling effect? Facebook does not offer any solution on its developer blog.
Using #Jonny's method, you can do this a little more simply with
function scrollTo(y){
FB.Canvas.getPageInfo(function(pageInfo){
$({y: pageInfo.scrollTop}).animate(
{y: y},
{duration: 1000, step: function(offset){
FB.Canvas.scrollTo(0, offset);
}
});
});
}
Just had the same problem today - I came up with a little bit of javascript which makes use of jQuery's animate method which provides some easing - the scroll is still a touch jerky (I'm guessing that's because of the FB.Canvas.scrollTo proxy). Anyway, here's the snippet:
function scrollToTop() {
// We must call getPageInfo() async otherwise we will get stale data.
FB.Canvas.getPageInfo(function (pageInfo) {
// The scroll position of your app's iFrame.
var iFrameScrollY = pageInfo.scrollTop;
// The y position of the div you want to scroll up to.
var targetDivY = $('#targetDiv').position().top;
// Only scroll if the user has scrolled the window beneath the target y position.
if (iFrameScrollY > targetDivY) {
var animOptions = {
// This function will be invoked each 'tick' of the animation.
step: function () {
// As we don't have control over the Facebook iFrame we have to ask the Facebook JS API to
// perform the scroll for us.
FB.Canvas.scrollTo(0, this.y);
},
// How long you want the animation to last in ms.
duration: 200
};
// Here we are going to animate the 'y' property of the object from the 'iFrameScrollY' (the current
// scroll position) to the y position of your target div.
$({ y: iFrameScrollY }).animate({ y: targetDivY }, animOptions);
}
});
}
I just used Francis' technique and implemented a jQuery version
$('html,body').animate(
{scrollTop: $(".scroll_to_me").offset().top},
{duration: 1000, step: function(top_offset){
FB.Canvas.scrollTo(0, top_offset + 30);
}
});
You need to replace the .scroll_to_me with the selector you want to scroll to. Also I added in the + 30 to the offset as the iframe doesn't start at the top of the page, you may want to tweak this.
One way of doing it is by getting the current Y position, then getting the to Y position. Run a for loop with a setTimeout that will bring the user to the final Y position.
I would like to have a fixed element (a DIV) in the iFrame for my Facebook Application. So when the user scrolls down the page, that element is still fixed on the top of the browser window?
The basic: You add stuff to a bag, while you are scrolling down, and a fixed DIV will show you your "score" while you add these things to the bag. The "score counter" should always be visible while scrolling.
Thank you!
This is not possible if you are using facebook's iframe auto-resize features. Once the iframe is resized so that scrolling is not necessary, the only scroll available will be the one of the parent window. However, the child iframe has no information about the scroll of the parent window (since they are not on the same domain...) and trying to listen to scroll events or scroll position will only return that the scrollbar is at position 0, or topmost.
You can however listen to click events and extract the offset of the click event or the clicked element.
Some examples:
$('.clickme').click(function(e) {
e.preventDefault();
var top;
// Using click position (e.pageY and e.pageX available)
top = e.pageY;
// Using clicked element position
top = $(this).offset().top;
$('#moveme').css({'top': top - 100 + 'px'}); //
}
Maybe you can base your interaction on this principle instead?
I don't know about you Erik but this really doens not help me much.
Could FB.Canvas.getPageInfo help?
Maybe that would help : I was ussing
(function() {
var el = $("header:first");
var elpos_original = el.offset().top;
$(window).scroll(function(){
var elpos = el.offset().top;
var windowpos = $(window).scrollTop();
var finaldestination = windowpos;
if(windowpos<elpos_original) {
finaldestination = elpos_original;
el.stop().css({'top':0});
} else {
el.stop().animate({'top':finaldestination-elpos_original},0);
}
});
})();