I am using this incredibly awesome jquery mobile oriented datepicker that I would like to customize based on device size. I saw some suggestions pointing towards modifying the CSS but I am unable to trap the event that creates the popup dialog that comes up with the calendar.
Is there a jsfiddle that I can look and learn from?
Looking at the examples on the page you provided, it appears to be binding to the vmouseclick event. So you should be able to use click, vmousedown, vmouseup depending on your needs.
So if you had HTML like:
<label for="mydate">Some Date</label>
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox"}'>
Your JQM Would be like:
$("mydate").click(function(){
// Do something
});
I don't see any options of configs to adjust the size of the DateBox upon opening. So you would want to examine the CSS and class settings of the DIV when it is created and then add your own CSS to override the CSS they use (<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />), or download the CSS and Edit it.
There is no default jsFiddle for this, yet I moved an example into one for you to play with if you like: http://jsfiddle.net/Twisty/pNQeD/
Related
I really like bits and pieces of both jquery ui and jquery mobile... mobile makes it easy to render my page for mobile devices, ui gives me a really powerful spinner widget for number boxes that gives me a spinchange event that is too useful to ignore...
But, when I have a selectmenu on a page with both, it short-circuits that select menu and prevents it from opening entirely.
following some pages I found here on stackoverflow, I saw that some people experience problems getting a select to work with jquery mobile, and that wrapping it in a form and setting the data-native-menu option to "false"...
<form action="#" method="get">
<div data-role="fieldcontain">
<label for="option1" class="select">Pick one:</label>
<select id="option1" name="option1" class="optionPicker" data-mini="true" data-native-menu="false" >
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</form>
but that doesn't fix the problem. Cutting either jquery mobile or ui from the document does... but, again, I lose desired functionality elsewhere.
I found that I can turn off jquery mobile for just that item specifically by doing the following after I load jquery but before I load jquery mobile:
$(document).bind("mobileinit", function () {
$.mobile.selectmenu.initSelector = ".neverGonnaLetYouClick";
});
I would assume something similar exists for JQuery UI? But... I am not finding it anywhere...
Did some testing and I suspect it is due to your load order.
Example: https://jsfiddle.net/Twisty/40n27pca/16/
If you read here: https://api.jquerymobile.com/global-config/ they talk about the following:
Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
So I would advise the following:
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
If you reverse it, jQuery UI gets control of selectmenu.
Hope that helps.
Please note I'm not interested in a Polymer-, Angular- or route-based solution here. I'm trying to learn "pure" Dart here, and while I'll likely switch to using one of those frameworks down the road, I need to have a good understanding of the fundamentals first.
In Dart, is it possible to download a whole bunch of HTML "snippets" (see below) all at once (at app startup), and then load them into the browser (either the entire window or just inside a particular <div> element, etc.) dynamically?
For instance, my HTML file might have a <div> element:
<body>
<!-- lots of HTML -->
<div id="container"></div>
<!-- more HTML -->
</body>
And I would like to download two "snippets" (DOM subtrees, HTML templates) of HTML, and dynamically load either one of them into the container div tag. Perhaps one of the snippets looks like this:
<h1>I'm Snippet #1!!!</h1>
<input type="button" name="redPillButton" value="Red Pill!" />
And another snippet my look like:
<h1>I'm Snippet #2!!!</h1>
<input type="button" name="bluePillButton" value="Blue Pill!" />
Can the two snippets be inside their own HTML file, or do I have to put them inside one big file and extract out the "snippet" that I want to load? Either way, how do I accomplish this in a Dart web app?
You can keep each parts in their own file and load them like that :
HttpRequest.getString("part.html").then((html) {
querySelector('#container').innerHtml = html;
});
When using jQuery Mobile .js along with jQuery Mobile .css, what is the best way to customize the default styling such as a link button?
Using jQM, a simple link can be turned into a button by using the following code:
Link button
data-role="button" allows jQM to add classes to the link so it can be styled into mobile button touch abled like so:
<a href="index.html" data-role="button" data-corners="true" data-shadow="true"
data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn
ui-shadow ui-btn-corner-all ui-btn-up-c"><span class="ui-btn-inner
ui-btn-corner-all"><span class="ui-btn-text">Link button</span></span></a>
Is it OK to actually edit the jQM css file for example the ui-btn-up-c class? Or is it better to override the styles somehow, perhaps in an external stylesheet?
I have a couple of concerns. I am wondering if it's possible to break some of the functionality by directly editing jQM.css as jQM seems to use the stylesheet heavily.
Also will it be a problem on updating? Do jQM release a new stylesheet when a new version comes out which would override my edits to the main jQM stylesheet?
Basically what I am asking is how do I edit the jQuery Mobile built in theme?
Thanks and look forward to your answers :)
Intro
If you want to change classic jQuery Mobile CSS everything depends on what do you want to do.
Theme roller
Classic way would be to create a completely new set of theme's or add them to existing ones. It is done through jQuery Mobile theme roller. When you open it it will automatically create 3 themes you can then modify as you wish. Or you can Import your current theme CSS and add several more themes (this is probably best solution if you want to change complete look).
Custom CSS changes
This solution requires a little bit of finesse. First if possible NEVER change original CSS unless you are 100% sure what you are doing. For example if you change default button classes it will also affect other widgets that use button classes and there are a lot of them.
Correct way would be to change single/multiple elements with custom CSS file. This way original CSS files is intact and new one can be changed / removed at any time.
To do this you will need to use Chrome Webmaster tools or additional plugin called Firebug (for Chrome and FireFox). There are several more solutions but this two are most commonly used.
Problem to think about
Not all is well in this solution. For example, classic a tag button can be easily modified cause that same a tag will stay as a parent of a future styled jQuery Button. But, if your button is created from input tag, like this:
<input type="text" value="Some value" id="change-me"/>
you cant use #change-me id to correct its CSS. Mainly because this input is not a parent tag for a future button, it will be a inner part of a button when jQuery Mobile styles it. It will look like this:
<div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c">
<input type="text" id="change-me" value="Some value" class="ui-input-text ui-body-c"/>
</div>
To fix this wrap that input with another div element. Move id from input to div element and then use it to change inner CSS styles.
How to correctly override CSS styles
This is one of a most common questions in this StackOverflow group. When changing predefined CSS rules you must use !important keyword. Changes will usually not work without it. For example if you want to change input button style background (from a previous example, wrapped in a div) you would do it like this:
#change-me .ui-input-text {
background-color: red !important;
}
If nothing else works change original CSS file(s)
jQuery Mobile can have 1 or 2 CSS files. When using one file both theme and structure is included, or they can be separated into two files. This is useful if you want to change CSS directly. Theme CSS can be easily imported and exported into theme roller without affecting structure CSS file.
One last thing, some things can only be changed by modifying original structure CSS file. For example jQuery Mobile uses a horrible blue glow effect to show when some element has been pressed. It can be removed only directly from structure CSS file.
The solution lies in CSS specificity within your own additional CSS file. All you need to do to override any formatting in JQM is to first apply an id to the element you wish to override JQM formatting with your own CSS.
Next, in your own CSS, specify that the class be applied to the id of the container.
As an example, I'll remove the JQM border from an image link below.
#img_button_1 .ui-btn-inner {border: none !important;}
Where #img_button_1 is the id of the HTML anchor element.
<a id="img_button_1" data-role="button" data-theme="none" data-corners="false" data-shadow="false" data-inline="true"
href="http://www.google.com" target="_blank"><img src="http://www.google.com/images/srpr/logo1w.png" alt="Google" />
</a>
It's as simple as that.
One more important thing, and that is that load order of the external CSS files is significant, and you will want to load your own CSS after JQM CSS.
I have forked a working example at jsFiddle below.
http://jsfiddle.net/Z8Xnx/14/
The biggest benefit with this approach, is you do not have to alter the JQM CSS at all, and can leave it alone. This becomes important if your want to import your JQM back into the ThemeRoller tool at a later date. If you modify the actual JQM CSS by hand, you may have an issue successfully importing your JQM back into ThemeRoller again.
I have successfully used this approach to resolve every JQM CSS conflict I have run across since figuring out this specicivity requirement issue.
Hope this helps everyone with an easy solution to their JQM style conundrums.
** UPDATE **
It has been noted to me that this method does not work with the latest version of JQM (1.3.0b1), and that is not correct. I have investigated and found this to be a problem with the implementation of this version of JQM at jsFiddle. To prove this, I have put up an example page on my own space with the exact same code as that shown in the jsFiddle example. This means as of my writting, you really can't trust anything at jsFiddle using the lastest version of JQM from the options. Just a heads up, and you can find the working implementation at...
jQuery Mobile CSS Override Example
If you are looking to simply change the styling then you can use the jQuery Mobile themeroller.
http://jquerymobile.com/themeroller/index.php
Otherwise, I would suggest using another stylesheet rather than directly editing the jQuery mobile stylesheet.
If you are looking to reduce the number of files that you are serving to your visitors then I would compress both stylesheets and then just insert your styles below their styles as a production copy. That way, you can keep them compressed and combined for production, but you could keep them separate for easy upgrading later and for development ease of use.
I'd like to make a masked input field with autocompletion. In my example i have a field with article numbers _.___.___. I have also a list of often used articles. The user can select existing article numbers from the list and can add new articlenumbers.
How can i combine these two primefaces components?
Thanks for your help
Lepo
To achieve this you have two possibilities: Create a custom component or set the inputmask manually via jQuery. I implemented the second method this way:
Use the normal Autocomplete Widget
<h:form id="myPanel">
<p:autoComplete id="number" value="#{myBean.number}" completeMethod="#{myBean.complete}" />
</h:form>
Activate Inputmask via this little Javascript
<script>
//<![CDATA[
$(document).ready(function() {
$(':input[id="myPanel:number_input"]').inputmask("mask", {"mask": "(999) 999-9999"});
});
//]]>
</script>
(3. Make sure you have included the inputmask jquery library:)
<script src="jquery.inputmask.js" type="text/javascript"/>
Although this solution does what it should do, i think the custom component would be the more cleaner way.
Hope my Snippet helps you anyway.
How to use Tooltips with JQM Sliders? I would like to add Tooltips to my JQM Ranges (e.g. 1-5), saying at what point the ui-slider-handle is positioned ("Your choice: 3"). I've tried qTip:
$('#content a[href]').qtip({
content: 'i am a qtip'
});
but it does not work on my mobile device. I would like to let the user know which choice he has made (before he gets off the screen with his thumb).
There is an extension for jQuery Mobile that provides this functionality that can be found here
What you will do:
Add a data attribute of data-popup-enabled="true" to your input element to display the tooltip.
Copy the JavaScript code on the site and add it to your solution
Copy the CSS ruleset on the site and add it to your solution.
Here's an example of how your input element for the slider should look:
<input type="range" name="slider-1" id="slider-1" min="0" max="100" value="50" data-popup-enabled="true">