We Keep Coding

How to show and close form on click of a div?

When a div is clicked I want to show a form, as done on this page. This is what I have tried (fiddle):
$(document).on("click","#tawkchat-minified-container",function() {
var htmldynamic = ' <form id="test" action="test.php">\
<div>\
Test: <input name="blah" value="test" type="text">\
</div>\
</form>'
$("#maximizeChat").html(htmldynamic);
});
I don't know if this is the right way to do it. Is there a better approach?

Adding large chunks of HTML as JavaScript variables is not good practice. It is easy to make errors in the HTML as you have to read it awkwardly embedded in the JS.
A better approach is to include the HTML code with the rest of your markup, but use CSS to hide it. Then you can just show it using JavaScript when it is pressed.
HTML:
<div id="my-form-container">
<div id="my-form-header">My form</div>
<form id="my-form" action="test.php">
<div>
Test: <input name="blah" value="test" type="text">
</div>
</form>
</div>
CSS:
#my-form {
display: none; /* This will hide the form. */
}
JavaScript:
//When the container is clicked...
$("#my-form-container").click(function() {
//...show the form.
$("#my-form").show();
});

Use this approach will definitely solve your problem
$(document).ready(function(){
$("#tawkchat-minified-agent-container").click(function()
var hlink = $("#test").val();
$("#test").click(function(){
$(".form").show()
});
});
});

div content display on a textbox HTML Javascript

I am trying to display the content of one of my div in a textbox ... Can somebody help me out with this? How can I display the content of my div tag in a textbox in HTML?
The following is what I have tried so far:
<script>
var test = document.getElementById("div").innerHtml;
document.getElementById("Key").value = test;
</script>
<div id="div" style="width: 50px" /></div>
<input type="text" id="Key" style="width: 50px" />

Julius, in your code, the text part needs to be a div class and in an external css stylesheet; declare the div class with a border.
Example HTML :
<div class="boxed">
This text is enclosed in a box.
</div>
CSS :
.boxed {
border: 1px solid green ;
}

Another way is to have a div class outside the form code and with css style the div and form
<div id="div">
<form id="form">
<input id="text" type="textbox" />
</form>
</div>
#div {
text-align: center;
}
#text {
width: 200px;
}

Say you have a div:
var myTextBox = $("#myTextBox");
var myText = $(".myDiv").text();
myTextBox.val(myText);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv"> blah blah </div>
<input type="text" value="" id="myTextBox" />
Using JQuery, you can do:
var myText = $(".myDiv").text(); // query the DOM for .myDiv selector and get its text
var myTextBox = $("#myTextBox"); // query the DOM and get your textbox
myTextBox.val(myText); // assign value to your textbox
To use jquery, you have to include it at the top of your html page like this:
<script type="text/javascript src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js" ></script>

This will get the content from the div once the page had loaded.
If you have dynamic data: You can put this into a function and have window.onload call that function. If you want the content to update with the dynamic data then you can call the function to update the text box.
window.onload=function(){
//Get the innerHTML of the div tag
var a=document.getElementById('div').innerHTML;
//Place the inner HTML into the text box 'Key'
document.getElementById('Key').value=a;
};
<div id="div" style="width:50px;">Content here...</div>
<input type="text" id="Key"/>
I hope this helps. Happy Coding!

Firstly div is a really bad name for an id - give it something meaningful.
Secondly - do you see the / inside the opening div tag? that means you've just closed the div...
<div id="div" style="width: 50px" />
is the same as
<div id="div" style="width: 50px" /></div> so your code is now
<div id="div" style="width: 50px"></div></div>
and nothing in between the
<div id="div" style="width: 50px" /> and </div> will count as the inner html

Moodle's TinyMCe editor and javascript (kaltura player)

