Looking to split the page into two sections with a vertical line for scrolling horizontally across the page. Need some ideas on how to achieve this, as well as performing functions on one side only. Any suggestions?
https://i.sstatic.net/gYPKA.png
Updated: Something similar to the image below is what I have in mind
If you're in search of a solution, consider checking out md-divider
Alternatively, take a look at AngularJS resizable div directive
Check out this jsFiddle I just made -> https://jsfiddle.net/larsjueljens/tLq2t04a/8/
The code consists of three div sections:
<div class="left">
This content is on the left
</div>
<div class="divider">
</div>
<div class="right">
This content is on the right
</div>
Initial styling:
.left {
position: fixed;
top: 0px;
left: 0px:
width: 200px;
bottom: 0px;
}
.divider {
position:fixed;
top: 0px;
left: 200px;
width: 20px;
bottom: 0px;
background-color: blue;
}
.right {
position: fixed;
top: 0px;
right: 0px;
left: 220px;
bottom: 0px;
}
Javascript snippet:
var isMouseDown = false,
leftContent = document.querySelector('.left'),
divider = document.querySelector('.divider'),
rightContent = document.querySelector('.right');
divider.addEventListener('mousedown', function (event) {
isMouseDown = true;
});
divider.addEventListener('mouseup', function (event) {
isMouseDown = false;
});
divider.addEventListener('mousemove', function (event) {
if (isMouseDown) {
leftContent.style.width = (event.clientX - 10) + 'px';
divider.style.left = (event.clientX - 10) + 'px';
rightContent.style.left = (event.clientX + 10) + 'px';
}
});
Hey there, the solution to your question doesn't involve Angular at all. You can achieve it using the CSS property overflow-y:auto;
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<style>
#div1{width:600px;background:yellow;height:60px;}
#div2{width:60%;background:green;overflow-y:auto;overflow-x:none;height:60px;}
#div3{width:40%;background:pink;}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div id="div1">
<div id="div2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="div3"></div>
</div>
<script>
//module declaration
var app = angular.module('myApp', []);
//controller declaration
app.controller('myCtrl',function($scope){
//code here
});
</script>
</body>
</html>
The Material UI (React) Select component is not expanding in width as expected, even with the autoWidth property. https://i.sstatic.net/h3H0V.png <FormControl margin="dense"> <InputLabel id="prefix-label">Prefi ...
Is there a way to make an element slide into a div, but have its starting position vary? <div class="block"> <div class="hover">…</div> </div> If the user enters the div from the left, the element should slide in from the le ...
I'm a beginner with AngularJS and Angular UI Router. I'm trying to enhance and utilize angular ui router's $uiViewScroll from my javascript code but struggling to find the solution. Can anyone assist me in figuring this out? So far, I have ...
One of the components I'm working on displays data that is defined in the component's state. To access this data, I created a getter: export default createStore({ state: { foo: true, }, getters: { getFoo: state => state.fo ...
I am facing an issue with my ajax call that is written in jQuery. It sends a string to the server and receives back some json data. $.ajax({ url: ..., dataType: 'json', success: function(data) { for (var d in ...
Can anyone assist me with slowing down the mouse-controlled rotation of a 3D object in javascript? The current rotation is too sensitive and difficult to control manually. Below is the code I am using: <html> <head> <script src="js/thr ...
For assistance with my spinning image, please check out this fiddle: https://jsfiddle.net/dricardo1/9a8p6srb/ Hello! I'm struggling with a spinning image that has a noticeable wobble when rotating. I can't seem to find a solution to make the rot ...
My project has two files, SelectGradientTheme.js and SelectColorsTheme.js. I find it frustrating to see that the contents of these two files are almost identical, with the only difference being the array they receive. This repetition of 99% of the code is ...
Recently, I developed a JavaScript app similar to an MPD pad and now I'm looking for a way to record sequences. My initial strategy involved capturing all keyups and keydowns, duplicating the existing layer of audio elements, and playing them in the b ...
I am looking to implement a feature that allows users to choose a specific region on an image using jQuery. The functionality should be similar to the tagging feature on Facebook, but with the added bonus of being able to rotate and scale the selected area ...
I have a function that retrieves posts, but I want users to be directed to a page where posts have a date of "today" that is not the event's publish date but the date when the event is happening. For example, if I have events with a man_date field of ...
Here is the controller code snippet: [HttpGet] [ActionName("Email")] public HttpResponseMessage GetByEmail(string email) { Users user = db.Users.Find(email); if (user == null) { throw new HttpResponseExcept ...
Can someone help me with the following HTML code? <div ng-controller="select"> <select ng-options="n for n in names" ng-model="selected.item" ng-change="change()"> </select> </div> <div ng-co ...
I have a unique idea for a web widget that I want to create. This widget will need to be easily integrated into any website using javascript. It will post a form to my server, receive the data, and display the results in a small area of the host website&ap ...
My draggable div has a "splitter" for expanding and collapsing, but it should only do so on double click or drag. However, when I single click the splitter while the div is collapsed, it repositions to around 10px width. I've attempted using 'st ...
I'm currently investigating why the MathJax render block is giving me an incorrect height for the div. Here's the code snippet: <div class="text-field" id='inner-text'>\(\sqrt{b^{a}\frac{\partial y}{& ...
Here is an example of a GANTT chart created with Highcharts: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/studies/xrange-series/ I am currently working on implementing a similar example that incl ...
I encountered an issue with a discord.js ticket transcript command. The problem arises when using the command to generate a .txt file and send it to the channel, as intended. However, the file ends up being saved locally, which is not the desired outcome. ...
I'm currently developing a WebVR project using Aframe that features multiple miniature 3D scenes (approximately eight) surrounding the viewer. To view each scene, users must rotate their viewpoint accordingly. Since the number of scenes surpasses wha ...
I have a component set up like this: <input type="file" multiple @change="toBase64Handler($event)"> <script> data() { return { files: [], } }, methods: { tobase64Handler(event) { // implementation } } </script> I w ...