I have a series of buttons in jquery mobile that need to have their own look and feel. I have given them a custom class (e.g., "custom_btn"). They are in the footer of a specific page. I am able to change the text size using
#thisPage .ui-footer .ui-btn-text {
font-size: 36px;
}
The problem is that I don't want this to affect all the buttons in the footer, but instead only the ones with the .custom_btn class. I've tried the following, all to no avail:
.ui-footer .custom_btn.ui-btn-text
.ui-footer .custom_btn .ui-btn-text
.ui-footer .ui-btn-text .custom_btn
.ui-footer .ui-btn-text.custom_btn
.ui-footer .custom_btn.ui-btn-inner .ui-btn-text
.ui-footer .custom_btn .ui-btn-inner .ui-btn-text
.ui-footer .custom_btn-button .ui-btn-text
.ui-footer button.custom_btn .ui-btn-text
.ui-footer button .custom_btn .ui-btn-text
In looking at the web inspector, it appears the class is at the button level and should therefore be an ancestor to .ui-btn-text and a child of .ui-btn. However, any time I place the .custom_btn class in the code, the styling breaks. How do I give a custom style to these buttons?
EDIT: Here's the code I'm using to generate buttons, labeled 1-9 (ignore the extra whitespace in front of the button tag. It's there to get the tags to appear in this post).
< button data-role="button" class="construct_answer" data-inline="true" value=1>1</button>;
< button data-role="button" class="construct_answer" data-inline="true" value=2>2</button>;
< button data-role="button" class="construct_answer" data-inline="true" value=3>3</button>;
< button data-role="button" class="construct_answer" data-inline="true" value=4>4</button>;
< button data-role="button" class="construct_answer" data-inline="true" value=5>5</button>;
< button data-role="button" class="construct_answer" data-inline="true" value=6>6</button>;
In an external .js file, I have this code
$(document).bind('pagecreate',function(e){
if (e.target.id == 'assessment') {
$('.consruct_answer').prev().css({'font-size':'30px'});
}
}
The curious thing is that, when I include this code in the "content" section, I'm able to style the buttons using the solution Phil provided without a problem. However, I can't get it to work when this same code is in the footer. Any clues why this would be?
Related
So I'm trying to add in a glyphicon of a check mark next to the word once it's been clicked by the user. Imagine you click the button TEST and the entire button changes color and a checkmark shows to the left of the word test.
I have the following:
<button type="button" class="btn wk-prd-btn" style="margin-right: 15px;"><span class="fa fa-check-circle"></span>TEST</button>
Then for CSS I have:
.wk-prd-btn:focus {
background-color: #e74481;
color: white;
}
.wk-prd-btn:hover {
background-color: #e74481;
color: white;
}
I've considered putting a div around the button and doing an overlay in the CSS but then that affects the text for the button itself which I don't want to do. Any suggestions on how to handle?
Used the following:
<button type="button" class="btn wk-prd-btn wk-click"> MUG</button>
Then in the CSS:
.wk-click:focus:before{
content: "";
font-family: "fontawesome";
}
Just need to get the buttons to maintain their click. Hopefully my blunder helps others.
I've been trying for days now, but it won't work. I have a controlgroup containing some checkboxes, which are being bound with knockout.js:
<div data-role="content">
<div data-role="fieldcontain" data-bind="with:selectedList, jqmRefreshList:selectedList">
<fieldset data-role="controlgroup" data-bind="foreach: { data: items }" data-inset="true" data-filter="true" data-mini="true">
<input type="checkbox" data-bind="attr: {id:guid}, checked:isChecked" />
<label data-bind="text:value, attr: {for:guid}"></label>
</fieldset>
</div>
</div>
I'm using a "taphold" event, on which I want to open a popup:
$(document).on('taphold', '.ui-checkbox', function (event) {
$('#listitem-page #add-listitem-popup').popup('open', { transition: 'pop' });
});
The popup opens normally, but the big problem is that the checkbox is being checked as well. The checkbox should only be checked on a "tap" or "vclick", which is the default behaviour and seems to work fine. The problem is that when i taphold (long touch), the popup is opened, and at the moment I release my finger from the screen, the vclick is generated and the checkbox is checked.
I tried several things (on the right location in the document):
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
$.event.special.tap.emitTapOnTaphold = false;
.ui-checkbox {
-webkit-touch-callout: none !important;
}
.ui-mobile {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
in the vclick eventhandler (and the taphold eventhandler), but there seems no way to cancel the vclick from happening after I release my finger from the screen (taphold). Does anyone have suggestions? Thank you!
PS, the problem is on an Android device...
I'm trying to give a "Options" drop down in the header bar. I've successfully added it to the header. But the problem is, it is stretching in its "expand" state, and return to normal in its collapse state.
Here's the fiddle to the problem : http://jsfiddle.net/vNTR5/
I've tried a couple of things :
I noticed the "ui-collapsible-heading ui-collapsible-heading-collapsed" class in the collapsed state, vs "ui-collapsible-heading" class in the expanded state. I captured the events and tried adding the "ui-collapsible-heading-collapse" class. It resulted in keeping the list permanently "expanded" once it had been expanded.
I tried making custom css class, and adding and removing those. But it simply won't take in margin-left added through a class. It takes it when its inline.
Please help.
Code snippet:
HTML:
<div data-role="header">
<h1>Main Menu</h1>
<div data-role="collapsible" id="optionsMenu" data-mini="true" class="rightMenu" data-collapsed-icon="gear" data-expanded-icon="gear">
<h3 style="margin-left:-20%;">Options</h3>
<ul data-role="listview">
<li data-icon="false">Settings</li>
<li data-icon="false">Logout</li>
</ul>
</div>
</div>
CSS:
.rightMenu{
position: absolute;
top:-10%;
right:2%;
}
Working example: http://jsfiddle.net/Gajotres/FSSzK/
.rightMenu {
position: absolute;
top:-10%;
right:2%;
width: 100px !important;
}
.rightMenu .ui-collapsible-content .ui-listview {
margin: -10px -15px -10px -35px !important;
}
I'd like to pop up a dialog that is not full screen, i.e., it "floats" above the page which opened it. Here is what I am trying:
<div data-role="page" id='Page1'>
<div data-role='button' id="Button1">Open Dialog</div>
</div>
<div data-role="dialog" id='Dialog'
style='width:200px; height:100px; top:100px; left:100px;'>
<div data-role='button' id="Button2">Close</div>
</div>
<script>
Button1.onclick = function() {
//$.mobile.changePage($('#Dialog'))
$.mobile.changePage('#Dialog',{role:'dialog'})
}
Button2.onclick = function() {
$(".ui-dialog").dialog("close");
}
Even though I set the bounds on Dialog's div, it is still full screen.
Here's what I came up with (after some great hints from Jasper):
<div data-role="page" id='Page1'>
<div data-role='button' id="Button1" >Open Dialog</div>
</div>
<div data-role="dialog" id='Dialog'>
<div data-role='header'id='Dialog_header'><h1>Dialog</h1></div>
<div data-role='button' id="Button2">Close</div>
</div>
<script>
Dialog_header.onclick= function(e){
$("#Dialog").fadeOut(500);
}
Button1.onclick = function(e) {
var $dialog=$("#Dialog");
if (!$dialog.hasClass('ui-dialog'))
{$dialog.page()};
$dialog.fadeIn(500);
}
Button2.onclick = function() {
$("#Dialog").fadeOut(500);
}
Button2 is a bonus: it shows how to close the dialog from code.
You can fiddle with it here:
http://jsfiddle.net/ghenne/Y5XVm/1/
You can force a width on the dialog like this:
.ui-mobile .ui-dialog {
background : none !important;
width : 75% !important;
}
Notice I also removed the background so the dialog can appear on top of the other page. The only problem that remains is that when you navigate to the dialog, the other page is hidden so the dialog appears on top of a white background.
Here is a demo: http://jsfiddle.net/jasper/TTMLN/
This is a starting point for you, I think the best way to create your own popup is to manually show/hide the dialog so jQuery Mobile doesn't hide the old page.
Update
You can certainly use a dialog as a popup with a small amount of custom coding:
$(document).delegate('#dialog-link', 'click', function () {
var $dialog = $('#dialog');
if (!$dialog.hasClass('ui-dialog')) {
$dialog.page();
}
$dialog.fadeIn(500);
return false;
});
Where dialog-link is the ID of the link that opens the dialog as a popup.
Here is a slight update to the CSS to center the modal horizontally:
.ui-mobile .ui-dialog {
background : none !important;
width : 75% !important;
left : 50% !important;
margin-left : -37.5% !important;
}
And here is a demo: http://jsfiddle.net/jasper/TTMLN/1/
here is a plugin that u can use..this plugin is also customizable with ur own html.
simpleDialogue plugin for jquery mobile
I'm using a jquery dialog.
The content of this dialog is dynamic so the height change when the dialog is open.
$("#a_div").dialog({ width: 400 });
The dialog initially appears center in the page. but when the height change is no more center.
How can i refresh the dialog's position without close and reopen it?
thanks
You need to re-set the position by doing:
$("#a_div").dialog({
position: { 'my': 'center', 'at': 'center' }
});
The position is set once when creating the dialog, but can be altered afterwards (or just re-set at the same value, forcing jQuery to recalculate).
See this demo: http://jsfiddle.net/petermorlion/3wNUq/2/
If you want to use the exact position settings as used by jquery ui for the initial positioning, you can grab the options from the jquery ui code and use them again any time you want to reposition your dialog.
function refreshDialogPosition(id) {
$("#" + id).position({
my: "center",
at: "center",
of: window,
collision: "fit",
// Ensure the titlebar is always visible
using: function (pos) {
var topOffset = $(this).css(pos).offset().top;
if (topOffset < 0) {
$(this).css("top", pos.top - topOffset);
}
}
});
}
Use:
refreshDialogPosition("YourDialogId");
This will also make sure your title bar is always visible. Otherwise your title bar will be outside your screen when using dialogs with large content. (content height > window height)
Have a nice day.
You can try to resize the dialog using its classes by JQuery directly (documentation here)
The basic structure of JQueryUI Dialog is this:
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
<a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
</div>
<div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
<p>Dialog content goes here.</p>
</div>
</div>
So, maybe you should play with classes's width and height to set the best.
Another solution is to set dialog's width directly before open (when your data is successfully loaded):
$("#a_div").dialog({ width: 400 });
$.get('my_url.php',function(data){
$('#a_div .ui-dialog').css('width','400px');
// Or...
$('#a_div').css('width','400px');
});
I hope it helps you.
Marked as Correct didn't work for me. It persists position once it opened.
Following code will reset dialog position, every time you open/re-open it.
$dlg.dialog({
open: function(event, ui) {
// Reset Dialog Position
$(this).dialog('widget').position({ my: 'center', at: 'center', of: window });
}
});
$dlg.dialog('open');