I am trying to rotate an image 90 degrees when I click on it.
<img src="img/right-arrow.png" alt="" class="rotate-image">
Using CSS, I can achieve the rotation by adding the following code:
.rotate-image {
transform: rotate(90deg);
}
However, when attempting to implement the rotation using jQuery, it doesn't seem to be working. Here is my jQuery code:
$('.rotate-image').click(function(){
$(this).css("-webkit-transform", "rotate(90deg)");
});
The reason for this error is due to the incorrect usage of : in your function. It should be replaced with a comma as shown below:
$(this).css("-webkit-transform", "rotate(90deg)");
Take a look at this jsfiddle example
If you wish to include : in your CSS using JQuery, you must enclose the entire code within {}
For instance:
$('.show').click(function(){
$(this).css({"-webkit-transform" : "rotate(90deg)"});
}
);
Alternatively, if you prefer not to use {}, you can replace : with , like so
$('.show').click(function(){
$(this).css("-webkit-transform" , "rotate(90deg)");
}
);
Give this a shot
$('.view').click(function(){
$(this).css({
'-moz-transform':'rotate(180deg)',
'-webkit-transform':'rotate(180deg)',
'-o-transform':'rotate(180deg)',
'-ms-transform':'rotate(180deg)',
'transform':'rotate(180deg)'
});
});
Give this a shot:
$('.activate').on('click', function(){
$(this).css({"-webkit-transform" : "rotate(90deg)"});
});
Exploring the world of flex, I came across this interesting line within Bootstrap 4's column classes: .col-md-4 { flex: 0 0 33.3333%; } I am curious about the properties associated with the values 0 0. Could you please shed some light on it? ...
Hey everyone, I've encountered a situation where I need to make cross-domain AJAX requests, so I included the line "$.support.cors = true;" before my ajax calls. However, I'm noticing that for non-cross domain calls, my ajax requests don't ...
To create a login box that meets the specified criteria, the following must be taken into consideration: Develop it as a versatile UI Component that can be utilized in various sections of a website Allow for multiple instances of this component to coexis ...
Is it possible to load a file located at an http:// address into a modal window? Something like this: <a class="btn btn-info btn-large" data-toggle="modal" href="#http://localhost/login.html"> <i class="icon-user icon-white"></i> Login ...
Exploring the realm of flexbox has brought me to a bit of a roadblock with a layout like this one: https://jsfiddle.net/5b0pLgkj/ Everything seems to be running smoothly in Chrome and Safari, where children elements can be resized and fill up the availabl ...
When using the following select, I am connecting it to an observable array. <select id="selectProtocols" data-bind="options: optionsAvailable, optionsCaption:'Selecione...', optionsText: 'SimpleDescription', optionsValue:'???&a ...
I am attempting to automate clicking a button in Tampermonkey, but for some reason the code is not working as expected. Interestingly, when I manually run the code in the console, it functions perfectly. Here is the snippet: $(document).ready(function() ...
Is there a way to customize the color of the navbar links in the fresh developer portal for different layouts? I have attempted using the designer tool provided by the portal, but it hasn't yielded any results. I also tried cloning the git repository ...
Check out the live demo here $(".moving_container").mouseenter( function(){ clearInterval(timer); } ).mouseleave(function(){ timer = getInterval(slideWidth,slideHeight,slideLength) }); I'm curren ...
Currently, I am facing an issue with my ajax jquery code. It seems to be working perfectly on all browsers except for IE6. I have tried making some changes but unfortunately, it did not solve the problem. I would greatly appreciate any help or suggestions ...
I'm brand new to this and have been searching online for a solution, but I can't seem to figure it out. It's possible that I'm making a basic mistake, so any assistance would be greatly appreciated. I'm trying to create a simple f ...
I am facing an issue with High Charts as I am trying to display a chart using details from a JSON data example. [{"eventName":"ABC","countError":147391},"eventName":"DEF","countError":117926}] The JSON code only contains 2 parameters - eventName and coun ...
Can anyone help me figure out why the alert is firing twice? The code snippet involves a checkbox with the class .onoffswitch. <script type="text/javascript"> $(document).ready(function(){ $('.onoffswitch').click(function(){ ...
Is there a way to prevent JQuery DataTables cells from extending width after adding hyperlink to cell? I am facing an issue where I have two tables on the same page. The first table column has a link which populates the second table. It works fine when th ...
I am trying to achieve something similar to the code snippet below: <!-- ko foreach: subTopics --> <div id='subtopic-name-here'> <!-- /ko --> Specifically, I want the ID of my div to be set as the name of the corresponding ...
I've created a custom navbar that fits perfectly on a screen that is 1300 pixels wide by 700 pixels high. https://i.sstatic.net/nOm0c.png However, when the viewport size is reduced, the navbar elements become misaligned: https://i.sstatic.net/zBqpQ ...
Hey everyone, I have a little issue that I hope you can help me with: I've set up a blog using code igniter and here is my code snippet: This is from my home_page controller: public function index() { $data['posts'] = $this-&g ...
I have been experimenting with submitting a form using ajax to the same .php file. When I submit the form without ajax directly (form action), the database gets updated. However, when I try the same process with ajax, there is no change in the database. H ...
Having some difficulty figuring this out. I'm working on a bootstrap navbar that transitions from static to fixed when the user scrolls past the logo at the top. Everything seems to be working fine, except for when the navbar reaches the top, it sudde ...
Hello everyone, I am currently attempting to use AJAX to send a request with a button trigger and display the response HTML file in a span area. However, I am encountering some issues and need help troubleshooting. Here is my code snippet: //ajax.php < ...