Using Typeahead with iFrame - javascript

I am trying to implement autocomplete using Twitter typeahead library for a iFrame so that When I start typing in iframe the suggestions should start showing up but it isnt.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
</head>
<body>
<iframe id="editorArea-frame" style="width:100%; height:100%;" frameborder="0"></iframe>
</body>
</html>
<script type="text/javascript" src="iframe.js"></script>
Javascript code
var editorFrame = $('#editorArea-frame')[0];
var html = '';
html += '<style type="text/css">pre { background-color: #eeeeee; }</style>';
html += '<style type="text/css">html,body { cursor: text; } #editorDiv { display: inline-block; height: 100%; width: 100%; overflow-y:scroll; outline: none;}</style>';
html += '<body></div><div id="editorDiv" contentEditable="true"></div></body>';
editorFrame.contentDocument.open();
editorFrame.contentDocument.write(html);
editorFrame.contentDocument.close();
When I execute this piece of javascript code the iframe becomes blank and its body becomes empty.Can anyone point me as to what am i doing wrong?
$('#editorArea-frame').typeahead({
source: function(typeahead, query) {
return ['alpha', 'beta', 'bravo', 'delta', 'epsilon', 'gamma', 'zulu'];
}
});

You must apply typeahead on an input field.
I would also advise avoiding iframe if you can. This may save you some brain cells.

Related

Iframe runner with inputable URL

*Note I am using google app scripts
I am attempting to code a simple program as proof of concept, the concept being a Iframe that responds to the input of a html text box. So far I have looked into the triggers for the form element (I decided to use onsubmit) and researched the changing of an Iframe src. It starts out working, when I load it up it looks like this:
After that though, I type the url in the text box and click submit. It reloads, than displays a completely blank screen. Here is my code:
code.gs
function doGet() {
return HtmlService.createTemplateFromFile('Index')
.evaluate();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
Index.HTML
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include ('Css'); ?>
</head>
<body>
<form>
<input type="text" id="uri" name="uri"><br><br>
<input type="button" value="Submit" onclick="frameS">
<form>
<script>
function frameS() {
var urv = document.getElementById('uri');
var ura = urv.value;
url1 = trim(ura);
}
function trim(str){
return str.replace (/^\s+|\s+$/g, '');
}
</script>
<iframe allowfullscreen="true" width="600" height="400" id="abc" src="https://www.google.com/webhp?igu=1">sorry, couldn't load</iframe>
<?!= include ('javascript'); ?>
</body>
</html>
javascript.html
<script>
Logger.log('hit')
</script>
<script>
window.addEventListener('load', function() {
console.log('Page is loaded');
});
</script>
Css.html *please note that the style sheet is not currently doing anything, I'm just including it for future development
<style>
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
fieldset {
border: 1px solid white;
color: white;
text-align: center;
width: 200px;
}
legend {
padding: 0 10px;
}
</style>
Thanks for your time and would appreciate any feedback on my code, related to the question or not.

Google Apps Script CardService.setContent as HTML

I am using CardService in my Google Scripts Adds-On. I am trying to setContent as HTML for that I am reading it from Index.html. But while rendering it's printing CSS and Javascript as text rather then using it in Html content.
function buildPage() {
var html = HtmlService.createHtmlOutputFromFile('Index').getContent();
var card = CardService.newCardBuilder();
card.setHeader(CardService.newCardHeader().setTitle('How do you feel ...'));
var section = CardService.newCardSection()
.setHeader("<h4>What do you want? </h4>");
section.addWidget(CardService.newKeyValue()
.setTopLabel('choose one')
.setContent(html)
);
This is my Index.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
#things {
position: absolute;
top: 50%;
left: 50%;
color: green;
margin-right: -50%;
text-align: center;
}
</style>
</head>
<body>
<p>List of things:</p>
<ul id="things">
<li>Loading...</li>
</ul>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
google.script.run.withSuccessHandler(showThings)
.getLotsOfThings();
});
function showThings(things) {
var list = $('#things');
list.empty();
for (var i = 0; i < things.length; i++) {
list.append('<li>' + things[i] + '</li>');
}
}
</script>
</body>
</html>
GMail Add-Ons only support very basic html style.
See https://developers.google.com/gmail/add-ons/concepts/widgets#text_formatting
setContent() takes text and supports basic html formatting. I think it'll not support full html tags like styles, script etc
Reference
https://developers.google.com/apps-script/reference/card-service/key-value#setcontenttext

Using JFiddle to create web page

