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
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 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)
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();
Unfortunately I am using Joomla on localhost and cannot provide a webpage link.
I have a webpage that navigates through the use of smoothscrolling to anchor links.
The menu is fixed on the left and makes use of simple
top
section1
section2
section3
My problem occurs when i activate any jQuery accordion extension into any of the sections.
(i have downloaded and tried them all)
If i place the accordion in section 1, all page jumps except to section 2 & 3 do not work.
If i place the accordion in section 2, the page anchor to section 3 does not work.
I tried removing the return false; to no avail:
jQuery(document).ready( function () {
//Set default open/close settings
jQuery('.xac-container').hide(); //Hide/close all containers
jQuery('.xac-trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container
//On Click
jQuery('.xac-trigger').click(function(){
if( jQuery(this).next().is(':hidden') ) { //If immediate next container is closed...
jQuery('.xac-trigger').removeClass('active').next().slideUp(); //Remove all "active" state and slide up the immediate next container
jQuery(this).toggleClass('active').next().slideDown(); //Add "active" state to clicked trigger and slide down the immediate next container
}
else{
jQuery('.xac-trigger').removeClass('active');
jQuery(this).next().slideUp();
}
// return false; //Prevent the browser jump to the link anchor
});
});
I saw some CSS tutorials to make the accordion but it create pagejumps for each accordion item that is clicked, and it adds unnecessarily to the browser history.
I hope I am being clear enough. It seemed like it would be a common problem but my lengthy search was fruitless.
Right answer from Lodder's comment.
I had loaded multiple jQuery libraries.
Be wary of copy-pasting random code.