Implementing rotation in CSS with the help of jQuery draggable in an ASP.NET project

In my code, there is a div element with the following attributes:

id="ipad" style="background-image: url(images/large-ipad.png); -ms-transform: rotate(90deg); background-repeat: no-repeat; width: 511px; height: 356px; padding: 41px 67px 41px 67px; margin: auto;"

Inside this div, there is also a span element with the following attributes:

id="lbl1" style="-ms-transform:rotate(90deg)">

Along with some text between the span tags. Additionally, there is JavaScript code for it as well:

$(document).ready(function () {          
        $('#lbl1').draggable({
            containment: 'parent',
            scroll: false               
        });
    });

The main issue I am facing is that after rotating the div for displaying the iPad image in landscape or portrait mode, the draggable functionality does not work properly. The text rotation is also affected by this. Could someone assist me in ensuring that both the text and draggable elements rotate along with the div, while maintaining proper functionality?

Answer №1

things don't always go according to plan,

To ensure your application looks good on all devices, it's important to define a wide range of sizes that you expect users to browse with. This can be achieved by utilizing the new CSS media query.

@media screen and (min-device-width: 480px) { your css for this query goes here }
@media orientation (landscape or portrait){ ... }

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

Is it possible to modify this jquery keyboard navigation to accommodate different tags and additional keyboard functions?

I am currently in the process of developing a basic website featuring images arranged vertically on the page. My goal is to enable smooth scrolling between these images using the keyboard arrow keys. With the assistance of this forum, I have been provided ...

The window.open() function fails to successfully load the webpage

When I try to open a new page in a separate window or tab, the page fails to load. Controller: public static Result loadCreateArtigo(){ return ok(request().host()+request().path()); } JavaScript: $.SmartMessageBox({ buttons : '[No][Yes]&apo ...

Setting dynamic minimum and maximum datetimes on an input field with type 'datetime-local' or text mode 'Datetimelocal' using jQuery or C#

Seeking help to implement dynamic minimum and maximum date time setting, where the last three days are enabled and remaining days are disabled. The below C# code is not producing the desired output. TextBox1.Attributes["min"] = DateTime.Now.AddDa ...

Utilizing Ember controllers to handle promises and potentially refreshing the template based on user search input

I'm new to Ember and have an Ember app. In the form, users can search for specific items based on dates. The controller code is as follows (with comments): App.IpbinshowController = Ember.ObjectController.extend({ actions:{ searchPeriod: functio ...

Mysterious sayings encircling the words fetched through ajax

If the localhost is pointing to the folder named www, where the structure looks like: www/ file/test.cpp index.html I want to dynamically load the content of test.cpp into index.html and display it with the help of highlight.js. Below is the cod ...

Linking selection values to constants in Codebehind using C# in ASP.Net

ASPX Code <asp:RadioButtonList ID="rbServer" runat="server" > <asp:ListItem Value=<%ServerDeveloper%>> Developer </asp:ListItemv <asp:ListItem Value="dev.ahsvendor.com"> dev.test.com</asp:ListItem> <asp:ListIt ...

My sub menu bar is not working properly, I need to fix it so that it can dropdown correctly

I'm struggling with my sub menu layout and need some assistance in fixing it. I've tried numerous times to adjust it using CSS, but without success. Here is the link to my menu. I'm still learning CSS and could really use some guidance: # ...

ASP C# Sorted and Paged

I have encountered an issue while trying to implement search, paging, and sorting in my ASP.NET MVC5 application. The error message I keep receiving is: "The method 'Skip' is only supported for sorted input in LINQ to Entities. The method 'O ...

Utilizing CSS attr() for setting the width dimension

I'm having some trouble setting the width of an element using attr() in CSS. Chrome keeps giving me an "invalid property value" error and I can't figure out what's causing it. What I'm attempting to do is use the attribute "prog" as th ...

Tips on passing data in complex formats to an MVC2 controller using JQuery (Ajax)

When sending a Jquery Json serialized object to my controller, I am facing an issue where not all of the data is being passed. Specifically, one of the members is a complex type that is also Json serialized, and this particular member, RoutingRuleModel, is ...

The left margin class in Bootstrap seems to be having trouble functioning properly within a React

Navbar <div className="collapse navbar-collapse" id="navbarSupportedContent"> <ul className="navbar-nav ml-auto"> <li className=&quo ...

Will you terminate the connection if it is unsuccessful?

I am wondering if using (which closes all connections) inside a try-catch block will close the connection if one of the steps fails, or if it will just move to the catch block? try{ using (var browser = new IE("https://www.bbvanetcash.com/local_kyop/ ...

Retrieve the value of a property in a JavaScript object by specifying a dynamic key for the property

As I work on my current project, I find myself immersed in a world of SVG animations. The challenge lies in triggering these animations as the user scrolls down to view the SVGs. To address this, I took the approach of creating functions for each Snap.SVG ...

Filter prices (minimum and maximum) using a dropdown menu in asp.net core

Struggling to filter prices using javascript and asp.net core, I've written a lot of javascript code that isn't quite cutting it. I'm wondering if there's a simpler way to achieve this, perhaps with jquery or in c#? If anyone has any ...

Sending information to other domains and managing the feedback

As a newcomer to Jquery, I am attempting to send data to a cross-domain and need to manage the response, which is a complete HTML page. Here is the code snippet I am using: $.ajax({ url: "http://www.somehost.com/abc/xyz.php", type: "post", d ...

Uninterrupted jQuery AJAX calls

I have a scenario where I need to periodically update an image on my view using ajax every 10 seconds. Any suggestions on how I can achieve this? Appreciate the help. ...

Customizing Each Menu Item in WordPress

I am currently working on customizing my WordPress Menu. My goal is to assign a unique color to each menu item, while ensuring that the background color of child elements within pages and posts matches the parent text color. Specifically, I envision the f ...

How can I open links inside a .load jquery page without refreshing the page?

I have successfully implemented a jQuery code that updates the search query when I click on a checkbox. However, I am facing an issue with pagination on the loaded page. Whenever I click on the next button or any pagination links, the page refreshes and th ...

Customizing HTML forms using WordPress Divi's custom CSS techniques

I have a WordPress website that I'm customizing with the Divi theme. I've successfully added an HTML form to a 'Code' module and it's functioning well. However, I am struggling to determine where I should place the CSS code. I&apos ...

How do I find the child elements within a parent node?

I am currently utilizing a jquery plugin that has rendered the following HTML layout in the browser: <html> <body> <div class="mce-container-body"> ... <input type="text" id="textedit01"> ... </di ...