Use the resizable function for widths greater than 1024px

I have a resizable function on my page:

$(function() {
$( "#droppable" ).droppable({
  create: function( event, ui ) {$( this ).hide(0)}
});
$( "#droppable" ).on( "dropover", function( event, ui ) {  $( this )
         $( this ).text('¿Eliminar?')} );
    $( ".panel" ).draggable();
 $( "#droppable" ).droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      drop: function( event, ui ) {
        $(ui.draggable).toggle( "scale" );
        $( this ).show(0).delay(700).toggle( "clip" );
        $( this ).addClass( "ui-state-highlight" )
        .text('¡Eliminado!')    
         }
    });
$( "#droppable" ).on( "dropout", function( event, ui ) {  $( this )
         $( this ).text('Arrastrar y soltar para eliminar')} );
    $( ".panel" ).resizable({
      minHeight: 119,
      minWidth: 352,
      maxHeight: 219,
      maxWidth: 452
    });
  });

However, I only want to apply it when the resolution is higher than 1024. I tried applying it but encountered an error with a token ')' :

FULL ERROR: Uncaught SyntaxError: Unexpected token ) 

$(function() {
$( "#droppable" ).droppable({
  create: function( event, ui ) {$( this ).hide(0)}
});
$( "#droppable" ).on( "dropover", function( event, ui ) {  $( this )
         $( this ).text('¿Eliminar?')} );
    $( ".panel" ).draggable();
 $( "#droppable" ).droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      drop: function( event, ui ) {
        $(ui.draggable).toggle( "scale" );
        $( this ).show(0).delay(700).toggle( "clip" );
        $( this ).addClass( "ui-state-highlight" )
        .text('¡Eliminado!')    
         }
    });
$( "#droppable" ).on( "dropout", function( event, ui ) {  $( this )
         $( this ).text('Arrastrar y soltar para eliminar')} );
if ($(window).width() > 1024) {
    $( ".panel" ).resizable({
      minHeight: 119,
      minWidth: 352,
      maxHeight: 219,
      maxWidth: 452
    });
  });
}
jqueryhtmlcss

Answer №1

