Rotating an input 90 degrees within a div for unique positioning

I used JavaScript to make an input range vertical, like so:

var range_pitch = document.createElement("input");
range_pitch.setAttribute("type", "range");
range_pitch.style.webkitTransform = "rotate(90deg)";
range_pitch.style.mozTransform = "rotate(90deg)";
range_pitch.style.oTransform = "rotate(90deg)";
range_pitch.style.msTransform = "rotate(90deg)";
range_pitch.style.transform = "rotate(90deg)";

However, I am having trouble placing it inside a created <div>:

vertical_slider.appendChild( range_pitch );
document.body.appendChild( vertical_slider );

You can view my question on this JSFiddle link

If anyone has a solution, please let me know. Thanks!

javascriptjquerycsshtml

Answer №1

Visit the fixed jsfiddle link for more information

If you inspect the DOM in your browser console, you will notice that the input element is already nested within the div. All you need to do is adjust the CSS accordingly as shown in the example below.

I hope this explanation proves useful to you.

  var vertical_slider = document.createElement('div');
  vertical_slider.id = 'vertical_slider';

  var osa_y_panorama = 0.6;
  var range_pitch = document.createElement("input");
  range_pitch.setAttribute("type", "range");
  range_pitch.style.webkitTransform = "rotate(90deg)";
  range_pitch.style.mozTransform = "rotate(90deg)";
  range_pitch.style.oTransform = "rotate(90deg)";
  range_pitch.style.msTransform = "rotate(90deg)";
  range_pitch.style.transform = "rotate(90deg)";
  range_pitch.min = "0";
  range_pitch.max = "218";
  range_pitch.step = "0.6";
  range_pitch.defaultValue = osa_y_panorama;


  vertical_slider.appendChild( range_pitch );
  document.body.appendChild( vertical_slider );
#vertical_slider
{
  float: left;
  width: 40px;
  height: 218px;
  border: 1px solid blue;
}

input{
  position: relative;
  top:93px;
  right: 83px;
  width:200px;
}

Answer №2

Your issue stems from the CSS rotation applied to the input element. Although the element is technically inside, the rotation gives it the appearance of being outside.

To resolve this problem, you can apply the following CSS hotfix:

input {
  position: relative;
  right: 70px;
  top: 100px;
}

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

Having trouble setting cookies with Node.js Express?

