Create various designs for a section of a webpage

My goal is to create a coding playground using flex-box to position different panels. Here is an example in JSBin, with the following html code:

<div class="flex-box">
  <div class="col" id="html-panel">
    <p>html</p>
  </div>
  <div class="handle">
    <div class="handle-inner"></div> 
  </div>
  <div class="col" id="css-panel">
    <p>css</p>
  </div>
  <div class="handle">
    <div class="handle-inner"></div> 
  </div>
  <div class="col" id="js-panel">
    <p>javascript</p>
  </div>
</div>

I have added textareas inside each panel for user input, and use an AngularJS controller to update output based on changes in the textareas.

Now, I am considering different layout options without repeating too much code, such as horizontal or vertical arrangement of panels, or variations with 1 or 2 panels on either side. How can I implement this efficiently?

Should we maintain 1 common .html, .js, and multiple .css files for different layouts? This way, users can simply choose a different .css file to switch between layout options?

javascriptcssangularjsangular-ui-routerflexbox

Answer №1

After conducting some investigation, I have determined that utilizing nested views, UI-Router, AngularUI, or Angular JS can indeed achieve this goal. By defining one html file per layout, we can effectively implement the desired functionality.

However, I am inclined to follow @DCR's suggestion of using only JS and CSS initially. This approach is more straightforward, as JavaScript allows us to dynamically insert html content using innerHTML. As a result, I could potentially inject 4 different html strings for 4 layouts, each containing shared class names for consistent styling in CSS and functionality such as splitter-dragging in JS.

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

Looking for assistance with getting 2 functions to run onLoad using Ajax - currently only 1 is operational

In the coding journey, I first implemented shuffle functions for arrays which was successful. Then, I proceeded to define two global variables that would dictate the random order in which images are displayed on the webpage. The variable picOrder was meant ...

javascriptajaxonload

"The orderBy function in AngularJS seems to be overlooked or not functioning properly within the

It seems like the orderBy function is being ignored in my code. Despite adding a console.log for testing purposes, the function doesn't appear to be called at all. As a result, the data is still displayed but remains unordered. Snippet of HTML Code ...

angularjs

The React Component in Next.js does not come equipped with CSS Module functionality

I have been attempting to incorporate and apply CSS styles from a module to a React component, but the styles are not being applied, and the CSS is not being included at all. Here is the current code snippet: ./components/Toolbar.tsx import styles from & ...

javascriptcssnode.jstypescriptnext.js

HTML: attempting to align a quote image next to some text within the page

I want to add a quote to my website, but I'm having trouble positioning it correctly. https://example.com/quote-image.png Every time I try to adjust the position of the quote image, it moves when I zoom out. https://example.com/background.png I attem ...

htmlcss

Steps for generating an HTML form in a fresh window

I am currently working with this function: // open a new window. Create and submit form function createSubmitForm(response) { var external = window.open('about:blank', 'external'); var doc = external.document; var body = $( ...

javascriptjquery

The div with a 'inline-block' display and maximum width appears to be wider than needed after a line break

The red div labeled as inline-block-1 in the jsFiddle takes up more space than needed for the text. Is there a way to eliminate the extra space, making it resemble the green inline-block-2 without removing the max-width and avoiding hard-coding width? Feel ...

jqueryhtmlcss

Utilizing AngularJS to assess expressions within an HTML tag

This question presents a unique scenario that sets it apart from other similar questions like those found here or here. The objective here is to "evaluate inside the HTML tag" rather than within a directive or controller. The explanation might be challengi ...

angularjsexpression

The GitHub-hosted package encounters a failure during the npm publish process

Last week everything was running smoothly, but now I am encountering an error and not sure what went wrong. (Apologies for the formatting as there are many lines of log) Running Node version: v10.15.3 Using npm version: 6.4.1 After executing npm publish ...

javascriptnode.jsnpmgithub-package-registry

Top technique for extracting json files from post requests using nodejs

Situation: I'm running a Node.js REST server that receives JSON files, parses them, and inserts them into a database. With an anticipated influx of hundreds of requests per second. Need: The requirement is to only perform insertions by parsing the JS ...

javascriptnode.js

HTML/CSS: There is a sentence that has no spaces that is exiting outside a div

HTML: <div> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </div> CSS: div { width: 150px; border: 1px solid blue } DEMO: http://example.com QUESTION: How can we solve this issue? ...

htmlcssspace

Guide to setting a background image on a div when hovering using jQuery

I'm having trouble adding a background image to this specific div element: <div class="logo-main"></div> Here is the script I've been using, but it doesn't seem to be working as expected: <script type='text/javascript& ...

jquerycssbackgroundhover

React callbacks involve the interaction between three different components

Currently, I am working with 3 distinct components: -The friendsPage component contains a list of friends and invitations to friends -The friendComponent displays detailed information about a friend along with possible actions (which are handled in the t ...

javascriptreactjscallback

Carry out numerous commitments across a range of elements

I have a list of objectIds and I want to perform operations on different collections based on each Id. I prefer executing the operations sequentially. var removeOperation = function(objectified){ return Comps.findOne({reviews : objectified}).populate([ ...

javascriptnode.jsmongoosepromisebluebird

The state remains unaltered within the confines of the useState hook and useEffect function

I encountered a similar issue to the one discussed in this particular question The code provided was extensive, so I created a simplified version of the problem. (I apologize if there was an error in my approach) Essentially, I have a main component and ...

javascriptreactjsreact-hooksreact-functional-component

Incorporating React into a non-React website

I am currently working on a project where the server renders all views using the Twig template engine. Therefore, I tend to write all my scripts within the .twig templates. Take, for instance, the aside-buttons.twig template: <div class="aside-butto ...

javascriptreactjstwig

Sending additional parameters along with the data obtained from an HTTP request to a method in AngularJS

Within my controller, I have a method that retrieves a JSON file from my API. $scope.get = function (code) { api.get(code) .then(onJsonPart, onError); }; By implementing the above code snippet, I am able to display t ...

angularjsjsonapiservicepromise

How can I transform an HTML element into a textarea using CSS or JavaScript?

While browsing a webpage, I discovered a <div> element with the class .plainMail and I want to find a way to easily select all its text by simply pressing Ctrl+A. Currently using Firefox 22, I am considering converting the div.plainMail into a texta ...

javascripthtmlcss

Harness the power of Highcharts through an Ajax request to retrieve a JSON file

I am having an issue using Highcharts with a JSON file from an external server. When I try to bind the returning file to the chart in my ASP.NET MVC application, it doesn't work. Here is the code I have attempted: http://jsfiddle.net/Q6ngj/2/ jQuery ...

javascriptjqueryajaxjsonhighcharts

Using jQuery to enable scrolling and dynamically changing classes

I'm currently working on enhancing my website with a feature that changes the opacity of the first section to 0.4 when a user scrolls more than 400 pixels down the page. I attempted the following code without success: if($("html, body").offset().top ...

javascriptjquerycssscroll

Is there a way to quickly toggle between CSS properties in the Styles tab of Chrome Devtools/Inspector using a keyboard shortcut?

While I typically rely on Firefox and Firebug for CSS testing and tweaking, I am now trying to transition to Chrome. One issue that is really frustrating me is that in Chrome, changing a CSS property seems to require clicking on it, deleting the current va ...

cssgoogle-chromegoogle-chrome-devtools