Bootstrap 3 select picker is not working on iphone 6. My code is bellow
$(document).ready(function() {
$('.selectpicker').selectpicker({
style: 'btn-default',
size: false
});
});
Modify your code to
$(document).ready(function() {
$('.myselectpicker').selectpicker('mobile');
});
Related
In ExtJS 4.2, el.dom.click() triggered a click event. Moving to ExtJS 5 broke this functionality in IE 10 and PhantomJS. It is a big problem for automation testing.
Following is an example:
https://fiddle.sencha.com/#fiddle/13l3
Ext.require('Ext.panel.Panel');
Ext.onReady(function(){
var p = new Ext.panel.Panel({
width: 300,
height: 200,
renderTo: Ext.getBody(),
margin: 15,
bodyPadding: 5,
title: 'Click Panel',
listeners:{
click: {
element: 'el',
fn: function(){alert('clicked');}
}
}
});
p.el.dom.click()
});
Run the above code on chrome ExtJS 4,5,6 - you get an alert when loading.
Run the above code on IE 10 - you get an alert on ExtJS 4. No alert on 5 and 6.
Got support for this issue. It is related to changes in the event model for ExtJS 5. See following article for more details:
https://www.sencha.com/blog/delegated-events-and-gestures-in-ext-js-5/
In the click event handler 'translate: false' will solve the above problem.
Another option (global modification) is to override dom.Element:
Ext.define('DomOverride', {
override: 'Ext.dom.Element'
},
function(Element) {
var eventMap = Element.prototype.eventMap;
eventMap.click = 'click';
eventMap.dblclick = 'dblclick';
});
But the global solution may have negative effect for supporting touch.
I try this code to show loading message like below but there is only loading animation appears without the message in content. How can I fix this?
$scope.show = function() {
$scope.loading = $ionicLoading.show({
content: 'Loading feed...'
});
};
The content property should be renamed to template as shown here:
$scope.show = function() {
$scope.loading = $ionicLoading.show({
template: 'Loading feed...'
});
};
Here is the place where this is described in the docs:
http://ionicframework.com/docs/api/service/$ionicLoading/
I am using jQuery 2.1.1, and have been using it to add 'clickable' to rows returned from a database using this:
<script type="text/javascript">
jQuery( function($) {
$('tbody tr[data-href]').addClass('clickable').click( function() {
window.location = $(this).attr('data-href');
});
});
</script>
That has been working fine. I have now added jquery-ias (2.1.2), and only the first page of returned results has clickable rows.
My jquery-ias code is as follows:
<script type="text/javascript">
$(document).ready(function() {
// Infinite Ajax Scroll configuration
jQuery.ias({
container : '.wrap', // main container where data goes to append
item: '.item', // single items
pagination: '.nav', // page navigation
next: '.nav a', // next page selector
negativeMargin: 250,
});
});
</script>
Jquery-ias is working fine, the pages are loading as needed, but the resultant rows are not clickable.
Inspecting the page in Chrome shows that the subsequently loaded rows have not had the clickable attribute added.
The relevant row in the php is this:
<tr class='resultsrow item' <?php echo "data-href='carddetail.php?setabbrv={$row['setcode']}&number={$row['number']}&id={$row[1]}'"; ?>>
All works fine if I use either, but how do I get them to play nicely together?
EDIT.....
OK, I have worked around it using the jquery-ias built-in pageChange event.
jQuery.ias().on('pageChange', function(pageNum, scrollOffset, url) {
var delay=1000;
setTimeout(function(){
jQuery( function($) {
$('tbody tr[data-href]').addClass('clickable').click( function() {
window.location = $(this).attr('data-href');
});
});
},delay);
});
This way when ias finds a page change, it waits a second for the page structure to load, and then applies the clickable class.
I can't see this working if it's waiting for images though... doesn't have to for this instance, but there's got to be a better way to do this.
Any pointers?
the better way would be to use the rendered event, for example:
jQuery.ias().on('rendered', function(item) {
var $items = jQuery(items);
$items.each(function() {
jQuery('tr[data-href]', $this).addClass('clickable').click(function() {
window.location = $(this).attr('data-href');
});
});
});
I'm using TinyMCE 4 for editing content.
I need to add a custom button that adds a row on a table when clicked.
TinyMCE 4 has a function to do that but i'm not sure how to call it.
I'm trying with $('#myTable tr:last').after('<tr></tr>');.
Here's an example.
<script type="text/javascript">
tinymce.init({
selector: "textarea",
toolbar: "mybutton",
setup: function(editor) {
editor.addButton('mybutton', {
text: 'My button',
icon: false,
onclick: function() {
$('#myTable tr:last').after('<tr></tr>');
}
});
}
});
</script>
With the cursor placed inside the table, you can modify your code to look like this:
setup: function(editor) {
editor.addButton('mybutton', {
text: 'My button',
icon: false,
onclick: function() {
editor.execCommand('mceTableInsertRowAfter', false, editor);
}
});
}
See example - tinyMCE fiddle
>>but i'm not sure how to call it.
You add a button to the editor by adding the button in the toolbar -
tinyMCE.init({
...
toolbar1 : 'mybutton'
});
I would like to hide the floaty bar for jqtouch when the page initially loads. Then use the toggle as normal.
Floaty Bar: http://jqtouch.com/preview/demos/ext_floaty/#test
$(function(){
$('#togglefloaty').click(function(){
$('.floaty').toggleFloaty();
$(this).removeClass('active');
return false;
});
$('#hidefloaty').click(function(){
$('.floaty');
$(this).removeClass('active');
return false;
});
$('.floaty').makeFloaty({
spacing: 20,
time: '.3s'
});
How It Works
The Floaty bar!
Testing multiple lines
Should be flexible.
Does anyone know how to do this?
Thanks.
Haven't tried it, but this might work:
$(document).ready(function() {
$('.floaty').removeClass('active');
});
Then it will be hidden until you add the active class.