I'm trying to modify a Div layer that looks like this:
...
<style type="text/css">
<!--
#newImg {
position:absolute;
left:180px;
top:99px;
width:704px;
height:387px;
z-index:1;
background-image:url(../Pictures/repbg.png);
background-repeat:repeat;
}
-->
</style></head>
<body>
<div id="newImg" name="newImg" ></div>
...
Is there a way to rotate it?
Utilize cssSandpaper to implement the transform feature, allowing for element rotation support across various browsers such as Gecko (Firefox), WebKit (Safari, Chrome), Opera, and even Internet Explorer.
Check out this amazing jQuery plugin designed to rotate images effortlessly: http://code.google.com/p/jquery-rotate/
//
// Function to Rotate a <DIV> element
//
// - Position of DIV must be absolute or relative
// - Uses center point of DIV as origin for tilt
//
// Expected browser compatibility: most browsers (including ie6, ie7 & ie8)
//
function rotateDiv( divElement, topPos, leftPos, height, width, angleDegrees )
{
var radAngle = Math.PI * angleDegrees / 180;
var spinAngle = radAngle;
if ( window.navigator.userAgent.indexOf ( 'MSIE ' ) <= 0 || typeof document.documentElement.style.opacity!='undefined' )
radAngle = -radAngle;
var sinAngle = parseFloat(parseFloat(Math.sin(radAngle)).toFixed(8));
var cosAngle = parseFloat(parseFloat(Math.cos(radAngle)).toFixed(8));
var m11 = cosAngle;
var m12 = -sinAngle;
var m21 = sinAngle;
var m22 = cosAngle;
if ( window.navigator.userAgent.indexOf ( 'MSIE ' ) <= 0 || typeof document.documentElement.style.opacity!='undefined' )
{
divElement.style.WebkitTransform = 'matrix('+ m11 +','+ m12 +','+ m21 +','+ m22 +',' + 0 + ',' + 0 + ')';
divElement.style.MozTransform = 'matrix('+ m11 +','+ m12 +','+ m21 +','+ m22 +',' + 0 + 'px,' + 0 + 'px)';
divElement.style.msTransform = 'matrix('+ m11 +','+ m12 +','+ m21 +','+ m22 +',' + 0 + ',' + 0 + ')';
divElement.style.OTransform = 'matrix('+ m11 +','+ m12 +','+ m21 +','+ m22 +',' + 0 + ',' + 0 + ')';
divElement.style.transform = 'matrix('+ m11 +','+ m12 +','+ m21 +','+ m22 +',' + 0 + ',' + 0 + ')';
divElement.style.top = topPos + 'px';
divElement.style.left = leftPos + 'px';
return;
}
var sinSpinAngle = -parseFloat(parseFloat(Math.sin(-spinAngle)).toFixed(8));
var cosSpinAngle = parseFloat(parseFloat(Math.cos(-spinAngle)).toFixed(8));
var sinAnglePerp = parseFloat(parseFloat(Math.sin(radAngle-Math.PI)).toFixed(8));
var cosAnglePerp = parseFloat(parseFloat(Math.cos(radAngle-Math.PI)).toFixed(8));
var halfHeight = height/2;
var halfWidth = width/2;
var radius = Math.sqrt(halfHeight*halfHeight + halfWidth*halfWidth);
var ulx = leftPos + halfWidth - radius*cosSpinAngle + sinAnglePerp*halfHeight;
var uly = topPos + halfHeight - radius*sinSpinAngle + cosAnglePerp*halfHeight;
var urx = radius*cosSpinAngle + leftPos + halfWidth + sinAnglePerp*halfHeight;
var ury = radius*sinSpinAngle + topPos + halfHeight + cosAnglePerp*halfHeight;
var lrx = radius*cosSpinAngle + leftPos + halfWidth - sinAnglePerp*halfHeight;
var lry = radius*sinSpinAngle + topPos + halfHeight - cosAnglePerp*halfHeight;
var llx = leftPos + halfWidth - radius*cosSpinAngle - sinAnglePerp*halfHeight;
var lly = topPos + halfHeight - radius*sinSpinAngle - cosAnglePerp*halfHeight;
divElement.style.filter = "filter: progid:DXImageTransform.Microsoft.Matrix( M11="+m11+", M12="+m12+", M21="+m21+", M22="+m22+", sizingMethod='auto expand' );";
var spinTop = Math.min( uly, ury, lry, lly );
var spinRight = Math.max( ulx, urx, lrx, llx );
var spinBottom = Math.max( uly, ury, lry, lly );
var spinLeft = Math.min( ulx, urx, lrx, llx );
divElement.style.top = spinTop + 'px';
divElement.style.right = spinRight + 'px';
divElement.style.bottom = spinBottom + 'px';
divElement.style.left = spinLeft + 'px';
}
If you want to achieve this effect using native methods, your best bet right now is to utilize the -moz-transform property.
Check out more details about it here.
It's important to note that this method may not be compatible with all browsers, so proceed with caution.
Update: Alternatively, there is a jQuery plug-in available for achieving the same effect:
http://plugins.jquery.com/project/Transform/
This option might provide better cross-browser compatibility.
My goal is to create a search bar that dynamically loads content, but I want the actual loading of content to start only after the user has finished typing. I attempted a version of this, but it doesn't work because it doesn't take into account ...
Currently, I am utilizing the .NET Bundling and Minification feature to bundle and minify the files for my application. While this method works well, I am interested in exploring alternative solutions due to its complexity. Specifically, I am attempting t ...
I am facing an issue with my code that I need help with. I am trying to include more data than just my :SteamID in my database. This function/PDO is currently executing every time someone visits my site. Working code: /*Check possible existing data*/ $odb ...
Update: This issue is isolated to one specific page. Other pages within the website are displaying correctly. Recently, I developed a web page using React and Material-UI. The main components utilized are Grid and Container. While the layout appears fine ...
When I send UTF-8 Japanese text to my server, it works fine in Firefox. Here are the details from my access.log and headers: /ajax/?q=%E6%BC%A2%E5%AD%97 Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7 Content-Type application/x-www-form-urlencoded; char ...
My component involves the use of the Angular material date picker. However, I have encountered a strange issue with it. When I select a date using the calendar control, everything works fine. But if I manually change the date and then press the tab button, ...
I want the date to change from the first date to the second date. At the start, it should display 'Starts:' in bold followed by the remaining time. Once it switches to the second date, it should show 'Ends:' in bold and then the remaini ...
As a newcomer to Javascript and Angular, I am currently working on integrating AngularJS into my website. Despite watching tutorials from CodeSchool, Egghead, and others, I seem to be stuck at the very beginning. My issue lies in retrieving JSON data from ...
Utilizing DWR for AJAX calls in my project involves the conversion of JavaScript objects to Java objects by analyzing the Java class. My goal is to send and receive a JSON-like structure through DWR. For example: JavaScript Object: { "name" : "TamilVe ...
I have been attempting to duplicate a 2D array by value using the slice() method in order to prevent any changes made to the new array from impacting the original. Oddly enough, it seems that this approach is effective with a 1-dimensional array but not wi ...
I need to fetch the currentID variable from renderermain.js and utilize it in renderermem.js. However, I am looking for a way to achieve this without modifying mem.html: <script src="renderermain.js"></script> <script src="renderermem.js"& ...
I am looking to iterate through my JSON data and extract all keys along with their values that start with the letters "QM". Below is an example of my JSON content: [ { MHF46: 'Ledig', MHF181: '06', QM6_QMSI2: '1899-12-30 ...
I've managed to create an increment counter that updates the value in a .txt file on my server every time I click a button by +1. It's working flawlessly and here's how it looks like: <!DOCTYPE html> <html> <head> <meta ...
After integrating material UI into my existing application, I encountered a peculiar issue. When adding material UI components to modals, the entering animation fails to trigger. Interestingly, downgrading material UI or removing all MUI components resolve ...
Attempting to access data from the GitHub API using jQuery (AJAX) and display it on a static webpage. Here are the HTML and JS code snippets: $(document).ready(function(){ $.ajax({ url: 'https://api.github.com/re ...
On my ASP.NET page, I am encountering an issue with a hidden field not being found during an asynchronous postback within an update panel. In the updatepanel_Load event, the following code is used: if (!IsPostBack || triggeredRefresh.Value == "1") { H ...
I'm attempting to load a .dae model in three.js, but it seems like the texture is not loading. Here is my code snippet: <script src="js/three.js"></script> <script src="js/Animation.js"></script> <script src="js/An ...
I'm feeling a bit lost on the best approach for obtaining additional data, particularly using an API, and adding it to the existing list. Imagine we're implementing either an infinite scroll or a 'load more' button, when that action oc ...
I have implemented a jsx variable to insert a video into my html. Despite following the advice to include muted defaultMuted, and playsinline (which I have already done), the videos autoplay on safari, chrome, and firefox on my computer but not on mobile ...
Dealing with an array of objects containing addresses, each with four fields. The first field is the current location (store), while the others provide address information. The challenge is ensuring that I end up with a result in the format key:value (sto ...