I am using "mislider" and it works perfect, but I have a problem with it. By default, clicking on an item, changes current item to clicked item, but I want to open a link by clicking on an item.
What do you suggest to do that?
I found the solution but not sure that is best! Just delete following lines:
// Add click events to slides
if ( o.slidesOnStage > 1 ) {
o.slider.on( "click", o.options.selectorSlide, function( e ) {
if ( $( this ).index() !== o.indexCurrent ) {
e.preventDefault();
o.autoplayOff();
o.transition( $( this ).index(), false, o.autoplayOn( o.increment ) );
}
});
}
Related
I'm trying to use PrimeNg TabView component along with confirmDialog unsuccessfully
I am able to show this confirm dialog but it appears after user switch to target tab panel which is wrong.
<p-tabView (onChange)="handleChange($event)" [(activeIndex)]="index">...</p-tabView>
handleChange(e) {
this.confirmationService.confirm({
message: 'There are unsaved changes, do you want to proceed?',
accept: () => {
this.index = e.index;
},
reject:() =>{ }
});
}
Do you have an idea on how to prevent or allow tab change using confirm dialog ?
Thanks
there is no official way to prevent change to another tab by press on that tab , but 😅 there is a work around it first we need to prevent the tab change by tab click,
1️⃣ we need to set the header by ng-template or it called a custom header
template
<p-tabPanel >
<ng-template pTemplate="header">
<div (click)="handleChange($event,0)">
Godfather I
</div>
</ng-template>
.....
</p-tabPanel>
2️⃣ we bind a click event to the new header text and by using mouse event stopPropagation method we can prevent the change 👌,now we can control the change by confirm result but you need to pass the current tab index, that why I add another parameter to handleChange
component
handleChange(e:MouseEvent,tabIndex:number) {
e.stopPropagation();
if (this.index == tabIndex){
return;
}
// console.log(tabIndex)
this.confirmationService.confirm({
message: "There are unsaved changes, do you want to proceed?",
accept: () => {
this.index = tabIndex;
},
reject: () => {}
});
}
the if block if (this.index == tabIndex){return;} use to prevent showing the confirm dialog if we click on the same active tab again
demo 🚀🚀
When I'm using Javascript options for collapse, the toggle doesn't work. It only opens first time the panel.
This one works well - $('#login').collapse('toggle')
But I want to add more options like parent.
http://www.bootply.com/DFfPmKnDTd#
this code can be help...
$('#login').collapse({
toggle : true,
parent : '#accordion'
});
$('#c1').on('click', function(){
$('#login').collapse('toggle');
}
);
First you need to initiate collapse function and then make call to toggle it.
Then you need to initialize each collapse link.
Try using by using this code may be it can work for target link.
$.each($('#accordion .accordion-toggle'), function(index, collapse_link)
{
var $collapse = $('#collapse_element_id'+element_no); // you need to right here '#c'+element_id ( it will take #c1, #c2 , #c3 )
$collapse.collapse({
toggle : true,
parent : '#accordion'
});
$(collapse_link).on('click', function(){
$collapse.collapse('toggle');
});
});
I am using Jquery UI Tabs for my website.
<script type='text/javascript'>
//<![CDATA[
jQuery(window).load(function(){
jQuery('#myTabs').tabs({ fx: { opacity: 'toggle' }});
jQuery('.next-product').click(function(){
var jQuerytabs = jQuery('#myTabs').tabs();
var selected = jQuerytabs.tabs('option', 'selected');
jQuerytabs.tabs('select', selected+1);
});
jQuery('.previous-product').click(function(){
var jQuerytabs = jQuery('#myTabs').tabs();
var selected = jQuerytabs.tabs('option', 'selected');
jQuerytabs.tabs('select', selected-1);
});
As you can see that i have been using the previous next button to move from one tab to another.
My question is "When i click on next and if the last tab is open then automatically the first tab should get open, and similarly When i click on previous and if the first tab is open then automatically the last tab should get open"
Please help me out, i am stuck from over 3 days now and no solution. I have searched a lot on net but no solution for this.
You can count the number of .ui-tabs-panel elements.
jQuery(window).load(function() {
var $tabs = jQuery('#myTabs');
$tabs.tabs({
fx: {
opacity: 'toggle'
}
});
var amount = $tabs.find('.ui-tabs-panel').length;
jQuery('.next-product').click(function() {
var selected = $tabs.tabs('option', 'selected');
$tabs.tabs('select', selected + 1 === amount ? 0 : selected + 1);
});
jQuery('.previous-product').click(function() {
var selected = $tabs.tabs('option', 'selected');
$tabs.tabs('select', selected === 0 ? amount - 1 : selected - 1);
});
});
DEMO
Notes:
select your tab element already and re-use the selector var $tabs = jQuery('#myTabs');, it'll be more efficient
no need to re-call .tabs() on your click handlers
I'd just like to create a new window from the background page and put it in back. I tried focused:false but it doesn't seem to make the trick. I tried to save the previous windowId and tabId and update it after having creating the new window but it doesn't solve the problem neither.
Do you know how we can do that?
Here is my code:
function saveTabId() {
// Get the current tab
chrome.tabs.getSelected(null,function(tab){
if (tab != 'undefined') {
if (tab.windowId != windowId) {
currentTabId = tab.id;
currentWindowId = tab.windowId;
}
chrome.windows.create({url:"http://www.google.com", width:100, height:100, top:0, left:0, focused:false}, function() {
chrome.tabs.get(currentTabId, function(tab) {
chrome.windows.update(tab.windowId, {}, function(w) {
chrome.tabs.update(tab.id, {selected:true});
});
});
});
}
});
}
I launched this code at the beginning of background.html and when I refresh the extension, the window is on top of the extensions tab.
P.S: something more strange the window is on top of the extensions tab and when I change tab in this window, the new window stays on top of the other one even if I click and type text in the other one...
I got it kind of working, but popup window is still showing up for a moment before going underneath the current window:
chrome.windows.create({url:"http://www.google.com", width:100, height:100, top:0, left:0, focused:false}, function() {
chrome.windows.update(currentWindowId, {focused:true});
});
Thanks, here is the code I'm using now. The problem in the code of the question was the focus to the other window before updating it. It is strange, when you focus on a window, it doesn't show it on top of the others.
function focusTab(tabId) {
chrome.tabs.get(tabId, function(tab) {
chrome.windows.update(tab.windowId, {}, function(w) {
chrome.tabs.update(tab.id, {selected:true});
});
});
}
I am trying to use the accepts_nested_attributes_for method based on the tutorial by Ryan Bates ( http://railscasts.com/episodes/196-nested-model-form-part-1 ).
For my form, however, I want to have a select list made up of the child elements so that the parent form has a list of children. I then want to dynamically add children and populate them to the select box via ajax. I want those children to be created even if the form submit is aborted.
question - is this possible?
thanks!
EDIT: I have the form populating with the children in the select already. The question is really whether the ajax portion will work. Is it possible to submit just a portion of a form?
Turns out I ended up using the jquery autocomplete combobox (http://jqueryui.com/demos/autocomplete/#combobox) with some modifications. Specifically, the change: function listed looks for invalid selections (which is our case if the user types into the combobox). Here's the default code from the widget:
...
change: function( event, ui ) {
if ( !ui.item ) {
...
});
if ( !valid ) {
// remove invalid value, as it didn't match anything
$( this ).val( "" );
select.val( "" );
input.data( "autocomplete" ).term = "";
return false;
}
}
}
...
and I changed it to:
...
change: function( event, ui ) {
if ( !ui.item ) {
...
});
if ( !valid ) {
var _new_text = $(this).val()
var _new_option = '<option value="'+_new_text+'">' + _new_text + '</option>'
select.prepend(_new_option);//append to combobox
//now let's select it for submission
select.children( "option" ).each(function(){
if( $(this).text().match(_new_text) ){
this.selected = true;
return false;
}
})
}
}
}
...
Not sure if there's a better way to do it, but this is where I'm at now! Now working on the filtering of the content in Rails, but that's another story.