I have a ui-view inside of my page.
When some button is clicked, the ui-view is loaded and replaced by some HTML.
I want the page to be scrolled down to the just-loaded part of the page.
Is this possible?
Thanks in advance
The ui-router module has been updated to scroll to the ui-view by default. You can add the autoscroll="false" attribute on <div ui-view> to prevent this. The default setting is true which scrolls to the ui-view upon state change.
I would think it should be the other way around where you have to set the autoscroll to enable rather than disable but this is the functionality of the updated ui-router.
You can read about it here.
In the linked Github issue, it says that the default value is autoscroll="expr" but I have found that expr does nothing and that the default value is autoscroll="true" (which makes more sense).
On Route change it will scroll to the top of the page.
$scope.$on('$routeChangeSuccess', function () {
window.scrollTo(0, 0);
});
put this code on your controller. (Change the value as per your requirements)
Related
I have a standard laravel + inertia + vue3 setup using breeze, and as Inertia docs says, navigation between pages should mimic browser default behavior reseting scroll to top when page loads. But it is not working this way in my case.
I don't have preserveScroll: true in my links but this happens anyway.
I have tried with a vuejs onMounted() hook to scroll to top when component loads, but immediately the page scrolls from top to last scroll position from previous page.
So I've deactivated this hook because its ugly flashing effect.
Any idea on how to solve this?
Thanks in advance.
I think you have to define the scroll region: https://inertiajs.com/scroll-management#scroll-regions
It seems that your app doesn't use document body scrolling.
My css file had a property overscroll-behavior: contain; applied to body tag. Since I removed it, everything is working fine now.
temporary solution
in Layout.vue
mounted(){
Inertia.on('success', () =>
window.scrollTo({ top: 0, left: 0, behavior: 'instant' })
)
}
I'm trying to make a simple app with Playground (https://play.nativescript.org/). I'm using "RadSideDrawer" as a side menu. I'm satisfied. BUT ... every time I use "RadSideDrawer" and I move from one page to another, inside the "ActionBar" a button appears whose function is to bring back to the left page (please have a look at this page https://www.attivitacollaterali.it/appdata/services/apps/RadSideDrawer.html). I don't need and want this button. How can I make it not appear? Thank you.
Or, if not, at least update "RadSideDrawer". I mean that if the button goes back, for example to the "Search" page from the "Home" page, it should highlight/select "Search" in the "RadSideDrawer" menu and not leave "Home". Thanks again.
I think you're looking for the "clearHistory" option while navigating. When navigating to another page, you must do this:
this.router.navigate([url], { clearHistory: true });
Just make sure you're injecting RouterExtensions in your constructor:
constructor(private router: RouterExtensions) {}
That should clear the navigation stack when navigating, thus removing the button to go back to the previous page.
EDIT: If you want to retain the navigation stack, I believe you can also edit your action bar like this:
<ActionBar>
<NavigationButton visibility="collapsed"/>
</ActionBar>
I have a page that collects a set of user comments on the contents of that page. New comments are added to the page by clicking a button and filling out a form that appears via a Bootstrap modal. The results are then inserted into the page via ajax. This is all working fine.
The "results" that are added to the page include another Bootstrap button/link, which looks something like this:
<a tabindex='-1' href='#' class='ajax-modal btn btn-small'
data-target='modal_my-modal' data-backdrop='true'
data-controls-modal='res-modal' data-keyboard='true'
url='/somewhere'>Click me</a>
The link looks and behaves like a button (thanks, Bootstrap!), but, when clicked, doesn't trigger the modal like it's supposed to. However, if I refresh the page in the browser so that this comment, along with the others on the page, are redrawn, the button/link now works fine.
Since the button works when the page is redrawn, I'm assuming that there is some Bootstrap initialization code that runs when the page loads and sets up all the links to do their stuff, and that I need to call this after adding my new button to the page. Is this correct, and, if so, what should I be calling to get the link properly initialized? Thanks!
Short answer: There is indeed a function that gets called when the page is drawn and that sets up the click handlers -- it's my own function that's responsible for setting up the modals. I added a call to that function after the html containing the button/link, and all's well. I'm sure there is a Bootstrap init function that gets called, but calling my own is what was needed.
So I have a page using GalleryView 1.1 here. I like the behaviors just fine except that the left-most item's onclick event won't fire for some reason.
I also grabbed the 2.1 version from the GoogleCode page; the author's page at http://spaceforaname.com/ has gone. So here is a page implementing 2.1.
Since 2.1 has a bunch of behaviors I hate and seems to completely prevent my onclick events I would like to sort out the issue with the left-most item's onclick in the v1 page.
I have read through the code but failed to find what is interfering.
The function looks like this:
$('.myslides').click(function() {
//alert($(this).attr('alt'));
$('#big_pic').attr("src", $(this).attr('alt'));
return false;
});
and the items like this
<li><img src='g/weddings/slides/1.jpg' width='165' height='110' alt='/g/weddings/slides/1_big.jpg' class='myslides'/></li>
I have tried moving the class attribute to the LI, and also adding an anchor around the image and giving it the class but neither of these had a visible effect.
// Edit
The page validates and yes I know the big pics are blurry. Don't have them from GD so did best I could stretching thumbs.
Does anyone have an idea of how I should pursue debugging this?
So when inspecting the elements in question I found that the working thumbnails were all image elements but the non working first thumbnail was a div with id "pointer".
Since the author's site with the docs has evaporated I can say what function #pointer has in my filmstrip slides but in jquery.galleryview-1.1.js on line 319 I changed its width to 1px in the JS CSS and this resolved the issue of the obstructed onclick. #pointer may have a function I am not employing here. At any rate the issue is resolved.
Width was previously set to
'width':opts.frame_width-pointer_width+'px',
Now set to
pointer.attr('id','pointer').appendTo(j_gallery).css({
'position':'absolute',
'zIndex':'1000',
'cursor':'pointer',
'top':getPos(j_frames[0]).top-(pointer_width/2)+'px',
'left':getPos(j_frames[0]).left-(pointer_width/2)+'px',
'height':opts.frame_height-pointer_width+'px',
'1px',
'border':(has_panels?pointer_width+'px solid '+(opts.nav_theme=='dark'?'black':'white'):'none')
});
Also tried adding display:none but this resulted in jerky animation.
I'm using S5 Accordion Menu on my Joomla site.
http://jalousie.al-soft.ru/o-programme
What I need is to make it not slide down, when I reload page. It needs to work like accordion only when you click on it items, but not when the page reloads.
However it will be great, if it will be possible to save its open state for current page, but without accordion effect when page loads, just load it opened.
Sorry for my english. Let me know if you have any ideas.
Here is the source
http://jalousie.al-soft.ru/modules/mod_s5_accordion_menu/js/s5_accordion_menu.js
if you use the Accordion class that ships with mootols/more/FX just use the initialDisplayFx option to disable the initial animation. Something like the following code should work.
var s5_accordion_menu = new Accordion($('s5_accordion_menu'),
'h3.s5_am_toggler',
'div.s5_accordion_menu_element', {
opacity: true,
allowMultipleOpen: true,
display: s5_am_openElement,
alwaysHide: true,
initialDisplayFx: false
});
The signature of the class you use does not match the "official" one but maybe it is just a wrapper otherwise the answer is not, you can't disable the effect