Using cascading style sheets to switch a page into editing mode

Is it possible to change the view of a page after clicking a button without using javascript, and instead relying solely on CSS?

I want to display a page with information where users can click an edit button and make changes within the same view rather than being directed to a different page.

Here is an example of how the page will be initially displayed to the user: View initial layout on jsFiddle

<div>living the dream</div>
<hr/>
<div>
    <p>Lorem ipsum dolor sit amet...</p>
</div>

<div>Edit button</div>

And here is what the page will look like after the user clicks the edit button: View edited layout on jsFiddle

<div class="page" contenteditable>living the dream</div>
<hr/>
<div class="content" contenteditable>
    <p>Lorem ipsum dolor sit amet...</p>
</div>

The classes will start off hidden, and will only be added to the divs once the edit button is clicked.

Is it achievable using just CSS, or are there alternative methods that do not involve javascript?

javascriptjqueryhtmlcss

Answer №1

Is it possible to achieve something like this using the checkbox hack to switch to the contenteditable mode?

Check out the demo on Codepen: http://codepen.io/noobskie/pen/gaXqgm?editors=110

I'm unsure about how to save the content as I have limited experience with content editable and I'm not certain if you can capture the values dynamically.

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

input[type=checkbox]:checked ~ div {
  display: inline;
}

.container {
  display: none;
  position: absolute;
  top: 9px;
  left: 8px;
  right: 8px;
  width: auto;
}

.page {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  background-color: white;
  background-color: -moz-field;
  border: 1px solid darkgray;
  border-radius: 3px;
  box-shadow: 1px 1px 1px 0 lightgray inset;
  font: -moz-field;
  text-align: left;
  padding-top: 9px;
  padding-left: 10px;
  height: 25px;
}

.content {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  background-color: white;
  border: 1px solid gray;
  border-radius: 5px;
  font: medium -moz-fixed;
  height: 128px;
  overflow: auto;
  padding: 2px;
  resize: both;
  position: relative;
  bottom: 12px;
}
<div>living the dream</div>
<hr/>
<div>
    <p>Lorem ipsum dolor sit amet...</p>
</div>

<input type="checkbox" id="button" />
<label for="button" onclick>Edit Button</label>

<div class="container">
  <div class="page" contenteditable>living the dream</div>
  <hr/>
  <div class="content" contenteditable>
      <p>Lorem ipsum dolor sit amet...</p>
  </div>
<input type="checkbox" id="button" />
<label for="button" onclick>Save Button</label>
</div>

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

Encountering an Error 405 Method Not Allowed while attempting to send a PUT AJAX request to a PHP server using

I am currently working on implementing a REST-like application using PHP and jQuery. During my initial attempt, I encountered the following error: PUT http://... 405 (Method Not Allowed) To address this issue, I added the following lines at the beginn ...

phpjquery.htaccesshttpput

Incorporating OTP verification into the registration process

I'm struggling with incorporating the "send OTP" feature into my registration form. I received an API from an SMS provider, but I'm unsure how to integrate it into my form. After verifying the OTP, I need the user's data to be stored in my d ...

phphtmlone-time-password

I'm running into some issues with flexbox and I'm in need of some assistance to find

I positioned two divs next to one another, but instead of each taking up 100vw, they are both sharing 50% of the available space. Is there a solution for this issue? Thank you. Page Image import type { AppProps } from "next/app"; import "./global.cs ...

javascriptnext.jstailwind-css

What is the best way to set up an anchor element to execute a JavaScript function when clicked on the left, but open a new page when clicked in

One feature I've come across on certain websites, like the Jira site, is quite interesting. For instance, if we take a look at the timeline page with the following URL - When you click on the name of an issue (which is an anchor element), it triggers ...

javascripthtmlvue.jsvue-router

JavaScript Event Listener causing the Sticky Position to Break

