Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Change display property of a div on select some text in another content editable div

Posted on 2017-08-14
4
Low Priority
?
39 Views
Last Modified: 2017-08-15
<div id="myDiv" contenteditable="true"></div>

<div id="arrowBox" style="display:none;">Some buttons Here</div>

Now i want to change display block of arrowBox div when select some text in myDiv..

Please Help me

Thanks
0
Comment
Question by:Vishal Gupta
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
4 Comments
 

Accepted Solution

by:
Matthew Anderson earned 1000 total points
ID: 42253625
If you need a solution in pure javascript:
JSFiddle: http://jsfiddle.net/qY7gE/831/
function gText(e) {
    let t = (document.all) ? document.selection.createRange().text : document.getSelection();
    t = t.toString();
    if( t ) {
		if( t.length > 0 ) {
    		document.getElementById('arrowBox').style.display = "block";
   		}
   	}
}

document.onmouseup = gText;
if (!document.all) document.captureEvents(Event.MOUSEUP);

Open in new window

0
 
LVL 12

Expert Comment

by:Leonidas Dosas
ID: 42254378
Look that JQuery plugin: jquery-text-selection-special-event
Include the follow JQuery code in the head section via script  :
(function ($) {
	var
		// Will contain the last events' string and element, used for comparison
		selObj = { str : "", el : undefined },

		// Cache selection range methods
		docSel = document.selection,
		winSel = window.getSelection && window.getSelection(),

		// Events to be bound for our handler
		bindEvents = ['mouseup', 'keyup'],

		// Helper to grab currently selected text
		getSelected = function (evt) {

			// If the called event originates from a inputbox/form element (in FF), use that
			// to get the selected text (FF doesn't trigger getSelection() on input
			// elements natively)
			var el = $(evt.originalEvent.target).is(':input') ?
				evt.originalEvent.target :
				undefined;

			return el && +el.selectionEnd ? 
				$(el).val().substring(el.selectionStart, el.selectionEnd) :
				(winSel || docSel.createRange().text || "").toString();
		},

		// Helper to grab which common ancestor the text has
		getOrigin = function (input) {
			return docSel && docSel.createRange().parentElement()
				|| input
				|| winSel && winSel.getRangeAt(0).commonAncestorContainer
				|| document.body;
		},

		// Create our custom event namespace
		$me = $.event.special.textselect = {

			// Do stuff when it is bound
			setup: function () {
				var that = this;
	
				// Hook mouseup to fire our custom event
				$(bindEvents).each(function (i, o) {
					$(that).bind(o, $me.handler);
				});
			},
	
			// Do stuff when it is unbound
			teardown: function () {
				var that = this;
	
				$(bindEvents).each(function (i, o) {
					$(that).unbind(o, $me.handler);
				});
			},
	
			// Do stuff when the event is triggered
			handler: function (evt) {
	
				// Since we're not letting jQuery handle this object (due to our return
				// parameters, we "fix" the event object to be cross-browser compliant
				// manually
				evt = $.event.fix(evt);
	
				// Grab currently selected text and its common ancestor element
				var
					curText = getSelected(evt),
					conElement = $(evt.originalEvent.target).is(':input') ?
						getOrigin(evt.originalEvent.target) :
						getOrigin();

				if (conElement.nodeType === 3) conElement = conElement.parentNode;

				// If it differs from the old selected text, trigger event
				if (selObj.str !== curText || selObj.el !== conElement) {
	
					// Set currently selected text (and element) to the actual currently
					// selected text and element
					selObj = { str : curText, el : conElement };
	
					// Change event type to our custom event
					evt.type = 'textselect';
	
					// Fire the simulated event
					$.event.trigger(evt, [selObj.str, selObj.el]);
				}
			}
		};
})(jQuery);

Open in new window

And then
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script type="text/javascript" src="./your_plugin_directory_here.js" > </script>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->

<div id="myDiv" contenteditable="true">AAAAAAAA</div>

<div id="arrowBox" style="display:none;">Some buttons Here</div>

<!-- End your code here -->
  <script>
$(document).bind('textselect', function (evt, string, element) { if(element.id==='myDiv'){
  $('#arrowBox').css('display', 'block');} });
    
  </script>
</body>
</html>

Open in new window

0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42254664
here is a solution with jQuery

https://jsfiddle.net/6w5goer3/

html
<div id="myDiv" contenteditable="true">
  Name: <input>
  Password: <input type=password>
</div>

<div id="arrowBox" style="display:none;">
  <button>Cancel</button>
  <button>Save</button>
</div>

Open in new window


js
$("#myDiv input").on("keyup", function() {
  $("#arrowBox").show();
});

Open in new window


* you can also use focus / keydown / keypress / click instead of keyup
0
 

Author Closing Comment

by:Vishal Gupta
ID: 42256389
thank you,

for solving my problem..

It's working correctly.
0

Featured Post

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

715 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question