I have a requirement to support push-style and overlay panels with variable widths in my desktop webapp and jQuery mobile comes so close, except for the lack of variable panel widths.
I have seen various answers on StackOverflow explaining how to override all the CSS properties to change the width globally for all panels, but I need to specify a different width for individual panels.
Is this possible in jQuery Mobile? If not, I would be interested to know if this is an issue with JQM itself or a technical limitation in general related to the way CSS transitions work maybe?
At this point it is not possible, at least not easily, you will need to heavily modify CSS to make it work. But to ask your question you can have panels with a varying width. If you need an example leave me a comment and I will make you one.
Or if you want to wait a bit, next jQuery Mobile version 1.4 will have this by default. Unfortunately alpha 1.4 will come out in next few days, so stable version will come in 1-1-5 months. If you are not ready to wait I will create you a working example with jQuery Mobile 1.3.2.
EDIT :
My bad, 1.4 alpha is out: http://jquerymobile.com/blog/2013/07/25/announcing-jquery-mobile-1-4-0-alpha/
Related
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 was able to use the dialog, but need a typical modal dialog which has the current page in the background and the dialog is on top of the current screen.
The default dialog seems to take the whole screen and the current page is gone with the mobile.changepage call to display the dialog. Even if there was a way to adjust the height and width of the dialog it still wont serve the purpose since the previous page is already gone.
I believe there are some plugins, but I'm wondering if there is one which comes with the default library (1.0 final version) or if there is a way to create one using the library without a lot of coding if it is possible.
At this moment,this support is not there in JQM 1.0 library.But this feature is going to be there in the 1.2 version as per the JQM blog http://jquerymobile.com/blog/ . In the meanwhile you can check http://filamentgroup.com/tests/popup/docs/pages/popup/index.html to see a rough preview.May be you can check the source code and see if it is possible to do so in JQM 1.0
Hope that helps.
Good Luck!!
I would like to add tabs and modal window widgets all over my website. Both widgets will vary in appearance depending on the page but functionality will be the same.
I found that JQuery UI provides both tabs and modal widgets. I also found various custom JQuery widgets such as modal window by Eric Martin http://www.ericmmartin.com/projects/simplemodal/ and tab menu by Soh Tanaka http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/
I need an expert opinion on whether its better to use JQuery UI or custom JQuery Widgets.
Whichever you prefer. If you're building a website, you can just go with custom plugins. The advantage is that you can pick anything you like, anything that behaves in the exact way you had in mind.
However, if you're building a web application or you need loads of different widgets on a page, it's best to use jQuery UI or some other full widget framework. You can really benefit from the consistency, it will make your life much easier to get those different widgets interact with each other in a logical way, with the least possible coding. All widgets use consistent naming of properties, methods and events, you will spend less time reading the documentation and more time fleshing out your application. You can even use themeroller to make a custom theme to match the rest of your site, none of the widgets will look out-of-place from the rest.
Just installed sIFR into the site I am building (a personal portfolio site). When using it on pages with slimbox popups, sIFR overlaps the slimbox and makes it dificult to see the image. I tried applying a high z-index to the items I didn't want overlapped, but that didn't solve anything. Here is a screenshot of what it looks like (since my site is not online yet):
http://users.sephiroth.ws/DemonicGoblin/sifr.png
Is there a way to hide the sIFR when a slimbox link is clicked, or a way to adjust the z-index for a way to it not to be always on top? This happens on the latest version of all major browsers (I couldn't test Safari or Chrome though, even though I doubt it will differ)
I ahvent been able to find any information regarding this subject, so if it has been fixed in the sIFR beta it would be nice to know. Thanks.
In sIFR 2 you need to set the sWmode parameter to "opaque". This should allow HTML elements to be displayed on top of the Flash movie.
In sIFR 3, the parameter is wmode, though you can also use opaque: true.
Thank you so much - just saved my day.
I saw that lightbox break - so did I nearly:)!!!
But what a straight forward answer and solution thanks!! again
The file in mention is:
sifr.js
and put a code like:
sIFR.replaceElement(named({sSelector:"h1", sFlashSrc: "http://localhost/ddddddd/templates/template/i_font_swf/carbon_std_swf.swf", sCase: "upper", sColor: "#86ca29", sWmode:"opaque", sBgColor:"#fff"}));
I just write it cause took me some time to remember where this setting initially was - when I did the sIFR long ago.
I hate default select control, that's because it can't be styled in IE using CSS.
This is why I developed a new select control from scratch, using HTML + CSS + JavaScript.
I did a great job in the past two days matching CSS and HTML together, but today I discovered a bug wich looks very hard for me to fix.
In IE 7, when I have tow controls on the same page, the one from top does not overlay the one from bottom.
See the image: coolrgb dot com/files/select-help.jpg
Download the demo page (HTML + CSS + Javascript): coolrgb dot com/files/select-help.zip
Please help me, this control looks so nice for me and I want to use it on all my projects from now on. This bug killed my hopes and lot of time.
Thank you.
If you give each control the same z-index, then you will not have control over the stacking order.
I would suggest modifying your control to behave more like a real SELECT element: only one can be open at a time, or losing focus causes it to close. Alternately, you can set a high z-index when the control has focus, and a lower one when it does not.
Another thing to look out for: try putting some other controls like radio, checkbox, and select under your control. You might find that IE also will not hover over those even if you give them a different z-index (as #grawity explained in his answer). This is why you'll typically see widget demos displayed on top of these elements, as shown here: http://jqueryui.com/demos/dialog/
A typical hack to fix this is to use an iframe, but that probably deserves a different question altogether.
Edit: After rereading the question, this answer now seems totally unrelated, but I'm keeping it here anyway.
Not really an answer, but an attempt to explain:
In Internet Explorer, <select> tags are implemented as simple windowed controls, while all other elements are windowless controls (this allows them to be styled). That's why these tags are always on top and don't follow the z-order rules. (The drop-down menu part must be styleable so it's a windowless control, and so it shows under the main part.)
In Firefox all elements are windowless, and in IE8 they should be too.