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
Related
When I click on search button, my page getting freeze, alerts & masking are not working but when page loads completing alerts are popup.
Pleas help me on this
I have 3000 rows in a Datatable:
I Have two radio buttons
Show only Difference
All
When I click any one of button applyFitler function will get execute and executeFilter is filter function that executes when table is getting Draw,
What I expected is, when I click on any of Radio button, Mask with Please wait should show immediately, but it shows before one second (9th second) of returning results to Datatable. Total its taking 10 seconds to apply filter and return Datatable.
During these 10 seconds by browser page getting freeze
var applyFitler = function() {
alertBlock('Please wait..');
// clear the global search box
__DATATABLE.search('');
// set columnIndex to match data attribute of each column (used in our custom search while allowing moving of columns)
$('#devresult th').each(function(index) {
var headerText = $(this).data('col-header');
__TABLEHEADERS[headerText].columnIndex = $(this).data('column-index');
});
if (__DATATABLE != undefined) {
__DATATABLE.draw();
}
alertUnblock();
};
var executeFilter = function(settings, data, dataIndex, rowData, counter) {
var rows = __DATATABLE.rows({ 'search': 'applied' }).nodes();
var showRow= $("input[name=showRow]:checked").val();
if(showRow == "notshow") {
return false;
}
}
return true;
}
I have a Google Sheet set up with two buttons on the Form sheet, which are attached to two different scripts. They work perfectly on PC, but unfortunately, custom buttons still do not appear to work on the Google Sheets app for tablets. I was able to incorporate a workaround via a dropdown box, but that is still a bit finicky, so I'm wondering whether I could just switch both PC and tablet users to checkboxes instead.
If the checkbox in cell G3 is checked, the AUTOFILL script should run and the checkbox should be cleared; subsequently, if the checkbox in cell G5 is checked, the UPDATE script should run and its checkbox be cleared.
What would be the best way of doing this, now that checkboxes are a thing in Google Sheets?
Here is the code I am currently using, working for both the buttons and the dropdown:
function onEdit(e) {
if (e.range.getA1Notation() == 'D3') {
if (/^\w+$/.test(e.value)) {
eval(e.value)();
e.range.clearContent();
}
}
}
function AUTOFILL() {
var sheet1 = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data');
var sheet2 = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Form');
var valueOfData = sheet1.getRange(sheet1.getLastRow(), 1).getValue();
sheet2.getRange('B3').setValue(valueOfData + 1);
}
function UPDATE() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var formSS = ss.getSheetByName("Form");
var dataSheet = ss.getSheetByName("Data");
var values = formSS.getRange("B3:B6").getValues().reduce(function(a, b) {
return a.concat(b)
});
var partNum = values[0];
var row;
dataSheet.getDataRange().getValues().forEach(function(r, i) {
if (r[0] === partNum) {
row = i + 1
}
})
row = row ? row : dataSheet.getLastRow() + 1;
var data = dataSheet.getRange(row, 1, 1, 4).getValues()[0].map(function (el, ind){
return el = values[ind] ? values[ind] : el;
})
var now = [new Date()];
var newData = data.concat(now)
dataSheet.getRange(row, 1, 1, 5).setValues([newData]);
formSS.getRange("B3:B6").clearContent()
}
A you correctly said, running scripts on button clicks does not appear to work on the Android mobile app. This is an issue that has already been reported (see this and this). A common workaround used to be using Android add-ons but they are now deprecated.
In order to make your script run using checkbox, one thing you can do is to modify your onEdit function. After the following modifications, it will check whether any of the checkboxes is enabled, run the appropiate function based on that, and then disable it again. You can see the updated onEdit function below:
function onEdit(e) {
var isAutofill = SpreadsheetApp.getActiveSheet().getRange("G3").getValue();
var isUpdate = SpreadsheetApp.getActiveSheet().getRange("G5").getValue();
if (isAutofill && isUpdate) {
Browser.msgBox("You cannot autofill and update at once!");
SpreadsheetApp.getActiveSheet().getRange("G3").setValue(false);
SpreadsheetApp.getActiveSheet().getRange("G5").setValue(false);
} else if (isAutofill) {
AUTOFILL();
SpreadsheetApp.getActiveSheet().getRange("G3").setValue(false);
} else if (isUpdate) {
UPDATE();
SpreadsheetApp.getActiveSheet().getRange("G5").setValue(false);
}
if (e.range.getA1Notation() == 'D3') {
if (/^\w+$/.test(e.value)) {
eval(e.value)();
e.range.clearContent();
}
}
}
The following is working for me:
$('#datatable').on('page.dt', function() {
alert("changed");
});
Whenever I am changing the page,the alert is shown.But if I want to alert the page no. which is clicked then what's the way
table.page.info() returns the current pagination information. That is current page, number of pages, recordsDisplay, recordsTotal and more.
var table = $('#datatable').DataTable();
$('#datatable').on('page.dt', function() {
var info = table.page.info();
var page = info.page+1;
alert('changed - page '+page+' out of '+info.pages+' is clicked');
});
see demo -> http://jsfiddle.net/qpLtLfaz/
i am new to titanium development.i am developing ToDo application using Titanium for learning purpose.i able to display the data from database and generate tableViewRow successfully but i am stuck in one phase that i unable to display button in each row.i did R&D for it but i cant get solution.here is my code for display buttons in each row of tableViewRow it display all records from database in each row but not buttons.it shows [object TableViewRow] in each row instead of button. so please help me to solve the issue
![Titanium.UI.setBackgroundColor('black');
var win = Titanium.UI.createWindow
({
title:'Tab 1',
backgroundColor:'#fff'
});
var db = Titanium.Database.install('/mydata/ToDoDB', 'ToDoDB');
var rows = db.execute('SELECT * FROM task');
var data1=[];
while(rows.isValidRow())
{
var rowview=Titanium.UI.createTableViewRow();
var btn=Titanium.UI.createButton
({
right:'20dp',
width:'60dp',
height:'40dp',
title:'Show'
});
rowview.add(btn);
var tt=rows.fieldByName('title');
var cc=rows.fieldByName('content');
//data1.push({title:rows.fieldByName('title')},{title:rows.fieldByName('content')},{title:rowview});
data1.push({title:tt+cc+rowview});
rows.next();
//rowview.add(btn);
};
rows.close();
var yourTable = Ti.UI.createTableView
({
width : Ti.UI.FILL,
height : Ti.UI.FILL,
data: data1
});
db.close();
win.add(yourTable);
win.open();
Try the following
var rowview = Titanium.UI.createTableViewRow();
var tt=rows.fieldByName('title');
var cc=rows.fieldByName('content');
var btn=Titanium.UI.createButton({
right:'20dp',
width:'60dp',
height:'40dp',
title:'Show'
});
var labeltt=Titanium.UI.createLabel({
left:'20dp',
width:'60dp',
height:'40dp',
text:tt
});
var labelcc=Titanium.UI.createLabel({
left:'80dp',
width:'60dp',
height:'40dp',
text:cc
});
rowview.add(labeltt);
rowview.add(labelcc);
rowview.add(btn);
data1.push(rowview);
I didn't tried this code, so there should be some alignment issues. I hope this will help you
what you are looking for is a custom row once you start including buttons and such.
Here is a old but still informative example
http://cssgallery.info/custom-row-for-tableview-in-appcelerator-titanium/
Basic idea is that you create a view, place it in the row, and then add the additional row UI object into that view
I have an image slider that is controlled by text navigation. The text is highlighted orange when it's relative slide is current in the gallery. I would like the other text to have an inactive state with a black background but cannot get this to work!
(In case that didn't make much sense! Basically, I want background-color orange when current, background-color black when inactive.) THANKS
$(document).ready(function(){
$('.slider').each(function(e){
if(e == 0){
$(this).addClass('current');
}
$(this).attr('id', 'handle' + e);
})
$('.tabs li').each(function(e){
if(e == 0){
$(this).addClass('current'); //adds class current to 1st li
}
$(this).wrapInner('<a class="title"></a>'); //wraps list items in anchor tag
$(this).children('a').attr('href', '#handle' + e);//adds href to the anchors
t = $(this).children('a').text();
$('#handle' + e).append('<h2>' + t + '</h2>'); //adds h2 and text to big images
})
$('.tabs li a').click(function(){
c = $(this).attr('href');
if($(c).hasClass('current')){
return false;
}else{
showImage($(c), 20);
$('.tabs li').removeClass('current');
$(this).parent().addClass('current');
return false;
}
})
runRotateImages();
$("#featured").hover(
function(){
clearTimeout(xx);
},
function(){
runRotateImages();
}
)
})
function showImage(img, duration){
$('.slider').removeClass('current').css({
"opacity" : 0.0,
"zIndex" : 2
});
img.animate({opacity:1.0}, duration, function(){
$(this).addClass('current').css({zIndex:1});
});
}
function rotateImages(){
var curPhoto = $("div.current");
var nxtPhoto = curPhoto.next();
var curTab = $(".tabs li.current");
var nxtTab = curTab.next();
if (nxtPhoto.length == 0) {
nxtPhoto = $('#featured div:first');
nxtTab = $('.tabs li:first-child');
}
curTab.removeClass('current');
nxtTab.addClass('current');
showImage(nxtPhoto, 300);
}
function runRotateImages(){
xx = setInterval("rotateImages()", 5000);
}
I have added a jsfiddle - http://jsfiddle.net/n5EPM/3/
However, on jsfiddle it does not seem to automatically cycle through the images, not sure why, have no problems in browser.
Try using not() method: http://api.jquery.com/not/
Basically, you need to create a new class disabled
.disabled{
background-color:#000000;
}
Then, add the following line to your tabs.li's each loop:
$(".tabs li").not(".current").addClass('disabled'); //add disabled class for non-current tabs
At last you need to remove disabled class in the rotateimage() function before assigning current and then disable non-current again. like this:
curTab.removeClass('current');
nxtTab.removeClass('disabled'); //remove diabled class
nxtTab.addClass('current');
$(".tabs li").not(".current").addClass('disabled'); // disable non-current again
Working jsfiddle here: http://jsfiddle.net/n5EPM/9/
This might not be the perfect solution but you will need to tweak it a little bit.
Hope this helps.