I'd like to provide a .png that renders as the background of a jQueryUI-based dialog object. This posting references the use of an 'overlay:' parameter but 'overlay' is not listed in the current documentation.
What's the current method to achieve this effect?
thx
You could use CSS to accomplish this. Just set a background-image: url(...) on the div you're making into a dialog (here's more about background-image).
Here's an example: http://jsfiddle.net/andrewwhitaker/S5pmw/
Edit: Just looking at the 1.6 code, it looks like you could specify CSS rules for the overlay that appears behind the dialog (if you specify modal). It doesn't control the actual background of the dialog itself, and it looks like this option was removed in 1.7(3). Here's a related jQuery forum thread about the option. Excerpt:
The overlay option was removed in
favor of defining styles in your
stylesheet. The overlay div has a
class of ui-widget-overlay.
So to accomplish the behavior the overlay option gave you, you just need to define CSS rules for ui-widget-overlay.
Related
I'm using the material design package for my application layout menu.
I have 2 menus items where I can't find an icon that fits, so I got 2 SVG files that I added to the project.
I want to use this as the material-list-item icon instead of a material-icon.
Is there a way to do this by either adding a custom icon to the material-icon library or replacing the icon in the list.
If yes, please I need a complete example as I am new to DartAngular, still trying to figure out some stuff.
There is a mixin for material-icon which will get allow you to change a material-icon into using an SVG. https://github.com/dart-lang/angular_components/blob/c6cb3d783e72ff1ed7974f18b7f169778c73d39b/angular_components/lib/material_icon/_mixins.scss#L49
There is indeed a mixin for this as pointed out in Ted Sander's answer, but for the moment it does not seem to work. I've asked this on Gitter but did not get an answer, and I also opened a ticket on Github for this seemingly broken feature.
It's a telltale sign that even the official Angular Components Gallery has a broken SVG icon example.
I'd suggest to implement this by using separate list item rendering for those that have an official material-icon representation and those that need a custom SVG image, and conditionally render them with the ngIf directive.
I am using a code on my blog that is contained within <script> </script> tags, that when looking at the page, creates a link. My overall blog code sets a color for all links but I want this link to be a different color than all the rest.
I tried using a few different methods of changing the text color and even of changing the link color but nothing I tried worked.
It's hard to see what you are doing wrong without seeing your code, but basically all you will need to do is set the color of your link with the style attribute when inserting the HTML, something like style="color:red".
Assuming you are using pure JavaScript and your script looks something like this, this will give you a red link:
document.getElementsByTagName('body')[0].innerHTML +=
''This is red!'';
If you are using jQuery your script may look something like this:
$('This is red!').appendTo($('body'));
Inline styles have the highest priority of all CSS so these will override any other CSS you may have.
Leave a comment and update your question with your code if this doesn't help you, and I will try to improve this answer!
Throughout the jQuery Mobile docs, they use a left-side menu for navigation that changes to a more mobile friendly version when the browser width is smaller. You can see an example on this page.
They use this layout throughout the docs, and I can see in the source that they use two divs with the IDs "content-primary" and "content-secondary." My question relates to the fact that I can't find anything about this structure actually discussed in the documentation. It seems very strange that they would not include such a useful widget in the Framework. Did they use custom code to make this, or did I miss it in the documentation somehow?
I'm frankly quite surprised to see how challenging it's been to find a left nav example that works consistently and as expected in JQM.
I wound up copying code directly from the JQM docs, including grabbing their custom .js and .css scripts (which defines the .content-primary and .content-secondary classes, as well as the various #media queries which make the menu responsive).
The JQM docs do not use the "multi-page" format. Instead, each nav menu item links to a wholly separate URL (presumably prefetched into the DOM by adding data-prefetch="true" to the link), so each new page/URL must redefine the same nav menu over again.
This immediately makes my developer brain think "let's abstract the menu and include it on each page automatically". But how to 'include' the menu on each page without PHP (or other server-side language)? This is the problem I have yet to solve.
You may be able to call the $(document).bind('pageinit', function to manually inject your menu into the loading page by using javascript/jquery, but I have yet to figure out how to do this properly.
I'll keep you posted if/when I have a workable solution.
Actually this is not specific to jquery mobile, this is CSS3. You can check documentation here: http://www.css3.info/preview/media-queries/. Essentially what they do is specify style rules for different screen width using media query as shown in this example:
#media all and (min-width: 650px) { // you can define your width here
// style rules here
}
Are you talking about something like the left menu at http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/panels/panel-nav-form.html# ? Haven't played with it but it looks like these days it just takes
<div data-role="panel" data-position="left" data-position-fixed="false" data-display="reveal">
I have a problem that drives me nuts, i have used themeroller from jquery mobile and i love this tool, it has its flaws and one of them is when you use dark backgrounds it leaves a little white stripe at the top of the list you can see it right here
http://yellowgreenmedia.info/1-theme/
it is on the top , left and right of the list, its small but it is there
Is there a fix for this, so i can remove the annoying white stripe
Thanks
Dave
On this:
div class="ui-btn-inner ui-li" ...
Give it:
border-top:0
Worked at my end.
First I would add a HTML DOCTYPE
http://www.w3schools.com/html5/tag_doctype.asp
I think you're missing the opening <html> tag
http://yellowgreenmedia.info/1-theme/ (right click to view source)
and last I think you also need to add just the custom theme and not jQM default css
http://jsfiddle.net/UEuKA/3/
Last I would give the jQM Theme Roller another go as it looks to be adding CSS from RC2
http://jquerymobile.com/themeroller/
http://yellowgreenmedia.info/1-theme/css/style.css (jQuery Mobile v1.0rc2)
One more thing, your custom CSS could be causing the extra line as well, Didn't look at it too much though
http://yellowgreenmedia.info/1-theme/css/custom.css
We would like to be able to customize the areas outside the form elements area itself, such that customers can have all their forms including the areas surrounding the form in their own style. For instance in the area on the top we would like to have a different color and we would like to replace the Orbeon logo by the logo of the customer. Also we would like to hide/remove/customize some buttons that appear below the form. For instance we don't need the buttons for PDF, Email and Close and we want to change the text in the Save button to Submit.
Is that possible? If so, how do we do that? Is there some instruction somewhere for this?
Yes, you can do all of this through properties:
You can change the color at the top by overriding the .fr-top rule defined in form-runner-orbeon.css. For more on how to override CSS, see: Default CSS.
You can replace or remove the default logo with the oxf.fr.default-logo.uri.*.* property. See Default logo.
You can choose which buttons are shown on the Form Runner "details" page by overriding the oxf.fr.detail.buttons.*.* property. See Buttons on the detail page.
You can change the label on a button by overriding resources. See Overriding resources.
I was faced with the problem to change the icon in the browser address and found the answer of Alessandro Vernet:
http://discuss.orbeon.com/page-address-bar-browser-icon-td4660752.html .
But this solution has the drawback that I had to change the orbeon-form-runner.jar, and this with every new orbeon forms release, what I wanted to avoid.
So the idea was to give my icons the same name as the orbeon icons and to load them in a corresponding directory of the resource directory.
So I named my icon orbeon-icon-16.ico and orbeon-icon-16.png and loaded the two files in orbeon/WEB-INF/resources/ops/images.
For Firefox this was OK, but IE continued to show the orbeon icon. Then I noticed that in orbeon-core.jar there where also the 32 pixel icon.
So I added the two files orbeon-icon-32.ico and orbeon-icon-32.png and than also IE was showing our icon.