I'm trying to add a video player inside a content page of a lesson on Moodle using Kaltura's JS embed. The embed looks like the following:
<script src="http://cdnapi.kaltura.com/p/"></script>
<div id="kaltura_player_" style="width: 530px; height: 327px;"
itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
<span itemprop="name" content="Letter"></span>
<span itemprop="description" content="A case study."></span>
<span itemprop="duration" content="233"></span>
<span itemprop="thumbnail"
content="http://cdnbakmi.kaltura.com/p"></span>
<span itemprop="width" content="530"></span>
<span itemprop="height" content="327"></span>
</div>
<script>
kWidget.embed({
"targetId": "kaltura_player_",
"wid": "_1410652",
"uiconf_id": 21346902,
"flashvars": {
"akamaiHD": {
"loadingPolicy": "preInitialize",
"asyncInit": "true"
},
"streamerType": "hdnetwork"
},
"cache_st": 139585,
"entry_id": "0_jd9t3gbd"
});
</script>
After saving the above into a content section in a Tiny MCE editor (as HTML), it directed me to a summarized edit page with each content section, where I can see the section with the video player working/playing just fine. However, during the preview of the content page, it only showed broken js code inside an input tag:
<input type="submit" value="//
kWidget.embed({
"targetId": "kaltura_player_,
"wid": "_1410652",
"uiconf_id": 21346902,
"flashvars": {
"akamaiHD": {
"loadingPolicy": "preInitialize",
"asyncInit": "true"},
"streamerType": "hdnetwork"},
"cache_st": 1395856314,
"entry_id": "0_jd9t3gbd"
});
// ]]>">
With no player displayed on the preview. Afterwards, I went back into edit mode, into the MCE text editor in HTML mode, and found that it has been altered into this:
<p></p>
<div id="kaltura_player_" style="width: 530px; height: 327px;" itemprop="video" itemscope="" itemtype="http://schema.org/VideoObject"></div>
<p>
<script type="text/javascript">// <![CDATA[
kWidget.embed({
"targetId": "kaltura_player",
"wid": "_1410652",
"uiconf_id": 21346902,
"flashvars": {
"akamaiHD": {
"loadingPolicy": "preInitialize",
"asyncInit": "true"
},
"streamerType": "hdnetwork"
},
"cache_st": 5856314,
"entry_id": ""
});
// ]]></script>
</p>
Is this a Moodle issue? Or a Tiny MCE issue? or both? Is there a security config setting that I've missed? Would anyone know which of these components are altering the js code? Any help would be greatly appreciated!

Getting blank page sent to printer using a hidden div method

I am using a code snippet that I found to display a multipage form using visibility hidden.
There is a very good possibility that all of my problem stems from this method. That resource was from here:
http://www.devx.com/webdev/Article/10483/0/page/2
It is a fairly straightforward way to display multiple pages of a form...it probably was never intended to be able to allow printing.
<html>
<head>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script language="JavaScript">
$.getScript("printThis.js", function(){
});
var currentLayer = 'page1';
function showLayer(lyr){
hideLayer(currentLayer);
document.getElementById(lyr).style.visibility = 'visible';
currentLayer = lyr;
}
function hideLayer(lyr){
document.getElementById(lyr).style.visibility = 'hidden';
}
function showValues(form){
var values = '';
var len = form.length - 1; //Leave off Submit Button
for(i=0; i<len; i++){
if(form[i].id.indexOf("C")!=-1||form[i].id.indexOf("B")!=-1)
continue;
values += form[i].id;
values += ': ';
values += form[i].value;
values += '\n';
}
alert(values);
}
</script>
<style>
body{
font: 10pt sans-serif;
}
.page{
position: absolute;
top: 10;
left: 100;
visibility: hidden;
}
</style>
</head>
<body>
<form id="multiForm" action="App1.php" method="POST" action="javascript:void(0)" onSubmit="showValues(this)" id="app">
<div id="page1" class="page" style="visibility:visible;">
Applicant Name: <input type="text" size="50" name="name1" >
</form>
<p><input type="button" id="C1" value="Continue" onClick="showLayer('page2')"></p>
</div>
<div id="page2" class="page">
This is Page 2
<br>
<input type="button" id="B1" value="Go Back" onClick="showLayer('page1')">
<input type="button" id="B2" value="Print App" onClick="$('#page1').printThis({})">
<br><br>
</div>
</form>
</body>
</html>
The "Print App" button is properly calling the printThis plugin. However, I get no content from the page1 DIV section. All that is printed is the normal header portion (Page 1 of 1) in the upper right and about:blank in lower left and date in lower right of page…no content, which with my sample file should be Applicant Name input box.
I assume that this is because the DIV for page1 is set to "hidden" while the content of page2 is being displayed. If I substitute "page2" in the button call then I get the content from page2 as expected.
So...I guess what I am after is a way to temporarily change the DIV being referenced in the printThis button call to be visible just long enough to perform the page print.
Any ideas?

