I have problems to set elements draggable using jQueryUI 1.12.1.
There is no problem, when draggable element is <div>, but when I switched it to the <input ... >, it does not move from place. I tried to disable element too in order to make it more "stiff", but it makes no difference.
The similarly pitiful outcomes I had with resizing <label> for <input>. I could move it on the screen, but I was unable to resize it.
Here is code I just copied from the page and made minor changes:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>resizable demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
#brick {
width: 100px;
height: 100px;
background: #ccc;
} </style>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<label id="brickLabel" for="brick">Brick is stiff</label>
<input type='text' id="brick" disabled/>
<div id="goodBrick" style="width: 100px; height: 70px; background-color: #EF45fE"></div>
<script>
$( "#goodBrick" ).draggable();
$( "#goodBrick" ).resizable();
$( "#brick" ).draggable();
$( "#brick" ).resizable();
$( "#brickLabel" ).draggable();
$( "#brickLabel" ).resizable();
</script>
</body>
</html>
So where I do mistake?
Related
I'm creating a leave system and I've linked the database with Asp.net. Inside the mvc project there's an HTML page that I use as my landing page, it has 2 buttons. One button for 'Admin' and other for 'Staff'. I want to hide some of the text-boxes if the 'Staff' button is clicked. How do I go about achieving this?
I have created sample html, you can use jquery to show and hide your textbox based on click
if you are using mvc then your textbox is #Html.TextBox or
with asp.net set ClientIDMode="Static" - check here
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input type="text" id="AdminTxt" />
<button id="showAdmin">Show Admin</button>
<button id="showStaff">Show Staff</button>
<script>
$( "#showAdmin" ).click(function() {
$("#AdminTxt").show();
});
$( "#showStaff" ).click(function() {
$("#AdminTxt").hide();
});
</script>
</body>
</html>
You can use the attach en detach functions with JQuery.
So if you have a button called Admin
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>detach demo</title>
<style>
p {
background: yellow;
margin: 6px 0;
}
p.off {
background: black;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p>
how are
<p>you?</p>
<button>Attach/detach paragraphs</button>
<script>
$( "p" ).click(function() {
$( this ).toggleClass( "off" );
});
var p;
$( "button" ).click(function() {
if ( p ) {
p.appendTo( "body" );
p = null;
} else {
p = $( "p" ).detach();
}
});
</script>
</body>
</html>
I'm coding a script and I need to drag and drop some list items to a div, but I have a cursor: default; in that css code and when I'm dragging that list item over the div, it doesn't change the cursor.
How can I set the cursor of the jQuery UI to !important or something like that?
Thank you and greetings.
As explained in Jquery UI API you need to define it like this:
$( "#draggable" ).draggable({
cursor:"crosshair"
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; background:green; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable({
cursor:"crosshair"
});
});
</script>
<div id="draggable" class="ui-widget-content">
<p>Drag this</p>
</div>
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.
when i click the add image button a new image appears
when i click the new image can i revert it back to my previous state using jquery...showing the previous image with add image on hover
http://jsfiddle.net/6MmMe/37/
providing my js code below
$("div").hover(
function () {
$("<div>add image</div>").click(function() {
$(this).parent().unbind("hover").children("img").attr("src", "http://www.onlinegrocerystore.co.uk/images/goodfood.jpg");
$(this).remove();
}).appendTo(this);
},
function () {
$(this).find("div:last").remove();
}
);
The problem is that you are handling the first div, then removing it. There are a few ways to accomplish what I think are your goals.
I would recommend doing it with hide/show for easier management.
If you want to do this in jQuery, you can do it like this:
<!DOCTYPE html>
<html>
<head><script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<style type='text/css'>
div div { color:red; display:none}
</style>
<script>
$(function(){
$('body > div').hover(function(){
// show "add image"
$('div', this).show();
}, function(){
// hide "add image" and reet image src.
$('div', this).hide();
$('img', this).attr("src", "http://imgs.zinio.com/magimages/500299032/2012/416238969_170.jpg");
})
// top-level click handler
.click(function(){
$('img', this).attr("src", "http://www.onlinegrocerystore.co.uk/images/goodfood.jpg");
});
});
</script>
</head>
<body>
<div>
<img src="http://imgs.zinio.com/magimages/500299032/2012/416238969_170.jpg" alt="Nov-12" title="Food Network Magazine" class="cover">
<div href="#">add image</div>
</div>
</body>
</html>
If you want to do this mostly in CSS, just toggling a class with jQuery, you can do this:
<!DOCTYPE html>
<html>
<head><script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<style type='text/css'>
body > div {
background-image: url(http://imgs.zinio.com/magimages/500299032/2012/416238969_170.jpg);
width: 170px;
height:222px;
position:relative;
}
body > div.newImage:hover {
background-image: url(http://www.onlinegrocerystore.co.uk/images/goodfood.jpg);
width: 249px;
height:274px;
}
div div {
color:red;
position:absolute;
bottom:0;
margin-bottom:-16px;
display:none;
}
div:hover div {
display:block;
}
</style>
<script>
$(function(){
$('body > div').click(function(){
$(this).addClass('newImage');
}).hover(false, function(){
$(this).removeClass('newImage');
});
});
</script>
</head>
<body>
<div>
<div>add image</div>
</div>
</body>
</html>
If you really prefer to add/remove things, you can do it like this:
<!DOCTYPE html>
<html>
<head><script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<style type='text/css'>
div div { color:red;}
</style>
<script>
$(function(){
$('body > div').hover(function(){
// show "add image"
$(this).append('<div>add image</div>');
}, function(){
// hide "add image" and reset image src.
$('div', this).remove();
$('img', this).attr("src", "http://imgs.zinio.com/magimages/500299032/2012/416238969_170.jpg");
})
// top-level click handler
.click(function(){
$('img', this).attr("src", "http://www.onlinegrocerystore.co.uk/images/goodfood.jpg");
});
});
</script>
</head>
<body>
<div>
<img src="http://imgs.zinio.com/magimages/500299032/2012/416238969_170.jpg" alt="Nov-12" title="Food Network Magazine" class="cover">
</div>
</body>
</html>
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>