I am currently dealing with a situation where I want to create a slide-in side menu that remains sticky. However, when I apply the position: sticky CSS property to my menu container, it causes the entire menu to be displayed (instead of being pushed off th ...

javascripthtmlcss

I'm looking to position the vibrant red box at the bottom of the screen, right under the navigation bar. However, every time I try to

I'm struggling to align the full-screen red box under the navigation bar. I've tried using flex properties but it's not working as expected. My goal is to have the red box at 100% width and be responsive. Could it be something with my nav b ...

htmlcssbootstrap-4

Comparing AngularJS $http with $http.post: A Detailed Analysis

As a newcomer to AngularJS, I am experimenting with sending data to the server and mapping it to a DTO in a REST Service. Here's how I attempted to do it: saveUserUrl = "http://localhost:8080/App/rest/UserManager/saveUser"; var res ...

javajqueryangularjsangularjs-directive

Obtain environment variables within a Strapi plugin

I am currently working on developing a Strapi local plugin, but I am facing an issue with retrieving variables defined in my .env file located at the root of my project. Specifically, I am trying to access this value within my React component (plugins/myPl ...

javascriptnode.jsreactjsstrapi

Should I use several if get statements on one page, or spread them out across multiple pages in PHP structure?

After working with PHP for a few years, one of my ongoing dilemmas is how to best structure my pages. Should I follow the current approach: if(getValue('action') == "jobsFilter" && getValue('jobType') == "open") ...

phphtmloop

What are the steps to handle AJAX POST data and store it in EF Core using .Net Core?

I've been working on this issue for hours and I just need a little nudge in the right direction. My jquery AJAX post is successfully sending the data in the post request, but it always turns up null on the controller side. I've tried adding [From ...

jqueryajaxasp.net-core

Can you tell me the standard font size in Internet Explorer 9?

After examining this particular website, I found the default styling used by IE 9. The body selector in particular appears as follows: body { display: block; margin: 8px; zoom: 1; } I would have expected a font-size declaration in this code, but su ...

htmlcssinternet-explorerinternet-explorer-9

In Lightning Web Components, there seems to be an issue with the splice method not functioning correctly when used with an @api

When checking the console, I noticed that this.unselectedPlayerList.length is not displayed until after using the splice method. This has raised some doubts in my mind about how the splice method works. export default class MakeYourTeamChild extends Ligh ...

javascriptsalesforcelwcsalesforce-developer

Manage and maintain database structure with synchronization capabilities

I am tasked with creating a web application that can function offline using Local Storage or IndexedDB. Currently, my server has schema v2 which includes additions such as new tables or fields, while my local app is using schema v1. I am looking for a so ...

javascriptjsonlocal-storageindexeddb

Is it possible to automatically set focus on the input box in an html tag multiple times instead of just once with autofocus?

Currently, I am developing an online editor that allows users to quickly edit individual words. My approach involves replacing specific words with input boxes containing the word for direct editing by users. In order to streamline the process and ensure e ...

javascripthtmlangular

How can I retrieve the transformation matrix for a DOM element?

Is there a way to retrieve the transformation matrix of a DOM element similar to how we can do it with canvas context? Does the DOM provide a getTransform() method for this purpose? ...

javascripthtmlwebcanvas

Unable to deploy the Firebase function to Firebase functions platform

I've been watching Doug's video on YouTube for guidance on changing a message with functions in JavaScript. To resolve the error message 'types can only be applied to ts files,' I installed the Flow language script. Thankfully, that err ...

javascriptnode.jsfirebasefunctiongoogle-cloud-functions

Selecting a Single Checkbox in a Group using jQuery

I am struggling to select a single checkbox among a group of checkboxes and cannot seem to find a solution. Below is the code I use to dynamically create my checkbox group. My goal is to be able to iterate through the group and choose individual checkboxe ...

jquery

What prompts certain individuals to convert their asp.net pages into HTML pages before publishing?

Recently, I was informed that there is a possibility of working on a project involving ASP.NET 3.5 and C#. A colleague suggested that when we publish the site, we should convert all pages to HTML. This means instead of www.test.com/Page.aspx, it would be w ...

c#asp.nethtmlsecurity

What is the best way to redirect nodejs requests to a separate nodejs application?

Hello! I am currently working on a project to create an API gateway using Node.js and Express. The goal is to showcase a small-scale microservices architecture by routing requests to different microservices. For instance, if I have microservices A, B, and ...

javascriptnode.jsexpressmicroservicesapi-gateway

Overrule the child element selector using a class identifier

I'm facing an issue where the descendant selector is overriding my .red_p class. Is there a way to prevent this from happening without having to assign a class to each p element individually? HTML: <html> <head> <style> ...

htmlcss