I have a div in which I have some contend in that .I need to search text from that div and highlight the word (using css class).using next it search next word occurrence and previous occurrence.
I am able to make in jquery as example in fiddle
http://jsfiddle.net/3MVNj/5/
can you please suggest how I will achieve this in angular js ?
plunker
http://plnkr.co/edit/V805fEjJAUbAZIuafJcW?p=preview
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap#0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<style>
.highlightedText {
background: yellow;
}
</style>
<body>
<div ng-controller="contr">
<input type="text" ng-model="searchtext" />
<button ng-click="searchFirst()">FirstText</button>
<button ng-click="nextSearch()">NextSearch</button>
<button ng-click="preSearch()">PreviousSearch</button>
<div id="contend">hello I need to search text from the contend
.On click of search it search the first word.
</div>
</div>
<script>
var app=angular.module('app',[]);
app.controller("contr",function($scope){
$scope.searchFirst=function(){
alert('search First text')
}
$scope.nextSearch=function(){
alert('nextSearch')
}
$scope.preSearch=function(){
alert('preSearch')
}
});
</script>
</body>
</html>
is there any way to search filter ?
you can use your old search algorithm, as an example: http://plnkr.co/edit/As9iyCVtMMNH7lyprJA9?p=preview
what is added is
<button ng-click="searchFirst(searchtext)">FirstText</button>
example search, forward only (prev implementation not AngularJS related)(see link for running example):
Try searching "sear"... have tested on that word only... =)
app.controller("contr",function($scope){
var searcher = new Searcher();
var div = angular.element(document.getElementById('content'));
$scope.searchFirst=function(str){
searcher.setOffset(0);
searcher.setContent(div.text());
div.html(searcher.search(str));
}
$scope.nextSearch=function(){
div.html(searcher.search());
}
$scope.preSearch=function(){
// you implement
}
});
Related
I am trying to write a short code to capture the signature via a tablet screen on a webpage. However, I can't get the area up that captures that signature.
The code I am using, which I have borrowed from other places that do work is:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Simon's Timesheet Signature Capture Test Page</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css" rel="stylesheet">
<link href="/usr/share/javascript/jquery/jquery.signature.css" rel="stylesheet">
<style>
body > iframe { display: none; }
.kbw-signature { width: 400px; height: 200px; }
</style>
<!--[if IE]>
<script src="js/excanvas.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="/usr/share/javascript/jquery/jquery.signature.js"></script>
<script>
$(function() {
$('#sig').signature();
$('#clear').click(function() {
$('#sig').signature('clear');
});
$('#json').click(function() {
alert($('#sig').signature('toJSON'));
});
$('#svg').click(function() {
alert($('#sig').signature('toSVG'));
});
});
</script>
</head>
<body>
<h1>jQuery UI Signature Basics v18.5.2018</h1>
<p>This page demonstrates the very basics of the
jQuery UI Signature plugin.
It contains the minimum requirements for using the plugin and
can be used as the basis for your own experimentation.</p>
<p>For more detail see the documentation reference page.</p>
<p>Default signature:</p>
<div id="sig"></div>
<p style="clear: both;"><button id="clear">Clear</button>
<button id="json">To JSON</button> <button id="svg">To SVG</button></p>
</body>
</html>
I suspect it has something to do with the links to jquery, unless somebody can see something else glaringly obvious. (I am quite new to this)
Is anyone able to put me in the right direction?
Thanks.
Try this ...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Simon's Timesheet Signature Capture Test Page</title>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css"
rel="stylesheet">
<link href="../js/jquery.signature.css" rel="stylesheet">
<style>
body > iframe {
display: none;
}
.kbw-signature {
width: 400px;
height: 200px;
}
</style>
<!--[if IE]>
<script src="../js/excanvas.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="../js/jquery.signature.js"></script>
<script src="../js/jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<h1>jQuery UI Signature Basics v18.5.2018</h1>
<p>This page demonstrates the very basics of the
jQuery UI Signature plugin.
It contains the minimum requirements for using the plugin and
can be used as the basis for your own experimentation.</p>
<p>For more detail see the documentation reference page.</p>
<p>Default signature:</p>
<div id="sig"></div>
<p style="clear: both;">
<button id="clear">Clear</button>
<button id="json">To JSON</button>
<button id="svg">To SVG</button>
</p>
<script>
$(document).ready(function () {
$('#sig').signature();
$('#clear').click(function () {
$('#sig').signature('clear');
});
$('#json').click(function () {
alert($('#sig').signature('toJSON'));
});
$('#svg').click(function () {
alert($('#sig').signature('toSVG'));
});
});
</script>
</body>
</html>
There's a couple of things. I've changed the googleapi call to https instead of http. This helps with browsers that are tetchy with mixed content.
The code for the signature is now also at the bottom, so this should make sure the #sig div is there before the code that attaches itself to it is. This is also helped by the document ready function.
Ignore my ../js/ for the signatures. That's just where I put it. See my comment above about viewing page source to see if the file is actually available.
I wanted to modify something in my code and don't really know how to make this work... my code is kinda huge so I am going to explain what I want with an exemple :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/application.css">
</head>
<body>
<label>Enter value : </label><input type="text" maxlength="512" id="reg_expr"/>
<div id="button">OK</div>
<div id="nfa"></div>
<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>
</body>
</html>
So this is my HTML code, so what I want to do is NOT execute these 3 scripts until the user enters a value in the text input and clicks on OK. That value will be used in the js files, so i have to get the value after I click OK.
Can someone explain how this has to work ?
EDIT : problem was with jQuery that was not executing on Electron, solution : http://ourcodeworld.com/articles/read/202/how-to-include-and-use-jquery-in-electron-framework
For starters I would suggest changing; <div id="button">OK</div> to <button id="button">OK</button>.
I would then suggest to put each of those scripts into functions instead, then you can use the 'onClick' event from the button attribute as follows;
<button id="button" onClick="s1Func();s2Func();s3Func();">OK</button>
A better way would be to have one function call 'init' or something appropriate that then calls the 3 scripts/functions and have your buttons onClick even call that one initialization function.
JSFiddle Example:
https://jsfiddle.net/JokerDan/h7htk9Lp/
I would recommend you to load the scripts dynamically after you click on the button. This can be done via jQuery: https://api.jquery.com/jquery.getscript/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/application.css">
<title>NFA2DFA</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<label>Enter value : </label><input type="text" maxlength="512" id="reg_expr"/>
<div id="button" onclick="loadScripts();">OK</div>
<div id="nfa"></div>
<script>
function loadScripts() {
// Is the input empty?
var value = $("#reg_expr").val();
if (value.length != 0) {
// Loads and executes the scripts
console.log(value); // Displays the value of the input field
$.getScript("script1.js");
$.getScript("script2.js");
$.getScript("script3.js");
}
}
</script>
</body>
</html>
You can use a button tag instead of input tag. I suggest you to use onClick event like this:
<button type="button" onclick="yourFunction()">Click me</button>
When the users click the button yourFunction() is call.
The result is this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/application.css">
<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>
</head>
<body>
<label>Enter value : </label><input type="text" maxlength="512" id="reg_expr"/>
<button type="button" onclick="yourFunction()">Click me</button>
</body>
</html>
I've already looked over several posts on stack overflow asking virtually the exact same question yet none of what I found on those questions has helped. I'm very new to JQuery and Bootstrap so maybe I'm just missing some really simple thing.
I want to be able to to change the title of the tooltip on different elements after the first initialization(ideally multiple times after initialization.) A simplified version of what I'm dealing with:
<canvas id="bag0" data-toggle="tooltip" title="test">
</canvas>
...
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
$(document).ready(function(){
$('#bag0').data('tooltip',false)
.tooltip({ title: 'new text'});
$('[data-toggle="tooltip"]').tooltip();
});
This method to change the title was given from posting: How to overwrite twitter bootstrap tooltip?
The tooltip always reads "test." I've tinkered with a few others things to no avail. I suspect I'm overlooking something obvious.
$(element).attr('title', 'NEW_TITLE').tooltip('fixTitle').tooltip('show');
Above code might help you.
$.tooltip(string) calls any function within the Tooltip class. And if you look at Tooltip.fixTitle, it fetches the data-original-title attribute and replaces the title value with it.
You can use the element id or class to make it more specific.
Help :)
Try this
$(element).tooltip().attr('data-original-title', "new title");
Source: github bootstrap issue
Bootstrap 4
$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show')
$('#topic_1').tooltip({title: 'Hello'}).tooltip('show');
setTimeout( function() {
$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show');
}, 5000);
#topic_1 {
border: 1px solid red;
margin: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<div id="topic_1">Topic 1</div>
Change Bootstrap 4 Tooltip title
$(document).ready(function() {
// initilizing Tooltip
$('[data-toggle="tooltip"]').tooltip();
// Get the Tooltip
let btn_tooltip = $('#my-btn');
// Change Tooltip Text on mouse enter
btn_tooltip.mouseenter(function () {
btn_tooltip.attr('title', 'Default Tooltip').tooltip('dispose');
btn_tooltip.tooltip('show');
});
// Update Tooltip Text on click
btn_tooltip.click(function () {
btn_tooltip.attr('title', 'Modified Tooltip').tooltip('dispose');
btn_tooltip.tooltip('show');
});
});
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<p>Click the button:</p>
<button id="my-btn" type="button" class="btn btn-primary" data-toggle="tooltip" title="Default tooltip">Click Me</button>
</div>
</body>
</html>
This might help
$('[data-toggle="tooltip"]').attr("title","NEW TEXT");
If you want to for a particular element, say a <div>
$('div[data-toggle="tooltip"]').attr("title","NEW TEXT");
Try following,
$(document).ready(function(){
$('#bag0').attr('title', 'new text')
.tooltip('destroy') // if you are using BS4 use .tooltip('dispose')
.tooltip({ title: 'new text'});
$('[data-toggle="tooltip"]').tooltip('show');
});
<canvas id="bag0" data-toggle="tooltip" title="test">
</canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
I have a solution for similiar case. I change the title in tooltip dynamicaly with ajax.
first just enable the tooltips:
$('[data-toggle="tooltip"]').tooltip()
Then change the title attribute, then re init the tooltip
$("#foo").attr('title','TheNewTitle');
$('[data-toggle="tooltip"]').tooltip('dispose');
$('[data-toggle="tooltip"]').tooltip()
I may be a bit too late but my solution to this was to change the data-original-title
$('.sample').attr('data-original-title': 'new title');
This changes the bootstrap tool tip title automatically.
I have created a VERY simple program on a VERY simple html file. I wish to simply find out how to link javascript to html and css. Here follows my example code:
(index.html)
<head>
<title>JavaScript</title>
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT"/>
</div>
<button class="show_btn">Show</button>
<button class="hide_btn">Hide</button>
<script src="script.js"></script>
</body>
JS:
$(document).ready(function(){
$(".hide_btn").click(function(){
$("p").slideUp();
});
$(".show_btn").click(function(){
$("p").slideDown();
});
});
CSS:
.picture { display: none; }
Now with this code, I am attempting to use two buttons to show and hide a picture of a fish...I can't seem to get it to work however, and I believe it has something to do with how I am linking my files. Please Help!
Based off of your comment in your question it would appear that you are using jQuery but you do not have jQuery as part of your source code.
You will need to include the jQuery source above script.js.
Here is an example of how it should look like using Google CDN for the jQuery library:
<head>
<title>JavaScript</title>
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT"/>
</div>
<button class="show_btn">Show</button>
<button class="hide_btn">Hide</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</body>
try this in javascript
<html>
<head>
</head>
<body>
<div class="picture" id="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT" />
</div>
<button class="show_btn" onclick="show();">Show</button>
<button class="hide_btn" onclick="hide();">Hide</button>
<script type="text/javascript" >
function show(){
var imgdiv = document.getElementById("picture");
imgdiv.style.display="block";
}
function hide(){
var imgdiv = document.getElementById("picture");
imgdiv.style.display="none";
}
</script>
</body>
</html>
I would definitely use jQuery for something like this. Here's a Plunker that shows how you can accomplish this.
http://embed.plnkr.co/DwTwNuF162rfgcQOdT7u/preview
<html>
<head>
<script data-require="jquery#*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="picture" id="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT" />
</div>
<button class="show_btn" onclick="show()">Show</button>
<button class="hide_btn" onclick="hide()">Hide</button>
</body>
<script>
function show() {
$('#picture').show();
}
function hide() {
$('#picture').hide();
}
</script>
</html>
If you are using jquery you also need to link the jquery source above your .js link,
here is the google cdn (so you dont have to download it):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
First things first:
Include this in your <head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
If you're on Chrome try using the developer tools; right click on the page then inspect element. On the developer tools pane, select the CONSOLE tab which logs all your errors in your javascript
And try this in your script:
$(document).ready(function() {
$(".show_btn").click(function() {
$(".picture").css('display', 'block');
});
$(".hide_btn").click(function() {
$(".picture").css('display', 'none');
});
});
Also I've noticed that you have div.picture display set to "none".
All that you need to do is the following
<script type="text/javascript"></script>
You can write javascript inside the script tags. (if you want to add javascript in HTML
the following is to link it to another file.
<script src="path to other file" > </script>
1, I downloaded the all these three files(JS and CSS) in my local system and tried it is not working as it is directly referring from URLS.
2, Even If i use URL src and href it is not working with the IE.IE also not saying any error.
Please help me to know what am doing wrong.
PART 1 :
<link rel="stylesheet" type="text/css" href="jquery/css/jquery-ui-1.10.2.custom.css" />
<script src="jquery/js/jquery-1.9.0.js"/></script>
<script src="jquery/js/jquery-ui-1.10.0.custom.min.js"></script>
PART 2 :
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
HTML CODE :
![<script>
$(function () {
$(document).tooltip({
content: function () {
return $(this).prop('title');
}
});
});
</script>
<style>
.tooltip
{
background-color:#F8D2DA;
}
.tooltipqty
{
text-align:right;
}
</style>
</head>
<body>
<p><label for="age">Your age:</label><input id="age"
title="<table class='tooltip'><tr><td class='tooltipqty'>20.00</td><td>31-01-2013</td></tr>
<tr><td class='tooltipqty'>0.02</td><td>01-01-2013</td></tr></table>" />
</p>
</body>][1]
Replace $(this).prop('title') with $(this).attr('title').
jsfiddle
Didn't see it was IE related. Didn't know either that jsfiddle had problems in IE 8 ...