I use a jQuery UI dialog in which there is another pop-up.
$("#dialog").dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$("#opener").click(function() {
$("#dialog").dialog("open");
return false;
});
// BUTTONS
$('.fg-button').hover(function() {
$(this).removeClass('ui-state-default').addClass('ui-state-focus');
}, function() {
$(this).removeClass('ui-state-focus').addClass('ui-state-default');
});
// MENUS
$('#hierarchybreadcrumb').menu({
content: $('#hierarchybreadcrumb').next().html(),
backLink: false
});
See here the live version: http://jsfiddle.net/nrWug/1
If I open the iPod menu and than drag the dialog, the iPod menu is displaced. How can I bind these two to make the dialog draggable and resizable?
To make it work you have to use the "drag" event from jQuery dialog and adjust with that the position of the menu.
If you want to add custom callback functions into the iPod style menu, go into fg.menu.js line 244 and add your custom functions.
If you are here because of the neat iPod style menu, wait for jQuery UI to update to version 1.9. This feature will be integrated directly taken from Filament Group (a major contributor). You can see the actual status and download the 1.9 version. here is the current demo which did not yet include the iPod style menus.
I decided not to use that menu since there are major cross browser compatibility issues with the menu if used with jQuery UI (especially dialog). If jQuery UI has taken over the feature in 1.9 stable, there will be no-doubt that this space-saving menu/selectbox will be seen more regularly on the web.
Related
I have a problem styling the KENDO UI dialog:
I have a component, lets call it WatComponent. Inside it,
If the user clicks the "Forbidden" button, I want a warning styled dialog to pop-up, with yellow/orange colored titlebar,
If the user clicks the "DANGER" button, I want an error styled dialog to pop-up, with red titlebar.
If I open the dialog via the DialogService:
const dialogRef = this.dialogService.open({
title: this.danger ? 'DANGER!' : 'Warning!',
content: WatDialogComponent
});
const userInfo = dialogRef.content.instance;
userInfo.danger = this.danger;
How can I apply two different CSS styles (in any way) to make the titlebar appear in different colors when opened from the same component?
I have tried
adding a class to the <div kendoDialogContainer class="myTitlebarClass"></div> but of course, I didnt expect it to work (it didnt).
giving the property danger some functionality to pass it to the titlebar, but unfortunately, it affects only titlebars inside WatDialogComponent, and I want to access the titlebar that is one step outside.
looking for a property in the DialogRef that would let me do that.
Is there a straightaway solution to this that I'm missing? If not, is there a workaround?
Looking at the DialogRef API
https://www.telerik.com/kendo-angular-ui/components/dialogs/api/DialogRef/
it includes the ComponentRef which can be used to get the host element and add a class:
this.dialog = this.dialogService.open({
title: 'Warning',
content: 'Warning'
});
this.dialog.dialog.location.nativeElement.classList.add('warning');
https://plnkr.co/edit/RkW3zHFbmMuQqk4UDYNY?p=preview
Here is a an offline version of https://www.flipkart.com/ on mobile which uses progressive web applications and greys out Content when User Is offline.
And Here is an Online version without greying
So How Do they Do It?
As others mentioned, you could use an overlay placed using position: fixed above the entire HTML. However this would not allow the user to click any elements beneath the overlay, so it depends on what you are after.
In the case of Flipkart, they apply the following CSS to the <html> tag:
filter: grayscale(1);
They also apply inline style to the individual elements, such as buttons to modify their colours. This approach will still allow you to navigate the site, which will come in handy if you allow for offline functionality.
Finally you will then need to add event listeners in JavaScript to handle when the user goes online or offline, such as below.
window.addEventListener('online', function(e) {
// add your logic to update the UI when online
console.log("You are online");
document.body.style.filter = 'grayscale(0)';
}, false);
window.addEventListener('offline', function(e) {
// add your logic to update the UI when offline
console.log("You are offline");
document.body.style.filter = 'grayscale(1)';
}, false);
I'm using the Zurb Foundation framework (2.0) and have a tooltip on a link.
x
On a desktop it works fine, the tooltip shows on mouseover and you can click the link to trigger the someFunction
On a touch device however the tooltip shows on click/tab. But that way you are not able to trigger the onClick event and the someFunction.
How could you do this?
Find:
if (Modernizr.touch) {
$body.on('click.tooltip touchstart.tooltip touchend.tooltip', settings.targetClass, function (e) {
e.preventDefault();
Replace
e.preventDefault();
With
if($(settings.tooltipClass).css("display") != "block")e.preventDefault();
Should be fixed.
I'm trying to open a jQuery dialog using AJAX. The content of the dialog is loaded from a querystring and contains server controls inside a form tag.
I have a GridView where a link in each row spawns the dialog.
The first time, the dialog loads fine, but subsequently I need to open another dialog on the page, then the first dialog will load. I can't open the same dialog subsequent times. Inspecting the DOM in Firebug shows multiple 'containers' at the end of the page. I have a GridView where one column contains a link and an empty div. I've simplified the control IDs because they're mangled by ASP.NET, but this is my code:
$('#linkId').click(function() {
$('#panelId').dialog({
autoOpen: true,
height: 600,
width: 680,
modal: true,
show: 'blind',
hide: 'blind',
title: 'More Information',
open: function () {
$(this).load(url).parent().appendTo("form");
},
close(){
// I've also tried using these (not both at the same time)
$(this).dialog('destroy').remove();// dialog never opens again
$(this).dialog('disable').remove();// dialog never opens again
}
});
return false;
});
});
I've tried adding the included functions to the close event, but I get the same effect. Otherwise, when the dialog eventually opens, everything works perfectly (despite there being multiple dialog containers at the end of the page).
From the jq dialog api documentation:
"If you want to reuse a dialog, the easiest way is to disable the
"auto-open" option with: $(foo).dialog({ autoOpen: false }) and open
it with $(foo).dialog('open'). To close it, use
$(foo).dialog('close'). A more in-depth explanation with a full demo
is available on the Nemikor blog"
I've got an asp.net page containing a Textbox with an Autocomplete extender on it.
It's setup so the user can type a short reference code into the textbox and then choose from the list of matching codes returned by the autocomplete.
On the "select", I then call the server using JQuery. I'm currently using $.get here....
The callback function from $.get checks for "success" and then displays a simple-modal dialog containing info about the item they've just selected.
if (sStatus == "success") {
$.modal(sText, {
overlayClose: true,
appendTo:'form',
onShow: function(dialog) {
$("#ccTargets_tabContainer").tabs();
},
onClose: function(dialog) {
$("#<%=TextBox1.ClientID%>").val("");
$.modal.close();
}
});
$.ready();
}
One of the bits of info being loaded here is a JQuery TABS setup, so the onShow function of the simplemodal is used to initiate the tabs which are within the simplemodal.
Now to the crux of my problem.
If I do multiple consecutive "autocompletes" on the same page it all works fine Unless I have selected a different tab on the tabs in the simplemodal ....If I select a different tab, close the simplemodal and then do another autocomplete I get a JQuery error which seems to relate to a selector doing something with the "old" selected tab that was on the "closed" modal.
I'm clearly missing some sort of cleardown / initialisation somewhere, but can't find what it is. Help?
I've tried "tabs.destroy" before the modal call in the code above and I've tried a $.ready() call as indicated too....
UPDATE: Is it something to do with JQuery Tabs appending my addressbar URL with the selected tab's ID?
I've found the problem.
It's with the "history" script that the tabs plugin normally uses. Obviously as I am continually creating and destroying popups there is no history to speak of - it's all done outside of the normal app navigation.
I've removed the jquery.history_remote script and now it works just great!
Dave