I just want to use changePage but to have a modal window instead of fullscreen page.
For the moment, I create my own modal box, but jQM doesn't style it probably because it's not a data-role=page.
Is there a solution without adding a plugin ?
Thanks.
Any reason to insist on changePage instead of just using a link? There is a similar SO question out there (sorry no link). You can accomplish this by using the changePage method and setting the role to dialog. If you want the calling page to still be visible in the background then you will need to do three things when the pageLoad event fires. 1) show the previous page (calling page), which automatically gets hidden on the changePage event. 2) set opacity or something on all other divs to give it a modal effect. 3) set dialog overlay to be transparent so you can see the previous pages.
The easiest way to accomplish the third is to use the overlay theme aspect (as jqm 1.0) and set it to be transparent in your style sheet.
Maybe you want to try to change the target page data-role as dialog and invoke method changePage with options {role: 'dialog'}.
Check it out on jsfiddle.
Related
When you click on a JQuery UI slider that is disabled and the page has been scrolled down, the page goes back to the top.
This is happening because the slider widget is implemented with an anchor tag containing an Href of #.
This is my hack solution.
$(".ui-slider-disabled").on("click",
".ui-slider-handle",
function () {return false;});
It works well but, is there a native (API) way to stop this?
How about this (you may need to change the class, depending on how you set it up)
$(".ui-slider").click(function(e){
e.stopPropagation()
});
Is there a way to mimic the function of Mozilla Firefox tab function to jQuery Tabs that, when there are multiple of tabs, it adds a next button to view next tab after the last displayed tab.
I want to add this next button(encircled), to the jQuery tabs UI functionality. Also, if possible, to add the animation on the menu tab to move tabs as next/previous button is clicked, like on the said browser.
Thanks!
This could help. You will need custom logic.
This CSS trick can also help out. You can tweak the logic for the placement of the next button and you are good to go.
I'm trying to add a delete button to a custom div. However when the page is loaded, the jquery mobile button does not take the format of jquery and displays it like a hyperlink.
var currDelButton = $("<a>").attr("href","#").attr("data-role","button").attr("data-icon","delete").attr("data-iconpos","left").text("حذف");
anyone has an idea about this issue?
Best Regards
Ali
If you are adding the button after the page is loaded then you need to refresh the element for example $("#mybutton").button(); should work.
here is a working example with the code you provided: http://jsfiddle.net/ashanova/RQVd8/1/
call the .page for the main wrapper where new buttons are added.
$("#content").page();
In jQuery-UI dialog box, the first button appears to be the default, therefore having focus set to itself.
But, this causes a frustrating effect, especially in Safari. Even in IE, you will see a rectangular selection mark around the button. Moreover, the hover effect will not be seen.
How can I set NONE of these buttons as default and therefore NOT having focus set on any of them?
Edit:
Examples can be seen at jqueryui demo pages and a snapshot using Safari is below.
I want to get rid of this blue selection.
I think it could be an css-class, that turns the button to "default".
Check with the Firebug Element Inspector what classes are applied to these buttons, and append the standard css class to all buttons of the form.
I have a jQuery UI Dialog, it is Modal and shows with a Bounce effect. I use a Theme where the background is dimmed with a striped image.
The first time the Dialog is opened, the striped background also covers the dialog during the bounce effect. Once the bounce effect has finished, the dialog becomes modal and appears in front of the striped background.
On the next opening, the dialog bounces in front of the background right away.
How can I make the dialog appear in front of the background right away?
Tom's answer pointed me in the right direction, and Firebug was very useful!
The dialog is wrapped in a <div class="ui-effects-wrapper"> which is generated in the createWrapper function in ui\effects.core.js
I added a parameter "z-index=1005" (just to be sure ;) there.
So in jquery-ui-1.7.2.custom.min.js it now looks like this
createWrapper:function(f){if(f.parent().is(".ui-effects-wrapper")){return f.parent()}var g={width:f.outerWidth(true),"z-index":1005,height:f.outerHeight(true),"float":f.css("float")};f.wrap('<div class="ui-effects-wrapper" style="font-size:100%;border:none;margin:0;padding:0;z-index:1002"></div>');
Not sure if it's the best way, but it works.
This sounds like the zIndex of the dialog is not assigned until after the animation. Try this in your CSS:
.ui-dialog {
z-index: 1002;
}
Dialogs usually have this CSS class, and the overlay usually has a zIndex of 1000 (at least in the version I am currently using). If this doesn't work, try to find out (using Firebug) what other classes are assigned only during the animation and assign a zIndex to those.