I have an observableArray for insert message. I want to display all messages using knockout. I want to use a custom scrollbar graphic - jScrollPane. (plugin LINK)
How can I fix my example for display custom scrollbar from jScrollPane?
Example: http://jsfiddle.net/aZpgY/3/
HTML:
<h2>Chat with knockout binding</h2>
<div id="chat-content" data-bind="foreach: messages">
<div data-bind="text: messageText"></div>
</div>
<br />
<form data-bind="submit: sendMessage">
message: <input data-bind="value: message" placeholder="Insert your massage" /><br />
<button type="submit">Add</button>
</form>
<h2>Example content - without knockout binding</h2>
<div id="example-content">
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
</div>
CSS:
#chat-content, #example-content{
width: 300px;
height: 100px;
overflow: auto;
}
JS:
function Message(data) {
this.messageText = ko.observable(data.messageText);
}
function ChatViewModel() {
// Data
var self = this;
self.messages = ko.observableArray([]);
self.message = ko.observable();
// Operations
self.sendMessage = function() {
self.messages.push(new Message({ messageText: this.message() }));
self.message("");
};
self.removeTask = function(task) { self.tasks.remove(task) };
}
ko.applyBindings(new ChatViewModel());
$(function(){
$('#chat-content').jScrollPane();
$('#example-content').jScrollPane();
});
Create a custom binding handler to initialize and update the jScrollPane instance:
ko.bindingHandlers.jScrollPane = {
init: function(element, valueAccessor) {
var o = valueAccessor() || {};
// initialize
$(element).jScrollPane(o.options);
var reinit = function() {
var scroll = $(element).data("jsp");
if (scroll) {
scroll.reinitialise();
}
};
// handle window resize (though not really necessary if your chat box has a set pixel width)
$(window).resize(reinit);
// add subscription to observable if passed in
if(o.subscribe) {
o.subscribe.subscribe(function() {
// use setTimeout so the DOM finishes updating before reinitialising
setTimeout(reinit, 0);
});
}
}
};
Call the new jScrollPane handler on the #chat-content div, passing in the messages observable so it knows when to refresh the scroll bar. Put the foreach binding handler in a child element to prevent it from interfering with the DOM changes that jScrollPane makes.
<div id="chat-content" data-bind="jScrollPane: { subscribe: messages }">
<div data-bind="foreach: messages">
<div data-bind="text: messageText"></div>
</div>
</div>
JSFiddle: http://jsfiddle.net/aZpgY/7/
jScrollPane binding handler adapted from here: http://jsfiddle.net/rniemeyer/NgNvf/
Related
Problem Statement: dragdrop function from selenium java class returns an exception org.openqa.selenium.JavascriptException: TypeError: $ is not a function
In few forums it was suggested to use js available in below location to perform html5 dragdrop in selenium java and followed same steps but resulted in above error.
Selenium 3.141
Chrome 76
drag_drop_function is defined in drag_drop_helper.js as below
js reference: https://gist.github.com/rcorreia/2362544#file-drag_and_drop_helper-js
(function($){
$.fn.simulateDragDrop = function(options) {
return this.each(function() {
new $.simulateDragDrop(this, options);
});
};
$.simulateDragDrop = function(elem, options) {
this.options = options;
this.simulateEvent(elem, options);
};
$.extend($.simulateDragDrop.prototype, {
simulateEvent: function(elem, options) {
/*Simulating drag start*/
var type = 'dragstart';
var event = this.createEvent(type);
this.dispatchEvent(elem, type, event);
/*Simulating drop*/
type = 'drop';
var dropEvent = this.createEvent(type, {});
dropEvent.dataTransfer = event.dataTransfer;
this.dispatchEvent($(options.dropTarget)[0], type, dropEvent);
/*Simulating drag end*/
type = 'dragend';
var dragEndEvent = this.createEvent(type, {});
dragEndEvent.dataTransfer = event.dataTransfer;
this.dispatchEvent(elem, type, dragEndEvent);
},
createEvent: function(type) {
var event = document.createEvent("CustomEvent");
event.initCustomEvent(type, true, true, null);
event.dataTransfer = {
data: {
},
setData: function(type, val){
this.data[type] = val;
},
getData: function(type){
return this.data[type];
}
};
return event;
},
dispatchEvent: function(elem, type, event) {
if(elem.dispatchEvent) {
elem.dispatchEvent(event);
}else if( elem.fireEvent ) {
elem.fireEvent("on"+type, event);
}
}
});
})(jQuery);
Below lines of code read js file and trigger html5 dragdrop function defined in js file
String js_filepath = "C:/test/drag_and_drop_helper.js";
String java_script = "";
String text;
BufferedReader input = new BufferedReader(new FileReader(js_filepath));
StringBuffer buffer = new StringBuffer();
while ((text = input.readLine()) != null)
buffer.append(text + " ");
java_script = buffer.toString();
WebElement source1 = driver.findElement(By.cssSelector("span.object-card-value[title=test]"));
WebElement dest1 = driver.findElement(By.cssSelector("div[data-field-name='references']"));
java_script = java_script + "$(arguments[0]).simulateDragDrop({dropTarget:arguments[1]});";
((JavascriptExecutor) driver).executeScript(java_script, source1, dest1);
Result:
Elements are identified properly and js file is read as well but fails to trigger dragdrop with an error TypeError: $ is not a function
Status 1:
#pcalkins Thank you. I tried as per your suggesstion but no drag drop action happens on both chrome and FF browsers.
Only difference is I'm trying to pass using css selector as I dont have id. todrag and todrop elements are getting highlighted properly. No exceptions are thrown, but drag drop action doesn't happen.
var toDrag =document.querySelectorAll(\"span.object-card-value[title='test']\"); var toDrop = document.querySelectorAll(\" div[data-field-name='references']\");";
((JavascriptExecutor)driver).executeScript(simulateFunction + "simulateDragDrop(toDrag, toDrop);"); //also tried with queryselector
Update2 markup as below
drag markup
<ul class="object-list drop-target"> changes to object-list drop-target active drag-over, drag-over triggers?
<li class="chooser add"><div class="autocomplete">
<div class="autocomplete-searchbox" tabindex="1">
<input placeholder="Drop here " class="autocomplete-input autocomplete-single-select form-control" size="30" style="width: 100%;" type="text">
<span class="autocomplete-reset fonticon fonticon-clear"></span>
</div>
<div class="autocomplete-suggests">
<div class="autocomplete-suggests-scroll scroller scroller-root" style="overflow: hidden;">
<div class="no-native-scrollbars scroller-content" style="right: -16px; bottom: -16px; padding-right: 16px; padding-bottom: 16px;">
<ul tabindex="1" class="scroller-shift">
</ul></div></div></div></div>
<button class="btn"><span class="fonticon fonticon-search"></span></button></li>
<li class="object-card has-image" data-field-name="item" data-type="Document" data-id="16C31E069B1C00009555C15DB7CC0B00" data-hasfiles="TRUE">
<span class="draggable-item" draggable="true">
<span class="thumbnail object-image">
<img draggable="false" oncontextmenu="return false" src="http://test.com" title="test">
</span>
<span data-field-name="display-value"><span class="object-card-value" oncontextmenu="return false" title="test" style="background: yellow; border: 2px solid red;">test</span></span>
</span>
<span class="actions">
<button class="btn">
<span class="fonticon fonticon-down-open" data-field-name="deliverables" title=""></span>
</button>
</span>
</li>
WebElement source1 = driver.findElement(By.cssSelector("span.object-card-value[title='test']"));
drop markup
<div id="card0">
<div class="card-content" data-id="16C31E069B1C00008B21C15D91F10B00" oncontextmenu="return false">
<div class="card-title">Context</div>
<div class="card-properties">
<div class="card-details ">
<div class="thumbnail type">
<span class="task"></span>
</div></div></div></div></div></div>
WebElement dest1 = driver.findElement(By.id("card0"));
As soon as user moves drag element, a drag-over event seem to be triggered, which changes object-list drop-target to object-list drop-target drag-over
I am having some trouble thinking new ways to optimize this block of code. Now it looks too repetitive and long. I can write functions separately from EventListener but it would only make more lines of code and make it even longer.
let modalIntro = document.getElementById('modal-intro');
let buttonIntro = document.getElementById('button-intro');
let close = document.getElementsByClassName('close')[0];
buttonIntro.addEventListener ('click', function(){
modalIntro.classList.remove("out");
modalIntro.classList.add("in");
});
close.addEventListener('click', function (){
modalIntro.classList.add("out");
});
let modalWork = document.getElementById('modal-work');
let buttonWork = document.getElementById('button-work');
let close1 = document.getElementsByClassName('close')[1];
buttonWork.addEventListener ('click', function(){
modalWork.classList.remove("out");
modalWork.classList.add("in");
});
close1.addEventListener('click', function (){
modalWork.classList.add("out");
});
let modalAbout = document.getElementById('modal-about');
let buttonAbout = document.getElementById('button-about');
let close2 = document.getElementsByClassName('close')[2];
buttonAbout.addEventListener ('click', function(){
modalAbout.classList.remove("out");
modalAbout.classList.add("in");
});
close2.addEventListener('click', function (){
modalAbout.classList.add("out");
});
let modalContact = document.getElementById('modal-contact');
let buttonContact = document.getElementById('button-contact');
let close3 = document.getElementsByClassName('close')[3];
buttonContact.addEventListener ('click', function(){
modalContact.classList.remove("out");
modalContact.classList.add("in");
});
close3.addEventListener('click', function (){
modalContact.classList.add("out");
});
Any help would be much appreciated.
Seeing as you have a common naming pattern, and assuming the close button is child of each modal, you could do something like this:
Note I added modal.classList.remove('in'); to the close button
Solution
function bindModals(modals) {
modals.forEach(name => {
let modal = document.getElementById(`modal-${name}`)
let button = document.getElementById(`button-${name}`)
let close = modal.querySelector('.close');
button.addEventListener ('click', function(){
modal.classList.remove('out');
modal.classList.add('in');
});
close.addEventListener('click', function (){
modal.classList.remove('in');
modal.classList.add('out');
});
});
}
bindModals(['intro', 'work', 'about', 'contact'])
.out {
display: none;
}
.in {
display: block;
border: 1px solid red;
height: 200px;
width: 400px;
}
<section>
<button id="button-intro">Intro</button>
<button id="button-work">Work</button>
<button id="button-about">About</button>
<button id="button-contact">Contact</button>
</section>
<section id="modal-intro" class="out">
<button class="close">Close</button>
<p>Intro Modal</p>
</section>
<section id="modal-work" class="out">
<button class="close">Close</button>
<p>Work Modal</p>
</section>
<section id="modal-about" class="out">
<button class="close">Close</button>
<p>About Modal</p>
</section>
<section id="modal-contact" class="out">
<button class="close">Close</button>
<p>Contact Modal</p>
</section>
You can use a function to get element Id to make it more shorter:
function getElem(el) {
return document.getElementById(el);
}
Now remove all below code:
let modalIntro = document.getElementById('modal-intro');
let buttonIntro = document.getElementById('button-intro');
let modalWork = document.getElementById('modal-work');
let buttonWork = document.getElementById('button-work');
let modalContact = document.getElementById('modal-contact');
let buttonContact = document.getElementById('button-contact');
– and replace variable with getElem('elem-id'), e.g given below
getElem('modal-intro').classList.remove("out");
getElem('modal-intro').classList.add("in");
Similarly you can make common function to get Element by class and add event listener.
Without having any HTML I am not sure if this is going to be perfectly accurate but I can try something.
I see each modal behaves in the same way... I would add an attribute to each button that indentifies which modal it activates, and a class so we can refer to all of them:
<input type="button" value="intro" class="modalButton" id="button-intro" data-activates="modal-intro">
<input type="button" value="work" class="modalButton" id="button-work" data-activates="modal-work">
<input type="button" value="about" class="modalButton" id="button-about" data-activates="modal-about">
<input type="button" value="contact" class="modalButton" id="button-contact" data-activates="modal-contact">
Now we can refer to each and action with this line of code:
document.getElementsByClassName("modalButton").forEach(function(btn) {
btn.addEventListener ('click', function() {
var modal = document.getElementById(btn.getAttribute("data-activates"));
modal.classList.remove("out");
modal.classList.add("in");
});
});
Assuming the buttons are direclty inside the modal like this:
<!-- Example of a modal with a close button -->
<div id="modal-intro" class="modal out">
<input type="button" class="close" value="close">
<!-- content -->
</div>
We can get to the modal by moving up in the DOM tree:
document.getElementsByClassName("close").forEach(function(closeBtn) {
closeBtn.addEventListener ('click', function(){
// In this case the modal is the button's parent
closeBtn.parentElement.classList().remove("in");
closeBtn.parentElement.classList().add("out");
// P.S I also suppose you want to remove the "in" class
});
});
Obiouvsly, if the button is deeper inside the modal, you just need to call the 'parentElement' property till you get to it.
Here's another approach that uses the fact that you have the same structure times three.
This would be much shorter if I had used jQuery, but I kept it vanilla since you don't seem to be using it:
document.querySelectorAll("nav a").forEach(a => a.addEventListener("click", function(e) {
e.preventDefault(); // don't navigate to href
// hide all modals, i.e. remove the one potentially still open
document.querySelectorAll("#modals > div").forEach(modal => modal.classList.remove("in"));
// finally, show modal
document.getElementById(this.dataset.modal).classList.add("in");
}));
document.querySelectorAll("#modals > div").forEach(modal =>
// for each modal, grab its close button
modal.querySelector(".close").addEventListener("click", function(e) {
e.preventDefault(); // don't navigate to href
modal.classList.remove("in"); // and hide the modal
})
);
#modals>div {
position: fixed;
width: 50%;
left: 25%;
box-sizing: border-box;
border: 1px solid black;
padding: 0.5em;
top: -300px;
transition: .5s
}
#modals .close {
float: right
}
.in {
top: 50px !important;
}
<nav>
<a data-modal="intro" href="">Intro</a>
<a data-modal="work" href="">Work</a>
<a data-modal="about" href="">About</a>
</nav>
<div id="modals">
<div id="intro">X
<p>Intro modal</p>
</div>
<div id="work">X
<p>Work modal</p>
</div>
<div id="about">X
<p>About modal</p>
</div>
</div>
By pointing the code to the modal via the menu link's data-modal, I no longer have to use any element-specific code at all, resulting in ideally reusable code.
Easiest would be to simply create a function:
function MakeModal(modalId, buttonId, closeId)
let modal = document.getElementById(modalId);
let button = document.getElementById(buttonId);
let close = document.getElementsById(closeId);
button.addEventListener ('click', function(){
modal.classList.remove("out");
modal.classList.add("in");
});
close.addEventListener('click', function (){
modal.classList.add("out");
});
}
Which you can then invoke:
MakeModal('modal-intro', 'button-into', 'close-intro');
MakeModal('modal-about', 'button-about', 'close-about');
MakeModal('modal-contact', 'button-contact', 'close-contact');
That's just programming basics: DRY.
Do note that you need to add ID's to your close-buttons instead of classes (or you can rewrite it to let close = modal.find('.close'); or something and in which case you can get rid of the third argument closeId). And if you adhere strictly to the naming convention used here you could even simplify the multiple MakeModal(...) calls:
['intro', 'about', 'contact'].forEach(function(e) {
MakeModal('modal-' + e, 'button-' + e, 'close-' + e);
});
Or, if you got rid of the third argument and used the .find(...) suggestion:
['intro', 'about', 'contact'].forEach(function(e) {
MakeModal('modal-' + e, 'button-' + e);
});
I'm no jQuery expert by any means but if I'm not mistaken
modal.classList.remove("out");
modal.classList.add("in");
can be written as:
modal.classList.switchClass("out", "in");
I am using Bootstrap v3.2.0 for laying out 3 graphs created using Angular-nvD3. I am trying to render the page for printing. I have some modified CSS in the #media print rule. Everything renders properly for printing in Chrome, but the charts do not resize for printing in IE 11. I have tried to trigger a window resize event in JavaScript, it executes but doesn't make any difference.
My div looks like this:
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3">
<div ng-controller="BusinessPieChartController">
<h4>Business Allotment</h4>
<nvd3 options="options" data="data"></nvd3>
</div>
<div ng-controller="LocationTypePieChartController">
<h4>Location Types</h4>
<nvd3 options="options" data="data"></nvd3>
</div>
</div>
<div class="col-md-9 col-sm-9 col-xs-9">
<h4>Growth Over Time</h4>
<div ng-controller="HistoryLineAreaGraphController">
<nvd3 options="options" data="data"></nvd3>
</div>
</div>
</div>
</div>
Here is the JavaScript code I tried to no prevail.
var printTriggered = false;
var beforePrint = function () {
if (printTriggered) {
return
}
printTriggered = true;
setTimeout(function () {
printTriggered = false;
}, 2000)
var event
if (typeof Event === 'function') {
event = new Event('resize')
} else {
event = document.createEvent('Event')
event.initEvent('resize', true, true)
}
window.dispatchEvent(event)
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function (mql) {
if (mql.matches) {
beforePrint();
}
});
}
window.onbeforeprint = beforePrint;
Here is how my graphs look from print preview in IE 11.
I shared this exact problem, although with just one graph. Ended up using duplicate elements for the graph.
First, one graph is rendered with width to match the paper size, and, once that's done, it's hidden, and another graph is shown instead:
<div class="graph-for-print"
ng-class="{rendered: vm.graphForPrintRendered}">
<nvd3 options="vm.graphOptions"
data="vm.graphData"></nvd3>
</div>
<div class="hidden-print"
ng-if="vm.graphForPrintRendered">
<nvd3 options="vm.graphOptions"
data="vm.graphData"></nvd3>
</div>
and the css
.graph-for-print {
max-width: 680px;
}
#media screen {
.graph-for-print.rendered {
overflow: hidden;
height: 0;
}
}
vm.graphForPrintRendered is true after a $timeout to ensure all digest cycles are done and the browser has had time to draw the chart.
Not pretty, but works.
I'm posting my html and directive code. I have two spans, which I have attached ng-click to. On ng-click I want to check the classes of their parents parent item (.parent-portlet), but what I have so far is not working correctly as all of the parent portlets get selected instead of only the current one.
<div class="parent-portlet {{portlet.class}} {{portlet.class2}}" ng-mouseenter="hoverIn($event)" ng-mouseleave="hoverOut($event)">
<div class="portlet-titlebar" ng-click="toggleCollapsed($event)">
<span class="remove" ng-click="removePortlet(portlet)">
Remove
</span>
<span class="add-back" ng-click="addPortlet(portlet)">
Add Back
</span>
</div>
</div>
this is what I have in my directive:
scope.removePortlet = function(portlet) {
var port = $('.remove').parent().parent();
port.addClass('removed');
port.addClass('edit-portlet');
};
scope.addPortlet = function(portlet) {
var port = $('.add-back').parent().parent();
if (portlet.hasClass('removed')) {
port.removeClass('removed');
port.removeClass('edit-portlet');
}
};
The problem with this code is that var portlet catches all of the portlets(parents) and I want to catch only the one related to the click action. How can I achieve that? I tried to pass this to my jquery select like so:
var portlet = $('.add-back', this).parent().parent();
but that didn't work. Any ideas how this can be achieved?
Thanks in advance.
Pass in the $event to the ng-click like this:
<span ng-click="removePortlet($event)"></span>
Then, just modify your code like this:
scope.removePortlet = function(ev) {
var port = $(ev.target).parent().parent();
port.addClass('removed');
port.addClass('edit-portlet');
};
scope.addPortlet = function(ev) {
var port = $(ev.target).parent().parent();
if ($(ev.target).hasClass('removed')) {
port.removeClass('removed');
port.removeClass('edit-portlet');
}
};
Grabbing the "event's target" will ensure that you are only addressing the item that was actually clicked. And note that angular uses $event to pass the event to a function.
I would also clean it up a bit combining the class modification lines and targeting the specific parent (in case you ever modify the DOM) using .closest():
scope.removePortlet = function(ev) {
var port = $(ev.target).closest('.parent-portlet');
port.addClass('removed, edit-portlet');
};
scope.addPortlet = function(ev) {
var port = $(ev.target).closest('.parent-portlet');
if (portlet.hasClass('removed')) {
port.removeClass('removed, edit-portlet');
}
};
You can inject the $element to your controller, then, use it as the context for the $ selector.
angular.module('app', []).controller('ctrl', function($scope, $element) {
$scope.addPortlet = function(portlet) {
console.log($('.add-back', $element));
};
});
<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>
<div ng-app="app" ng-controller="ctrl">
<div class="parent-portlet">
<div class="portlet-titlebar" ng-click="toggleCollapsed($event)">
<span class="remove" ng-click="removePortlet(portlet)">
Remove
</span>
<span class="add-back" ng-click="addPortlet(portlet)">
Add Back
</span>
</div>
</div>
</div>
For more info about it
Use ng-class instead. Here's an example of changing background colors with classes:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.portlet = {
classes: {
"parent-portlet": true,
"edit-portlet": false,
"removed": false
}
}
$scope.removePortlet = function(portlet) {
portlet.classes.removed = true;
portlet.classes["edit-portlet"] = true;
};
$scope.addPortlet = function(portlet) {
portlet.classes.removed = false;
portlet.classes["edit-portlet"] = false;
};
});
/* Put your css in here */
.parent-portlet {
background-color: #ccc;
padding: 20px;
}
.parent-portlet.removed {
background-color: #c00;
}
.parent-portlet button {
padding: 10px;
margin: 0 10px;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-class="portlet.classes">
<div class="portlet-titlebar">
<button class="remove" ng-click="removePortlet(portlet)">
Remove
</button>
<button class="add-back" ng-click="addPortlet(portlet)">
Add Back
</button>
</div>
</div>
</body>
</html>
Is there a way to hide() unmatched search elements using mark.js? After reading the documentation I initially thought that I could use the "noMatch" option to write a custom function to hide the parent div of unmatched text, but it's not working as hoped for.
For example, if I am using mark.js to search and highlight "Lorem" in the following:
<div class="panel-body context">
<h2>Lorem</h2>
<div>
<p>ipsum</p>
<p>lorem</p>
</div>
<h2>ipsum</h2>
<div>
<p>ipsum</p>
<p>lorem</p>
</div>
</div>
How can I get it to only return the matched elements like so?
<div class="panel-body context">
<h2><span="highlight">Lorem</span><h2>
<div>
<p><span="highlight">lorem</span></p>
</div>
<div>
<p><span="highlight">lorem</span></p>
</div>
</div>
Here's my current code block:
$(function() {
var mark = function() {
// Read the keyword
var keyword = $("input[name='search-keyword']").val();
// Determine selected options
var options = {
"element": "span",
"className": "highlight",
"separateWordSearch": false,
"noMatch": function(term) {
term.hide(); // WHERE I HOPED I COULD ADD HIDE LOGIC
}
}
// Remove previous marked elements and mark
// the new keyword inside the context
$(".panel-body context").unmark({
done: function() {
$(".panel-body context").mark(keyword, options);
}
});
};
$("input[name='search-keyword']").on("input", mark);
});
EDIT Here's my altered jsfiddle from the mark.js examples for a better example of what I'm attempting to do. Thanks for any assistance ahead of time!
$(function() {
var mark = function() {
// Read the keyword
var keyword = $("input[name='keyword']").val();
var keyword2 = $("input[name='keyword2']").val();
// Remove previous marked elements and mark
// the new keyword inside the context
$(".context").unmark({
done: function() {
$(".context").mark(keyword).mark(keyword2, {className: 'secondary'});
$("#binddata").text(keyword);
}
});
};
$("input[name^='keyword']").on("input", mark);
});
mark {
padding: 0;
background-color:yellow;
}
mark.secondary {
padding: 0;
background-color: orange;
}
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/superhero/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/mark.js/8.6.0/jquery.mark.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<input type="text" name="keyword"><input type="text" name="keyword2">
<span id="binddata">Bind Character</span>
<div class="context">
The fox went over the fence
<h2>Lorem<h2>
<div>
<p>ipsum</p>
<p>lorem</p>
</div>
<h2>ipsum</h2>
<div>
<p>ipsum</p>
<p>lorem</p>
</div>
</div>