I cant fix colorpicker.js in phonegap, it is not working! Some help, please?
thanks
$('#colorSelector').ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
//$('body').css('background', '#' + hex);
$("#hex_color").val('#'+hex);
}
});
var html ='<div id="texto">';
html +='<input id="newtext" type="text" value="Hello!">';
//html +='<input id="change" type="color" value="#ff0667" data-text="hidden" style="height:20px;width:20px;" />';
html += '<input type="text" id="hex_color">';
html += '<div id="colorSelector"><div style="background-color: #0000ff"></div></div>';
html +='<button id="addbutton">Add this text</button>';
html +='</div>';
Try Spectrum Colorpicker. This is very nice color picker plugin.
Download the zip file and include the spectrum.js file and spectrum.css file to your page. Then you have to create a text box as follows
<input type='color' id='custom' />
Inside your script file
$("#custom").spectrum({
color: "#f00"
});
Hope it helped you
There one paid color picker JQuery Mobile Color Picker, only use it if you don't find the solution!
Solved with the
Angular-JS directive ngjs-color-picker
A small directive which essentially is a color picker but with a few extra functions - for Angular-JS. Suitable for developing custom color pallet in phonegap / Cordova apps.
Related
I'm building a 'natural language' search form using a series of inline select inputs, using jQuery Select2 for styling. The widths of the Select2 inputs appear to be set to the width of the selected option on initialisation, which is great. I just can't work out how to get the width to update when the selected option is changed. Any ideas?
Many thanks!
Try to add this to yor CSS file:
.select2-container {
width: 100% !important;
}
It solved my resize problems with select2
(Edited: I do not use placeholders)
You can use window resize function.
Example:
// Fix select2 width
$(window).on('resize', function() {
$('.form-group').each(function() {
var formGroup = $(this),
formgroupWidth = formGroup.outerWidth();
formGroup.find('.select2-container').css('width', formgroupWidth);
});
});
I know this is an old post However, I had an issue when I used NMC's code.
As I can't comment on his answer, after using his code I had some annoying scrollbars appearing after using the select2 dropdowns, to fix this I used width auto instead.
.select2-container {
width: auto !important;
}
Just had to do something like this for a site
$(e).on("select2:closing", function(e) {
if (e.hasOwnProperty('params') &&
e.params.hasOwnProperty('args') &&
e.params.args.hasOwnProperty('originalEvent') &&
e.params.args.originalEvent.hasOwnProperty('target')) {
var newWidth = $(e.params.args.originalEvent.target).width();
var id = $(e.params.args.originalEvent.target).attr('id');
var container = $("span[aria-labelledby=\""+id.split("-result")[0]+"-container"+"\"]");
$(container).parents('span.select2').width(newWidth + 21);
}
});
This is probably not fool-proof and is tied to the current API. But it gets the width of the element in the dropdown before the dropdown closes and then applies that to the container.
One thing of note, you may need to float the dropdown items to get their real size.
.select2-results__option {
float: left;
clear: both;
}
$('.select2-search__field').attr('style','width:auto');
$('.select2-search__field[placeholder=""]').attr('style','width:10px');
For dynamically resize a select2 you can use width: 'style' option as below:
$('#field_'+field.name).select2({
placeholder: "select a option...",
maximumSelectionLength: 1000 ,
allowClear: true,
...
width: 'style',
data: data
});
And next you have to use style="width:100%;" as attribute for your select tag.
<select class="input-element-item fontsize13" id="select2" style="width:100%;" >
<option></option>
</select>
For other than problems of responsive width, read the documentation of Select2. Everything is explained.
https://select2.org/appearance#container-width
<select class="js-example-responsive" style="width: 50%"></select>
$(".js-example-responsive").select2({
width: 'resolve' // need to override the changed default
});
This is my first question here on SO, so bear with me. I am developing a small project and I recently discovered one particular problem that I did not have before.
In my project I have a small map used for selection of different regions of my country, Romania. I implemented this with Raphael.js library and jQuery/UI. It looks like this:
http://s28.postimg.org/pzg3gaiod/output_Cuap_Ye.gif
The idea is when you select a region it gets dynamically coloured and added to a vector of regions. Simple. So for every region (that is declared as a path for the Raphael library to understand and paint) I have a small function:
function clickableMinimapRegions(st, regio) {
st[0].style.cursor = "pointer";
st[0].onclick = function () {
if ($.inArray(regio, regions) != -1) {
regions.splice($.inArray(regio, regions), 1);
st.animate({
fill: "#FFFFFF"
}, 0);
} else {
regions.push(regio);
st.animate({
fill: "#e6e6e6"
}, 0);
}
};
}
Then I have this HTML:
<ul class="element-menu drop-up">
<li>
<a id="toggle" class="dropdown-toggle bg-lime text-shadow button shadow">
<img src="../img/regions.png">
</a>
<div id="content" class="dropdown-menu bg-steel" data-role="dropdown">
<div id="minimap" class="minimap"></div>
</div>
</li>
</ul>
I use Metro UI CSS library, it's a simple drop-down menu. But it's behaviour is to autoclose on click. So for that I did:
$("#minimap").click(function (event) {
event.stopPropagation();
});
http://s28.postimg.org/trltqsu19/Captura3.png
This menu is at the bottom of the screen over a leaflet map, the map is the background and this drop-down is over the map. The thing is, if the map is not loaded, than it works fine. If the map tiles are loaded, something is happening that prevents the regions to be coloured when clicked.
Thank you.
SOLUTION FOUND:
Force DOM redraw/refresh on Chrome/Mac
The second parameter in jQuery's .animate() is the duration, in milliseconds. Having set it to 0, I'd rather say the behaviour you see in other browsers is wrong, and you should expect to have the property changed immediately with no animation.
st.animate({
fill: "#FFFFFF"
}, 0);
// ^---- duration
Try changing that to a bigger value (400 ms is the default)
Here's a fiddle showing the difference: http://jsfiddle.net/exrj973b/
I have a jquery-ui button and I know how to change the styling between states with css, but I would like to know how to change the label text too. For example, an ON/OFF button like below -- when [checked="checked"] then the label text would = "ON" (and OFF when not checked).
<input type="checkbox" id="device_4_state" name="device_4_state" class="toggle-button on-off" checked="checked" />
<label for="device_4_state">ON</label>
Any help would be tremendous. Thanks.
here is the solution :
$('#device_4_state').change(function(){
if ($("#device_4_state").is(':checked'))
{
$("label[for='device_4_state']").text("ON");
}
else
{
$("label[for='device_4_state']").text("OFF");
}
});
If you wish to use pure CSS to set the label text, you can use CSS pseudo elements to automatically generate the content of the label based on the state of the jquery-ui button. To use this approach, leave the label empty (<label for="device_4_state"></label>) and include CSS like this:
.on-off + label > span:before {
content: "OFF";
}
.on-off + label.ui-state-active > span:before {
content: "ON";
}
As in this jsfiddle: http://jsfiddle.net/GjPXZ/1/
I am using twitter bootstrap with tabs. I have multiple tabs and charts inside each tab. Upon browser resize, charts that are not on the current active tab do not get resized. Infact, it looks kind of funny with a thin bar. The current active tab works fine. Has anyone seen this issue and are there any workarounds ?
Here is a working example:
http://codepen.io/colinsteinmann/pen/BlGfE
Basically the .reflow() function is called on each chart when a tab is clicked. That way the chart gets redrawn based on the new dimensions which are applied to the container when it becomes visible.
This is the most important snippet of code:
// fix dimensions of chart that was in a hidden element
jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) { // on tab selection event
jQuery( ".contains-chart" ).each(function() { // target each element with the .contains-chart class
var chart = jQuery(this).highcharts(); // target the chart itself
chart.reflow() // reflow that chart
});
})
This is my fix for this (using jQuery):
$("[data-highcharts-chart]").each(function () {
var highChart = Highcharts.charts[$(this).data('highchartsChart')];
var highChartCont = $(highChart.container).parent();
highChart.setSize(highChartCont.width(), highChartCont.height());
highChart.hasUserSize = undefined;
});
Call this function whenever the chart gains focus to make sure it is resized properly.
I had a similar issue and I found that the best thing was not to load the chart until the tab was shown. So in the tab shown event I was quickly loading the chart (but only once)
I just solved this issue with the following. Using bootstrap version 3.3.5
I am leaving this here because this link showed up when I googled the issue at the beginning. I hope it helps.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$(e.target.hash).highcharts().reflow();
});
HTML
<!-- Nav tabs -->
<ul class="nav nav-pills nav-justified" role="tablist" id="taks-tabs">
<li role="presentation" class="active">Met Standard</li>
<li role="presentation">Commended Performance</li>
<li role="presentation">TAKS-M Met Standard</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="taks_met_std"></div>
<div role="tabpanel" class="tab-pane" id="taks_comm_perf"></div>
<div role="tabpanel" class="tab-pane" id="taks_m_met_std"></div>
</div>
add class="chart" to all highcharts containers inside tabs.
add this jQuery code:
jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function () {
$( '.chart' ).each(function() {
$(this).highcharts().reflow();
});
})
I found the answer after looking for sometime. This was driving me crazy so I want to share it with you all since nothing here worked for me.
Add this to your CSS
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: block;
height: 0;
overflow-y: hidden;
}
.tab-content > .active,
.pill-content > .active {
height: auto;
}
For more details visit the page I found the solution at
https://jonpolygon.com/bootstrap-tabs-100-percent-width-charts/
i fix this problem with the next code.
$('#yourDivChart').highcharts({
chart: {
type: data.EjeX.Tipo,
//width: width,
//height: height,
options3d: {
enabled: true,
alpha: 15,
beta: 15,
viewDistance: 25,
depth: 40
},
width: $('#DivContainerWithYourTabs').width() - 150
},
in my case is a partial "_partialDetalleProyecto"
I hope works you.
So this is a bit old, but for anyone stumbling across this, I was having a similar issue with the highchart sizes being incorrect in a bootstrap tabbed display. The solution I came up with was to just delay creating the chart by 100ms using setTimeout().
setTimeout(function() {
drawBarChart();
}, 100);
Note: drawBarChart is a custom function I created to generate the charts I needed. The issue (at least in my case) seemed to be that the chart was being created before (or at the same time) as the container and was therefore choosing some default width instead of the width of the container.
I have 2 tabs , met same problem.
I changed only 2 rows codes of Druska, and it worked.
function anyname() {
$("[data-highcharts-chart]").each(function () {
var highChart = Highcharts.charts[$(this).data('highchartsChart')];
var highChartCont = $(highChart.container).parent();
highChart.reflow();
});
}
and add one onclick event to you HTML tab codes like below:
<input type="radio" id="tab1_1" checked onclick="anyname();" >
I'm using jQuery UI's datepicker control in a position: fixed toolbar at the bottom of my page. Occasionally, on random computers, the datepicker appears below the toolbar, which means it's off the page and impossible to view or interact with.
Is there a way to force the positioning of the datepicker control to always be above and to the right of its <input>?
The only way to be certain (for the jQueryUI version of datepicker) is to disable the functionality of the datepicker that tries to render inside the viewport. Here's a way to do it without modifying the source code files:
$.extend(window.DP_jQuery.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});
on later versions of JQuery UI try:
$.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});
That just nukes the _checkOffset function inside datepicker that makes it squirrelly. Then you can use the .ui-datepicker css to make sure it stays fixed if that's what you're after. More info at how-to-control-positioning-of-jqueryui-datepicker.
Problem is that element in position: fixed show top position 0px (check with: alert$('#datepicker2').position()).
Solution:
$('#datepicker').datepicker( {beforeShow: function(input) {
var x = 100; //add offset
var y = 20;
field = $(input);
left = field.position().left + x;
bottom = y;
setTimeout(function(){
$('#ui-datepicker-div').css({'top':'', 'bottom':bottom + 'px', 'left': left + 'px'});
},1);
}}
Test HTML:
<form style="position:fixed; bottom:0; width:100%" name="form1" method="post" action="">
<label>
<input style="left:300px; position:absolute; bottom:0" type="text" name="textfield" id="datepicker">
</label>
</form>
You could change the lines:
offset.left -= (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ? Math.abs(offset.left + dpWidth - viewWidth) : 0;
offset.top -= (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ? Math.abs(offset.top + dpHeight + inputHeight*2 - viewHeight) : 0;
...to read:
offset.left = $(inst.input).position().left + dpWidth;
offset.top = $(inst.input).position().top - dpHeight;
This loses flexibility, though. If your input happens to be at the top of the page, you'll have the opposite problem from before.
http://www.mindfiresolutions.com/Make-jQuery-datepicker-to-popup-in-different-positions-995.php
check this. I used this and was able to position the datepicker control in all browsers.
I had a similar problem. I have a page with date pickers potentially used at various placed on the page but also on a fixed header where the user can scroll the page both horizonally and vertically with the fixed header staying in place. The header also has a datepicker. So I can't do a global change of datepicker.
This is what I did. It is admittedly a kluge but it works so I thought it might help someone else. Hopefully in the future the jquery datepicker will add a position option.
beforeShow: function(input, inst) {
$("#ui-datepicker-div").css({ "visibility": "hidden", "display": "none" );
window.setTimeout(function() {
var leftPosition = parseInt($(window).width() / 2);
$("#ui-datepicker-div").css({ "position": "fixed", "top": 0, "left": leftPosition });
$("#ui-datepicker-div").css({ "visibility": "visible", "display": "inherit" );
}, 500);
}
From the documentation, it looks like you might be able to use the 'dialog' method of the datepicker plugin to achieve your desired outcome. However, using this most likely means that you will have to implement some of the glue that you would otherwise get out-of-the-box with datepicker, such as a callback handler to extract the date, etc.
I tried to mock up some code to see it in action and short of getting the datepicker to display, I couldn't quite get it working, though. Anyway, I wanted to point you to it in case you have better luck than I did.