I am attempting to transform a circle into an obround using transform: scaleX(2), but it ends up becoming an ellipse instead. Increasing the width of the obround causes a jittery transition in my application. Is there a more efficient way to achieve this transformation? I have provided a sandbox link below to demonstrate the behavior.
Indeed, achieving the desired effect requires separate transformations for the body of the shape (similar to a rectangle) and the two circles.
$(document).ready(() => {
$('button').click(() => {
$('.shape').toggleClass('expanded');
});
});.shape {
position: relative;
margin-left: 200px;
}
.circle {
position: absolute;
top: 0;
left: -12px;
background: red;
width: 24px;
height: 24px;
border-radius: 24px;
background: blue;
transition: transform .5s;
}
.rect {
width: 1px;
height: 24px;
background: blue;
transition: transform .5s;
}
.shape.expanded .circle.left {
transform: translateX(-32px);
}
.shape.expanded .circle.right {
transform: translateX(32px);
}
.shape.expanded .rect {
transform: scaleX(64);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shape">
<div class="circle left"></div>
<div class="rect"></div>
<div class="circle right"></div>
</div>
<button>toggle</button>Is there a method in CSS or Javascript that allows me to eliminate the hover effect on all elements? I am specifically looking for a solution that will disable the hover effect on mobile devices while keeping it intact on desktop. I attempted using pointer ...
function calculateCost() { var projectorCost=0,price=0,quantity=0,discountPrice=0,totalCost=0; var modelName=document.getElementById('projectormodel').value; var quantity=document.getElementById('q ...
I'm currently working on a shape-based menu, but I'm encountering issues specifically in Safari. The layout gets distorted in Safari, and I'm struggling to understand the cause. Interestingly, when I use CSS clip-path without the SVG tag, it ...
The issue I am experiencing seems to be directly related to the jQuery $.ajax({...}); function. In PHP, when I print the array, I receive a Notice: Undefined index. I would greatly appreciate any advice or guidance on this matter. <script> $(docume ...
Currently facing challenges with importing interactive.js 1.7.2 in Angular 8. I attempted the following installation: npm install interactjs@next I tried various ways to import it, but none seemed to work: import * as interact from 'interactjs'; ...
I am looking to modify the attribute value in the index.html file from an external JavaScript file that is linked to the HTML file. The structure of my folders is as follows: folder structure When I try to specify the path from the HTML file using: {{url ...
It seems like I'm encountering some scope issues that I can't seem to resolve. Here's a rundown of the problem: I'm trying to create a custom directive called "my-create-content" that will insert an "img" HTML template into the element ...
I recently added a button to my online shop that allows users to sort products by price, even though I don't fully understand the underlying JavaScript code. I want to enhance this button by updating the text to indicate whether the sorting order is ...
In my Angular app, I have multiple pages that allow users to make changes such as opening tabs and pills, modals, etc. For instance, if a user opens a modal and then clicks a link within that modal that takes them to another page, I want the original page ...
I'm currently working on a small app using the Json server package to help me keep track of movies I want to watch in my free time. I am looking to learn React and Axios, so I decided to build this app with these technologies. The concept is simple - ...
My goal is to search for a specific item in an array called idarray and loop through it until I find a value that is not equal to -1. Once I find that value, I want to use the index to retrieve the corresponding value from another array called array. To a ...
If I were to start by setting up the database outside of my Ajax call like this: // This code is compatible with all devices and browsers, utilizing IndexedDBShim as a last resort var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitInd ...
Currently, I am attempting to retrieve messages in Node.js using discord.js. { "627832600865800222": { //guild id "348832732647784460": { // author id "message": "hii hello" } } } let autho ...
Can someone help me with a solution to switch between nav-stacked nav-pills for mobile and non-nav-stacked nav-pills for other devices using Bootstrap? For instance, on a desktop: <nav> <ul class="nav nav-pills"> <li role="presentat ...
When using moment.tz to convert a specific date and time to UTC while considering the Europe/London timezone, there seems to be an issue. For example: moment.tz('2017-03-26T01:00:00', 'Europe/London').utc().format('YYYY-MM-DD[T]HH: ...
Currently, I am facing an issue while using angular.js with a C# web service. My requirement is to increment ng-repeat item by item in order to display updated data to the user. To achieve this, I attempted to utilize $http.get within a loop to refresh t ...
I am currently developing a TypeScript npm module called https://www.npmjs.com/package/html2commonmark. This module is versatile and can be utilized in nodejs (via require) as well as in the browser (by loading node_modules/html2commonmark/dist/client/bund ...
I have a custom JavaScript plugin that is integrated within a directive and utilized in an Angular manner. Snippet of the directive, export default function () { 'use strict'; return { restrict: 'E', scope: { map: &apo ...
As I venture into using three.js, I am attempting to import an OBJ file using OBJLoader2.js locally (without npm). However, I am encountering a 404 error for three.module.js, MeshReceiver.js, and OBJLoaderParser when trying to add import {OBJLoader2} from ...
I am working on a React project that involves a parent to grandchild hierarchy. In my code, I am passing values as JSON Objects. There are two input boxes where users can enter values and a button that stores and displays the values when clicked. Below is ...