We Keep Coding

Jquery UI dialog close function "Uncaught SyntaxError: Unexpected identifier"

Here is my code in js file.
<script>
var originalContent;
$( ".location-edit-form" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 500
},
hide: "puff",
width:500,
position: {
my: 'center',
at: 'top',
of: $('.display')
}
open : function(event, ui) {
originalContent = $(".location-edit-form").html();
},
close : function(event, ui) {
$(".location-edit-form").html(originalContent);
}
});
</script>
Everything worked well until I had to use "open and close function".
And it shows "Uncaught SyntaxError: Unexpected identifier".
Btw, the order of the scripts I use is below
jquery-3.2.1.min.js
bootstrap.js
tether.min.js
jquery-ui.js
ckeditor.js
ckeditor/adapters/jquery.js

Looks like you forgot a comma
<script>
var originalContent;
$( ".location-edit-form" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 500
},
hide: "puff",
width:500,
position: {
my: 'center',
at: 'top',
of: $('.display')
}, // You forgot it here
open : function(event, ui) {
originalContent = $(".location-edit-form").html();
},
close : function(event, ui) {
$(".location-edit-form").html(originalContent);
}
});
</script>

Scrolling on safari, Jquery dialog not working properly

Whenever I click on an div container a Jquery dialogs opens. Everything works smooth expect for the safari browser. For some weird reason when I scroll down it bugs and I dont know what i'm doing wrong.
I hope someone can help me with this issue.
video of the issue: https://streamable.com/89k8b
Jquery dialog:
$(window).resize(function() {
$(".dialog").dialog("option", "position", {my: "center", at: "center", of: window});
});
$(document).ready(function(){
$( ".dialog" ).dialog({ dialogClass: 'fixed-dialog', autoOpen:false});
});
var opt = {
autoOpen: false,
closeText: '<?php echo $lang["23"]; ?>',
width: 950,
height: 600,
title: null,
draggable: false,
modal: true,
create: function (event) { $(event.target).parent().css({ 'position': 'fixed', 'z-index': '10', 'top': '50%', 'margin-top': '-350px', 'left': '50%;', 'margin-left': '-1000px' }); },
buttons:
[
{
text: "<?php echo $lang["44"]; ?>",
click: function()
{
$('.dialog').dialog('close');
}
}
]
}
jQuery(function () {
jQuery('.dialog').dialog(opt);
})
html:
<div onclick="$('#dialog-<?php echo $hotel['ms_id']; ?
>').dialog('open').dialog(opt)

Change
position: 'fixed'
to
position: 'absolute'
This should solve your problem

qtip tooltip postion is not working in mobile

I am using Qtip Tooltip in jquery mobile, it is working fine in desktop and ipad, but in mobile device it's position is not working correctly.
Here is my script:
$('[data-tooltip!=""]').qtip({
content: {
attr: 'data-tooltip',
button: true// Tell qTip2 to look inside this attr for its content
},
position: {
my: 'bottom center', at: "top center",
adjust: {
y: 0
},
viewport: $(window)
},
show: {
event: 'click',
},
hide: {
event: false,
fixed: true
},
style: {
classes: 'qtip-bootstrap'
}
});
}
Am I doing something wrong?

How do I attach a JQuery UI dialog to a specific DIV tag?

Is there an easy way to stick jQuery UI dialog to particular div?
Actually, one should be able to drag or resize dialog but dialog should not leave the div.
<script>
var dialogOptions = {
title: "Recent",
closeOnEscape: false,
width:200,
position: {
my: "left top", at:"left+10 top+10", of:".frame"
},
"modal" : false,
"resizable" : true,
"draggable" : true,
appendTo: ".frame"
};
$( "div.dialog" ).dialog(dialogOptions);
</script>
<div class="frame">
<div class="dialog">
</div>
</div>
Pls check http://jsfiddle.net/TLt4b/1/

