Enhancing image clips using jQuery techniques

Could someone help me figure out why the image clip value isn't changing when I move the range slider in the code below?

$('#myRange').on('input', function() {

  var nn = $(this).val();
  $("img").css({
    'clip': 'rect(0% ' + nn + '%, 0%, 0%)',
    '-webkit-clip-path': 'inset(0% ' + nn + '%, 0%, 0%)',
    'clip-path': 'inset(0% ' + nn + '%, 0%, 0%)'
  });

});
img {
  clip: rect(0% 50% 0% 0%);
  -webkit-clip-path: inset(0% 50% 0% 0%);
  clip-path: inset(0% 50% 0% 0%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
<img src="https://img.fcbayern.com/image/fetch/f_auto,h_371,q_auto:good,w_660/https://fcbayern.com/binaries/content/gallery/fc-bayern/homepage/saison-19-20/frauen/news/fcb-frauen-mannschaftsbild_getty_270719.jpg/fcb-frauen-mannschaftsbild_getty_270719.jpg/fcbhippo%3Axtralargesixteentonine%3Fv%3D1564992156070"
  class="img-fluid">

javascriptjquerycss

Answer №1

Try eliminating the spaces

$('#myRange').on('input', function() {

  var nn = $(this).val();
  $("img").css({
    'clip': 'rect(0% ' + nn + '% 0% 0%)',
    '-webkit-clip-path': 'inset(0% ' + nn + '% 0% 0%)',
    'clip-path': 'inset(0% ' + nn + '% 0% 0%)'
  });

});
img {
  clip: rect(0% 50% 0% 0%);
  -webkit-clip-path: inset(0% 50% 0% 0%);
  clip-path: inset(0% 50% 0% 0%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
<img src="https://img.fcbayern.com/image/fetch/f_auto,h_371,q_auto:good,w_660/https://fcbayern.com/binaries/content/gallery/fc-bayern/homepage/saison-19-20/frauen/news/fcb-frauen-mannschaftsbild_getty_270719.jpg/fcb-frauen-mannschaftsbild_getty_270719.jpg/fcbhippo%3Axtralargesixteentonine%3Fv%3D1564992156070"
  class="img-fluid">

The most efficient method of utilizing custom properties

$('#myRange').on('input', function() {
  var nn = $(this).val();
  $('img').css('--clip-right', nn + '%');
});
img {
  --clip-right: 50%;
  clip: rect(0% var(--clip-right) 0% 0%);
  -webkit-clip-path: inset(0% var(--clip-right) 0% 0%);
  clip-path: inset(0% var(--clip-right) 0% 0%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
<img src="https://img.fcbayern.com/image/fetch/f_auto,h_371,q_auto:good,w_660/https://fcbayern.com/binaries/content/gallery/fc-bayern/homepage/saison-19-20/frauen/news/fcb-frauen-mannschaftsbild_getty_270719.jpg/fcb-frauen-mannschaftsbild_getty_270719.jpg/fcbhippo%3Axtralargesixteentonine%3Fv%3D1564992156070"
  class="img-fluid">

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

How can I use jQuery to either display or hide the "#" value in a URL?

I have a question that I need help with. Let's say I have the following links: <a href="#test1"> Test </a> <a href="#test2"> Test 2 </a> When I click on Test, the URL will change to something like siteurl/#test1. However, whe ...

javascriptjqueryhtml

Transform Text into Numeric Value/Date or Null if Text is Invalid

Consider the TypeScript interface below: export interface Model { numberValue: number; dateValue: Date; } I have initialized instances of this interface by setting the properties to empty strings: let model1: Model = { numberValue: +'', ...

javascriptangulartypescriptangular8

Having trouble with Angular router.navigate not functioning properly with route guard while already being on a component?

I am currently troubleshooting an issue with the router.navigate(['']) code that is not redirecting the user to the login component as expected. Instead of navigating to the login component, I find myself stuck on the home component. Upon adding ...

javascriptangulartypescriptangular-routingangular-components

Ways to retrieve a value within a function and update a variable

Fetching data from the firebase database = firebase.database(); var ref = database.ref('urls'); ref.on('value', gotData, errData); function errData(err){ console.log('Error!'); console.log(err); } function gotData(d ...

javascriptangularjsnode.jsfirebasefirebase-realtime-database

Executing a JavaScript function when an HTML page is loaded within an OBJECT Tag

I have a situation where I am loading an HTML page inside an object tag. Since the iPad does not support iFrames, I decided to use the object tag to load external HTML pages into a container. Everything is working well so far, but now I want to be able t ...

javascriptjqueryhtmlobject

Capturing and saving detailed hand-drawn artwork in high resolution

Is there a cutting-edge solution available for capturing hand-drawn sketches (from a tablet, touch screen, or iPad-like device) on a website using JavaScript and saving it on the server side? Essentially, I am looking for a mouse drawing canvas with a hig ...

javascriptjqueryhtmltablet-pc

What is the best way to execute a PHP query using JQuery and Ajax?

I need assistance with a two-column layout where the first column contains draggable words and the second column is dropabble, allowing words to be moved between columns. How can I save this transition in my database table effectively? Currently, I am uti ...

phpjqueryajax

When using the map function, I am receiving an empty item instead of the intended item based on a condition

Need assistance with my Reducer in ngRx. I am trying to create a single item from an item matching an if condition, but only getting an empty item. Can someone please help me out? This is the code for the Reducer: on(rawSignalsActions.changeRangeSchema, ...

javascriptangulartypescript2.0

Prevent any sliding animations of content when the button is triggered

I've implemented a basic slideToggle functionality in jQuery. You can check out the code on JSFiddle here: $(document).ready(function() { $(".panel_button").on('click', function() { $(".panel").slideUp(); var targetPanel = $(thi ...

jqueryhtmlcss

The row count feature is ineffective in Materialize CSS when adjusting the text area

Can the row count of a text area in materialize css be initialized with a specific number using "rows='20'"? How can we adjust the default row count? Here is an example of code that attempts to set the row count but doesn't work: <div c ...

htmlcssmaterialize

The barely noticeable difference of 1 pixel in the link between Chrome and Firefox

Hello there, I need some advice on how to adjust a one-pixel difference between Chrome and Firefox. The menu links appear correctly in Chrome, but in Firefox, they are 1px smaller than they should be. Below is the CSS code: ul#menu { padding: 0 0 2px ...

htmlcssgoogle-chromefirefoxbrowser

When incorporating conditional statements into your code, make sure to utilize the tags <script> along with

I have some script tags as shown below: <script src="cordova-2.5.0.js"></script> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/jquery.mobile-1.1.1.min.js"></script> <script src="js/jquery.xdomainajax ...

javascriptjqueryhtml

Experiencing a problem with the localhost connection

I've been trying to work on this issue using React and local host, but it keeps showing the direct file instead of the website. I've been stuck on this problem for the past 3-4 hours and still haven't been able to find a solution. I'm h ...

javascriptreactjs

What is the method to prevent the Submit Button from being active in CSS specifically on Firefox?

When I click this CSS in webpages on Chrome (OS: Windows), it works fine. However, Firefox (OS: CentOS7) does not seem to apply this CSS on webpages. How can I resolve this issue? Should I make adjustments in the CSS code below? #submit .btn.btn-primary ...

javascripthtmlcss

What benefits does sending data in JSON offer when using JQuery Ajax?

I created a form that sends the input values using ajax: var data = { id : $("#tabs").tabs('option', 'selected'), title : $('#name').val(), csrf_token : $("input[name=csrf_token]").val() }; Wh ...

phpjqueryajaxjson

Transform markdown into HTML code

Is there a way to effectively transform a string that resembles the following format: '* [-]Tree Item1', '** [-]Tree Item1-1', '*** Tree Item1-1-1', '*** Tree Item1-1-2', '*** Tree Item1-1-3', '** Tre ...

javascript

Can Microsoft Edge Developer tool be used to incorporate external programs or code?

This image of msedge-devtools clearly demonstrates my point. I am interested in building a webpage parser using selenium and Microsoft Edge, beyond just JavaScript. I am seeking a way to utilize the Microsoft Edge developer tools (Inspect Element Mode) t ...

javascriptselenium

Guide on linking draggable elements

Currently, I have a set of div elements that I am able to clone and drag and drop into a specific area. Now, I am looking for a way to connect these divs with lines so that when I move the divs, the lines will also move accordingly. It's similar to cr ...

javascriptjquery

triggers an unexpected error in console.log

I need help with the following code: function printName(obj) { console.log(obj.name); } printName({ name: "myName" }); (function displayError(errorMsg){ console.log(errorMsg); })("Error"); However, when I try to run this code, I am encountering a T ...

javascriptjqueryfunction

What are some ways to achieve a smoother hover effect?

.proposal p{ font-size: 14px; color: #494949; margin-bottom: 15px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-height: 20px; max-height: 100px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .proposal: ...

htmlcss