I use default jquery's ui autocomplete and button and their height is different:
Overriding the button padding with:
CSS
input.ui-button {
padding-top:0;
padding-bottom:0;
}
work for me - see demo
HTML
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
<input type="submit" value="Go">
</div>
JavaScript
var availableTags = ['Demo'];
$('#tags').autocomplete({
source: availableTags
});
$('input:submit').button();
(obviously needs jQuery and jQueryUI libraries as well).
Related
I've created a Highcharts implementation with a working jQuery-based radio button toggle "view select" between two charts: http://jsfiddle.net/6sAYF/ (it's in the lower-right)
here is the working jQuery function and corresponding html:
$(function() {
$("[name=toggler]").click(function(){
$('.toHide').hide();
$("#0829-"+$(this).val()).fadeIn('fast');
});
});
<div id="0829-1" class="toHide" ></div>
<div id="0829-2" class="toHide" style="display:none;width:780px;"></div>
<label><input id="rdb1" type="radio" name="toggler" value="1" checked/>%</label>
<label><input id="rdb2" type="radio" name="toggler" value="2" />2</label>
Where to start? Should I rewrite the function for Mootools? Use jQuery noconflict() mode and the original function?
My mootools version is here without toggle function: http://jsfiddle.net/JhWe6/
Many thanks to anyone with insight.
<div id="graphwrap" style="height: 410px;">
<div id="divID-1" class="toHide" style="position:relative;margin-bottom:-400px;"></div>
<div id="divID-2" class="toHide" style="position:relative;top:-9999em;opacity:0;"></div>
<div id="viewSelectWrap">
<h4>View Select</h4>
<label><input id="rdb1" type="radio" name="toggler" value="1" style="cursor:pointer;" checked/>%</label>
<label><input id="rdb2" type="radio" name="toggler" value="2" style="cursor:pointer;" />2</label>
</div>
</div>
window.addEvent('domready', function() {
document.getElements("[name=toggler]").addEvent('click', function(){
$$('.toHide').setStyle('top', '-9999em');
$$('.toHide').setStyle('opacity', '0');
$("divID-"+this.get('value')).setStyle('top', '0').fade(0,1);
});
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'divID-1',
height: 400, //works with the margin-bottom style
...
var chart2 = new Highcharts.Chart({
chart: {
renderTo: 'divID-2',
height: 400,
...
http://jsfiddle.net/JhWe6/10/
Per Highcharts support, the correct way for Highcharts to be hidden on a page is to use CSS style="position:relative; top:-9999em;" and update the CSS "top" in my case MooTools' setStyle('top', '0'). I also added $$('.toHide').setStyle('opacity', '0'); which makes the fade in nice.
You'll also notice that I needed to margin-bottom:-400px my first div. Is that the correct way to compensate for the now-rendered-as-blank bottom div?
My real desire is to create a selectable tree for JQM (with 3 values for each element). I tried to do with nested collapsible divisions, and this works fine. But when I tried to add the 3 radios on each collapsible bar, the events don't fire properly.
I think the collapse/expand event hooks the click event of the radios. The effect is when you click the radios, the collapsible is expanded and the radio is not checked.
<div data-role="collapsible" data-theme="b" data-content-theme="d" id="accordion1">
<h3>60
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" >
<input type="radio" name="selcrit-CLP-60" id="selcrit-CLP-60-asign" value="60-asign">
<label for="selcrit-CLP-60-asign">Asign</label>
<input type="radio" name="selcrit-CLP-60" id="selcrit-CLP-60-omit" value="60-omit">
<label for="selcrit-CLP-60-omit">Omit</label>
<input type="radio" name="selcrit-CLP-60" id="selcrit-CLP-60-nothing" value="60-nothing">
<label for="selcrit-CLP-60-nothing">Nothing</label>
</fieldset>
</h3>
<div stylee="margin: 0 10px;">
Content for 60
</div>
Here is the jsfiddle with the example: http://jsfiddle.net/Hz8Ef/
Any idea? Can I do in other way?
Solved!
$(document).ready(function() {
$("div .ui-radio").click(
function(e){
var radioId = $(this).children(":first").attr('name');
$('input[name=' + radioId + ']').checkboxradio( "refresh" );
e.stopPropagation();
}
);
});
Here the complete solution: http://jsfiddle.net/VuaQg/1/
I tried this code to achieve what I want to do. It worked when I tried it in my ordinary HTML file, but when I tried it in my JQuery Mobile page, the code did not work well for me. Are there different ways or code to select JQuery Mobile checkboxes?
Here's the code that I tried:
JAVASCRIPT:
<script>
function SetAllCheckBoxes(FormName, FieldName, CheckValue)
{
if(!document.forms[FormName])
return;
var objCheckBoxes = document.forms[FormName].elements[FieldName];
if(!objCheckBoxes)
return;
var countCheckBoxes = objCheckBoxes.length;
if(!countCheckBoxes)
objCheckBoxes.checked = CheckValue;
else
// set the check value for all check boxes
for(var i = 0; i < countCheckBoxes; i++)
objCheckBoxes[i].checked = CheckValue;
}
HTML
<form method="GET" name="myForm" onsubmit="return false;">
<label for="myCheckbox1">
<input type="checkbox" name="myCheckbox" value="1" id="myCheckbox1">
I like Britney Spears
</label>
<br>
<label for="myCheckbox2"><input type="checkbox" name="myCheckbox" value="2" id="myCheckbox2">
I like Hillary Duff
</label>
<br>
<label for="myCheckbox3"><input type="checkbox" name="myCheckbox" value="3" id="myCheckbox3">
I like Mandy Moore
</label>
<br>
<input type="button" onclick="SetAllCheckBoxes('myForm', 'myCheckbox', true);" value="I like them all!">
<input type="button" onclick="SetAllCheckBoxes('myForm', 'myCheckbox', false);" value="I don't like any of them!">
I was not aware that JQuery Mobile's checkboxes need to be refreshed after unchecking/checking them via JQuery or Javascript. Here's the code:
$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");
http://api.jquerymobile.com/checkboxradio/#method-refresh
Try this:
function SetAllCheckBoxes(FormName, CheckValue){
$.each($("#"+FormName+" input[type=checkbox]"), function(){
$(this).attr("checked",CheckValue).checkboxradio("refresh");
});
}
I removed the FieldName because your function was named SetAllCheckBoxes, just your input fields are the same. You just need tell what's your form and the state of your checkboxes.
To toggle / refresh checkboxes in jquery mobile you need to use .prop, rather than .attr.
$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");
Im using the jQuery Mobile Filter List:
http://jquerymobile.com/test/docs/lists/lists-search-with-dividers.html
Is it possible to move the position of the input field so I can put it into a div already on my page?
Using jQuery's appendTo seems to work fine but its kind of a hacky solution. Thanks
this is what I found while searching for solution to a similar problem.
HTML code example:
<div data-role="page" id="page-id">
<div data-role="content">
<div data-role="fieldcontain">
<input type="search" name="password" id="search" value="" />
</div>
<div class="filter-div" data-filter="one">1</div>
<div class="filter-div" data-filter="two">2</div>
<div class="filter-div" data-filter="three">3</div>
<div class="filter-div" data-filter="four">4</div>
<div class="filter-div" data-filter="five">5</div>
</div>
</div>
JS code example:
$(document).delegate('#page-id', 'pageinit', function () {
var $filterDivs = $('.filter-div');
$('#search').bind('keyup change', function () {
if (this.value == '') {
$filterDivs.slideDown(500);
} else {
var regxp = new RegExp(this.value),
$show = $filterDivs.filter(function () {
return ($(this).attr('data-filter').search(regxp) > -1);
});
$filterDivs.not($show).slideUp(500);
$show.slideDown(500);
}
});
});
This way you can place your input text box anywhere on your page and it should properly filter a list of items you want.
JSFiddle DEMO: http://jsfiddle.net/cZW5r/30/
I have just encountered a strange problem when using jQuery Mobile.
I have a link inside a form element label - a checkbox label to be exact but the link does not work.
I have tried reading the docs but can't seem to find anything on it.
Here is my markup:
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="checkbox" class="cbox" name="OptIn" id="OptIn"/>
<label for="OptIn">Receive E-mails From Us</label>
<input type="checkbox" value="1" class="cbox" name="tandc" id="tandc"/>
<label for="tandc">I agree to the <a href="/tandcs.html" target="_BLANK" >Terms & Conditions</a></label>
</fieldset>
</div>
When the link is clicked it just toggles the checkbox state.
UPDATE
Just realised I can open the link by right clicking but obviously on a mobile device that's not very useful....
this is the correct solution for mobile and non mobile browsers
$('.ui-checkbox a').bind("tap click", function( event, data ){
event.stopPropagation();
$.mobile.changePage($(this).attr('href'));
});
Had the same problem and solved it using:
$('.ui-btn-text a').click(function(event) {
var $this = $(this);
window.open($this.attr('href'), $this.attr('target'));
});
So if any link within a button-text is clicked it will be opened in a new window. If you want it in the same window just use $.mobile.changePage as Phil showed.
I tried the above mentioned solutions on jQuery Mobile 1.1.0 with jQuery 1.7.2 without success.
After a bit of tinkering and reading into the new jQuery event functions I came up with my own solution to make all anchors in labels clickable without loosing jQuery Mobile default behaviour on the rest of the label:
jQuery('label').each(function(){
var e = jQuery(this).data('events');
jQuery('.agree label').undelegate();
jQuery('.agree label *:not(a)').delegate(e);
});
use on() and off() instead
$('label').each(function(){
var e = $(this).data('events');
$('label').off();
$('label').not('a').on(e);
});
There a some improvements that can be made but here is a rough draft:
http://jsfiddle.net/KADqA/
JS
$('.ui-btn-text').click(function(event) {
var checked = $("#tandc[type='checkbox']").is(":checked");
var $this = $(this);
if($this.children('a').length) {
$.mobile.changePage('#tc', {
transition : 'pop',
role : 'dialog'
});
}
stateOfCheckbox(checked);
});
function stateOfCheckbox(checked) {
$('#home').live( 'pagebeforeshow',function(event){
$("#tandc[type='checkbox']").attr("checked",checked).checkboxradio("refresh");
});
}
HTML
<div data-role="page" id="home">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="checkbox" class="cbox" name="OptIn" id="OptIn"/>
<label for="OptIn">Receive E-mails From Us</label>
<input type="checkbox" value="1" class="cbox" name="tandc" id="tandc"/>
<label for="tandc">I agree to the <a href="#tc" data-rel="dialog" >Terms & Conditions</a></label>
</fieldset>
</div>
</div>
<div data-role="page" id="tc">
<div data-role="header">
<h1>T and C</h1>
</div>
Read me
</div>
You could also just override the event:
$('.ui-checkbox a').click(function(e) {
e.stopPropagation();
})
On Android the solutions above did not work on Android.
It only works when using on pagecreate and without event delegation.
$(document).on('pagecreate', function(event, ui) {
$(".ui-checkbox a").on("click tap", function() {
$(':mobile-pagecontainer').pagecontainer('change', this.href);
return false;
});
} );
This is posible solution if you want to open the link in a popup.
$('.ui-checkbox a').bind('click tap', function (event) {
event.stopPropagation();
$($(this).attr('href')).popup('open');
});
Add Id or class into parent label have a tag
and using script of #alex dms
$('#field-contain label a').bind("tap click", function( event, data ){
event.stopPropagation();
$.mobile.changePage($(this).attr('href'));
});
Try it, work perfecly on my mobile and desktop
https://jsfiddle.net/vulieumang/p91zhmnp/