Two problems with jquery-ui dialog:
it always open at the top left of the screen, I need it to be centered
The close box (X) and the close button work only the first time the
dialog is opened.
When the openNewEvent function is called again after closing the first instance of the dialog, the dialog opens but can't be closed, because the buttons do not work. No errors on the console.
Maybe it is worth to mention that the code runs inside a Office 365/SharePoint environment.
The function for opening a specific web page in a jquery-ui dialog looks like this:
function openNewEvent() {
var page = "http:/mypageurl";
var dialog = jQuery('#dialogdiv')
.html('<iframe style="border:0px;" src="' + page + '" width="1160" height="1900"></iframe>')
.dialog({
title: "Page",
autoOpen: false,
dialogClass: 'ui-dialog,ui-widget-header',
modal: false,
resizable: false,
position: { my: "center", at: "center", of: "window", collision: "none"},
height: 1020,
minHeight: 1020,
width: 1200,
buttons: {
"Ok": function () {
jQuery(this).dialog("close");
}
},
create: function (event, ui) {
jQuery(event.target).parent().css('position', 'fixed');
}
});
dialog.dialog('open');
}
You can test it with this HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
function openNewEvent() {
var page = "http://code.jquery.com";
var dialog = jQuery('#dialogdiv')
.html('<iframe style="border:0px;" src="' + page + '" width="300" height="500"></iframe>')
.dialog({
title: "Page",
autoOpen: false,
dialogClass: 'ui-dialog,ui-widget-header',
modal: false,
resizable: false,
position: { my: "center", at: "center", of: "window", collision: "none"},
height: 550,
minHeight: 550,
width: 350,
buttons: {
"Ok": function () {
jQuery(this).dialog("close");
}
},
create: function (event, ui) {
jQuery(event.target).parent().css('position', 'fixed');
}
});
dialog.dialog('open');
}
</script>
<div id="dialogdiv"></div>
<button onClick="openNewEvent()">Click me</button>
</body>
</html>
Both things working, check jQuery version you're using is 3.3.1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
function openNewEvent() {
var page = "http://code.jquery.com";
var dialog = jQuery('#dialogdiv')
.html('<iframe style="border:0px;" src="' + page + '" width="300" height="500"></iframe>')
.dialog({
title: "Page",
autoOpen: false,
dialogClass: 'ui-dialog,ui-widget-header',
modal: false,
resizable: false,
height: 550,
minHeight: 550,
width: 350,
buttons: {
"Ok": function() {
jQuery(this).dialog("close");
}
},
create: function(event, ui) {
jQuery(event.target).parent().css('position', 'fixed');
}
});
dialog.dialog('open');
}
</script>
<div id="dialogdiv"></div>
<button onClick="openNewEvent()">Click me</button>
</body>
</html>
Related
I have the following code example and I am trying to make a post request only if the user clicks the Yes button. If the user clicks the No button nothing should happen. Thanks for any help and hints.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"
rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<form action="" method="post">
<button id="save" onclick="return ConfirmDialog('this is a test')">Save</button>
</form>
<script>
function ConfirmDialog(message) {
$('<div></div>').appendTo('body')
.html('<div><h6>' + message + '?</h6></div>')
.dialog({
modal: true,
title: 'Delete message to use',
zIndex: 10000,
autoOpen: true,
width: 'auto',
resizable: false,
width: 400,
buttons: {
Yes: function () {
// $(obj).removeAttr('onclick');
// $(obj).parents('.Parent').remove();
//$('body').append('<h1>Confirm Dialog Result: <i>Yes</i></h1>');
$(this).dialog("close");
return true;
},
No: function () {
//$('body').append('<h1>Confirm Dialog Result: <i>No</i></h1>');
$(this).dialog("close");
return false;
}
},
close: function (event, ui) {
$(this).remove();
}
});
};
</script>
</body>
</html>
The issue is that your button is by default of type="submit", you can change it to type="button" and execute your functions normally:
function ConfirmDialog(message) {
$('<div></div>').appendTo('body')
.html('<div><h6>' + message + '?</h6></div>')
.dialog({
modal: true,
title: 'Delete message to use',
zIndex: 10000,
autoOpen: true,
width: 'auto',
resizable: false,
width: 400,
buttons: {
Yes: function() {
$('body').append('<h1>Confirm Dialog Result: <i>Yes</i></h1>');
$(this).dialog("close");
return true;
},
No: function() {
$('body').append('<h1>Confirm Dialog Result: <i>No</i></h1>');
$(this).dialog("close");
return false;
}
},
close: function(event, ui) {
$(this).remove();
}
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<form action="" method="post">
<button type="button" id="save" onclick="return ConfirmDialog('this is a test')">Save</button>
</form>
lI would like to add a Toolbar or nav bar with a dropdown button instead of the title "?ToolbarHTMLCodeHere?" in my JQuery Dialog window. There should be drop down button with the name "File" in the toolbar when the drop down openes there should be a button inside called "Save".
Does anybody know how to do that?
function openDialog(){
$(function() { // open popup window
$( "#dialog" ).dialog({
create: function (event, ui) {
$(".ui-dialog-title").html("?ToolBarHTMLCodeHere?");
},
width: 250,
height: 150,
modal: true,
resizable: false
});});
}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<button type="button" id="Browse" onclick="openDialog()">Start dialog</button> <!--Create Button-->
<div id="dialog" title="Basic dialog" >
What i have until now is this (but its so ugly, hopefully somebody has a better solution):
function openDialog(){
$(function() { // open popup window
$( "#dialog" ).dialog({
create: function (event, ui) {
$(".ui-dialog-title").html("<div class='actions'><a id='TakeAction'>File</a><ul id='actions'><li>Save</li></ul></div>");
},
width: 250,
height: 150,
modal: true,
resizable: false
});});
}
ul#actions
{
display:none;
}
.actions:hover ul#actions
{
display: block;
}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<button type="button" id="Browse" onclick="openDialog()">Start dialog</button> <!--Create Button-->
<div id="dialog" title="Basic dialog" >
I am trying to load another page in a jquery ui modal
This is my Js File
function eventWindow(url) {
getElementById("eventviewer").style.display="block";
$("#eventviewer").load(url).dialog({
modal:true,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
}
this the markup
<!doctype html>
<html>
<head>
<title><?php echo "Date:".$firstDayArray['month']." ".$firstDayArray['year'];?>
</title>
<link href="../css/main.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script src="event.js" type="text/javascript"></script>
</head>
<body>
.....
<?php
echo "<td class=\"days\">".$dayArray["mday"]."<br/>".$event_title."</td>\n";
?>
<div id="eventviewer"></div>
......
</body
</html>
when i use window.open it works and opens in separate window.
But i am not able to open it in a jquery ui modal dialog.
There are multiple ways you can do this but I am not sure which one is the best practice. You can append an iFrame in the dialog container like this:
$("#dialog").append($("<iframe />").attr("src", "your link")).dialog({dialogoptions});
OR:
Working Fiddle
$(function () {
var iframe = $('<iframe frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>');
var dialog = $("<div></div>").append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
width: "auto",
height: "auto",
close: function () {
iframe.attr("src", "");
}
});
$(".thumb a").on("click", function (e) {
e.preventDefault();
var src = $(this).attr("href");
var title = $(this).attr("data-title");
var width = $(this).attr("data-width");
var height = $(this).attr("data-height");
iframe.attr({
width: +width,
height: +height,
src: src
});
dialog.dialog("option", "title", title).dialog("open");
});
});
Can't get Fancybox-2 to show PDFs with Internet Explorer!
(It works fine in Chrome and Firefox)
In <head> I have this code:
<!DOCTYPE HTML>
<!-- Add fancyBox -->
<link rel="stylesheet" href="../../../js/fancybox/source/jquery.fancybox.css" type="text/css" media="screen"/>
<script type="text/javascript" src="../../../js/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".fancybox").fancybox({
height: '100%',
// width: '50%',
//openEffect : 'none',
// closeEffect : 'none',
iframe: {
preload: false
},
afterShow: function () {
$(".fancybox-wrap").draggable();
},
beforeLoad: function () {
this.title = $(this.element).attr('caption');
}
});
});
</script>
then in <body> I have:
<a class="fancybox" data-fancybox-type="iframe" caption="my test" href="PDF/test.pdf" target="_blank" title="test PDF"><img style="border:0;" src="../img/pdficon.png "></a>
How can I get it to work, in your opinion?
Here is what I have so far:
<!DOCTYPE HTML>
<html>
<head>
<title>Tooltip Testings</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { margin: 60px auto; } p { padding:0; margin: 4px auto; text-align: center; }
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$(document).tooltip({
items: '.tooltip',
show: 100,
hide: 500,
position: { my: 'center bottom', at: 'center top' },
content: function( callback ) {
var msgid = this.id.split('_')[1];
$.ajax({
type: 'post',
url: '/tooltip.php',
data:'i='+msgid,
success: function( data ) { callback( data ); }
});
}
});
});
</script>
</head>
<body>
<p><a class="tooltip" id="i_283" href="articles/programming-in-php.html">PHP Article</a></p>
<p><a class="tooltip" id="i_567" href="articles/programming-in-c.html">C+ Article</a></p>
<p><a class="tooltip" id="i_741" href="articles/programming-in-aspx.html">ASPX Article</a></p>
<p><a class="tooltip" id="i_860" href="articles/programming-in-java.html">Java Article</a></p>
</body>
</html>
The above is working as it's suppose to work, however, I would like to trigger the tooltip only after the mouse hovers the link for an specific amount of time (like 2 seconds, for example).
Also, I would like to cancel it's trigger if the user moves the mouse out of the link before the specified delay time expires.
Can anybody please help me out on this?
Thank you very much.
I finally managed to achieve what I was looking for.
Here is the final result:
<!DOCTYPE HTML>
<html>
<head>
<title>Tooltip Testings</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { margin: 60px auto; } p { padding:0; margin: 4px auto; text-align: center; }
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$(document).tooltip({
items: '.tooltip',
show: 100,
hide: 500,
position: { my: 'center bottom', at: 'center top' },
content: function( callback ) {
var ARTid = this.id.split('_')[1];
var TTtmr = setTimeout( function() {
$.ajax({
type: 'post',
url: '/tooltip.php',
data: 'i='+ARTid,
success: function( data ) { callback( data ); }
});
}, 800 );
$('.tooltip').mouseleave( function() { clearTimeout( TTtmr ); } );
}
});
});
</script>
</head>
<body>
<p><a class="tooltip" id="i_283" href="articles/programming-in-php.html">PHP Article</a></p>
<p><a class="tooltip" id="i_567" href="articles/programming-in-c.html">C+ Article</a></p>
<p><a class="tooltip" id="i_741" href="articles/programming-in-aspx.html">ASPX Article</a></p>
<p><a class="tooltip" id="i_283" href="articles/programming-in-java.html">Java Article</a></p>
</body>
</html>
you can try this:
$(function() {
$(document).tooltip({
items: '.tooltip',
hide: 500,
position: { my: 'center bottom', at: 'center top' },
content: 'Testing jquery tooltips!',
show: {
effect: "slideDown",
delay: 250
}
});
});
the show property accepts object parameter with the following properties;
effect, delay, duration, and easing.
http://api.jqueryui.com/tooltip/#option-show