i try to customize the theme of jquery mobile. In the documentation of "ui-popup" i found two options that I can change concerning theming:
$.mobile.popup.prototype.options.overlayTheme = "jobstaff-de";
$.mobile.popup.prototype.options.theme = "jobstaff-de";
This results the following:
<div data-role="popup" id="loginDialog" class="ui-body-jobstaff-de" data-theme="jobstaff-de" data-overlay-theme="jobstaff-de">...</div>
So far so good. My question refers to the inner html of this div-area. I found this in it:
<div data-role="content" class="ui-body-c" data-theme="c" role="main">...</div>
Why the theme is reset to "c" here? Do I need to change something else?
Thanks for any help!!
EDIT 1 for Orma: the following themes I changed, too. I've put them into a file called jquery.mobile.theme.js which is loaded after jquery.js but before jquery.mobile.js:
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.mobile.theme.js'></script>
<script type='text/javascript' src='js/jquery.mobile.js'></script>
content of jquery.mobile.theme.js: (jquery.js and jquery.mobile.js are unchanged)
$(document).bind('mobileinit', function () {
$.mobile.page.prototype.options.theme = "jobstaff-de";
$.mobile.page.prototype.options.headerTheme = "jobstaff-de";
$.mobile.page.prototype.options.contentTheme = "jobstaff-de";
$.mobile.page.prototype.options.footerTheme = "jobstaff-de";
$.mobile.page.prototype.options.backBtnTheme = "jobstaff-de";
// Popups
$.mobile.popup.prototype.options.overlayTheme = "jobstaff-de";
$.mobile.popup.prototype.options.theme = "jobstaff-de";
// listviews
$.mobile.listview.prototype.options.headerTheme = "jobstaff-de"; // Header for nested lists
$.mobile.listview.prototype.options.theme = "jobstaff-de"; // List items / content
$.mobile.listview.prototype.options.dividerTheme = "jobstaff-de"; // List divider
$.mobile.listview.prototype.options.splitTheme = "jobstaff-de";
$.mobile.listview.prototype.options.countTheme = "jobstaff-de";
$.mobile.listview.prototype.options.filterTheme = "jobstaff-de";
// selectmenu
$.mobile.selectmenu.prototype.options.menuPageTheme = "jobstaff-de";
$.mobile.selectmenu.prototype.options.overlayTheme = "jobstaff-de";
$.mobile.selectmenu.prototype.options.theme = "jobstaff-de";
// dialog
$.mobile.dialog.prototype.options.theme = "jobstaff-de";
// panel
$.mobile.panel.prototype.options.theme = "jobstaff-de";
//input
$.mobile.textinput.prototype.options.theme = "jobstaff-de";
// buttons
$.mobile.button.prototype.options.theme = "jobstaff-de";
});
I have never modified themes like this :-)
Why don't you just write your jobstaff-de theme (which I assume you have) and manually set it on your JQM page:
<div data-role="page" data-theme="jobstaff-de">
// all widgets will inherit jobstaff-de
</div>
In JQM 1.4, this single theme declaration should be enough to inherit the theme to all widgets on the page without having to specify it again - so no need to overwrite any defaults IMHO.
Related
Given conditionally rendered div with drop-down menu. In order to calculate its position (to open it to up or down) I need to get its height and width.
Of course element doesn't get correct dimensions before the transition is done.
So question is - how do I turn off transition programmatically? Or how do I get future position of element without showing it?
{#if isOpened}
<div
bind:this={thisMenu}
use:clickOutside
on:click_outside={closeHandler}
class="dropdown absolute left-100p text-gray-600 z-10 w-full animated
rounded-lg"
style={finalStyle}
{isInit ? null : transition:slide }>
<slot name="list" />
</div>
{/if}
slide-transition uses getComputedStyle, so maybe that’s what you need. The following is copied from slide function in svelte’s repository (src/runtime/transition/index.ts). Slide-function sets those values from zero to initial value and back.
const style = getComputedStyle(node);
const opacity = +style.opacity;
const height = parseFloat(style.height);
const padding_top = parseFloat(style.paddingTop);
const padding_bottom = parseFloat(style.paddingBottom);
const margin_top = parseFloat(style.marginTop);
const margin_bottom = parseFloat(style.marginBottom);
const border_top_width = parseFloat(style.borderTopWidth);
const border_bottom_width = parseFloat(style.borderBottomWidth);
EDIT:
#bobfanger explained in comments how to make a custom mySlide-function and within that function there are those initial size values available. Here is a working example:
<script>
import {slide} from "svelte/transition"
let show=false
let d
function mySlide(el) {
let s=window.getComputedStyle(d)
console.log("mySlide",s.height)
return slide(el, {duration:2000})
}
</script>
<h1 on:click={()=>show=show?false:true}>Click me</h1>
{#if show}
<div bind:this={d} transition:mySlide
style="background-color:yellow;padding:10px;border:10px solid;">
<p>test</p>
</div>
{/if}
This is much simpler than to use onMount and visibility hacks.
I have the following .html markup
.html
<paper-button
raised
active
toggles
on-tap = "toggler"
class = "bold">Patient *
<iron-icon
icon = ""
id = "fe-icon"></iron-icon>
</paper-button>
</div>
How can I make the * in Patient * red without the entire label being red, and also make the asterisk larger?
Just wrap it with a <span> like >Patient <span class="asterisk">*</span></iron-icon> then you can style it individually.
I have the following markup:
<paper-input id="alias-input" floatingLabel label="Person Alias (eg: King, Eldest Son, Mooch, etc.)"></paper-input>
<paper-input id="birth-year-input" floatingLabel label="Birth Year (eg: 1969)" validate="^[12][0-9][0-9][0-9]$"></paper-input>
<div center horizontal layout>
<paper-button id="add-button" on-click="{{addPerson}}" class="add" label="Add Person"></paper-button>
</div>
To go along with this markup I have an addButton method which does:
addPerson(_) {
// Add the person
// ...
// Clear the inputs
($['alias-input'] as PaperInput)..inputValue = ''..commit()..blur();
($['birth-year-input'] as PaperInput)..inputValue = ''..commit()..blur();
}
This correctly clears the contents of the inputs, which I want. But I also want the PaperInput help label to drop down onto the line as it is when the control is first loaded. My hope was that the call to blur() would do that. Is there some other call to achieve this?
It seems you need to call blur on the actual <input id='input'> element inside <paper-input> not the <paper-input> itself.
I got it working with
import 'dart:js' as js;
var inp = $['alias-input'] as PaperInput;
inp.inputValue = '';
new js.JsObject.fromBrowserObject(inp).callMethod('inputBlurAction', []);
alternatively you can do it like
var inp = $['alias-input'] as PaperInput;
inp.inputValue = '';
inp.querySelector('* /deep/ #input') // not yet supported with polyfills
..focus() // blur doesn't work when the field doesn't have the focus
..blur();
I'm using simple HTML code to work on a drag and drop function as part of my IOS app. This piece of code works perfectly in the browser however when I copy it into my xcode file the image won't drag.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag the image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="images/face.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
Reading over Apple's webview capabilities document states that you have to set a CSS property for this to work.
From the docs:
Making an Element Draggable
WebKit provides automatic support to let users drag common items, such as images, links
and selected text. You can extend this support to include specific elements on an HTML
page. For example, you could mark a particular div or span tag as draggable.
To mark an arbitrary element as draggable, add the -webkit-user-drag attribute
(previously -khtml-user-drag) to the style definition of the element. Because it is a
cascading style sheet (CSS) attribute, you can include it as part of a style definition
or as an inline style attribute on the element tag. The values for this attribute are
listed in Table 1.
So standard draggables will work out of the box, but other elements like div or span require the -webkit-user-drag attribute to be appended.
Example:
#drag1 { -webkit-user-drag: element; }
Source: https://developer.apple.com/library/mac/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/DragAndDrop.html
This code is what worked in the end.
<script>
var nodeList = document.getElementsByClassName('contents');
for(var i=0;i<nodeList.length;i++) {
var obj = nodeList[i];
obj.addEventListener('touchmove', function(event) {
var touch = event.targetTouches[0];
// Place element where the finger is
event.target.style.left = touch.pageX + 'px';
event.target.style.top = touch.pageY + 'px';
event.preventDefault();
});
}
</script>
I do not understand, why eventlistener (copied from demo) does not work, If I add an bitmap to stage. It seems that bitmap causes problem, because if I add another circle etc. the click works fine.
See example:
<!DOCTYPE html>
<html>
<head>
<title>EaselJS demo: Simple animation</title>
<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script>
var stage, circle;
var counter = 0;
var ticounter = 0
var images = []
var mytext = 'kk';
var lepakko;
var mx = 0;
function init() {
stage = new createjs.Stage("demoCanvas");
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 500;
circle.y = 500;
stage.addChild(circle);
stage.update();
lepakko = new createjs.Bitmap("halloween-bat.png");
//Click works, if line below is commented out, why?
//stage.addChild(lepakko);
circle.addEventListener("click",circle_event);
stage.update();
}
function circle_event(event) {
alert("clicked");
};
</script>
</head>
<body onLoad="init();">
<canvas id="demoCanvas" width="700" height="700">
alternate content
</canvas>
</body>
</html>
The click should not work by default. EaselJS library needs explicit enabling of the mouseover event. You need to add:
stage.enableMouseOver(20);
after creating the stage. To change the cursor to a pointer when it's over the object there is a property in EaselJS called cursor:
// doesn't work, even if a function is decleared outside
// circle.addEventListener("mouseover", function() { document.body.style.cursor = "pointer"; });
// this works
circle.cursor = "pointer";
Method enableMouseOver is documented on EaselJS website. Do note that listening to mouseover and other events in EaselJS is a lot more demanding for a web browser.