I have a input box placed in the header data-role="header" of a jQuery Mobile page.
<form id="form-search" class="form-search" style="display: none; background-color: #fff; border-bottom: 1px solid #ccc;">
<input type="search"** placeholder="Enter your search query" name="search-query" id="search-query" value="" data-mini="true" />
</form>
When this form gets submitted, page is changed $.mobile.changePage() but there is still an outline for that search box. How is it possible?
I tried using blur() on inputbox after form is submitted but it doesn't work. Also this is the only place where any inputbox leaves its trace on other page.
Related
For a long time, a web site that I maintain had been using jQuery-UI v1.11.2. I decided to upgrade to the latest version which is currently v1.12.1. After the upgrade, I noticed that my jquery-ui buttonsets (which are basically radio buttons) now have the little dot showing. Previously that dot wasn't there.
I went over to the official jQuery-UI help docs for buttonsets. It turns out that their example now has those dots. I guess that's the new look.
Well, I want the old look back. No dots.
How do I made those dots disappear?
This widget is deprecated, use Controlgroup instead.
Suggest making use of classes.
Specify additional classes to add to the widget's elements. Any of classes specified in the Theming section can be used as keys to override their value. To learn more about this option, check out the learn article about the classes option.
This gives you the ability to more directly modify the CSS of an element inside a widget. The "dot" is made by changing the background color of the span and then giving it a border to make the "dot" smaller.
$(function() {
$("#radio").controlgroup({
classes: {
"ui-controlgroup": "nodot"
}
});
});
div.nodot label.ui-checkboxradio-checked .ui-icon-background {
border: 0 solid #aaaaaa;
background-color: #aaaaaa;
width: 16px;
height: 16px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form>
<fieldset>
<legend>Favorite jQuery Project</legend>
<div id="radio">
<input type="radio" id="sizzle" name="project">
<label for="sizzle">Sizzle</label>
<input type="radio" id="qunit" name="project" checked="checked">
<label for="qunit">QUnit</label>
<input type="radio" id="color" name="project">
<label for="color">Color</label>
</div>
</fieldset>
</form>
There is still a hover effect being applied, that is adding a box-shadow that I couldn't find.
The last radio shows like this:
radio background
When selected the icon background goes away. I tried toggling every single background from dev tools to no avail. Removing the icon images from project folder fixed the background, but renders my checkboxes useless, as they can't be visually checked without the images, so it's no solution. How do I fix this annoying bug?
EDIT:
I will assume the downvotes are because I did not provide code.
Here:
<!-- html stuff -->
<label for="21">
<input id="21" type="radio" name="bbNumber" value="1" />
Percent(%)
</label>
<label for="22">
<input id="22" type="radio" name="bbNumber" value="2" />
Number
</label>
<label for="23">
<input id="23" type="radio" name="bbNumber" value="0" checked />
Disable
</label>
<!-- more html stuff -->
JS
$(function(){
//unrelated stuff
$('input[type="checkbox"], input[type="radio"]').checkboxradio();
//some more stuff
});
No custom CSS meddling with radio. The only CSS I have used is for jQ - Autocomplete.
jQuery v 3.3.1
jQ UI v 1.12.1
Black Tie theme from Themeroller > Gallery
After a lot of fiddling, I came up with this crude, but working solution. The background in question belonged to an auto-generated span element from jQ-UI. I spotted the correct background image, wrapped all the radios in a unique div and applied the following CSS rule:
#id span.ui-checkboxradio-icon {
background-image: url('/PATH/TO/BACKGROUND.PNG') !important;
}
I am trying to get an anchor in jquery to line up horizontally right next to a checkbox in a list structure. I previously had the checkbox inside of the anchor object, and this produced the result I wanted but now I want the checkbox to have a separate functionality then the anchor element, thus I wish to separate them. The CSS I am using is as follows, and as you can see from Jsfidle, it looks horrible with the checkbox floating to the top right spot of the button. Answers on here have noted that using field contain or display:inline would fix the problem but I have been unable to get it to work.
<div data-role="main" class="ui-content">
<h3>Some header</h3>
<ul data-role="listview" id = "tasklistTasks">
<li>
<div data-role="fieldcontain" style=" display:inline" >
<input type="checkbox">
Go here
</div>
</li>
<li>
<div data-role="fieldcontain" style=" display:inline" >
<input type="checkbox">
Go here
</div>
</li>
</ul>
</div>
I am using Jquery 2.1 and Jquery mobile 1.4.2. Thanks for any help
The reason for this behavior is that the checkbox is getting the CSS from the jquery mobile CSS you have applied. Inside that particular CSS, your checkbox class' CSS is getting overridden and it has :
margin: -11px 0 0 0;
due to which it is coming to the top left corner of your parent div.
If you are not using CDN of that CSS and you have that downloaded version, you can modify this with :
.ui-checkbox input, .ui-radio input {
position: absolute;
left: .466em;
width: 22px;
height: 22px;
margin: 12px 0 0 0;
outline: 0!important;
z-index: 1;
display: inline-block;
}
You can also see yourself by debugging it in your browser.
Here is how it looks now and i guess this is what you wanted:
http://jsfiddle.net/appleBud/bWFYv/2/
Hope this helps.
Strange issue, I have read through various posts, but have yet to find a working answer.
When I have a h:commandButton, where I want an icon to display instead of text, I have tried.
<h:commandButton value=" " image="UpArrow.png" style="position: absolute; left: 36px; top: 17px; width: 18px; height: 18px; cursor: pointer;" title="Pan up" actionListener="#{SarWindsImagesBean.panUp('testImage.jpg')}">
<f:ajax render="imagePan2"/>
</h:commandButton>
<h:commandButton image="UpArrow.png" style="position: absolute; left: 36px; top: 17px; width: 18px; height: 18px; cursor: pointer;" title="Pan up" actionListener="#{SarWindsImagesBean.panUp('testImage.jpg')}">
<f:ajax render="imagePan2"/>
</h:commandButton>
In the first, the size is correct, but instead of the image, I get "Submit Query".
In the second, I get the same problem.
Why is it rendering "Submit Query"? and If I add value=" ", it will not display the icon, just an empty box.
Dan
That's the browser-default value of the HTML <input type="submit"> element when the value attribute is omitted. This is not generated by JSF. Try it out yourself with such a HTML element in a plain HTML page.
As to why adding the value attribute when the image attribute is present results in an empty box, that's likely MyFaces specific. I can't reproduce it in Mojarra.
As to (ab)using the image attribute in order to present a background image, this after all not entirely right. You should be using CSS background-image property instead,
<h:commandButton value=" " style="background-image: url(UpArrow.png)" />
or just a <h:commandLink><h:graphicImage> if you don't want to have the appearance of a button at all:
<h:commandLink ...>
<h:graphicImage value="UpArrow.png" />
</h:commandLink>
jQuery mobile, while amazing in many ways, tends to be frustrating at times. In this instance i am trying to dynamically create one of the very nice buttons that the library has.
Basically what i want to do is enter text into an input field and when spacebar is pressed it creates a jQuery mobile button with the text.
My js works beautifully when im using just jquery to make the buttons etc but when i use jqm the but initialises to class=ui-btn-hidden for some reason.
Anyone with experience on jqm please help
Here is an example:
http://jsfiddle.net/WEyyh/3/
JS
$('#createButton').bind('click', function() {
$('#buttonPlaceHolder').append(''+$('#buttonText').val()+'');
// refresh jQM controls
$('#home').trigger('create');
});
HTML
<div data-role="page" id="home">
<div data-role="content">
<input type="text" id="buttonText" placeholder="Enter Button Name"/>
<input type="button" id="createButton" value="Create Button" />
<div id="buttonPlaceHolder"> </div>
</div>
</div>