Bring div button on top of the contenteditable field

I am working on an Angular app for a client and need to implement a clickable button at the bottom right of a contenteditable element, similar to the image shown below :

https://i.sstatic.net/J6XdW.png

The challenge is that the content needs to be scrollable while keeping the button fixed in place without overlapping with the text. Adding margins or padding is not an option as it would create blank spaces around the editable area.

I am open to using any JavaScript/CSS techniques or libraries to achieve this functionality.

EDIT #1 : To provide more context, here is a snippet of the code:

<p id="editfield"  contenteditable="true"></p>

http://jsfiddle.net/4yr7jsz1/24/

The aim is to have a "contenteditable" element where users can type text, but the text should remain above the round button and still be scrollable.

EDIT #2 : I have made progress with positioning the button using a ":before" element, but I'm facing difficulty in changing its parameters dynamically via JavaScript. Here is the HTML structure:

<body ng-app="MyApp">
  <div id="editable-content" ng-controller="SimpleController">
    <span id="clickable-zone"></span>
    <p id="editfield" contenteditable="true"></p>
  </div>
</body>

The #clickable-zone represents the button that needs to be positioned correctly inside the contenteditable element.

To manipulate the button's position, I use JavaScript to insert an empty element within the contenteditable container.

app.directive("contenteditable", function() {
  return {
    restrict: "A",
    link: function(scope, element, attrs) {
      // Code block
    }
  };
});

Additionally, CSS rules are applied to style the different elements and establish the desired layout inside the contenteditable element.

[contenteditable] {
  /* CSS styles */
}

.inside_element {
  /* CSS styles */
}

.myimage:before {
  /* CSS styles */
}

#clickable-zone {
  /* Button styles */
}

#editable-content {
  /* Container styles */
}

If anyone has suggestions or solutions on how to achieve this layout, your help would be greatly appreciated :)

Thank you in advance!

Answer №1

After much trial and error, I finally stumbled upon the solution to my problem - moving the "before" pseudo element inside the contenteditable element. Here's the piece of code that did the trick:

var app = angular.module("MyApp", []);

app.controller('SimpleController', function($scope){

});

app.directive("contenteditable", function() {
  return {
    restrict: "A",
    link: function(scope, element, attrs) {
      var imgPhoto = $('<div class="inside_element"></div>');
      var mydiv = $('<div class="myimage"></div>').append(imgPhoto);
      
      var initScrollHeight = element[0].scrollHeight;
      var initAvoidElementHeight = 100;
      
      element.bind("blur keyup change scroll", function(event) {
      var position = element[0].scrollHeight;
if(element[0].scrollTop > 0) {
        var position = element[0].scrollTop + initScrollHeight;
        }
        else if(element[0].scrollHeight > initScrollHeight) {
        var position = initScrollHeight;
        }

      var diffScroll = parseInt(position - initScrollHeight);
        mydiv.css('height', initAvoidElementHeight + diffScroll);

        if(element.html() != mydiv[0].outerHTML && element.html() != '') {
    mydiv.prependTo(element);
        }
        else {
            mydiv.remove();
        }
        
      });

      $(document).on("click","span#clickable-zone",function() {
      console.log('click');
      });
    }
  };
});
[contenteditable] {
  border: 2px dotted #ccc;
  background-color: #eee;
  padding: 2px;
  height: 200px;
  width: 500px;
  overflow-y: scroll;
}

.inside_element {
  float:right;
  clear:both;
  width: 100px;
  height: 100px;
  cursor: pointer;
  border-radius: 50%;
}

.myimage::before {
  content: '';
  display: block;
  float:right;
  height: inherit;
}
.myimage {
  height: 100px;
  max-height: 0;
}
#clickable-zone {
  position: absolute;
  bottom: 4px;
  right: 4px;
  border-radius: 50%;
  height: 100px;
  width: 100px;
  float:right;
  background-image: url("https://i.vimeocdn.com/portrait/58832_300x300");
  background-repeat: no-repeat; /*Prevent showing multiple background images*/
  background-size: 100px 100px;
  z-index: 5;
  cursor: pointer;
}

#editable-content {
  height: 208px;
  width: 508px;
  position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="MyApp">
  <div id="editable-content" ng-controller="SimpleController">
    <span id="clickable-zone"></span>
    <p id="editfield"  contenteditable="true" ></p>
  </div>
</body>

By utilizing the inherit css method, I managed to successfully incorporate the dynamic height of the before pseudo element while maintaining smooth scrolling functionality without any performance issues. I hope this finds its way to someone in need one day :)

A big thank you for all the assistance.

Answer №2

Check out this solution: The button remains fixed while the content scrolls. https://jsfiddle.net/8rofx1n9/2/

.btn{

  float:right;
  position:fixed;
  margin-left:300px;
}
<html>
Text Goes here
<span > <input class="btn" type="button" value="ClickMe"   >   

<br/><br/><br/><br/><br/><br/>
Contents.........

<br/><br/><br/><br/>
Contents.........

<br/><br/><br/><br/><br/>
Contents.........

<br/><br/><br/><br/>
Contents.........

