a Project I am currently working on uses the jQuery UI framework for some of its widgets.
To provide the user with a global look and feel I would like to use the framework also for its css stuff.
I am implementing at the moment a dashboard like homepage, where the user can see an overall status of its data. This dashboard is build of some divs that should be aligned into a grid layout.
I try to style the divs like follows
<div class="ui-widget">
<div class="ui-widget-header">Box Header</div>
<div class="ui-widget-content">
Content of the Box
</div>
</div>
Later I would like to implement some draggable-and-sortable functionality.
The Problem I am facing right now is that the boxes aren't properly aligned.
Does anyone has a hint on using jQuery.UI for that kind of css work?
I was studing the CSS framework documentation on jqueryui.com but there aren't that much information.
best regards,
Gordon
I tried your example and it works. I didn't see anything wrong... Which browser are you using? if you are using IE by any chance that could be the problem. Even though it is suppose to be cross-browser... I do not use IE so I can't check that, sorry. Try it with any other browser and see if that is fixed. Also be sure you are including the ui-core and the ui-theme files. Do not include any other CSS file and see if that is fixed. I recommend you to use firebug (in firefox) to see how the styles are applied.
Check how the CSS is applied in this page. You may find it useful.
Can you provide an example where it doesn't work for you?
Maybe you load your own css after you load the jQuery-UI-css and overwrite something.
If your content box and header box don't align, it is probably due to different padding in the css, try setting your content box padding to the same as your heading box padding. This fixed the issue when I came across it.
Related
There appear to be changes in the way jQuery Mobile handles icons starting from v 1.4. For instance
Delete
now the generated markup reads
<a href="index.html" data-role="button" data-icon="delete" class="ui-link ui-btn ui-icon-delete
ui-btn-icon-left ui-shadow ui-corner-all" role="button">
"Delete"
::after
</a>
The after pseudo class appears to use markup from the corresponding icons.min.css file which reads
.ui-icon-delete:after
{
background-image: url("data:image/svg+xml;
charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22..g%3E");
}
As far as I can tell the icon images in the /images folder do not get used at all. No issues with this since it seems to work. However, I would be most grateful to anyone who might be able to explain these changes. Also, why do they insist on supplying two separate .min.css files - one only for the SVG images.
...A while later
Hmmm... I looked into this a bit more and still even more puzzled. The jquery.mobile.icons.css file does not change and neither do the images in the icons-png folder. Why do they not just get people to link to them from their CDN?
The SVG spec is extensive and no browser currently supports the entire spec. That being said all the latest versions of all the major browsers have basic SVG support. Since none of them have complete support you'll need to check individual features in each browser you're targeting.
jQuery Mobile tries to provide all around support, not like Sencha Touch which only provided support for we-kit browsers, at least initially.
Reason for 2 separate implementations are support for older browsers. If older browser is detected it would gracefully switch to PNG icons, as it used to be.
Update:
jQuery Mobile has 2 separate CSS file structures:
First one is: http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css
This one has everything inside, support for bot kind of icons and everything is part of CDN repository.
For example, here's an icon set from CDN repository.
Second one is: http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css
This one holds only core jQuery Mobile CSS, it is used with Theme Roller. When you download theme from themeroller you will find everything you need for full jQuery Mobile customization, including incons.
If you want icons to be part of CDN and you are using your own theme just open jquery.mobile-1.4.2.min.css, copy it initial CSS dealing with icons and place it inside jquery.mobile.structure-1.4.2.min.css. There's no point ion creating numerous numbers of CSS files which will cover everyone's needs. At some point you need to do something by yourself.
Thou, and I would agree with this, it is shame why jQuery Mobile developers didn't create custom CSS down loader like they did for JavaScript.
I'm using jQuery mobile to build a simple web app and I want to add a navigation bar common to all pages.
I've found this great example, which led me to this question: do I really need the attribute data-role="navbar"?
Because it adds unnecessary html and css to my code, obligating me to override all these unnecessary styles.
Thank you
I haven't seen the need for data-role="navbar". This page here might help: jQuery Mobile Data Attributes.
It looks like it might only be needed for styling.
I'm only using Angular.dart on part of my page...The rest contains another Dart app (compiled down to JS...everything is in JS from Dart) and some other HTML, etc. Essentially my Angular.dart app is just a component within the page.
However, now all links on the page seem to want to go through Angular.dart routing. I don't even need routing (though have a few defined) technically.
Is there a way to disable the routing altogether? So that when clicking on Another page actually works like normal, changing the URL in the address bar? Right now it's just going to # and all my links are disabled. I wasn't even using ng-click or anything like that either.
How can I make Angular.dart just leave those links alone?
Thanks.
Since route_hierarchical-0.4.19 you can simply add a target="_self" to your <a href="...."> to avoid angular router.
You can reduce the scope of Angular in your page by putting ng-app on the element where Angular.dart is used. Thus, the links outside of this element will work.
link
<div ng-app>
link
</div>
For links inside Angular part there's perhaps a native way to handle them but you can add a directive that handle onClick on the element and performs window.location.assign('link').
I am starting a jquery mobile/phonegap application. And would like to know if there is any way I can keep my code in seperate files so it is easier to manage. From all the reading I have done on jquery mobile it looks like all of your pages are in one file and are just seperated by divs like <div data-role="page" id="page-one"></div>. I guess I could try to make some type of a makefile that concatenated them all together, but it seems that most apps are pretty lengthy that they should have a solution for this. Keeping all the code in one file just seems impossible to maintain.
JQuery demo, three pages, all one source file:
http://demos.jquerymobile.com/1.1.0/docs/pages/multipage-template.html
You can just use normal links with jQuery mobile:
http://demos.jquerymobile.com/1.4.0/navigation/
It will "hijack" the link and use transitions to give you a native like animation. As Flatlineato pointed out you need to make each page confirm to the required markup, and you'll need to repeat your headers/footers etc on each included page.
Or you can use more complex solutions to dynamically change the content of your page, which can be stored in multiple files, like this other SO post:
including the header and footer in jquery mobile multiple page site
But I would also agree with Leo and say the jQuery mobile isn't the best choice for Phonegap, it's not that well optimized, and runs slower in the Phonegap webkit view than it does in native safari.
I've also switched to a custom navigation system and dropped jQM early on in my Phonegap development, but that was over a year ago, more recent versions may work better.
I think my personal API is what you are searching for:
https://github.com/charnekin/api
Demo example:
http://yopo.es/cordovapi/
jQuery Mobile allows you to have the pages in separate files. Obviously in each file must conform to the structure of the markup pages.
To point to another page in the link instead of the id you specify the correct file name. If the file then you enter multiple jquery mobile pages must also specify the id.
Is there a way to edit your views and CSS and see the results on the fly like with a jsfiddle program? I can't seem to use jsfiddle when programming with Rails because so many of my views are Rails code.
Try the Webkit web inspector, or Firebug in Firefox. You can select any element, edit attributes, modify the css, and change the text on the page.
If you have your web running on a server (localhost works too) you can try WebPutty from Fog Creek guys to change your CSS and see the results on the fly. It's free for now.
You can read how to import your site here