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.
Related
I imagine this is pretty straightforward, but I'm struggling to make sense of how to do it via the documentation...
I've got a tab page, that is opened from a flyout item.
The tabs for this page are dynamically loaded from saved data in the code behind, and all works exactly as expected.
However, in the scenario when there is no saved data (and thus, no tabs) I want to redirect the user to a different page, and crucially, not be able to navigate back to this tab page (but allow going back to the page they were initially on BEFORE they navigated to the tabbed page)
I've got a method in initalize for the tabbed page that, if it doesn't have any saved data, attempts to do this. I started with:
Shell.Current.Navigation.PopAsync();
Shell.Current.GoToAsync(nameof(AddNewDataPage));
which navigated to the add page, but pressing the back button just resulted in the add page being shown again, over and over.
I then tried:
Shell.Current.Navigation.PopToRootAsync();
Shell.Current.GoToAsync(nameof(AddNewDataPage));
which did the same.
So next I went with trying to navigate backwards:
Shell.Current.GoToAsync("../" + nameof(AddNewDataPage));
which showed the right page again, but now the back button doesn't work
Next, I went with trying an absolute route:
Shell.Current.GoToAsync("//HomePage/" + nameof(AddNewDataPage));
which worked... sort of.
The first time the user clicks the flyout for the tabbed page, it all works great. back button takes you to the home page etc... but the second and subsequent times the user clicked the flyout, they navigate to the tabbed page and my LoadData method isn't called.
I assumed this is because the tabbed page is still loaded, so I added:
protected override void OnAppearing()
{
LoadData();
}
Now, when the user clicks the flyout for the second and subsequent times, they navigate to the HomePage page instead of the AddNewDataPage page (an improvement, I guess?)
So, now I'm at a loss.. it seems like this should be really simple, but I can't figure it out.
You can try this.
//route The route hierarchy will be searched for the specified route, upwards from the current position. The matching page will replace the navigation stack.
https://learn.microsoft.com/nl-nl/xamarin/xamarin-forms/app-fundamentals/shell/navigation?WT.mc_id=friends-0000-jamont#relative-routes
await Shell.Current.GoToAsync($"//{nameof(AddNewDataPage)}");
https://www.youtube.com/watch?v=ylbgWHB_gMI&t=703s&ab_channel=JamesMontemagno
An explanation about relative routes.
May I don't understand your problem clearly. But I created a simple with the flyout shell app.
At first, it seems that the construction method of the content page will jut call once which the page shows first time. So I put the following code into it. Such as:
public ItemsPage()
{
InitializeComponent();
BindingContext = _viewModel = new ItemsViewModel();
Shell.Current.Navigation.PopAsync();
Shell.Current.GoToAsync(nameof(NewItemPage));
}
And then when the app got into the ItemsPage first time, it will get into the NewItemPage. User can add new item here. After that, when I clicked the back button, I will get into the ItemsPage back without it's construction method called. So you can't add the LoadData(); in it.
You can put it into the OnAppearing method. Such as:
protected override void OnAppearing()
{
//LoadData();
if (_viewModel.Items.Count < 8)
{
Shell.Current.Navigation.PopAsync();
Shell.Current.GoToAsync(nameof(NewItemPage));
// then add two item in the NewItemPage
}
else {
base.OnAppearing();
_viewModel.OnAppearing();
}
}
This will get the same effect as above. I also try to move the Shell.Current.Navigation.PopAsync();. The result is same. It will get back to the ItemsPage when you clicked the back button in the NewItemPage after you add two item.
which navigated to the add page, but pressing the back button just resulted in the add page being shown again, over and over.
You may just need a if() to judge the condition the app need to go to the AddNewDataPage with skipping the tab page.
I have an view that extends the current project view, where we add multiple tabs (notebook pages) to show information from other parts of a project.
One of these pages is an overview page that summarizes what is under the other tabs, and I'd like to link the headlines for each section directly to each displayed page. I've currently solved this by using the index of each tab and calling bootstrap's .tab('show') method on the link within the tab:
$(".overview-link").click(function (e) {
e.preventDefault();
var sel = '.nav-tabs a:eq(' + $(this).data('tab-index') + ')';
$(sel).tab('show');
});
This works since I've attached a data-tab-index="<int>" to each header link in my widget code, but it's brittle - if someone adds a tab later, the current indices will be broken. Earlier I relied on the anchor on each tab, but that broke as well (and would probably break if a new notebook page were inserted as well).
Triggering a web client redirect / form link directly works, but I want to show a specific page in the view:
this.do_action({
type: 'ir.actions.act_window',
res_model: 'my.model.name',
res_id: 'my.object.id',
view_mode: 'form',
view_type: 'form',
views: [[false, 'form']],
target: 'current'
});
Is there any way to link / redirect the web client directly to a specific notebook page tab through the do_action method or similar on FormWidget?
If I understood well you want to select the tab from the JavaScript (jQuery) FormWidget taking into account that the id could change if anybody install another module that adds another tab
Solution 0
You can add a class to the page in the xml form view. You can use the id of the element selected by this class name in order to call the right anchor and select the right tab item. This should happen when the page is completely loaded:
<page class="nb_page_to_select">
$('a[href=#' + $('.nb_page_to_select').attr('id') + ']').click()
NOTE: As you have said the following paragrah I assume that you know where to run this instruction. The solution I suggest is independent of the index.
This works since I've attached a data-tab-index="<int>" to each
header link in my widget code, but it's brittle - if someone adds a
tab later, the current indices will be broken. Earlier I relied on the
anchor on each tab, but that broke as well (and would probably break
if a new notebook page were inserted as well).
Solution 1
When the page is loaded you can get the tab list DOM object like this:
var tablist = $('ul[role="tablist"]')
And then you can click on the specifict tab, selecing by the text inside the anchor. So you don't depend on the tab index:
tablist.find('a:contains("Other Information")').click()
I think if you have two tabs with the same text does not make any sense, so this should be sufficient.
Solution 2
Even if you want to be more specific you can add a class to the notebook to make sure you are in the correct notebook
<notebook class="nt_to_change">
Now you can use one of this expressions in order to select the tab list
var tablist = $('div.nt_to_change ul.nav-tabs[role="tablist"]')
// or
var tablist = $('div.nt_to_change ul[role="tablist"]')
Solution 3
If the contains selector doesn't convince you because it should be equal you can do this as well to compare and filter
tablist.find('a').filter(function() {
return $.trim($(this).text()) === "Other Information";
}).click();
Where "Other Information" is the string of the notebook page
I didn't tried the solution I'm giving to you, but if it doesn't work at least may be it makes you come up with some idea.
There's a parameter for XML elements named autofocus (for buttons and fields is default_focus and takes 1 or 0 as value). If you add autofocus="autofocus" to a page in XML, this page will be the displayed one when you open the view.
So, you can try to add this through JavaScript, when the user clicks on the respective link -which honestly, I don't know how to achieve that by now-. But you can add a distinctive context parameter to each link in XML, for example context="{'page_to_display': 'page x'}". When you click on the link, I hope these context keys will arrive to your JS method.
If not, you can also modify the fields_view_get method (here I wrote how to do that: Odoo - Hide button for specific user) to check if you get the context you've added to your links and add the autofocus parameter to the respective page.
As you said:
This works since I've attached a data-tab-index="" to each header
link in my widget code, but it's brittle - if someone adds a tab
later, the current indices will be broken.
I assume that your app allow multi-user interaction in realtime, so you have to integrate somewhere in your code, an update part function.
This function will trig if something has changed and cleanout the data to rebuilt the index in order to avoid that the current indices will be broken.
As shown in the following example, I would like to restrict the tab key behavior to just this frame with links.
http://jsfiddle.net/zFXNM/
tabindex ="1"
I do NOT want the tab to go the URL other items in the browser.
For example, the "Compose Mail" in Gmail does this already. I observed 3 usages of "tabindex=-1" within the JS.
In pure JavaScript, I have figured out a solution for this issue. The idea is whenever the page is loaded we determine the first and last links, then we prevent the tab default action and jump to the first link from the last tab.
if (activeElement.id == lastHrefID) {
e.preventDefault();
document.getElementById(firstHrefID).focus();
}
A working solution is available at : https://jsfiddle.net/srirammac/95sv63s7/
I have used CKEDITOR.appendTo( "my_div" , null , my_string ) to create an instance of ckeditor ... no problem.
however, the LINK button opens a non-interactive LINK dialog box.
So, is there some config setting that it supposed to be manually set to true, perhaps?
EDIT 1 ... I will explain what I meant by non-interactive LINK dialog box ...
When I click the ckeditor's LINK button (the one that looks like a chain-link), it opens a LINK dialog box which has a input field for me to enter a URL, plus a pulldown to choose protocol, plus a couple of other form elements.
However, none of these are use-able ... if I try to type in the url input field, nothing happens (the field will not accept focus); likewise the pulldowns do not open if I click them.
EDIT 2 ... added screenshot
When the modal option is set to true for the dialog, the dialog blocks any interaction with elements outside of it. (https://github.com/jquery/jquery-ui/blob/master/ui/dialog.js#L818)
You can override this to allow interaction with elements inside ckeditor.
Just include this somewhere after jquery ui and it should work:
orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function(event) {
if ($(event.target).closest('.cke_dialog').length) {
return true;
}
return orig_allowInteraction.apply(this, arguments);
};
If you want to allow interaction with any element outside of the dialog, include this instead:
$.ui.dialog.prototype._allowInteraction = function(event) {
return true;
};
Add this:
$(document).on('focusin', function(e) {e.stopImmediatePropagation();});
I was using:
jquery-1.8.2
jquery-ui-1.10.3
ckeditor 4.3.1
then I replaced: jquery-ui-1.10.3 with: jquery-ui-1.9.0 and it seems to work as expected.
If reverting back to jquery-ui 1.9 is not good for you, also look at:
jquery-ui forum ... "can't edit fields of CKEditor in jQuery UI modal dialog"
jquery-ui bugs ... "Dialog: CKEditor in Modal Dialog is not editable"
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