Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Low
  • Security: Public
  • Views: 53
  • Last Modified:

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
0
Vishal Gupta
Asked:
Vishal Gupta
1 Solution
 
Matthew AndersonCommented:
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
 
Leonidas DosasCommented:
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
 
HainKurtSr. System AnalystCommented:
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
 
Vishal GuptaAuthor Commented:
thank you,

for solving my problem..

It's working correctly.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now