Adjusting the dimensions of a rectangle using jQuery: A step-by-step guide

I am encountering an issue while attempting to adjust the width and height of a rectangle using jQuery. The error message I receive is "Uncaught TypeError: Cannot read property 'scrollWidth' of null"

Below you can find the code snippet in question:

$(document).ready(function() {
   var winw = $(document).width();
   var winh = $(document).height(); 

   $("#mask > rect").width(winw);
   $("#mask > rect").height(winh);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
  <defs>
    <mask id="mask">
      <rect x="0" y="0" width="1920" height="1024" fill="#ff0000" fill-opacity=".75" />
      <circle r="140" cx="240" cy="240" fill="#000" fill-opacity="1" stroke="none" />
    </mask>
  </defs>
</svg>

javascriptjqueryhtmlcsssvg

Answer №1

Have you tried using the attr() function?

$(document).ready(function() {
   var winw = $(document).width();
   var winh = $(document).height(); 
   console.log('before-width:'+$("#mask > rect").attr('width'))
   console.log('before-height:'+$("#mask > rect").attr('height'))
   $("#mask > rect").attr('width' , winw);
   $("#mask > rect").attr('height',winh);
   console.log('after-width:'+$("#mask > rect").attr('width'))
   console.log('after-height:'+$("#mask > rect").attr('height'))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
  <defs>
    <mask id="mask">
      <rect x="0" y="0" width="1920" height="1024" fill="#ff0000" fill-opacity=".75" />
      <circle r="140" cx="240" cy="240" fill="#000" fill-opacity="1" stroke="none" />
    </mask>
  </defs>
</svg>

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

Utilizing Google Web Fonts in Gatsby with Custom Styled Components

While using createGlobalStyle from styled-components for global styling, everything seems to be working fine except for applying Google fonts. I have tried multiple ways but can't seem to get it to work. Here's the code snippet: import { createG ...

javascriptreactjsgatsbystyled-components

JavaScript for beginners: show a specified amount of search results and insert a loading indicator at the end

Currently, I have a website that retrieves data from my database using a PHP query. However, the issue I am facing is that there are over 300 entries in my database, resulting in an excessively long displayed page. My main question: How can I restrict ...

javascriptphpjquerymysql

Tips for dynamically incorporating input forms within AngularJS

I am trying to dynamically change the form inputs using ng-bind-html. However, I am only able to display the label and not the text box on the DOM. The content inside ctrl.content will depend on the values received from the server. Important Note: The ...

javascripthtmlangularjshtml-sanitizing

Jquery cannot be used to set a value for an ASP .net hidden field

Having trouble setting the value of a hidden field using jQuery in ASP .NET. The hidden field is defined as follows: <asp:HiddenField runat="server" ID="hdnSelectedTicket" /> This is how I am attempting to set the value: alert(ticketI ...

jqueryasp.net

A method to extract the value of an array by referencing the primary key value

To create a unique name for my extra text field, I am utilizing the primary key of the room_extras table. For example: <tr> <td><?php echo $extrasInfo['description'] ?></td> <td> <input type="tex ...

phphtml

Using Jquery to automatically adjust price based on selected options

Running an online retail store means you can offer products with different variables. For example: Colour: <select class="vars" name="size"> <option>Choose an option</option> <option data-price="-10.00" value="B">blue</o ...

jquery

Click on the "bootstrap" tab to access an external website

Greetings, I find myself in this particular situation, <ul id="myTab" class="nav nav-tabs" role="tablist"> <li class=""><a href="#Tab1" role="tab" data-toggle="tab">TAB1</a></li> <li class="active"><a href="# ...

jquerytwitter-bootstraptwitter-bootstrap-3

Expanding the size of select dropdown in Material UI to accommodate more options

Is there a way to increase the width of the drop down to 400px? I tried adding inline styles, but it didn't work. Upon debugging, I realized that the width is being overridden by this class. I'm not sure how to overwrite it. Could you please prov ...

javascripthtmlcssreactjsmaterial-ui

The Skeleton-Avatar and ImageButton components in MUI React have had their backgrounds reshaped into perfect ovals

I am facing an issue with the mui Stack where all the background shapes of the Skeleton Avatar and background area are turning into oval or ellipsoid shapes. I have tried setting equal width and height for Avatar but it has not solved the problem. Is ther ...

javascriptreactjsmaterial-ui

A vertical divider within an ion-item collection

Currently, I am using Ionic and HTML to implement a vertical line within an ion-item in an ion-list. The desired outcome is to have something similar to this (the colored line after 'all-day'): I attempted the following approach: <ion-list&g ...

htmlionic-frameworksassionic2ionic3

What is the best way to limit the size of a table?

I need help figuring out how to limit the number of entries displayed in an SQL table on a webpage to only 10 per table. Is there a way to restrict adding more than 10 items to a table? ...

c#htmlsqlasp.net

Convert the object containing arrays to a boolean value, which will be true if at least one of the arrays is not empty

Here's the scenario: searchCriteria: { filter1: [?], filter2: [?], filter3: [?], and so on } I am aiming for a boolean output that indicates whether any of the filter arrays contain data (i.e. are not empty). Something along the lines of: co ...

javascriptarraysobject

Managing the state in NextJS applications

I've scoured the depths of the internet in search of a solution for this issue, but unfortunately I have yet to come across one that effectively resolves it. I've experimented with various state management tools including: useContext Redux Zusta ...

javascriptreactjsreduxnext.jsstate

Upon the page loading, only select a handful of checkboxes (JSF)

I am currently developing a web application using JSF 2.0 and I need to have checkboxes pre-selected when the page loads. <h:selectManyCheckbox value="#{UserRegistration.rightSelected}" id="myRight"> <f:selectItem itemValue="add" itemLabel="A ...

htmljsfjsf-2checkbox

Ensure the footer remains fixed while scrolling

For the past day, I've been tackling a challenge with my online shop project. On the specific item's page, I want to include a fixed [add to cart] button as a footer initially, which then becomes sticky when scrolling to a certain point. You can ...

javascripthtmljquerycss

What could be causing html-webpack-inline-source-plugin to prevent the page from refreshing after editing CSS files?

Currently, I am utilizing a plugin that embeds all CSS within the final HTML file. This method prevents the application from refreshing in development mode. Whenever I make edits to the CSS, the build process completes normally, but the styles do not updat ...

javascriptcssreactjswebpack

Implementing the Delete feature using AJAX in this specific scenario: What is the best approach?

My website utilizes PHP, Smarty, MySQL, jQuery, and other technologies. It involves fetching a large amount of data from the database and presenting matching question ids on a webpage. This process of retrieving and displaying the matching question ids for ...

javascriptphpjquerymysqlajax

ASP.Net listview that allows users to click on rows to highlight the selected item

Every row in my ASP.net list view is made up of multiple components enclosed in a <div>. I have a two-part question: How can I make these rows clickable to utilize the SelectedIndexChanged event and load data in another user control based on the ...

jqueryasp.netlistview

What are the capabilities of an INNER JOIN query in Objection JS?

Here is the data model that I am working with: https://i.stack.imgur.com/g1T5i.jpg In this model, a User can be associated with multiple Projects, and a Project can have many Users. These relationships are managed through a join table called UserProjects. ...

javascriptnode.jspostgresqlobjection.js

The model fails to update when a blur event occurs

I am a beginner with Angular2 and I am currently working on creating a reactive form, specifically an interactive date input field. Here is my HTML code: <div class="date ui-input"> <input type="text" name="dateD" [ngModel]="model.date | dat ...

javascriptangulartypescript