We Keep Coding

How to export a auto generated HTML to PDF

I have the following code which is partially what my HTML page does.
<script>
function close() {
MainJavaScript();
}
function MainJavaScript()
{
//var strEntity = " ";
var strEntity = document.getElementById('Entity').value;
//Images setup by Entity
if (strEntity == "MGP")
{
document.getElementById('displayPic').src="http://mgp75.png";
}
else if (strEntity == "MPP")
{
document.getElementById('displayPic').src="http://mpp75.png";
}
else if (strEntity == "RSC")
{
document.getElementById('displayPic').src="http://rsc75.png";
}
else if (strEntity == "MSN")
{
document.getElementById('displayPic').src="http://msn75.png";
}
var strFirstName = "John";
var strLastName = "Doe";
var strSuffix = " ";
var strTitle = "DDS";
var strSecondaryTitle = " ";
var strDisplayName = strFirstName + " " + strLastName;
if (strTitle.trim() != '')
strDisplayName += ", " + strTitle;
if (strSuffix.trim() != '')
strDisplayName += ", " + strSuffix;
if (strSecondaryTitle.trim() !='')
strDisplayName += ", " + strSecondaryTitle;
document.getElementById('FullName').innerHTML = strDisplayName;
}
</script>
Submit
<table>
<tr>
<td width="55%">
<div class="first">
<div class="contact-info">
<h3><img id="displayPic" src="" alt=""></h3>
</div><!--// .contact-info -->
</div>
</td>
<td width="40%">
<div>
<h1><font color="#003893" face="Georgia">Cu Vi</font></h1>
<h2><span id="FullName"></span></h2>
</div>
</td>
</tr>
</table>
When I click the Submit button the displayPic and the FullName is replaced by the respective values using MainJavascript function. What I am looking to do is create a PDF from the output but unfortunately all the DLLs and method I found requires me to output a HTML file and then convert to a PDF but because it is using JavaScript, the source is always blank but the display is changed once the button is clicked.
How can I achieve what I am looking to do, is convert the output into a PDF?

You should look at Xep CloudFormatter. This library, jquery plugin, prints any html page. So, given your example, if I were to start with an HTML template like you have, and then with javascript/jquery I populate the html and then call xepOnline.Formatter.Format to render it, you will get back a beautiful PDF.
I simplified your code a bit, but here is a fiddle for you to explore:
http://jsfiddle.net/kstubs/56x6W/
function printMe() {
tryAtMain();
var imgLoad = imagesLoaded($('#displayPic')[0]);
imgLoad.on( 'always', function() {
xepOnline.Formatter.Format('print_me', {
pageMargin: ".25in"
});
});
}
function tryAtMain() {
// some pic
$('#displayPic').attr('src','http://lorempixel.com/output/abstract-q-c-370-222-1.jpg');
$('#FullName').html('Johnny Carson');
}

jquery object expected error

I have a problem with jquery error in IE6-8 when clicking on button removing input.
The webbrowser gives me error message "object expected"
Any tips to solve this kind of problem? I can share with my code which adds and removes inputs and it also counts the number of all inputs. I have used php to give information about current existing inputs with values. Is it possible that it is not working because of any syntax mistake in the jquery script or is it just wrong to include CDN for older IE webrowsers?
Thanks for all possible helps or tips.
It includes Google CDN:
<script language = "javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
this is the whole jquery script:
$(document).ready(function () {
var maxTags = 20;
var tagsDiv = $("#newTagsDiv");
var addTag = $("#addTagButton");
var removeTag = $("#removeTagButton");
var x = tagsDiv.length + <? php print $tagNumber; ?> -1;
var tagNumber = <? php print $tagNumber; ?> -1;
$(addTag).click(function (e) {
if (x <= maxTags) {
tagNumber++;
$(tagsDiv).append('<div id="tagDiv' + tagNumber + '"><span class="tagNumber">' + tagNumber + '.</span><input type="text" name="tag' + tagNumber + '" id="tag' + tagNumber + '" size="20" value=""/></div>');
x++;
}
return false;
});
$(removeTag).click(function (e) {
if (x > 1) {
$('#tagDiv' + tagNumber).remove();
x--;
tagNumber--;
}
return false;
});
});

Replace
<script language = "javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
with
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
And have it inside of your head.
This seems to be a common problem in newer versions of IE, that is, it actually forced you to do it the "proper way".

adding results of XML request to a page

I am trying to get a feel for adding content to a page with XMLHTTPRequest. I would like to add the results to existing page content say in a second column, but I am not having any luck. I would appreciate a shove in the right direction. Thanks for any help.
<!DOCTYPE html>
<html>
<head>
<style>
#button{
float: left;
}
#team{
float: left;
}
</style>
<title>XMLHTTPRequest</title>
<script src="jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200) {
xmlDoc = xhr.responseXML;
var team = xmlDoc.getElementsByTagName("teammember");
var html = "";
for (i = 0; i < team.length; i++){
html +=
xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue + "<br>" +
xmlDoc.getElementsByTagName("title")[i].childNodes[0].nodeValue + "<br>" +
xmlDoc.getElementsByTagName("bio")[i].childNodes[0].nodeValue + "<br><br>";
}
//this is the code I would like help with
var team = document.getElementById("team");
team.appendChild(document.createTextNode("html"));
}
}
xhr.open("GET", "team.xml", true);
});
</script>
</head>
<body>
<div id="button">
<button onclick="xhr.send()">Click Me!</button>
</div>
<div id="team">
</div>
</body>
</html>