I'm trying to understand how to convert the following JFiddle example into a single html web page: http://jsfiddle.net/zqa511e9/
What am doing wrong? Both the style and javascript code are not being reflected in the form. Any help will be appreciated.
<!DOCTYPE html>
<html>
<head>
<title>Expandable Text Area</title>
<style>
textarea {
width: 200px;
height:15px;
line-height:15px;
min-width: 200px;
max-width: 300px;
transition: width 0.25s;
resize:none;
overflow:hidden;
}
</style>
<script>
$('textarea').on('keydown', function(e){
if(e.which == 13) {e.preventDefault();}
}).on('input', function(){
$(this).height(1);
var totalHeight = $(this).prop('scrollHeight') -
parseInt($(this).css('padding-top')) - parseInt($(this).css('padding-bottom'));
$(this).height(totalHeight);
});
</script>
</head>
<body>
<textarea placeholder="Autosize" data-autosize-input='{ "space": 40 }'>
</textarea>
</body>
</html>
Updated Code.
You Need to do two things.
1. SImport Jquery Library.
2. Write on load in javascript block.
Try This
<title>Expandable Text Area</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<style>
textarea {
width: 200px;
height:15px;
line-height:15px;
min-width: 200px;
max-width: 300px;
transition: width 0.25s;
resize:none;
overflow:hidden;
}
</style>
<script>
$(document).ready(function() {
$('textarea').on('keydown', function(e){
if(e.which == 13) {e.preventDefault();}
}).on('input', function(){
$(this).height(1);
var totalHeight = $(this).prop('scrollHeight') -
parseInt($(this).css('padding-top')) - parseInt($(this).css('padding-bottom'));
$(this).height(totalHeight);
});
});
</script>
</head>
<body>
<textarea placeholder="Autosize" data-autosize-input='{ "space": 40 }'>
</textarea>
</body>
</html>
For one you are using jQuery, but there is no link to jQuery in your html. Jfiddle has it automatically applied I think.
Grab a jQuery CDN and place it in the head tag like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
You need external resources: jquery and jquery.autosize.input.js
In your html put this code between the head tag
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/3.0.20/autosize.min.js"></script>
</head>

IE not applying base to background image definitions in css

IE (tested 7-10) is not applying the base (an absolute URL) to background images within a style tag, resulting in 404. This only happens when the code is injected using innerHTML (a requirement of the larger application this belongs to). It applies the base to all other elements as seen in the example.
Any suggestions?
Edit 2014/01/13 This is fixed if I remove the style tags from the HTML string and manually append them to the header. Would like to know if this is the only answer. Based upon this solution: How to create a <style> tag with Javascript
<!DOCTYPE html>
<html>
<head>
<title>base test</title>
<base href="http://absoluteurl.com/">
</head>
<body>
<div id="container"></div>
</body>
<script>
var html = "First Node<br>Second Node.<br><style>#bkgdiv {background-image: url(media/ex_amp.jpg); border: 1px solid #f00; width: 200px; height: 200px;}</style><div id=\"bkgdiv\">DIV w/ Background</div><br><img src=\"media/ex_amp.jpg\">";
document.getElementById('container').innerHTML = html;
</script>
</html>
Have you tried the jQuery appendTo method?
Inline style elements have to be removed from the HTML string, added to a style element object, and then appended to the head.
<!DOCTYPE html>
<html>
<head>
<title>base test</title>
<base href="http://absoluteurl.com/">
</head>
<body>
<div id="container"></div>
</body>
<script>
var html = "First Node<br>Second Node.<br><style>#bkgdiv {background-image: url(media/ex_amp.jpg); border: 1px solid #f00; width: 200px; height: 200px;}</style><div id=\"bkgdiv\">DIV w/ Background</div><br><img src=\"media/ex_amp.jpg\">";
var head = document.getElementsByName('head')[0];
content.html = content.html.replace(/<style(.|\n)*?>(.|\n)*?<\/style>/ig, function(match) {
var css = match.replace(/<\/?style(.|\n)*?>/ig, "");
style = document.createElement('style');
style.type = 'text/css';
if(style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
return "";
});
document.getElementById('container').innerHTML = html;
</script>
</html>

WordPress plugin tag not parsing in <script> block

I'm using the following code in one of my WordPress plugin files:
else if($filetype == 'swf'){
print
<<<EOT
<script type="text/javascript" language="javascript">
jQuery(document).ready(function(){
var embed = '<div>[kml_flashembed movie="$img" /]</div>';
jQuery("#header").prepend(jQuery(embed));
});
</script>
<style type="text/css">
#$headerID {
background: none;
}
.flashmovie {
position: absolute;
}
</style>
EOT;}
But instead of parsing the [kml_flashembed] block, it gets spit out as it is. I manually put it in my header.php file and there it rendered fine, so the problem is in the way the JavaScript is injecting it into the HTML.
Can someone shed some light on what I should change to get the tag to parse instead of getting rendered literally?
(The tag is for the WordPress Kimili Flashembed plugin.)
You can't expect PHP to replace the [kml_flashembed movie="$img" /] if you place it inside of a heredoc block
else if($filetype == 'swf'){
print <<<EOT
<script type="text/javascript" language="javascript">
jQuery(document).ready(function(){
var embed = '<div>
EOT;
[kml_flashembed movie="$img" /]
print <<<EOT2
</div>';
jQuery("#header").prepend(jQuery(embed));
});
</script>
<style type="text/css">
#$headerID {
background: none;
}
.flashmovie {
position: absolute;
}
</style>
EOT2;}
Try using the do_shortcode function to expand the shortcode.

Categories