I want to display jquery mobile alternate button's with different color. The code which I am using now is only able to change the button theme to 'e' but I want 'theme b'. What can be the problem? Below is the code.
$(document).delegate('[data-role="page"]', 'pagecreate', function(e) {
var db = openDatabase("Database", "1.0", "PhoneGap Demo", 200000);
db.transaction(function(tx) {
tx.executeSql("SELECT id FROM DEMO", [],
function(tx, results) {
var len = results.rows.length,
i;
//If no result Found
for (i = 0; i < len; i++) {
var test = results.rows.item(i).id % 2; //to get the alternate row's
if (test == 0) {
var id = "color" + results.rows.item(i).id;
$("#" + id).attr('data-content-theme', 'e').removeClass('ui-body-d').addClass('ui-body-e').trigger('create'); // Change to theme e
}
}
});
});
});
I am changing the button theme as per the id of dynamically populated buttons.
If you could post some HTML code it would help a lot.
You could try the following to see whether it solves the issue:
$("#" + id).attr('data-content-theme', 'b').removeClass('ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e').addClass('ui-body-b').trigger('create');
Related
I'm trying to make a scrollbar stay down with this function (Tampermonkey, on the website: 'https://dictation.io/speech'):
setInterval(function() {
document.getElementsByClassName('ql-editor').scrollTop = document.getElementsByClassName('ql-editor').scrollHeight;
}, 500);
It worked before on another website.
I've fixed the height of the text box, so this scrollbar appears when there is enough of text:
div.notepad {
height : 771px;
}
I've tried doing this:
setInterval(function() {
document.getElementById("speech").scrollTop = document.getElementById("speech").scrollHeight;
}, 500);
and this (to make it read only, but it also doesn't work):
document.getElementById("speech").readOnly = true;
document.getElementsByClassName("ql-editor").readOnly = true;
I'm simply trying to keep the scrollbar always down. And I tried all possible ids and classnames. It worked very well on another website (the textbox was such: <textarea class="-metrika-nokeys" name="docel" id="docel" style="width: 100%;" cols="80" rows="20" spellcheck="true"></textarea>). But nothing has any effect on the text box on this website.
Thank you for any help in advance!
P.S. The problem is universal. This code (and when it's ".ql-editor" instead of '#speech') also doesn't work:
var input = document.querySelector('#speech');
var textarea = document.querySelector('#speech');
var reset = function(e) {
var context = this;
setTimeout(function() {
var len = context.value.length;
context.setSelectionRange(len, len);
}, 100);
};
input.addEventListener('copy', reset, false);
textarea.addEventListener('copy', reset, false);
I was able to solve it (probably not the best solution) by creating a textarea, copying text there from the div, and applying all those functions to that textarea.
Here is the code:
Creating a textarea:
var div = document.getElementById("speech");
var input = document.createElement("textarea");
input.setAttribute("id", "normaltext");
input.name = "post";
input.cols = "80";
input.rows = "2";
div.appendChild(input); //appendChild
Copying everything from the div to the textarea:
setInterval(function copyText() {
$("#normaltext").val($(".ql-editor").text());
}, 100);
Applying functions:
var input1 = document.querySelector('#normaltext');
var textarea1 = document.querySelector('#normaltext');
var reset = function(e) {
var context = this;
setTimeout(function() {
var len = context.value.length;
context.setSelectionRange(len, len);
}, 100);
};
input1.addEventListener('copy', reset, false);
textarea1.addEventListener('copy', reset, false);
setInterval(function() {
document.getElementById("normaltext").scrollTop = document.getElementById("normaltext").scrollHeight;
}, 500);
That works for me, but maybe someone will come up with a better solution.
On IOS, when I close photoswipe to return to the page, it wont return to the scroll position I was at when I clicked the thumbnail.
Instead the page scrolls back to the # which was specified when I initially called the page.
For example if photoswipe is on www.somepage.html, and I navigate to the page using:
www.somepage.html#footer
and then scroll up and click a thumnail in #middle of page, on closing photoswipe, the page scrolls back down to the footer.
I've tried disabling history in the photswipe options, and i've also tried clearing the hash data from the url using:
//clear hash
//$(document).ready(function (e) {
// window.location.hash = '';
// window.history.pushState("", document.title, window.location.pathname);
//
//});
But none of it seems to work. If I navigate to the page without the # in the page, everthing is fine.
I'm guessing I may have to pass a variable in the url instead of the # and scroll to the div in question via javascript?
I already have the javascript in place to scroll, but I'm not sure how to read the variable from the url and then use it's value in Javascript.
If this is likely to be the best fix for the issue, could anyone give an example of the javascript code needed?
Here's my current scroll code:
$(function () {
$('a[href*=#]:not([href=#],[data-toggle],[data-target],[data-slide])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
If anyone else has the same issue, I've managed to fix this by passing the div id to the page in the query string rather than using a #.
Here's the code:
$(window).ready(function () {
if (document.location.search.length) {
target = getUrlVars()["id"];
scrollToID('#' + target, 750);
} else {
return;
}
//target = $url().param('id');
//if (target == '') return;
});
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
// scroll function
function scrollToID(id, speed){
var offSet = 100;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
$('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
mainNav.css("height", "1px").removeClass("in").addClass("collapse");
mainNav.removeClass("open");
}
}
if (typeof console === "undefined") {
console = {
log: function() { }
};
}
Im using devexpress Html.DevExpress().ValidationSummary in my mvc project. My form contains a devexpress page control with 3 tabs. When there are client-side validation errors validation summary shows them, and every error is hyperlink. If you click it, the field with error is focused, but if the field is on other tab nothing happens. So the field is focused if it is on active tab. I'd like it to change the active tab and focus appropriate field. Is there a way to make it work right?
My colleague solved this problem using javascript and jQuery:
var nameControlTab = "myPageControl"; //name of your pagecontrol here
$(document).ready(function () {
$("tbody").on('click', 'a[href*="javascript:_aspxVSOnErrorClick("]', function () {
var url = $(this).attr("href");
url = url.substring(url.indexOf("'") + 1);
url = url.substring(0, url.indexOf("'"));
var idTab = $("#" + url + "_ET").parents('div[id*="' + nameControlTab + '_C"]').not(nameControlTab + '_CC')[0].id;
var indexTab = idTab.substring((nameControlTab + '_C').length);
SetTab(indexTab);
return true;
});
});
function indexOf(array, value) {
if ([].indexOf)
return array.indexOf(value);
else {
for (var i = 0; i < array.length; i++)
if (array[i] == value)
return i;
return -1;
}
}
function SetTab(indexTab) {
this[nameControlTab].SetActiveTabIndex(indexTab);
}
So I want to add the data filter to the UL if there are certain number of LI's. I get the attr to add correctly, but nothing shows up on page.
else
{
$('#presentations').attr("data-filter", "true");
$('#presentations').html('');
for (var i = 0; i < results.rows.length; i++) {
$('#presentations').append(
'<li>' + results.rows.item(i).presentName + ''
+ 'delete</li>');
}
}
$('#presentations').listview('refresh');
$.mobile.changePage($('#dashboard'), {reloadPage: "true"} );
$('#dashboard .message').text('Your presentations');
}
I'm guessing its a caching issue but I can't figure out how to work around it. Help?
I've tried to re-initialize, recreate or refresh the listview but none of it works.
The only way I can get it working is by doing:
$('#listview').listview('option', 'filter', true);
$('#listview').trigger("listviewcreate");
So you trigger manual the listviewcreate event and before that you set the filter to true. (setting with attr(), data() or jqmData() also doesn't work)
Example:
http://jsfiddle.net/N7Z9e/143/
Here is the code in action - thanks Gerjan!
else {
// don't create duplicate/double filter
$(".ui-listview-filter").remove();
if (results.rows.length > 3) { //Add filter search if more than 3 presentations.
$('#presentations').listview('option', 'filter', true);
}
$('#presentations').html('');
for (var i = 0; i < results.rows.length; i++) {
$('#presentations').append(
'<li>' + results.rows.item(i).presentName + ''
+ 'delete</li>'
);
}
$('#presentations').listview('refresh');
$('#presentations').trigger("listviewcreate");
$.mobile.changePage($('#dashboard'), { reloadPage: "true" });
$('#dashboard .message').text('Your presentations');
}
I'm trying to disable top menu on jQuery UI Tabs - so the tabs would be operated with next/prev buttons only.
Disable option form the doc does not seams to work as expected.
Please see my example here: Live Demo
jQuery code:
$(document).ready( function() {
$(function() {
var $tabs = $('#tabs').tabs();
$(".ui-tabs-panel").each(function(i){
var totalSize = $(".ui-tabs-panel").size() - 1;
if (i != totalSize) {
next = i + 2;
$(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page »</a>");
}
if (i != 0) {
prev = i;
$(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« Prev Page</a>");
}
});
$('.next-tab, .prev-tab').click(function() {
$tabs.tabs('select', $(this).attr("rel"));
return false;
});
});
});
Any ideas how can I disable top menu, but keep the structure, style etc.. ?
How about just enable the tab to be selected just before selecting it, and then disable the tabs again?
So, at the initialisation, all tabs are disabled:
var $tabs = $('#tabs').tabs({
disabled: [0, 1, 2]
});
And when selecting the tab, enable it before selecting it, and then disable all tabs again:
$tabs.tabs('enable', tabIndex)
.tabs('select', tabIndex)
.tabs("option","disabled", [0, 1, 2]);
See it in action: http://jsfiddle.net/william/y6QeV/21/.
EDIT: You can simply disable just the old tab:
var newTabIndex = $(this).attr("rel");
var oldTabIndex = $tabs.tabs('option', 'selected');
$tabs.tabs('enable', newTabIndex)
.tabs('select', newTabIndex)
.tabs('disable', oldTabIndex);
Example: http://jsfiddle.net/william/y6QeV/22/.