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 come I am receiving the E11000 error from Mongo when I have not designated any field as unique?

Encountering an issue while attempting to save the second document to MongoDB Atlas. The error message reads as follows: Error:MongoError: E11000 duplicate key error collection: test.orders index: orderId_1 dup key: { orderId: null } Despite having no un ...

javascriptnode.jsmongodbmongoosemern

The script functions perfectly in jsfiddle, yet encounters issues when used in an HTML

I stumbled upon a seemingly peculiar issue with my script in jsfiddle: https://jsfiddle.net/oxw4e5yh/ Interestingly, the same script does not seem to work when embedded in an HTML document: <!DOCTYPE html> <html lang="en"> <head> & ...

javascriptjqueryhtmlcss

Troubleshoot: Laravel controller not receiving inputs

I'm currently facing an issue with passing a creation form to a controller. I have set up the route and the ajax call, which is communicating with the route successfully. However, I am encountering a problem where the form values are not being display ...

phpjqueryajaxlaravelcontroller

Why does one of the two similar javascript functions work while the other one fails to execute?

As a new Javascript learner, I am struggling to make some basic code work. I managed to successfully test a snippet that changes text color from blue to red to ensure that Javascript is functioning on the page. However, my second code attempt aims to togg ...

javascripthtmlcss

What is the best way to assign table rows to various interfaces in typescript?

Assuming I have the interfaces provided below: export interface IUserRow { id: string, state: string, email: string, } export interface ITableRow { id: string, [key: string]: any; } export type Rows = ITableRow | IUserRow; // additio ...

javascripttypescript

Adjust the class based on the model's value in AngularJS

items = {'apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby'} html <div class="variable" ng-repeat="item in items">{{item}} </div> ...

javascriptcssangularjsangularjs-ng-repeat

Using Firebase with Arrays in Javascript

Currently, my team and I are working on a project using Firebase with Vue.js as the framework. We've come across a challenge regarding creating, updating, and deleting elements in a Firebase cloud document. For instance, within our 'people&apos ...

javascriptfirebasevue.jsgoogle-cloud-platformgoogle-cloud-firestore

Performing date comparison in JavaScript with varying date formats

My system includes a table that retrieves dates from an FTP location. On the user interface page, there is a form that gathers all details related to a specific FTP date. However, I am facing difficulties in comparing the FTP dates with those specified in ...

javascripthtmlnode.jsexpress

What is the process for incorporating a new method into an object that already exists?

class Person { constructor(name, age) { this.name = name; this.age = age; } sayName() { alert(this.name); } } // Create three instances of the Person class with some made-up data const p1 = new Person('Alice', 25); const p ...

javascript

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

How to display currency input in Angular 2

Is there a way to dynamically format input as USD currency while typing? The input should have 2 decimal places and populate from right to left. For example, if I type 54.60 it should display as $0.05 -> $0.54 -> $5.46 -> $54.60. I found this PLUNKER that ...

javascriptangulartypescriptdirective

Start the setInterval function again after clearing it with the clearInterval button, but wait for

Currently, I am working on a content slider that automatically cycles through slides using the "next" function and setInterval. However, I want it to stop when the user clicks on the prev/next buttons by using clearInterval. Is there a way to resume setInt ...

javascriptjquerysetintervalclearinterval

The error message "no match found" can only occur on the server-side when using jQuery version 1.x

Having an issue with this small section of code: $('.desc_container').each(function() { var fulltext = $(this).text(); if(fulltext.length > 50) { var myRegexp = /^(.{47}\w*\W)(.*?)$/g; var match = myRegexp.exec(f ...

javascriptjqueryregex

Concealing specific DIV elements (unfortunately not nested)

Currently, I am dealing with pre-existing code that is automatically generated and needs to adhere to a specific format: <div id="TITLE1"></div> <div id="div-1"></div> <div id="div-2"></div> <div id="div-3"></d ...

javascriptjquerycsshtml

Is it possible to incorporate jQuery into an AngularJS project?

When it comes to testing, AngularJS is a framework that supports test-driven development. However, jQuery does not follow this approach. Is it acceptable to use jQuery within Angular directives or anywhere in AngularJS for manipulating the DOM? This dilemm ...

javascriptangularjs

Scrollbar in an HTML selection tag

Is there a way to add a scroll bar to an HTML select box without using JavaScript? Alternatively, is there a JavaScript library that can achieve this behavior? Also, I'm looking for a redesign of the interface where I have two select boxes and items ...

javascripthtmlscrollbar

Server-side script for communicating with client-side JavaScript applications

Currently utilizing a JavaScript library that uses a JSON file to display content on the screen in an interactive manner. (::Using D3JS Library) While working with clients, it is easy to delete, edit, and create nodes which are then updated in the JSON fi ...

javascriptajaxshellclient-server

Issue retrieving data from view in controller

When working with AJAX, I encountered an issue while passing a list of objects. Below is the snippet of my code: //things = JSON.stringify({ 'things': things }); var postData = { things: things }; $.ajax({ contentType: 'a ...

c#jqueryajaxasp.net-mvc

The functionality of the document download button using Express.js and node.js appears to be malfunctioning

For my current project, I am aiming to enable users to effortlessly download a document by simply clicking on a designated button. Project Outline: public/client.js console.log('Client-side code running'); const button = document.get ...

javascriptnode.jsexpress

"Selecting elements with CSS using the 'element'

While exploring some websites for studying purposes, I came across this code snippet. .site-header .widget-area span.but As a beginner in CSS, I'm curious to know more about the span.but part. Is it similar to the :not pseudo selector? ...

csscss-selectors