asked on

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

<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

ASKER CERTIFIED SOLUTION

Matthew Anderson

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Leonidas Dosas

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

HainKurt

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

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

Open in new window

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

Vishal Gupta

ASKER

thank you,

for solving my problem..

It's working correctly.