Try this:-
var dialogOptions = {
title: "Recent",
closeOnEscape: false,
width:200,
position: {
my: "left top", at:"left+10 top+10", of:".frame"
},
"modal" : false,
"resizable" : true,
"draggable" : true,
appendTo: ".frame" };
$( "div.dialog" ).dialog(dialogOptions).parent().resizable({
containment: ".frame"
}).draggable({
containment: ".frame"
})
Demo:http://jsfiddle.net/TLt4b/2/

Try this out:- http://jsfiddle.net/adiioo7/TLt4b/4/
JS:-
var dialogOptions = {
title: "Recent",
closeOnEscape: false,
draggable: false,
width:200,
position: {
my: "left top", at:"left+10 top+10", of:".frame"
},
modal : false,
resizable : true
};
$( "div.dialog" ).dialog(dialogOptions).parent().draggable({ containment: ".frame" });

Keep qTip Tool Tip Always Visible

I am using qTip2 to handle some tool tips on my site. I have the following code inside a template for the pages it applies to:
HTML
<div class="overview"><img class="border-gray" src="src.jpg"></div>
<div class="estimate"><img class="border-gray" src="src.jpg"></div>
<!-- More HTML similar to above -->
JS
$('.overview').qtip({
content: 'Overview',
position: {
my: 'bottom center',
at: 'top center'
},
style: {classes: 'qtip-tipsy'}
});
$('.estimate').qtip({
content: 'Estimating',
position: {
my: 'bottom center',
at: 'top center'
},
style: {classes: 'qtip-tipsy'}
});
//More JS as above
On the individual pages I would like to have the tool tip visible if the class correlates with the page. IE: site.com/overview would have the tool tip with the class of overview always visible. As would site.com/estimate have the tool tip estimate visible.
I have attempted to add this code to the page but it doesn't work:
$('.overview').qtip({
hide: false
});
What I am after is when the page loads the tool tip is visible. No mouse over etc is required. The visible tool tip will depend on what page is visible. IE: /overview = .overview tool tip.
How can I achieve this?
UPDATE
The following code will achieve what I am looking for:
$('.overview').qtip({
content: 'Overview',
position: {
my: 'bottom center',
at: 'top center'
},
show: {
ready: true
},
hide: false,
style: {classes: 'qtip-tipsy'}
});
However this portion of the code is in a template and not editable on the page level:
$('.overview').qtip({
content: 'Overview',
position: {
my: 'bottom center',
at: 'top center'
},
style: {classes: 'qtip-tipsy'}
});
If I try this below the above code it doesn't work:
$('.overview').qtip({
show: { ready: true },
hide: false
});
How do I combine the two if one is not editable on the page level? IE: How would I add the show and hide code into the above code if I cannot edit the code on the page level?

SHOWING BY DEFAULT
$('.overview').qtip({
content: 'Overview',
position: {
my: 'bottom center',
at: 'top center'
},
style: {classes: 'qtip-tipsy'},
show: { ready: true }
});
This is the line you need:
show: { ready: true }
Here is the documentation:
gTip: http://craigsworks.com/projects/qtip/docs/reference/#show
gTip2: http://craigsworks.com/projects/qtip2/docs/show/#ready
SHOWING CONDITIONALLY
<?php
// Get the url
$current_url = $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
// Get the two parts of the url, seperated by: /
$url_array = explode('/', $current_url);
?>
<script>
$('.overview').qtip({
content: 'Overview',
position: {
my: 'bottom center',
at: 'top center'
},
/* Check if the second part of the url is 'overview'
If it is, add the show ready code */
<?php if( isset( $url_array[1] ) && $url_array[1] == 'overview' ) : ?>
show: { ready: true },
<?php endif; ?>
style: {classes: 'qtip-tipsy'}
});
</script>
SHOWING CONDITIONALLY | ONLY JAVASCRIPT
<script type="text/javascript">
$(document).ready(function()
{
// Prepare some variables
var current_url = window.location.host + window.location.pathname;
var url_array = current_url.split('/');
// The qtip code
$('.overview').qtip({
content: 'Overview',
position: {
my: 'bottom center',
at: 'top center'
},
show: { ready: url_array[1] == overview ? true : false },
style: {classes: 'qtip-tipsy'}
});
});
</script>

show: {
ready: true
},
hide: {
event: false
}