I'm the plugin author - you need to incorporate the print media query into your css.
This would also help users that select file > print or control + P, as it will show all form elements.
The print media query allows you to make styling changes specifically for the printed page.
Example:
#media print {
#page1, #page2 {
display: block;
visibility: visible;
position: relative;
}
}
You include this in your css.
Additionally, based on your above code - you have css and javascript inline in your page. You should consider moving both to an external files, for maintenance and improved code standards.
printThis won't work with your current setup, because the plugin looks for the container (selector) you have specified and any linked css in the head of the document.
So for the above, you can do the following:
<!-- move all of this to the bottom of the page for performance -->
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="printThis.js"></script>
<script type="text/javascript" src="myJavascript.js"></script>
<!-- the above file is your javascript externalized, remove $.getScript, wrap in $(document).ready() -->
Then put this in your head:
<link type='text/css' rel='stylesheet' href='style.css'>
<!-- contains your css from the page, including the print media query -->

(IE6) insert content into iframe at current cursor position

I'm currently upgrading a WYSIWYG Rich Text Editor that was based on the DHTML Editor Control (DEC) to use the more modern editor controls in modern browsers. I'm using an iFrame with design mode turned on and a mixture of regular javascript and jquery.
One of my requirements is to insert html content (forms etc) into the iframe so that users can edit them. I have it working in FF + Chrome, but IE is proving a pain. My current code inserts the content at the start of the parent document and not the iframes, I'm using the selection.createRange() function that when used with DEC would insert the content either at the cursor if the control was selected or at the end of the document inside the editor if not.
Currently it only works when I select some text in IE. Heres my current code (apologies if it looks unformatted the firewall at work is blocking a lot of the css + js from stackoverflow), any ideas?
<html>
<head>
<title>Text Editor Test</title>
<style type="text/css">
.toolbar {background-color:#BFC193;width:500px;padding:5px;}
#insertForm {position: absolute;height:60px;width:200px;top:50px;left:50px;border:1pt solid black;background-color:#fff;padding:10px;}
</style>
</head>
<body>
<h1>MSHTML Text Editor</h1>
<form id="frmEdit">
<div class="toolbar" id="toolbar">
<input type="button" name="insertHTML" value="insert html" onClick="showForm();"/>
</div>
<div id="insertForm" style="display:none;">
Insert Content Form
<input type="button" value="OK" style="width: 80px" onClick="insertContent();">
</div>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
// functions to execute once the DOM has loaded.
$(document).ready(function() {
pageInit();
});
function pageInit() {
// create iframe
$('.toolbar').after("<iframe id='frameEdit' style='width:500px; height:400px' ></iframe>");
//insert delay for firefox + webkit browsers before turning on designMode open + close seems to do the job
document.getElementById('frameEdit').contentWindow.document.open();
document.getElementById('frameEdit').contentWindow.document.close();
document.getElementById('frameEdit').contentWindow.document.designMode='On';
}
function showForm() {
$('#insertForm').toggle();
}
function insertContent() {
// turn off form
showForm();
// set test content
var htmlContent = "<p>Insert Test</p>";
var doc = document.getElementById('frameEdit').contentWindow.document;
if (doc.selection && doc.selection.createRange) { // IE
var range = doc.selection.createRange();
range.pasteHTML(htmlContent);
} else { // FF
doc.execCommand('insertHTML', false, htmlContent);
}
}
</script>
</form>
</body>
</html>

Make your button unselectable to stop it nicking the focus from the iframe. You can do this in IE using uneselectable="on":
<input type="button" value="OK" unselectable="on"
style="width: 80px" onclick="insertContent();">