javascript - Make div button over contenteditable element -
i developping angular app client, , have make clickable button @ bottom right on contenteditable element following image :
to add difficulty, content should scrollable, button should stay same place , text should avoid it. of course, can't add marging/padding cause add blank column/line @ bottom or @ right of content editable zone.
i can use js/css tips/library.
edit #1 : ok not enough accurate question. here code :
<p id="editfield" contenteditable="true"></p> http://jsfiddle.net/4yr7jsz1/24/
as can see, "contenteditable" element. user can type come text in it. text should not pass below round button, , should srcollable.
edit #2 : actually, button. ":before" element on inserted element inside contenteditale container allow me place zone want text avoid. problem can't change aprameter af ":before" element via javascript... here html :
<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 button.
via javascript, insert empty element make text goes around.
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); element.bind("blur keyup change", function(event) { if(element.html() != mydiv[0].outerhtml && element.html() != '') { mydiv.prependto(element); } else { mydiv.remove(); } }); $(document).on("click","span#clickable-zone",function() { console.log('click'); }); } }; }); then, add css different content let me position "blank zone" inside contenteditable element.
[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: 100px; } #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; } i not sure there way it, great :)
thanks in advance !
so find answer finding way move "before" peuso element inside contenteditable element. here code snippet :
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>as can see, used inherit css trick pass dynamic height of before pseudo element. scroll still working , can't see lack of performance right now. hope can 1 day :)
thanks help.
Comments
Post a Comment