I have a jQquery UI Slider in the browser:
<meta comntent="text/html;charset=utf-8" http-equiv="Content-Type">
<html>
<head>
<!-- favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- JQuery -->
<script src="script/jquery/jquery-3.6.0.min.js"></script>
<script src="script/jquery-ui/jquery-ui.min.js"></script>
<link rel="stylesheet" href="script/jquery-ui/jquery-ui.css">
<script>
$(document).ready(function(){
$("#slider1").slider({
max:10,
min:-10,
step:1,
value:-10,
animate: 'true',
animate: 3000,
});
$("#slider1").slider("value", 0);
$("#slider1").on('slidechange', slideChangeEvent);
});
function slideChangeEvent(event, ui){
$("#slider1").off('slidechange');
$("#slider1").slider( "option", "value", 0 );
$("#slider1").on('slidechange', slideChangeEvent);
}
</script>
</head>
<body>
<div id="slider1"></div>
</body>
</html>
The idea is that the slider stays at the middle.
When the user pull it right or left and releases the slider, it will automatically move back to middle - Animated.
But it moves back instantly, instead of animated.
Can you show me what I did wrong in the code?
Consider the following that uses the .animate() of jQuery:
$(function() {
$("#slider1").slider({
max: 10,
min: -10,
step: 1,
value: -10,
animate: 3000,
change: function(e, ui) {
var w = $(this).width();
$(ui.handle).animate({
left: (w / 2)
}, 3000);
ui.value = 0;
}
});
$("#slider1").slider("value", 0);
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div id="slider1"></div>
A similar example is discussed here: Animating slider handle when altering the jQuery UI slider value option?
Without the animation, the slider will just jump to the new value.
Related
My site want to use a function when xAxis.afterSetExtremes. But in IE7, when I am selecting a range in xAxis, the selecting cannot be stoped by the second click. Why?
This problem only happened in IE7.
The test page is: Here
The whole code is:
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/huidu.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/js/html5shiv.min.js"></script>
<script src="/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div id="diantui" style="min-width:300px;height:400px">
</div>
</div>
</div>
<script>
function togglePlotbands() {
this.plotLinesAndBands.forEach(function(plotband) {
var ii = 1;
});
}
window.onload = function(){
var all_data = [];
all_data.push({x:1495641600000 , y: 1});
all_data.push({x:1497110300000 , y: 3});
all_data.push({x:1497210300000 , y: 4});
all_data.push({x:1497410300000 , y: 3});
all_data.push({x:1497510300000 , y: 2});
all_data.push({x:1497715300000 , y: 1});
all_data.push({x:1500134400000 , y: 2});
var hc_obj = {
chart: {
type: 'line',
zoomType: 'x',
renderTo: 'diantui',
events: {
load: function() {
togglePlotbands.call(this.xAxis[0]);
}
}
},
xAxis: {
plotBands: [
{color: '#FFFFEF',from: 1497110400000,to: 1497715200000,label: {text: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxfsdfsfsdfsfsdf'}}
],
events: {
afterSetExtremes: togglePlotbands
}
},
plotOptions: {
line: {
connectNulls: true,
marker: {
enabled: false
},
}
},
series: [
]
};
hc_obj['series'].push({name: 'xxx', data: all_data, visible: true});
var chart = new Highcharts.Chart(hc_obj);
}
</script>
</div>
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
The jQUery UI draggables sample named Default says that:
Enable draggable functionality on any DOM element.
But I'm not able to make them work on buttons elements.
I modified the Default sample to look like this:
I just changed the div element to a button one with type="button":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.9.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<button type="button" id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</button>
<div class="demo-description">
<p>Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.</p>
</div>
</body>
</html>
How I can make the draggables functionality work on a button element?
Using cancel: false seems to work for me.
$(function() {
$( "#draggable" ).draggable({
cancel: false
});
});
jsfiddle
I guess without the cancel only the default click event of the button fires and with cancel you prevent the default click event.
From what I read, the $(#selector).dialog("destroy") is supposed to remove all the added jquery ui elements and return the element, the dialog attached to, back to its original DOM position. I wrote a test html and it is not doing either. In firebug, after I clicked close, it simply makes it becomes invisible (display:none). Am I doing something wrong? Below is my test html:
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<style type="text/css">
.modalDialogPopup {
display:none;
border:1px solid #4f8cc5;
}
</style>
<script src="/resources/default/1_0/js/jquery.js?v=081814" type="text/javascript" ></script>
<script src="/resources/default/1_0/js/jquery-ui-1.8.20.custom.min.js?v=081814" type="text/javascript" ></script>
<script>
var testPopUp = {
popUpID : '#testPopUp',
close:
function() {
$(this.popUpID).dialog("close");
},
open:
function() {
$(this.popUpID).dialog({
modal: true,
autoOpen: false,
title: 'Test Outer Pop Up',
dialogClass:'modalDialogPopup',
resizable: true,
close: function( event, ui ) {
$(this.popUpID).dialog( "destroy" );
alert('outer Pop Up Destroyed? '+$(testPopUp.popUpID).attr("class"));
}
});
$(this.popUpID).dialog("open");
}
}
$(document).ready(function() {
});
</script>
</head>
<body>
<div id="OuterDiv">
<a href="javascript:void(0)" onclick="testPopUp.open(); return false;" >Open PopUp</a>
<div id="testPopUp" class="modalDialogPopup">
<div id="testPopUpDiv" style="overflow: auto; display: table;">
<div id="testPopUpContent" >
This is a Pop Up Test
<br/>
<br/>
<a href="javascript:void(0)" onclick="testPopUp.close(); return false;" >Close PopUp</a>
</div>
</div>
</div>
</div>
</body>
</html>
Found two problems that cause the destroy to not working:
1) on this line ==>
close: function( event, ui ) {$(this.popUpID).dialog( "destroy" );
I shouldn't use this.popUpID. It should be testPopUp.popUpID, like below,
close: function( event, ui ) {$(testPopUp.popUpID).dialog( "destroy" );
Once I did that, it starts to remove all the added jquery ui elements. But it still does not put the element (id="testPopUp") back to it's original DOM position, which is resolved after I done #2 below.
2) Change my jquery ui version to jquery-ui-1.10.4.custom.min.js.
I would like to open a JQuery UI dialog when a user clicks on a link. So far I have this
<script>
//to hide the dialog box on loading
$j(function() {
$j( "#dialog" ).hide();
});
$('.button').click(function(){
$('#dialog').dialog('open');
});
</script>
<div id="dialog" title="Basic dialog">
<p>Dialog box</p>
</div>
The button
But the dialog won't open by clicking the link... Everything is included well.
EDIT
<script type="text/javascript" language="javascript" src="js/jquery-1.6.2.js"></script>
<script>
var $j = jQuery.noConflict();
</script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.dialog.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.effects.core.js"></script>
Are you referencing jQuery and jQuery ui library? You can autohide when initializing:
$("#dialog").dialog({ autoOpen: false });
$('.button').click(function() {
$('#dialog').dialog('open');
});
Demo: http://jsfiddle.net/pxQ8j/
You can use this code for your purpose.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<form action="" method="post">
Name :- <input type="text" name="name" value="">
Email :-<input type="email" name="email" value="">
Submit:-<input id="dialog2" type="submit" onclick="myfuncation();" name="submit" value="save">
</form>
</div>
<button id="opener">Open Dialog</button>
<div id="dialog-message"></div>
</body>
</html>
<script type="text/javascript">
function myfuncation()
{
// Here is your ajax request to db related work.
var ajaxresponce = "Sucessfully Insert Form";
$('#dialog-message').html(ajaxresponce);
$( "#dialog-message" ).dialog();
}
</script>
Hope it helps you. Please let me know if you have any query.
Your problem is you are trying to access the dialogs open method even though you never created the dialog instance.
Just change your code to do:
$('#dialog').dialog()
If you read the docs: http://jqueryui.com/demos/dialog/, it spells that out for you, you will also see that it opens by default on the initial call.
Notification dialog function like alert().
function msgbox(text,buttontext) {
buttontext = buttontext || "OK"
$( "<div>" + text + "</div>" ).dialog({
dialogClass: "no-close",
buttons: [
{
text: buttontext,
click: function() {
$( this ).dialog( "close" );
$(this).remove();
}
}
]
});
}
call function
msgbox("test dialog");
or
msgbox("test dialog", "I agree");
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<form action="" method="post">
Name :- <input type="text" name="name" value="">
Email :-<input type="email" name="email" value="">
<div id="test" class="loader"></div>
Submit:-<input id="dialog2" type="submit" onclick="myfuncation();" name="submit" value="save">
</form>
</div>
<button id="opener">Open Dialog</button>
<div id="dialog-message"></div>
</body>
</html>
<script type="text/javascript">
$( "#test" ).hide();
function myfuncation()
{
alert("hai");
// Here is your ajax request to db related work.
$( "#test" ).show();
//var ajaxresponce = "Sucessfully Insert Form";
//$('#dialog-message').html(ajaxresponce);
// $( "#dialog-message" ).dialog();
}
</script>
Good morning,
It appears that the jQuery UI Layout is resetting my options after a call to sizePane(). When I load the following into FireFox, then click the "Resize" button, the north pane suddenly becomes resizable, and the hotkeys are suddenly enabled again. Am I doing it wrong? Or is this a bug?
<html>
<head><title>Layout Test</title></head>
<link href="css/jquery-ui.custom.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.layout-1.2.0.js"></script>
<script language="JavaScript">
jQuery(document).ready(documentReady);
function documentReady(){
jQuery('body').layout({
defaults: {
applyDefaultStyles: true
},
north: {
enableCursorHotkey: false,
closable: false,
resizable: false
},
center: {
}
});
}
</script>
<body>
<div class="ui-layout-north">
North Pane
</div>
<div class="ui-layout-center">
Center Pane
<input type="button" value="Resize" onclick="jQuery('body').layout().sizePane('north',100);" />
</div>
</body>
OK, I believe I've found the solution. Calling jQuery('body').layout() a second time appears to replace my previous "layout" object with a brand new one, resetting all the options.
The solution is to maintain a reference to the original declaration and operate on that object, like so:
<html>
<head><title>Layout Test</title></head>
<link href="css/jquery-ui.custom.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.layout-1.2.0.js"></script>
<script language="JavaScript">
jQuery(document).ready(documentReady);
var myLayout;
function documentReady(){
myLayout = jQuery('body').layout({
defaults: {
applyDefaultStyles: true
},
north: {
enableCursorHotkey: false,
closable: false,
},
center: {
enableCursorHotkey: false,
closable: false,
}
});
}
</script>
<body>
<div class="ui-layout-north">
North Pane
</div>
<div class="ui-layout-center">
Center Pane
<input type="button" value="Resize" onclick="myLayout.sizePane('north',100);" />
</div>
</body>
</html>
Also, the "resizable: false" options have to be removed because otherwise the call to sizePane() will not have any effect.
You can add this option to pane:
animatePaneSizing: true