jQuery( "#dialog" ).dialog({ width: 'auto', zIndex: 9999, height: 370, resizable: false, draggable: false,
open :function(event, ui) {
jQuery('body').addClass('black-overlay');
},
show: { effect: 'drop', direction: "up", mode: 'slow'},
close:function(event, ui) {
jQuery('body').removeClass('black-overlay');
}
});
I want Dialog Window Should be Drop From Starting of Browser window and No border to that dialog box
and also drop from top Should be slow
Currently dialog box is Drop up very fastly and not from Starting of Browser window
Can any one help me in this
reduce the default animation speed to exaggerate the effect
$.fx.speeds._default = 3000;
Put this code just before:
jQuery( "#dialog" ).dialog({...
You can add duration:1000 to the show properties
show: { effect: 'drop', direction: "up", mode: 'slow' ,duration:1000}
Related
Please have a look in to my code below
$(".drag").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit',
revert: true,
});
$("#droppable").droppable({
accept: '.drag',
activeClass: "drop-area",
drop: function(e, ui) {
if ($(ui.draggable)[0].id != "") {
$("#placeholderimg").css("visibility", "show");
x = ui.helper.clone();
ui.helper.remove();
x.draggable({
helper: 'original',
cursor: 'move',
containment: '#droppable',
tolerance: 'fit',
drop: function(event, ui) {
$(ui.draggable).remove();
}
});
}
}
});
The Process :-
User will have some images on LHS and they will grag those into rightside panel
But the problem is when I move that dragged image new position is not getting .Actually I am hoping to get new position after image is moved to some position and leave .
Please help
hello guys : i'm trying to make popup using Jquery inside Razor Mvc
4 , the popup done correctly but the problem when i press on close "x"
and press again to let popup appears again jquery redirect to new page
that contains the content of the dialog when im refresh the page and
let dialog apears again worked
$("#dialog-edit").dialog({
title: 'Card Types',
autoOpen: false,
resizable: false,
dialogClass: 'CreateClass',
closeOnEscape: false,
width: 400,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: false,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").show();
$(this).load(url);
}
});
$("#lnkCreate").live("click", function (e) {
//e.preventDefault(); //use this or return false
//
url = $(this).attr('href');
$("#dialog-edit").dialog('open');
return false;
});
the answer is
the partial view that i'm loaded inside the dialog contains
#*<script src="~/Scripts/jquery-1.7.1.min.js"></script>
when i'm removed it everything worked correctly
I want to display contact info with the link to contact us page on mouse over hyperlink just like stackoverflow (mouse over user name) and gmail (click over user name). The below is what the latest updated code looks like.
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css" />
<script>
$('#open').mouseenter(function() {
$('#dialog_content').dialog('open');
});
$('#dialog_content').mouseleave(function() {
$('#dialog_content').dialog('close');
});
var posX = $('#open').offset().left;
var posY = $('#open').offset().top;
console.log(posX,posY);
$('#dialog_content').dialog({
autoOpen: false,
open: function() {
closedialog = 1;
$(document).bind('click', overlayclickclose);
},
focus: function() {
closedialog = 0;
},
close: function() {
$(document).unbind('click');
},
buttons: {
/*
Ok: function() {
$(this).dialog('close');
}
*/
},
show: {
effect: 'fade',
duration: 800
},
hide: {
effect: 'fade',
duration: 800
},
position: [posX,posY+25],
resizable: false
});
</script>
<style>
.ui-dialog-titlebar {display:none;}
#other_content {width:200px; height:200px;background-color:grey;}
#dialog_content{display:none;}
</style>
<div id="dialog_content">bla bla bla</div>
<div id="open">CONTACT US</div>
The error that i get
Uncaught TypeError: Cannot read property 'left' of undefined
Check this option:
jsfiddle.net/3mxGM/4/
It creates a jQuery modal window with the info inside the div with id dialog_content. You might want dynamic content inside that div from your database or something. Anyway this should work for what you want.
html:
<div id="dialog_content">
Here you can write the info to show up in the modal window.<br /><br />
If you know what AJAX is, could be a good idea to use it to query your database and get the info from there.</div>
Open dialog
jQuery:
$(document).ready(function(){
$('#open').mouseenter(function() {
$('#dialog_content').dialog('open');
});
$('#dialog_content').mouseleave(function() {
$('#dialog_content').dialog('close');
});
var posX = $('#open').offset().left;
var posY = $('#open').offset().top;
$('#dialog_content').dialog({
autoOpen: false,
focus: function() {
closedialog = 0;
},
close: function() {
$(document).unbind('click');
},
buttons: {
/*
Ok: function() {
$(this).dialog('close');
}
*/
},
show: {
effect: 'fade',
duration: 800
},
hide: {
effect: 'fade',
duration: 800
},
position: [posX,posY+25],
resizable: false
});
});
css:
.ui-dialog-titlebar {display:none;}
If you're looking for a much more code-simple popup tooltip, I am enjoying a customized version of this:
http://devseo.co.uk/examples/pure-css-tooltips/#
If this is too fancy for you it was just some css3 transitions on top of this more basic version, explained well here:
http://sixrevisions.com/css/css-only-tooltips/
i have a jquery dialog, which in i have:
$(document).ready(function() {
if( window.location.href.indexOf( '#product' ) != -1 ) {
var productID = window.location.href.split('-');
showDialog(productID[1]);
}
});
function showDialog(productID)
{
$( "#dialog-modal_"+productID ).html( "<iframe src='index.php?act=showProduct&id="+productID+"' width='100%' height='100%' frameborder='0' scrolling='no'></iframe>" );
$( "#dialog-modal_"+productID ).dialog({
width: 790,
height: 590,
modal: true,
open: function(event, ui)
{
}
});
}
it works fine when i open it, but if i close that window and try to re-open it - it does not responding.
thanks!!
Below is a sample of how jQuery UI Dialog code should appear. Remember, you need a way to open the dialog. So create a function that calls showDialog on that modal again. A button, or link would work.
jQuery UI Code
function showDialog(productID)
{
var container = $('#dialog-modal_'+productID).html('<blah blah>');
container.dialog({
autoOpen: false,
modal: true,
width: 790,
height: 590
});
container
.dialog('option', 'title', 'Your Title')
.dialog('option', 'buttons', {
Close: function() {
$(this).dialog('close');
}
})
.dialog('open');
//do open event work here
}
DOM for a Open Button
Open My Modal
jQuery for Open Button
$('a#open').click(function(e) {
e.preventDefault();
showDialog(<your id>);
});
I have this script at the moment, which changes an image when a thumbnail has been changed. I then want JQZOOM to be added to that new image. However, if I put it inside the Onclick event, it gets slower and slower the more times you click on it... I guess because its running multiple instances.
Is there anyway to unbind the JQZOOM from something then rebind it to something else?
Here is my jquery at the moment:
var options = {
zoomWidth: 400,
zoomHeight: 325,
xOffset: 25,
yOffset: 0,
position: "right",
lens: true,
zoomType: "reverse",
imageOpacity: 0.5,
showEffect: "fadein",
hideEffect: "fadeout",
fadeinSpeed: "medium",
title: false
};
$('.jqzoom').jqzoom(options);
$('.single-zoom-image').click ( function () {
$('#bigProductImage').attr("src", $(this).attr("zoom"));
$('.jqzoom').attr("href", $(this).attr("extrazoom"));
});
Thanks in advance if anyone can help me.
Cheers!
This can be done as follows:
Modify jqzoom1.0.1.js where the other mouse functions are (around line 90)
//Handle clicked thumbnails changing the zoomed image
$(this).bind('changeimage', function(){
smallimage = new Smallimage( $("img", this) );
largeimage = new Largeimage(a[0].href);
smallimage.loadimage();
});
Call the zoomer as follows:
$(document).ready(function(){
var options = {
zoomWidth: 300,
zoomHeight: 200,
xOffset: 30,
yOffset: 0,
position: 'right',
title: false,
showPreload: false
};
//Handle clicking on the thumbnails, swap the mainimage and recycle the zoomer
$('.seemore').bind('click', function(e) {
e.preventDefault();
$('.jssProductFullImage').attr('src', $(this).attr('href'));
$('.zoomer').attr('href', $(this).attr('href') );
//Recall the zoomer to update the page
$('.zoomer').trigger('changeimage');
});
$('.zoomer').jqzoom(options);
});
$('.jqzoom').removeData('jqzoom');
Did the job for me.