Develop Reference

Remove resizable cursor in kQuery resizable element

I have created a container which is not resizable during initialization but when I'm clicking it it's width is expanding and then it is resizable,and on clicking again it's width it again contracting and the container becomes not resizable. However the problem is I'm able to disable resizable on the container but resize cursor is still there, how can I remove it ?
I'm using this code:
// while intializing
$(".container").resizable({
disabled:true,
handles:"e,w"
});
//on Click event
disableSideBarResize: function() {
$(".container").resizable().resizable("disable");
},
enableSideBarResize: function() {
$(".container").resizable().resizable("enable");
},
But I'm not able to remove the resize cursor/icon. Can anyone please help me with this?

Syntax:
$( ".selector" ).resizable( "disable" );
CDN Link: First, add jQuery UI scripts needed for your project.
code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css
Blockquote
code.jquery.com/jquery-1.12.4.js And code.jquery.com/ui/1.12.1/jquery-ui.js
Check the link
https://www.geeksforgeeks.org/jquery-ui-resizable-disable-method/

What is an alternative to 'resize' on mobile?

I am trying to trigger an event in a web browser on a desktop
$(window).trigger('resize');
The issue is on mobile it doesn't seem to be triggering. Is there an alternative method for mobile?
I am using tablesaw plugin for grids. When the screen is small in size, the columns will not fit and as such a swipe will be provided to move between them. When I sort them, all the columns gets squeezed and shown on the small screen, but after I trigger the resize event, an event in the plugin will get called that will fix them. On the mobile, this event doesn't exist I guess and I'm not targeting the orientation.

a variation of this (JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?)
this will run on resize and orientchange.
var waitForFinalEvent=function(){var b={};return function(c,d,a){a||(a="THISPAGE");b[a]&&clearTimeout(b[a]);b[a]=setTimeout(c,d)}}();
var fullDateString = new Date();
$(document).ready(function(){
$.resized = function(){
waitForFinalEvent(function(){
//function to run
}, 300, fullDateString.getTime())
}
window.addEventListener("orientationchange", function() {
$.resized();
});
$(window).resize(function () {
$.resized();
});
$.resized();
});

window.dispatchEvent(new Event('resize'));

Make a check mark appear when colorbox is closed

I've added colorbox to a site that contains product attributes. When a user has selected the attributes and closed the popup I either want to change the background colour of the button used to open the popup, or display a marker so that they know they have chosen the options for that product out of the grid layout.
I have got a close event firing ok on colorbox. I tested it with alert("closed"), so i know that it is activating correctly.
So i added:
$(document).bind('cbox_closed', function(){
document.getElementById('.inline').style.backgroundColor = "#f3f3f3";
});
but it didn't change the background colour of the "inline" class.
What am i doing wrong?
If i decide to go with a check mark that is hidden with display:none; what is the process for overriding the display:none; css?
Thanks

There are a couple problems I see here:
A. You're incorrectly accessing a class name "by id". Switch to jQuery CSS selector and css() method to change the BG color:
$(document).bind('cbox_closed', function(){
$('.inline').css({backgroundColor: "#f3f3f3"});
});
B. You may want to add your event listener directly in the colorbox options in the constructor, rather than on the document, which ought to perform better, and will kill the listener when the colorbox is destroyed (no memory leaks):
$('#my_colorbox').colorbox({
// options
onClosed: function() {
$('.inline').css({backgroundColor: "#f3f3f3"});
}
});

You can't access the class with document.getElementById(). Use document.querySelectorAll('.inline') instead.
or use jquery way
$('.inline').css('backgroundColor', '#f3f3f3');
Use
$(document).bind('cbox_closed', function(){
document.querySelectorAll('.inline').style.backgroundColor = "#f3f3f3";
});

Autosize jQuery plugin, trigger a autosize.update

I'm using Autosize to automatically resize textboxes (height). The plugin is JS but can be used as a jQuery plugin (explained in the site). The author explains how to trigger a manual "update" event (JS) when you change the text using JavaScript. I need to do the same, but using jQuery "mode", because I'm creating textboxes dynamically using Ajax. Tried trigger() with no success.
autosize(ta); /*Pure JS*/
ta.value = "Something really long";
var evt = document.createEvent('Event');
evt.initEvent('autosize.update', true, false);
ta.dispatchEvent(evt);
Here is a piece of my source code: http://pastebin.com/049UfkGv - after $(this).autosize(); I need to trigger "autosize.update" event to redim the textbox to its new contents.
jQuery Code:
$(document).ready(function(){
window.jQuery.fn.autosize=function(){ return autosize(this); };
});
$('.edit4').each(function(){
$(this).keypress(function(event) { if (event.keyCode==13) { event.preventDefault(); };
$(this).autosize();
});
Thank you!

you can use it as follows:
autosize.update($('textarea'));

In my case the Autosize jQuery plugin could not calculate the right height, because the textarea was hidden on pageload.
The following tigger helped me out:
function showMyTextarea(){
// do your stuff here
// trigger autosize
$('textarea').trigger('autosize.resize');
}

In my case I had to update the size of textarea not only based on changed content (this is handled by "autosize" plugin itself nicely) but based on CSS properties change as well, e.g. when user is using a slider to change the font-size of the textarea.
This worked for me:
// ... slider ui init bla bla
slide: function(){
var $textarea = $('.your.selector.for.textarea.or.cached.jQuery.object.with.target.textarea');
// .. changing the actual css property
// triggering the .autosize
$textarea.trigger('autosize.resizeIncludeStyle');
// ... etc etc
}
// ...
This is not properly described in the Autosize Documentation but the event does exist and is handled in the jQuery version of the plugin.

Autosize creates a custom event, that can be triggered manually like this:
$("thextarea").trigger("autosize");

How to stop title attribute from displaying tooltip temporarily?

I've got a popup div showing on rightclick (I know this breaks expected functionality but Google Docs does it so why not?) However the element I'm showing my popup on has a "title" attribute set which appears over the top of my div. I still want the tooltip to work but not when the popup is there.
What's the best way to stop the tooltip showing while the popup is open/openning?
Edit: I am using jQuery

With jquery you could bind the hover function to also set the title attribute to blank onmouseover and then reset it on mouse out.
$("element#id").hover(
function() {
$(this).attr("title","");
$("div#popout").show();
},
function() {
$("div#popout").hide();
$(this).attr("title",originalTitle);
}
);

Here is another example of how it can be done by using data for value storage and prop for value assigning
$('[title]').on({
mouseenter : function()
{
$(this).data('title', this.title).prop('title', '');
},
mouseleave: function()
{
$(this).prop('title', $(this).data('title'));
}
});

I think setting to blank space and when the popup closes, setting again the proper text. I think this is the easiest way to stop it.

For me, I didn't care what the content of the title tag was. I just did:
$('a').hover(function() {
$(this).attr('title', '');
});
Which stopped the title tag from showing.