I wrote a script fairly similar to yours that does nearly exactly what you are on about. Below is the some normal JavaScript I used to put it all on the page, I have changed some of the variable names so it compares nicely with your code.
for (i=0; i<team.length; i++)
{
//Create text nodes for each element as that's what appendChild() needs
var nameText = document.createTextNode(xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue);
var titleText = document.createTextNode(xmlDoc.getElementsByTagName("title")[i].childNodes[0].nodeValue);
var bioText = document.createTextNode(xmlDoc.getElementsByTagName("bio")[i].childNodes[0].nodeValue);
//This div will contain one team member's info
var memberDiv = document.createElement('div');
//Add text to the div created
memberDiv.appendChild(nameText);
//Line break
memberDiv.appendChild(document.createElement('br'));
memberDiv.appendChild(titleText);
memberDiv.appendChild(document.createElement('br'));
memberDiv.appendChild(bioText);
//Add the div we've just created to the document.
document.getElementById('team').appendChild(memberDiv);
}
This may need some more adapting to suit your needs but you get the general idea. This is just one way of doing it, there's probably loads of other ways including with jQuery that may be a bit neater actually.
You can use memberDiv.setAttribute('class', className) to set the class of each div to whatever you want
Below is a visual representation of this code to make it easier to understand, click for full scale (500*1750):

Executing Javascript file from AS 3.0

I am running a small jquery code to my web page:
<!-- myjs.js -->
<script type="text/javascript">
$(document).ready(function() {
$("body").append('<div id="ajaxBusy" class="ajaxBusy"></div>');
</script>
as you can see i am adding a div at my html body with specific class and id name.
How is it possible to execute this .js file throught actionscript 3.0?
I mean to make a flash movie and call this file, or is it possible to execute inline javascript code through AS 3.0?
I found the code bellow but i cant make it work:
import flash.external.ExternalInterface;
var someVarInAS : String = 'foo';
var someOtherVarInAS : int = 10;
var jsXML : XML =
<script type="text/javascript">
var someVarInJS = '{$("body").append('<div id="ajaxBusy" class="ajaxBusy"></div>');}';
var someOtherVarInJS = '{$('#ajaxBusy).fadeIn();}';
<![CDATA[
alert( 'this comes from flash: ' + someVarInJS + ', ' + someOtherVarInJS );
]]>
</script>;
ExternalInterface.call( "function js_" + ( new Date().getTime() ) + "(){ " + jsXML + " }" );

I use this for loading JS files dynamically from AS3 and it works pretty well. Could be modified to run normal js rather than load another file:
var script:String = "" +
"var newscript = document.createElement('script');" +
"newscript.type = 'text/javascript';" +
"newscript.async = true;" +
"newscript.src = 'SomeJavascriptFile.js';" +
"(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(newscript);";
if ( ExternalInterface.available ) {
ExternalInterface.call("eval", script);
}

You could also avoid having to write javascript within actionscript and keep the two separate in their separate spots. Then just call the method name only using ExternalInterface, instead of calling 'eval' and passing in your javascript. It may be easier to test and maintain down the road.
Inside your html file:
<script>
function addDiv(){
// stuff here that adds the div you want, such as what you had:
$("body").append('<div id="ajaxBusy" class="ajaxBusy"></div>');
}
</script>
Then inside flash:
if (ExternalInterface.available == true) {
ExternalInterface.call("addDiv");
}
You can also supply method arguments from flash to javascript if needed as well.

convert onclick new window to onclick fancy box?

convert onclick new window to onclick fancy box?
got this free code for displaying facebook photos and its great but it opens a new window that doesnt really do it justice, would like to convert it to opening a fancybox instead any help appreciated."code below"
full url = http://www.footfalldigital.co.uk/fbalbum.html
thanks in advance lee "i will buy you a pint someday"
<script language="javascript" type="text/javascript">
function popitup(url) {
newwindow=window.open(url,'name','height=450,width=600,location=1,toolbar=1,status=1,resizable=1')
if (window.focus) {newwindow.focus()}
return false;
}
</script>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
<!-------ENTER YOUR FACEBOOK ALBUM IDS HERE------->
var id1 = "444691594416";
var id2 = "";
var id3 = "";
var id4 = "";
var id5 = "";
<!----------------------------------------------->
function fbFetch1(){
var url = "https://graph.facebook.com/" + id1 + "/photos&callback=?&limit=0";
$.getJSON(url,function(json){
var html = "";
$.each(json.data,function(i,fb){
var name = "";
if (fb.name !== undefined){
var name = fb.name;}
html += "<a onclick=\"return popitup('" + fb.source + "')\"><img style='margin:5px;padding:0px;cursor:pointer;vertical-align:middle;' src=" + fb.picture + " title=\"" + name + "\"></a>"; });
html += "";
$('.facebookfeed1').animate({opacity:0}, 500, function(){
$('.facebookfeed1').html(html);});
$('.facebookfeed1').animate({opacity:1}, 500);}
);
};
function fbFetch2(){

If you already have all of the images on the page why not look at: http://lokeshdhakar.com/projects/lightbox/
It will automatically look at the images within a selector and add the photo album for you.
Taken from their site:
How to Use:
Include lightbox.js in your header.
<script type="text/javascript" src="lightbox.js"></script>
Add rel="lightbox" attribute to any link tag to activate the lightbox. For example:
image #1
Optional: Use the title attribute if you want to show a caption.
update
http://lokeshdhakar.com/projects/lightbox2/ - Updated version
Replace:
$('.facebookfeed5').animate({opacity:0}, 500, function(){
$('.facebookfeed5').html(html);});
$('.facebookfeed5').animate({opacity:1}, 500);});};
With:
$('.facebookfeed5').animate({opacity:0}, 500, function(){
$('.facebookfeed5').html(html);});
$('.facebookfeed5').animate({opacity:1}, 500);})
$('img').attr('rel','lightbox')
;};