I have 5 fullpage sections and scrolling set by whole sections. Everything works fine.
But i need, if visitor is on 4th section and scrolls down, that web not scroll down to last section. I want access to this last section only by click on button in 4th section. This button is done and functional, but i dont now, how to disable automatic scrolling to last section.
Thanks for any idea!
You can disable the scrolling in the last section by using the method
fullpage_api.setAllowScrolling(false, 'down');
More about it on the docs:
https://github.com/alvarotrigo/fullPage.js#setallowscrollingboolean-directions
So, you can use it on a callback such as afterLoad:
afterLoad: function(origin, destination, direction){
var numSections = document.querySelectorAll('.fp-section').length;
// Is the afterload firing for the last section?
if(destination.index === numSections -1){
fullpage_api.setAllowScrolling(false, 'down');
}
// for all other sections, we enable scrolling again in case it was off
else{
fullpage_api.setAllowScrolling(true, 'down');
}
}
Then on the button you can use the method moveTo:
//moving to section 4
fullpage_api.moveTo(4)
More about the method on the docs:
https://github.com/alvarotrigo/fullPage.js#movetosection-slide
Related
I have a number of Panels which, when expanded, show the corresponding questions for that particular 'Category'
The issue I have is, say for example I answer the questions for the 1st panel, the content will scroll down, eventually hiding the panel... fair enough.
However, when I click on the Next Category (Production Area), I need to the page to scroll back up to the first question in the Category, or maybe even just display the selected category at the top of the page.
Is this possible?
Currently, the user has to continually scroll back if when they select the next Category.
You can achieve it using scrollToElement()
var oPage = sap.ui.getCore().byId("pageId"); // you page ID
var oList = sap.ui.getCore().byId("ListId"); // element ID to which it has to scroll
if (oPage && oList) oPage.scrollToElement(oList, 1000);
Execute the above code inside the panel event expand.
you can try to use this control instead which suits your needs
https://sapui5.hana.ondemand.com/#/entity/sap.uxap.ObjectPageLayout
After trying everything, this is what worked for me.
onExpand: function (oEvent) {
if (oEvent.getParameters().expand) {
var focusID = oEvent.getParameter("id");
var elmnt = sap.ui.getCore().byId(focusID);
elmnt.getDomRef().scrollIntoView(true);
jsfiddle: http://jsbin.com/wamunoside/1/edit?html,output
jsfiddle
This is taken from the example given on the Bootstrap 4 docs site:
just adding a 2nd dropdown to this example below the 1st dropdown found here:
https://v4-alpha.getbootstrap.com/components/navbar/#navbarNavDropdown
So in the jsfiddle this is how you cause the issue:
1.) reduce the width of the output tab so that it shows the menu for mobile (991px or less)
2.) You will see two 'dropdown link', click on the top one which expands the submenu.
3.) click on the other 'dropdown link' below the currently expanded one.
Notice both dropdowns are now closed - should have opened the 2nd dropdown.
ended up issue being my code...
I added the following if event.type == "mouseleave" and that seems to have fixed the issue reasonably well, still not perfect (for desktop):
http://jsbin.com/yiyohatequ/edit?html,css,js,output
I'm basically struggling with the best way to get dropdown-menu to appear 'on hover' for desktop and dropdown to appear 'on click' for tablet/mobile. so that is why I wrote this code in the 1st place.
/* Prevent more than 1 dropdown showing up at once*/
$('.nav-link').hover(function (event) {
//breaks mobile if this fires on "mouseenter". so only fire on "mouseleave"
if (event.type == "mouseleave") {
var hovered = this.nextElementSibling;//.dropdown-menu
var navdropdowns = $('.dropdown-menu');
navdropdowns.each(function (a, b) {
if (hovered != b) {
$(b).removeClass('show');
}
});
}
})
In RadListView, is it possible to scroll to a specific y-position.
The problem is if I navigate to another page from a RadListView page and then come back - it initializes to the top of the listview. I would prefer to the same y position the user was at before navigating to another page.
I think there's a scroll-to-item method - but that's not necessarily the same y position.
You can cache your index using observable ViewModel and pass it when needed (in this case on the loaded event for your list - that is when the users will return back to the list page and the list will load)
e.g. TypeScript
page.ts
export function onListLoaded(args: RadListwModule.ListViewEventData) {
list = <RadListwModule.RadListView>args.object;
if (list.items) {
list.scrollToIndex(roversViewModel.get("cachedIndex"));
}
list.refresh();
}
export function onItemTap(args: RadListwModule.ListViewEventData) {
var tappedItemIndex = args.itemIndex;
// "cache" the index of our tapped item
roversViewModel.set("cachedIndex", tappedItemIndex);
// navigate to details page or do what you want to do on itemTap
frame.topmost().navigate(navEntry);
}
page.xml
<lv:RadListView items="{{ dataItems }}" loaded="onListLoaded" itemTap="onItemTap">
Also give your cachedIndex initial value of 0 for the first time the list is loaded.
Example based on this POC app .
Note that is not exactly the same as scroll-to-the-exact-y-position but you can modify the logic and scroll further to the exact position with getting the cells relative position offset.
I have created a Slider Control and an Edit Control that are linked, so that moving the slider changes the edit box's text, and manually editing the text moves the slider. For the most part it works but after I release the mouse button when dragging the Slider, the Edit Control shows 0. While I'm dragging it does show the correct value.
I can partially fix the problem by adding an if(nPos != 0) clause, which stops that happening. However when I click to move the Slider rather than drag, the Edit Control doesn't update.
Do I need a different handler for when the Slider is clicked rather than dragged? Or am I doing something wrong?
// Updates slider when value is changed in the Edit Box
void CProject1Dlg::OnChangeEdit1() {
SLIDER_1.SetPos(GetDlgItemInt(IDC_EDIT1) / 1000);
}
// Slider horizontal scroll handler
void CProject1Dlg::OnHScroll(UINT nSBCode, UINT nPos, CScrollBar* pScrollBar)
{
if (nPos != 0) {
SetDlgItemInt(IDC_EDIT1, nPos * 1000);
}
CDialogEx::OnHScroll(nSBCode, nPos, pScrollBar);
}
What happens if you try extracting the position of the slider directly with GetPos rather than using the nPos parameter?
This seems like a really easy question, but I can't seem to find the answer.
Now that toggle() is deprecated for click events, how would I have say a button add DOM elements on the first click, then remove those same DOM elements on the second click?
Also.... how do I remove contents from a div I have inserted content into (using load()) without removing the div itself? Using remove() removes the div.
use empty() to clear an elements inner html
As for the toggle issue, you can toggle a class on the element and test for that class:
$('#myDiv').on('click', function(){
if(! $(this).hasClass('clicked') ){
/* code for first click*/
}else{
/* code for second click*/
}
$(this).toggleClass('clicked')
})
your click would first check for the presence of the dom elements that get added (use an id perhaps).
if $('div#id of the stuff you add')
$('element exists...').remove();
else
$('div#id of where you want to add stuff').add( new code );
You can clear a div contents with:
divSomeDiv.html("");
or
divSomeDiv.empty();