Check out this code snippet: const app = express(); const cookieParser = require('cookie-parser'); app.use(cookieParser()); app.post("/pinfo", (req, res) => { var form = new formidable.IncomingForm(); form.parse(req, async functi ...

javascriptnode.jsexpresscookies

What could be causing media queries to not update values even after being changed through JavaScript?

I have a simple navigation bar on my website, featuring links to different subpages. To enhance the user experience on mobile devices, I added a hamburger menu icon that is displayed on smaller screens. The links in the navigation bar are hidden using CSS ...

javascripthtmlcssmedia-queries

Attempting to adjust the width of a text animation loaded with jQuery using Textillate, but encountering difficulties

I found a captivating animation on this website: http://codepen.io/jschr/pen/GaJCi Currently, I am integrating it into my project. #content { position: relative; margin-left: auto; margin-right: auto; width: 1000px; height: 700px; } ...

javascriptjqueryhtmlcsswidth

Unable to activate focus() on a specific text field

It's quite peculiar. I'm working with a Sammy.js application, and my goal is to set the focus on a text field as soon as the HTML loads. Here's the CoffeeScript code snippet I've written: this.partial('templates/my-template.jqt&ap ...

javascriptsammy.js

What steps should I take to implement AJAX in my filter form?

I am completely new to the world of programming. Right now, I have a list of venues displayed in a table on my index page. Users can filter these venues by type and/or area using checkboxes in a form. Thanks to railscasts, I have successfully implemented ...

jqueryruby-on-railsruby-on-rails-3formsfilter

Tips for sending a form using Angular 1.5.8 and Java Servlet via POST method

After reading various tutorials and online documentation, I'm still struggling to figure out how to pass parameters from a JSP form. Below is the JavaScript script I am using: var app = angular.module('myApp', []); app.controller('Form ...

javascriptjavaangularjsjspservlets

I'm having trouble with aligning my input checkbox within the form

My form includes multiple checkboxes, but I am having trouble aligning them properly. <!-- Multiple Checkboxes (inline) --> <div class="form-row"> <label class="chkdonar" for="donarchkform-0">Yes, I want to donate to AMIAB</label> ...

css

No content returned from Facebook feed dialog callback

On my website, there is a "share on Facebook" button that, when clicked, opens a popup for users to share a picture on their profile. While this feature works, I am encountering an issue with the callback function. I need to determine if the user actually ...

jqueryfacebookfeedjquery-callback

Ensuring Angular applications can effectively run on Internet Explorer

In my Angular application, I have implemented the functionality where users can choose a map to select the delivery point for goods. However, there seems to be an issue with this feature in Internet Explorer (IE) - the map opens but the delivery points ar ...

javascriptangularinternet-explorergeolocationmaps

Redirect to a new URL using $routeProvider's resolve feature

Currently, I am in the process of developing an application that includes the following endpoint: .when('/service/:id?', { templateUrl: 'views/service.html', controller: 'ServiceCtrl', resolve: { service: fu ...

javascriptangularjs

Inquiries prior to projecting rays

As I delve into the world of Interaction with Three.js, several questions arise in my mind. 1) Can you shed some light on what exactly Viewport Coordinates are? 2) In what ways do they differ from client Coordinates? 3) How did we come up with this form ...

javascriptthree.jsprojection

Run a PHP function using <button onclick=""> tag

Is it possible to trigger the execution of a PHP script when clicking an HTML button? I am aware that simply calling a PHP function directly from the button's onclick event like this: <button onclick="myPhpFunction("testString")">Button</butt ...

javascriptphphtmlcssserver

Unable to access parameter in Dialogflow fulfillment

I am currently experimenting with dialogflow fulfillment using NodeJS (dialogflow-fulfillment). My goal is to retrieve parameters from dialogflow, however, I encounter an error when trying to access the currency-name parameter: ReferenceError: name is not ...

javascriptnode.jsjsondialogflow-esdialogflow-es-fulfillment

Determine the class name of an element when it is clicked on

For various reasons, I am unable to use $('.class').click or on('click', function..) Therefore, I must utilize the onclick="" event from the html element. Is there a way to determine the class of the element where the onclick event oc ...

javascriptjqueryonclick

Troubles with the placement of the navbar icon in responsive design

After following a tutorial on responsive navigation bars (https://www.w3schools.com/howto/howto_js_topnav_responsive.asp), I successfully implemented the navbar on my website. However, I encountered an issue with the icon placement when clicked. Here is ho ...

htmlcss

Is it possible to truly halt the execution of the readline function?

Exploring a scenario with the code snippet provided below, along with an input file and the resulting output. The setTimeout function is utilized to simulate an external call like an http get request. What would be the most effective or straightforward met ...

javascriptnode.js

What is the right way to send an array using $.post method?

Below is the array I am working with: arr[0]='A'; arr[1]='B'; .... I attempted to send it using the following code: $.post('data.php',arr,function() { }); However, the desired functionality was not achieved. ...

jqueryarrayspost

The issue of AJAX .done() method returning undefined when using $.each() on JSON response

I am having trouble retrieving the JSON response from an $.ajax() request. After selecting a car model, I receive data from the API, but I am unable to access the JSON results to populate a new drop-down list with the required information. HTML <div cl ...

javascriptjqueryjsonajax

Invoke the button's click event by the name property

One could have an HTML button defined as, <input type="button" id="btnSubmit" name="btnName" class="btnclass" value="Click Me" /> To trigger a jQuery button click event based on the id property, one ...

jquery

AngularJs and graph representation

After attempting to generate charts using angular-chart, I followed all the necessary steps and requirements outlined in the documentation. However, upon completion, my canvas element failed to display any content. My HTML Layout: Here is a snippet of my ...

javascripthtmlangularjsangular-chart