I am trying to search for a word inside a pdf using a textbox inside the webpage.I embedded the pdf inside a IFRAME, but it is not working.This code is working with normal text.When i search for words, sometimes it opens the pdf or refreshes the page, instead of highlighting it.
<style>
span.highlight {
background: yellow
}
</style>
<input type="text" />
<div class="para">
<button onclick="getIframeText()">get iframe text</button>
<iframe id="myframe1" src="h.pdf" style="width:718px; height:700px;" frameborder="0"></iframe>
</div>
JAVASCRIPT FOR SEACRHING THE TEXT
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript'>
var $para = $('.para')
$("input").keyup(function() {
$para.find('span.highlight').contents().unwrap();
var mysearchword = this.value.trim();
if (mysearchword) {
var re = new RegExp('(' + mysearchword.trim().split(/\s+/).join('|') + ')', "gi");
$para.html(function(i, html) {
return html.replace(re, '<span class="highlight">$1</span>')
});
}
});
</script>
The code will not work for PDF.
Replacing the word found in HTML with highlight class, it's okay. But this is not possible for PDF. You need to convert PDF into HTML first.
Related
I want my users to open their desired sites from my website, for this manner I need to insert a variable in src of iframe which change by user input strings.
Indeed I need a type of code like bellow:
<html>
<body>
<script type="text/javascript">
var userInput_stringVariable= "this part is user desired input string" ;
var adress= "https://en.wikipedia.org/wiki/" + userInput_stringVariable ;
</script>
<iframe src=adress width="100%" height="100%" frameborder="0"></iframe>
</body>
</html>
This code doesn't work, while I need a code like this to work with!
A textfield where user can enter whatever they would like to search on wikipedia or whatever website you want, a submit button which will call a function after it is clicked. answer.value will give the value of textfield and it's concatenated with website initial url.
HTML
<input type="text" name="inputField" id="answer" placeholder="Enter what you wanna search">
<button type="button" name="button" onclick="mySubmit()">Submit</button>
<iframe id="search" src="" width="100%" height="100%" frameborder="0"></iframe>
Script
<script>
function mySubmit() {
let getInput = answer.value;
var address;
address = "https://en.wikipedia.org/wiki/" + getInput;
document.getElementById('search').src = address;
}
</script>
Here is a function that will probably do what you want:
<script type="text/javascript">
function selectPage() {
var userImput_stringVariable = prompt("desired imput string");
if (userImput_stringVariable != null) {
document.getElementById("getPage").innerHTML =
"<iframe width='100%' height='100%' src='https://en.wikipedia.org/wiki/" + userImput_stringVariable + "'></iframe>";
}
}
</script>
Just add
<body onload="selectPage()">
somewhere in the body so the function runs when the page does.
It'll open a prompt, the user then has to enter the address.
Also you'll need this in the body too:
<p id="getPage"></p>
It creates a paragraph with the contents of the iframe within the fuction.
I have an element with encoded html content as shown below.
<div class="hasTooltip">
<html>........... //more html encoded text
</div>
When I click this element, I want the content to be shown in a new window and it works fine.
$('.hasTooltip').click(function() {
var win = window.open("", "Title", "toolbar=no");
win.document.body.innerHTML = $(this).html();
});
But the problem is that the window shows the html text with decoded values but not the actual html content with all styles.
I tried the below code but no luck as it shows no content. Any tips?
win.document.body.innerHTML = $(this).html().text();
Following code should work.
function unEscape( str ){
str = str.replace(/"/g,'"').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>')
return str;
}
var h = document.getElementById("hasTooltip").innerHTML;
console.log( unEscape(h) )
<div id="hasTooltip">
<html></html>
</div>
Here is your solution
if you you are unable to run your code over here please check jsfiddle
https://jsfiddle.net/sq3Ljwnt/
$('.hasTooltip').click(function() {
var win = window.open("", "Title", "toolbar=no");
win.document.body.innerHTML = $("textarea").val();
});
textarea{
height:200px;
width:100%;
border:none !important;
background:none;
resize: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="hasTooltip">
<textarea>
<html>
<h1>
This is test
</h1>
<p>
More HTML ...
</p>
</html>
</textarea>
</div>
Is it possible to add a textbox into an iframe, and append it into the src of the iframe. So i have created an modal box displaying a button for the user to click "ADD BUTTON"
<div id="addFeature" class="openAdd">
<div>
X
<h2>Add...</h2>
<button class="text" type="button">Text</button>
</div>
</div>
As the user clicks on the button, I need the modal box to close and a text box added. The following iframe is within main.html. As you can see the iframe displays the other html page.
<div>
<iframe class="newIframe" id="newIframe" src="webpage.html" onload="iFrameOn();">
Your browser does not support Iframes
</iframe>
</div>
Though I need the textbox to be added in webpage.html which is
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="index.js"></script>
</head>
<body onload="iFrameOn();">
<div id="design">
</div>
</body>
</html>
JS:
addTextBox() {
var text = "'<div><input type='textbox'/></div>'"
var textbox = document.createElement('div');
textbox.innerHTML = text;
var addText = document.getElementById('div').src = "webpage.html";
addText.appendChild(textbox);
}
Is it possible to do what I'm asking?
I'm afraid explaining this in the way you're trying to do this now, would be an endless swamp. Here's some guidelines, how you can achieve this quite easy.
Probably you need to remove the onload from iframe tag first. Then put these lines to your main page:
var textForIframe; // Take care that this variable is declared in the global scope
function addText () {
document.getElementById('newIframe').src = 'webpage.html';
textForIframe = '<div><input type="text" /></div>'; // or whatever text you need
return;
}
When ever your dialog is ready, call addText().
Then in webpage.html, remove the onload from body tag, and add the function below to somewhere after <script src="index.js"></script> tag.
window.onload = function () {
var addTextElement = document.getElementById('design'), // or whatever element you want to use in iframe
textToAdd = parent.textForIframe;
// depending on what iFrameOn() does, place it here...
addTextElement.innerHTML = textToAdd;
iFrameOn(); // ... or it can be placed here as well
return;
};
These snippets add a new input type="text" to #design within iframe.
I downloaded markdown from http://code.google.com/p/wmd/ (well, in fact I cloned the hg repository), in order to have a client-side highlighter for static text, i.e. I don't need the editor.
However, I tried to instantiate the converter, essentially like in the demo:
<script type="text/javascript">
(function () {
var conv = Markdown.getSanitizingConverter();
var ed = new Markdown.Editor(conv);
ed.run();
})();
</script>
However, if I run this, the JS error console tells me:
Error: text is undefined
Source File: http://bitmask.de/markdown_test/Markdown.Converter.js
Line: 149
Which I traced to the call of ed.run().
I put the whole minimal demo on http://bitmask.de/markdown_test/js.html
I didn't modify the js files or anything (basically because I have very very limited js knowledge), just did what the demo does. What's wrong here?
You can't use <div> element for the input, it has to be something editable (e.g. <textarea> or <input type="text">):
<div class="wmd-panel">
<div id="wmd-button-bar"></div>
<textarea id="wmd-input" class="wmd-input">`hello` *cruel* world</textarea>
</div>
Be also carefull about spaces in the HTML source. Your second sample has a line starting with more than four spaces, which means "code" in Markdown:
<!-- this will be formated as <pre> element -->
<textarea class="wmd-input" id="wmd-input">
`hello` *cruel* world
</textarea>
Most likely, to get this to work, you have to assign the wmd-panel css class to the HTML element that you want the WMD Markdown to act on.
The Google Code demo looks like this:
HTML:
<html>
<head>
<title>PageDown Demo Page</title>
<link rel="stylesheet" type="text/css" href="demo.css" />
<script type="text/javascript" src="../../Markdown.Converter.js"></script>
<script type="text/javascript" src="../../Markdown.Sanitizer.js"></script>
<script type="text/javascript" src="../../Markdown.Editor.js"></script>
</head>
<body>
<div class="wmd-panel">
<div id="wmd-button-bar"></div>
<textarea class="wmd-input" id="wmd-input"> This is the *first* editor.
------------------------------
Just plain **Markdown**, except that the input is sanitized:
<marquee>I'm the ghost from the past!</marquee> </textarea>
</div>
<div id="wmd-preview" class="wmd-panel wmd-preview"></div>
<br /> <br />
<div class="wmd-panel">
<div id="wmd-button-bar-second"></div>
<textarea class="wmd-input" id="wmd-input-second"> This is the *second* editor.
------------------------------
It has a plugin hook registered that surrounds all words starting with the letter A with asterisks before doing the Markdown conversion. Another one gives bare links a nicer link text. User input isn't sanitized here:
<marquee>I'm the ghost from the past!</marquee>
http://google.com
http://stackoverflow.com
It also includes a help button. </textarea>
</div>
<div id="wmd-preview-second" class="wmd-panel wmd-preview"></div>
Javascript:
<script type="text/javascript">
(function () {
var converter1 = Markdown.getSanitizingConverter();
var editor1 = new Markdown.Editor(converter1);
editor1.run();
var converter2 = new Markdown.Converter();
converter2.hooks.chain("preConversion", function (text) {
return text.replace(/\b(a\w*)/gi, "*$1*");
});
converter2.hooks.chain("plainLinkText", function (url) {
return "This is a link to " + url.replace(/^https?:\/\//, "");
});
var help = function () { alert("Do you need help?"); }
var editor2 = new Markdown.Editor(converter2, "-second", { handler: help });
editor2.run();
})();
</script>
Notice the use of class="wmd-panel" to mark those areas that the WMD Markdown is to act on?
I have an html page. Here, I am using tabview of Yahoo API. That is :
<div id="demo" class="yui-navset">
<ul class="yui-nav">
<li class="selected"><em>Top Stories</em></li>
<li><em>Finance</em></li>
<li><em>Sports</em></li>
</ul>
<div class="yui-content">
<div><p>Top Stories</p></div>
<div><p>Finance</p></div>
<div><p>Sports</p></div>
</div>
</div>
In the onClickEvent the functions used, fetch data from Google NEWS>
function TopStories(){
location.href="http://www.google.com/news/search?aq=f&pz=1&cf=all&ned=in&hl=en&q=TopStories";
}
function FinanceNews(){
location.href="http://www.google.com/news/search?aq=f&pz=1&cf=all&ned=in&hl=en&q=Finance";
}
function SportsNews(){
location.href="http://www.google.com/news/search?aq=f&pz=1&cf=all&ned=in&hl=en&q=Sports";
}
But the Output is navigation to NEWS page. But, I want to display them as Tab Content.
What should I do ?
You can use iframe for this purpose .. see below example ,,
Using Jquery tab, its always create a div where your result display. You have only way to open external link on your page using .
<li><a href=ReturnIfram()><span>Google</span></a></li>
href get a string which contain ifram like
public string ReturnIfram()
{
return "<iframe src="http://google.fr"></iframe>"
}
try above in javascript see below example
<html>
<head>
<script language="JavaScript" type="text/javascript">
function makeFrame() {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", "http://developerfusion.com/");
ifrm.style.width = 640+"px";
ifrm.style.height = 480+"px";
document.body.appendChild(ifrm);
}
</script>
</head>
<body>
<p>GO! </p>
</body>
</html>