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' })
)
}
Related
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)
I'm having an issue with Fancybox scrolling the underlying page to it's top as soon as the modal window opens. When it closes it doesn't return to where the user was either. It forces the user to have to scroll back down the page to the point they left off.
Any insights?
In jquery.fancybox.css > fancybox-lock...
Change...
overflow: hidden !important;
to...
overflow: visible !important;
To fix it here I used a built in helper function, this is how I set it up now:
$(".fancybox").fancybox({
helpers: {
overlay: {
locked: false
}
}
});
I had same problem when opened fancybox content was iframe. I found out that there was some JS (in my page, loaded into iframe) containing .focus() directive. Removing this, bug was fixed...
The Like button plugin doesn't appear, if one of its containers is display:none when the page loads, and made visible later with display:block.
Problem detected in Firefox (my version 15.0.1) only.
What can I do?
when you make the element visible, you should add your fb like plugin to dom
IE
<div id="showfb">mouseoverme</div>
<div style="display:none" id="facebutton"></div>
<script>
var fbbutton = document.getElementById("facebutton");
document.getElementById("showfb").onmouseover = function(){
// first visible
fbbutton.style.display='block';
// then add fb html5
fbbutton.innerHTML = '<div class="fb-like" ......... ></div>';
};
</script>
in alternative, try
width:0;height:0;overflow:hidden
instead of
display:none
and
width:auto;height:auto;overflow:visible
instead of
display:block
I don't know what is the reason of this bug (FB or FF), but I've solve that problem by show my element by default in FF only:
#-moz-document url-prefix() {#exe-article-social-tools { display: block; }}
https://developers.facebook.com/docs/reference/javascript/
The fb-root tag
The JavaScript SDK requires the fb-root element to be present in the page.
The fb-root element must not be hidden using display: none or visibility: hidden, or some parts of the SDK will not work properly in Internet Explorer.
It took me an entire day to figure it out, but being logged in on Facebook with a "test user" renders the like button invisible. In my case, I was always logged in with my test user on Firefox, while logged out / logged in with my regular Facebook user in Chrome (and I initially thought this was a browser issue).
However, the solution was as easy as loggin off the test user.
It is specified in the FB docs that not all features are enabled for test users (and the like button is one of those features), but I'd thought that it would at least get rendered.
Anyway, I hope this helps someone.
I had a number of different invisible divs on my page where fb-like buttons was hidden. When one of div shown, no fb-like button appears in it. Solution worked for me is to relaunch FB.init manually each time when invisible div reveals.
FB is a global function being added into your window object since you call for remote facebook api by url like http://connect.facebook.net/en_US/all.js. So since this remote script attached to your DOM you can run something like
FB.init({
appId : '346094915460000', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
You can dynamically add like button html5 code to the DOM and then run the FB parser again to generate the like button:
fbbutton.innerHTML = '<div class="fb-like" ... ></div>';
FB.XFBML.parse();
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