<br/><br/><br/><br/>
Contents.........

</span>


</html>

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

ways to retrieve script template variable in angularjs application

I have written scripts to create a whiteboard using canvas inside the template page of AngularJS. Now I need to assign the values of the points[] variable to an AngularJS scope variable. <script> var points = []; </script> How can I access th ...

Unraveling the Mystery: Determining the Position of a Keyword in an HTML File

My challenge involves analyzing an HTML document in string form to locate a specific keyword and identify the tag in which it appears. For instance, if my document looks like this: $string = "<html> <head> <title> ...

The response from the ajax call is still pending

I am currently working on integrating MySQL data (select query) using Spring and MyBatis. I have a controller function that is called via ajax in JavaScript to retrieve the database data. For example: ajax url: /testmysql controller requestmapp ...

What is the process for transforming JSON into a different format?

Currently, I have a JSON array structured as follows: var data = { report: [ { Name: "Nitin", comment: [ { count: 0, mName: "Feb" }, ...

Looking to find top-notch keywords that stand out from the rest?

My chosen keyword is s='young girl jumping' function selfreplace(s) { var words = ['man', 'jumping']; var re = new RegExp('\\b(' + words.join('|') + ')\\b', 'g&a ...

What is the best way to prioritize items on a list in JavaScript?

Looking to organize your to-do list items by priority? In this task list, users can enter an item, select a priority level, and add it to the list. Here is an example HTML form: <input id="task" type="text"/> <select id="priority"> <o ...

The nested list gets clipped by the parent list item when the slide animation is triggered

I am currently in the process of developing an Ionic application that involves nested lists of comments. My goal is to animate replies as child elements while maintaining their state. At the moment, I am using a basic directive with jQuery slideToggle, but ...

Is it possible to implement a hover animation within another hover animation in WordPress?

Trying to incorporate two hover animations for the images in my photo galleries. When hovering over an image, I want a text to appear in a black overlay, and then when hovering over that text, it should become underlined. Looking for something similar to ...

Using nodeJS's util module to format and pass an array

I've been using util.format to format strings like this: util.format('My name is %s %s', ['John', 'Smith']); However, the second parameter being an array ['John', 'Smith'] is causing issues because m ...

The conditional CSS file does not have precedence over the regular CSS file

Currently, my approach involves using conditional comments to connect to a CSS file named "IEonly.css" if the Internet Explorer version is not greater than 8. My goal is to modify certain properties in the standard CSS file. Oddly enough, IEonly.css effect ...

Seeking the method to obtain the response URL using XMLHttpRequest?

I'm having trouble with a page (url) that I request via XMLHttpRequest. Instead of getting a response from the requested url, the request is being directed to another page. requesting --- > page.php getting response from > directedpage.php ...

Node.js is throwing an error code 344, indicating that it is not possible to manipulate headers after they have already been

I'm still learning about Node and I've encountered this confusing error that I can't seem to figure out. I've searched for similar cases online, but none of them quite match mine. Any help would be greatly appreciated. From what I gathe ...

Guide on transforming Json information into the preferred layout and iterating through the loop

Currently, I am diving deep into the world of JSON and feeling a bit puzzled by data formats, arrays, objects, and strings. First things first, I'm in need of data structured like this (on a jQuery page). Would this be considered an object or an arra ...

Personalized labels for your JQuery Mobile sliders

Struggling to make this work correctly, I aim to introduce tick marks and custom labels into jQuery Mobile's slider widget. My goal is to add tick markers at 0, 25, 50, 75, and 100 with a unique string above each tick. Additionally, I want these label ...

Issue with Element Not Displaying During Page Load with Quick AJAX Request

I attempted to display a loading gif while making an ajax request that takes a long time to respond, and then hide the loading gif once the response is received. Here is the code snippet : $('.loading-gif').show(); $ajax({url:'',async ...

Having trouble with the npm package installation for react-circular-progressbar

I encountered an error when trying to install react-circular-progressbar in my React projects. Why is this happening? npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/em ...

Empty placeholder image appearing at the beginning of JavaScript slideshow in Ruby on Rails

As a newcomer, I ask for your understanding if I lack knowledge in some areas. I have been working on a project and using the cycle2 plugin successfully to create a slideshow on my index page with images pulled from the internet. Now, I am trying to impl ...

Is there a way to split a string into words using arrays and functions?

The code I am currently working on is as follows: function look(str) { var stringArr = ['JAVA']; var arr = []; var novaString = '' for(i = 0; i < stringArr.length; i++) { arr = stringArr; } console.log(arr) return ...

Ensuring the correctness of environment variables in Next.js using Zod

After spending the entire day trying to figure it out, I realize that the solution may be simpler than expected. I am currently using the well-known zod library to validate my environment variables and transform data. However, I keep encountering a persis ...

Top spot for placing a file containing a polyfill to ensure cross-browser compatibility in JavaScript projects

Curious about the best location within a React / Redux app (built with create-react-app) to store custom polyfill files for browsers that do not support certain features. I specifically require Array.prototype.includes and String.prototype.startsWith, as ...