Oh no, you encountered some syntax errors in your code! The issues included using $(function(){ instead of (function(){, errors caused by $(this) within nested functions, and prematurely closing the if statement with }); before its actual closure.

(function() {
$( "#droppable" ).droppable({
  create: function( event, ui ){
      $(this).hide(0);
  }
});

$( "#droppable" ).on( "dropover", function( event, ui ) {
         $( this ).text('¿Eliminar?');
});

$( ".panel" ).draggable();

 $( "#droppable" ).droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      drop: function( event, ui ) {
        $(ui.draggable).toggle( "scale" );
        $(this).show(0).delay(700).toggle( "clip" );
        $(this).addClass("ui-state-highlight").text('¡Eliminado!'); 
       }
    });

$("#droppable").on( "dropout", function( event, ui ) { 
         $(this).text('Arrastrar y soltar para eliminar');
});

if ($(window).width() > 1024) {
    $( ".panel" ).resizable({
      minHeight: 119,
      minWidth: 352,
      maxHeight: 219,
      maxWidth: 452
    });
  }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Choosing the right option with the GeoPlugin technology

I am implementing the location detection feature using the plugin. I have a dropdown menu of states represented by <select>, and utilizing jQuery, I automatically select the user's detected state. $.getJSON(url, function(data){ var state = ...

javascriptjqueryjsonhtml-select

HTML checkbox utilizing JavaScript

<input type="checkbox" name="smoker"> Is there a way for JavaScript to determine whether the checkbox is checked or unchecked without making changes to the HTML code above? ...

javascripthtml

add the elements of an array to multiple div elements sequentially

I'm attempting to update all titles in .item with the values from array. The array I am using contains the following elements: var itCats = ['one', 'two', 'three', 'four']; Additionally, this is the HTML struc ...

javascriptjqueryarraysjson

The utilization of the jquery.form.js plugin is resulting in my form being submitted twice

In order to enable Ajax file uploads in my ASP.Net MVC project, I am utilizing the jquery plugin known as "jquery.form.js" (http://malsup.com/jquery/form/#getting-started). However, I am encountering an issue where the controller action responsible for han ...

javascriptjqueryajaxasp.net-mvcforms

Disable the dragging of a draggable div when another div is dropped inside

In my view, I have displayed reservations and tables as div elements. The tables are draggable and droppable, while the reservations are only draggable. My goal is to be able to drag a table to a desired position and then place a reservation on it. Once th ...

jqueryhtmljquery-uidrag-and-drop

Unable to access individual checkbox with Selenium in Java

I am looking to select the Store Pickup Available checkbox on the following page: http://www.target.com/c/pants-shorts-baby-toddler-boys-clothing/-/N-59yk1#navigation=true&viewType=medium&sortBy=newest&isleaf=true&navigationPath=59yk1& ...

javahtmlseleniumxpathcheckbox

Extracting Ajax data - iterating through each piece of information

I am facing an issue with my ajax code. I have a collection of checkboxes, where the goal is to insert the data from the selected checkboxes into the database. When I choose just one checkbox, the insertion works fine. However, if I select multiple checkb ...

javascriptphpjquerymysqlajax

Updating Bootstrap Indicators with jQuery on Click Event

Unfortunately, I am unable to share an image due to limited internet data. My goal is to switch each image to its sprite equivalent. There are three list items that I'm struggling to change because they each have two classes that need to be updated. ...

javascriptjqueryhtmlcsstwitter-bootstrap

Renewed Promises: Exploring Promises in Angular JS

Revised with HTTP and initial code inspired by requests/Refer to the end of the post: Lately, I have been seeking help from the amazing SO community as I navigate through my AngularJS learning journey. I used to be a traditional C programmer but recently ...

javascriptjqueryangularjs

Retrieving JSON data from a controller method and passing it to jQuery

I've been working on getting this functionality to work properly for the past two days. My goal is to create a log-in feature where I invoke the controller action from jQuery, passing it a JSON object (using json2.js), and then receiving a JSON object ...

asp.net-mvcjsonjquerycontroller

When passing an array from jQuery to PHP using Ajax, the value displayed is simply "Array" instead of the actual

Could anyone please assist me in identifying my mistake? js file: //Checkboxid is an array that gets filled using .push(); $.ajax({ type: "POST", url: "test.php", dataType: 'html', data: { data: Checkboxid }, success: functio ...

phpjqueryajaxarrays

Using jQuery to handle click events and unbinding them

I am new to learning jQuery and not a software developer. In the code below, I have added the .green class to the .show_hide div when clicked, and I would like to remove the .green class from the .show_hide div when it is clicked again. Additionally, I w ...

jqueryonclickjquery-eventsunbind

Enhancing a Jasmine specification to verify the characteristics of parameters during function calls

Currently, I am utilizing the following Coffeescript code to ensure that the initialization of one backbone.js view results in the construction of another: describe 'Avia.AviaView', -> beforeEach -> @aviaView = new Avia.AviaView(add ...

jquerycoffeescriptjasmine

Merge the xAxis functionality with Highcharts

My issue involves a chart generated by highcharts.js. The problem arises with a line chart consisting of 5 values (5 points), each displayed on the xAxis as follows: from value 1 to value 2: 0, 0.25, 0.5, 0.75, 1. I am looking to modify this display and re ...

javascriptjqueryhighcharts

Issue with Google Maps Marker Being Strangely Stretched

I have come across an odd issue with Google Maps (as shown in the attached image). Does anyone have any insight into why this might be happening? Has anyone else encountered this before? Check out the code snippet below: <script> <!-- var ...

jquerygoogle-maps-api-3

Developing Wordpress plugins involving images - path not found

I'm currently developing a WordPress plugin and encountering some issues with images. My plugin is located in wp-content/plugins/my-plugin/ directory, and within that, there's a folder named images/test.png - how can I properly reference this ima ...

cssstylesheetwordpress

Is this the correct method for constructing a class in CSS?

What is the correct way to style a class with CSS and write HTML code? .first{ color:red; } Here is an example of HTML code: <class id=first> <p> some text </p> <p> some other text </p> ...

htmlcss

Issues with slideToggle function causing the element not to expand as

I'm trying to use slideToggle() for expanding elements within a panel, but when I click, the function isn't working as expected. Below is the code snippet: HTML <div class="panel panel-default"> <div class="panel-heading"> ...

jqueryslidetoggle

Making asynchronous requests to a web API endpoint using Ajax

I'm currently working with the following view structure : <div id="addDisplay" class="display"> <div class="box-header"> <h3 class="box-title">Ajouter un compte</h3> </di ...

c#jqueryajaxasp.net-mvcasp.net-web-api

Retrieve a list of Objects from a Spring controller in response to an AJAX request

I am trying to send a List of objects from a Spring controller to an AJAX request. AJAX request: function doAjaxPost(date) { $.ajax({ type : "POST", contentType : "application/json", url : "<%="/water-consumer" + homepageUR ...

javajqueryajaxspringspring-mvc