I'm developing an app with asp.net and jQuery and I have a strange problem, I have the div(used as dialog) and a button to show the dialog, the first time I call the dialog, it shows correctly, I close it but when I try to show for the second time the background grays but the dialog doesn't show (only in IE in firefox it works fine). Is there a way to fix this? Or maybe I'm doing somethign wrong.
<div id="divAuto">
....
</div>
<button id="openAuto">SHOW</button>
And here's the js:
$(document).ready(function() {
var dlg = $('#divAuto').dialog({ autoOpen: false, modal: true, show: "fold", hide: "drop", width: "500", height: "370" });
dlg.parent().appendTo(jQuery("form:first"));
$('#openAuto').click(function() {
$("#divAuto").dialog("open");
return false;
});
});
I'm using "appenTo" because I'm using asp.net buttons in the dialog and it's the "fix" to get the buttons to work.
Thanks in advance for any help.
Ariel
Try initiating the dialog in the click event instead.
$("#divAuto").parent().appendTo($("form:first"));
$("#openAuto").click(function() {
$("#divAuto").dialog({
width: "500",
height: "370",
modal: true,
close: function(event, ui) {
$(this).dialog("destroy");
}
});
});
Related
I want to use the hide() function of jquery to hide messages that are flashing on a page.
When I load the page, I want to display it for 5 sec then make it disapear.
$('#flash-message').show("clip");
setTimeout(function() {
$("#flash-message").hide("clip", { direction: 'vertical' }, 1000);
}, 5000);
It doesn't do the "animation" if I use a fixed or absolute position and I need to put the message on top of the page with a fixed position.
Is there a work around for that? Thanks for your help
To call events when the page loads use:
$(document).ready(function(){
//code here
});
If you only want to use "clip" try this:
$("#flash-message").hide("clip", {direction: "vertical"}, 5000)
or else try using animate:
$('#flash-message').animate({
opacity: 0.25,
direction: "left",
}, 5000, function() {
$(this).hide();
});
Or something more simple:
$("#flash-message").click(function() {
$("#flash-message").fadeOut("slow");
});
There seem to be an issue with the last version of jQueryUI (1.11) when it comes to using several modal dialogs.
What I am trying to achieve is the following: I have two modal dialogs, the first one contains a button which should open the second dialog:
HTML
<div id="test1">
Test 1
<button id="open_test2">Open Test 2</button>
</div>
<div id="test2">
Test 2
</div>
JS
$(function() {
$('#test1').dialog({
autoOpen: true,
modal: true
});
$('#test2').dialog({
autoOpen: false,
modal: true,
position: {
my: "right top", at: "right top", of: window
}
});
$('#open_test2').click(function() {
$('#test2').dialog('open');
});
})
Once the second dialog is opened, I am still able to click on the first dialog !
Here is a link to a fiddle that shows what I am trying to achieve:
http://jsfiddle.net/JC4t5/1/
Thanks a lot in advance for your help !
This has been fixed with the jQuery UI 1.11.2 release.
I've tried everything I can think of to get the tooltip by the hovered-over event. But for whatever reason it just appears every time in the top left corner of my browser window.
Here is my javascript:
$(document).ready(function(){
var tooltip = $('<div/>').qtip({
id:'myCalendar',
prerender:true,
content:{
text:' ',
title:{
button:true,
},
},
position:{
my:'center left',
at:'center right',
target:'mouse',
viewport:$('#myCalendar'),
adjust:{
mouse:false,
scroll:false,
},
},
show:false,
hide:false,
style:'qtip-light',}).qtip('api');
$('#myCalendar').fullCalendar({
editable:true,
eventMouseout:function(e,j,v){
tooltip.hide();
},
eventMouseover:function(e,j,v){
var event = '<h3>'+e.title+'</h3>';
tooltip.set({'content.text':event,}).reposition(e).show(e);
},
events:[{title:'All Day Event',start:new Date(y,m,1)}],
header:{left:'prev,next today',center:'title',right:'month,agendaWeek,agendaDay'},
});
});
I'm using all of the same javascript and css linked from this example on jsfiddle:
http://jsfiddle.net/craga89/N78hs/
Can someone spot where I'm going wrong?
I couldn't ever get the code above to work, so I decided to go a different route and use the render event instead. Now it works exactly as I wanted by putting the qtip in the middle of the right side of each fullcalendar event on mouse over.
$(document).ready(function(){
$('#myCalendar').fullCalendar({
editable:true,
eventRender:function(event,element,view){
element.qtip({
content:{
text:'<h3>'+event.title+'</h3>',
},
position:{
my:'center left',
at:'center right'
},
show:'mouseover',
});
},
events:[{title:'All Day Event',start:new Date(y,m,1)}],
header:{left:'prev,next today',center:'title',right:'month,agendaWeek,agendaDay'},
});
});
I still don't know why using this code works as expected. Note: I didn't change any of the stylesheets or javascript included with either fullcalendar or qtip, just something about how the code above was implemented improperly.
I have created a menu with extjs where you click on it and can see menu items dropping down. The first item is open. This button is supposed to open a file from file-dialog. But the only way I can open the file dialog I found is to place the file dialog field in the menu by only showing the button.
Now I need help to make this button look like just regular menu item:
var item = Ext.create('Ext.form.field.File', {
buttonOnly: true,
buttonText: 'Open',
hideLabel: true,
// maybe to add some css class here
listeners: {
'change': function(fb, v){
Ext.Msg.alert('Status', item.getValue());
}
}
});
var mainmenu = Ext.create('Ext.menu.Menu', {
width: 200,
margin: '0 0 10 0',
items: [item]
});
You can add the attribute buttonConfig to the Ext.form.field.File item and then use the standard attributes to a button. For example, this might work:
var item = Ext.create('Ext.form.field.File', {
buttonOnly: true,
buttonText: 'Open',
hideLabel: true,
buttonConfig: {
style: {
background: "#f1f1f1",
border: 0
}
},
listeners: {
'change': function(fb, v){
Ext.Msg.alert('Status', item.getValue());
}
}
});
Try changing putting a cls instead of a style attribute in the buttonConfig to use a CSS class instead of inline CSS.
I'm able to create a jquery ui dialog using the following:
$("#dialogs .add_entry").dialog
({
height: 500,
width: 750,
autoOpen: false,
stack: true,
show: "fade",
resizable: true,
title: "Add Entry",
modal: true
});
<div id="dialogs">
<div class="add_entry">Test</div>
</div>
But when I later use $("#dialogs .add_entry").dialog("open"); to open the dialog nothing happens (No js errors). I think it is selector related, switching the autoOpen to true shows the dialog. Has anyone come across this?
$(function(){
$element = $("#dialogs .add_entry");
$element.dialog({
height:500,
width:750,
stack: true,
show: "fade",
resizable: true,
title: "Add Entry",
autoOpen:false,
modal: true
});
$element.dialog("open");
});
This works if placed BEFORE the element. Does not work after. Also does not work with out variable, does not work without wrapper function... what a buggy function.
Try this:
$("#dialogs > .add_entry")
OR
$("#dialogs").children(".add_entry")