I'm using jQuery UI to allow my page elements to be resizable, but I'd like to set custom handles. I've tried what I think should work, but it doesn't.
The basic html is:
<div id="element_x" class="resizable">
<div id="overlay_x" class="element_buttons">
<div id="resize_element_x" class="resize_element ui-resizable-handle ui-resizable-se"><img src="images/site/handle_resize.png" border=0 title="Resize this element" /></div>
</div>
</div>
I set it up like this:
var reposition = '';
$(function() {
$( ".resizable" ).resizable({
containment: "#viewPage",
handles: {"e,s,se" : { e: '.ui-resizable-e', s: '.ui-resizable-s', se: '.ui-resizable-se'}},
resize: function(event, ui){
reposition = ui.position;
}
});
});
This produces the correct handle in the right place, but when I try to resize, it just doesn't do anything! What might be wrong, or is there a better way to do this?
Your custom handle syntax is wrong. This works for me:
var reposition = '';
$(function() {
$( ".resizable" ).resizable({
containment: "#viewPage",
handles: { 'e': '.ui-resizable-e', 's': '.ui-resizable-s', 'se': '.ui-resizable-se'},
resize: function(event, ui){
reposition = ui.position;
}
});
});
The solution is not mine, but it shows exactly what the problem and the solution is:
<p>jQuery UI #4310 - Custom resizable handles do not work unless the ui-resizable-xy and ui-resizable-handle classes are added.</p>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<div class="container">
<div class="border bottom_right ui-resizable-se ui-resizable-handle"></div>
</div>
<script>
$(function() {
$('.container').resizable({
handles: { se: '.bottom_right' }
});
});
</script>
For me it works! :)
http://jsfiddle.net/tj_vantoll/pFfKz/
Related
I am trying to fade the content of an article element once clicked and when the fade is complete replace the HTML. Trying to understand why this doesn't work. The code in the fadeOut function doesn't execute.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('article').click(function(){
$(this).find('p').fadeOut(300, function(){
$(this).html("<p> Glad to see you! </p>");
}); // end fade
}); // end click
}); // end ready
</script>
</head>
<body>
<article style="width: 200px; height: 150px; background-color: yellow;">
<p> Hello There </p>
</article>
</body>
The reason why it isn't working is because inside the fadeOut function's callback, the "this" refers to the "p" element, and not the ".article".
So it's trying to insert "<p> Glad to see you! </p>" in the "<p>" element which just faded out, and doesn't exist anymore.
Instead you have to add it to the ".article" element.
You can keep the "article" element assigned to a variable (here I have assigned it to the variable constant: article), and then use that variable inside the fadeOut's callback to inject the HTML.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('article').click(function(){
const article = this;
$(this).find('p').fadeOut(300, function(){
$(article).html("<p> Glad to see you! </p>");
}); // end fade
}); // end click
}); // end ready
</script>
</head>
<body>
<article style="width: 200px; height: 150px; background-color: yellow;">
<p> Hello There </p>
</article>
</body>
</html>
If you would like to learn more on the "this" keyword and how it works, I recommend visiting here.
Consider the following.
$(function(){
$('article').click(function(){
var $self = $(this);
$("p", this).fadeOut(300, function(){
$self.html("<p> Glad to see you! </p>");
});
});
});
This removes any ambiguous this references.
I have a input in a td and the click script is not getting picked up and im not sure why? There are no errors in the console.
<td>
<input type="button" class="edit btn btn-primary" value="Edit"></input>
</td>
Script below:
<script>
$('.edit').click(function () {
console.log("Test")
})
</script>
The 'click' even listener might run before the .edit element is rendered to the page. maybe wrap it in a document ready function to ensure it doesn't run till the page is loaded. like this:
$( document ).ready(function() {
$('.edit').click(function () {
console.log("Test")
})
});
Please add jquery.js file first like this.
<script src="https://code.jquery.com/jquery-3.6.0.js"> </script>
<script type="text/javascript">
$('.edit').click(function () {
console.log("Test")
})
</script>
Can I write a custom confirm box in JavaScript that, instead of the default OK and CANCEL button, shows a SAVE and DELETE button?
Use the jQuery UI Dialog Box for this.
You can do something like this:
JS:
$(function() {
$("#dialog-confirm").dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Do it": function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
});
<link href="https://jqueryui.com/jquery-wp-content/themes/jquery/css/base.css" rel="stylesheet"/>
<link href="http://jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dialog-confirm" title="Is it treason, then?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>Am I the Senate?</p>
</div>
Not with the native JavaScript confirm box. You could use one of the many JavaScript UI components that emulate modal dialogs to do this instead.
Here's an example: https://jqueryui.com/dialog/#modal-confirmation
I've never used this so use at your own risk.
$('confirm text').dialog(
{
modal:true, //Not necessary but dims the page background
buttons:{
'Save':function() {
//Whatever code you want to run when the user clicks save goes here
},
'Delete':function() {
//Code for delete goes here
}
}
}
);
This should work, but you will need to download or link to jQuery and the jQuery UI libraries to run this.
In this demo http://jsfiddle.net/pHJgP/8/ an image gets replaced with a text
I'd like to do the same on a blogger post http://myblog.blogspot.com/2015/06/firstpost.html
This code goes into post body:
<div id="outer"><img src="http://existdissolve.com/wp-content/uploads/2010/08/microsoft-logo-64x64.png"/></div>
<div id="text" style="display:none">Text here</div>
Where do I put this code?
$(document).ready(function()
{
setTimeout(function()
{
$("div#outer").fadeOut("slow", function ()
{
$("div#outer img").remove();
$("div#outer").html($("div#text").text());
$("div#outer").show();
});
}, 3000);
});
Do I need to add an operator to invoke the function or action in this particular post http://myblog.blogspot.com/2015/06/firstpost.html when it opens? And where/how do I add that operator or trigger code?
What else is missing ?
Before asking I've read several posts on stackoverflow.com , on w3schools.com , etc. experimented but failed due to the lack of knowledge.
place this code just above or before </head>
<script src='http://code.jquery.com/jquery-1.7.2.js'/>
<script type='text/javascript'>
$(document).ready(function()
{
setTimeout(function()
{
$("div#outer").fadeOut("slow", function ()
{
$("div#outer img").remove();
$("div#outer").html($("div#text").text());
$("div#outer").show();
});
}, 3000);
});
</script>
Note: 1.7.2 is taken from the top left corner of the demo http://jsfiddle.net/pHJgP/8/
if 1.7.2 did not work, try other versions.
I am not a PRO. And this is all I know from experimenting.
I could be wrong
I have an accordion element in my page. The problem is that the accordion appears on the page but it is not clickable. By 'not clickable', I mean that when I click on the header it does not expand to reveal the contents. Nothing happens at all. I hope someone can help.
Thanks in advance.
Your jQuery.js module must be loaded before the semantic-ui accordion.js
module.
Simply put
<script src="js/accordion.js"></script>
after
<script src="js/vendor/jquery-1.11.2.min.js"><\/script>
( or whatever your jQuery version is ... )
and initialize the accordion in the html document inside a script tag as :
<script language='javascript'>
$(document).ready(function(){
$('.ui.accordion').accordion();
});
</script>
It happens on nested accordions while you script is under $( document ).ready(function()
So try to call accordion function in an ajax callback like this;
$('input[name=sampleInput]').on('input', function() {
var val = $("input[name=sampleInput]").val();
if (val.length >= 3)
{
$.ajax( {
url: 'sample_handler.php',
type: 'GET',
data: {
data: data
},
dataType: 'html',
success: function ( response ) {
$('.ui.accordion').accordion({});
}
})
}
})
For instance, I've put accordion function in a callback. So I could use it again and again, even I add nested accordions.
In my case I had syntax errors inside javascript/jQuery. After fixing that and importing jQuery module before semantic-ui it works. You can open development tools in the browser and check the console for errors in javascript (F12 in Chrome).
<script type="text/javascript">
$(document).ready(function() {
window.onload = function(){
$('.ui.accordion').accordion();
};
});
</script>