CFDOCUMENT PDF issues with word wrap and borders - javascript

I am trying to code a project where the user can add text to a template flyer and then create a pdf for print. I would like to use html elements instead of svg mostly because of ease of adding drag, resizing and word wrapping features. I then use cfdocument to create the pdf. The issue I am having is the word wrapping that is seen in the browser does not match the pdf. I also notice a border around the background image in the pdf. Does anyone know why either of these issues are happening? Thanks.
This is the browser view
This is the pdf result. The pdf also has a white border around the image.
The template is displayed via cfinclude.
<cfsavecontent variable="canvas">
<cfinclude template="templates/T080764_1.htm">
</cfsavecontent>
<cfoutput>#canvas#</cfoutput>
Template code.
<img id="t0-1-img_1" class="item ui-resizable" style="left: 0px; top: 0px; width: 816px; height: 1056px; z-index: 1;" src="http://images/template-1.jpg" unselectable="true">
<div id="ti0-text_1" style="position:absolute; left:10px; top:10px; width:450px; height:auto; text-align:left; font-family:Verdana; font-size:10pt; cursor:pointer; z-index: 2;"></div>
User clicks Add Text button and the text is added to the ti0-text_1 div with jquery.
$(function() {
$(".textbutton").click(function() {
//straight text
var txt = $("#text-field_1").html();
$("#ti0-text_1").append(txt);
});
});
The canvas data is submitted via form to a page with the cfdocument code.
<cfdocument format="pdf" filename="pdf/#form.filename#" scale="100" localurl="true" fontembed="yes" pageheight="11" pagewidth="8.50" unit="in" pagetype="custom"
margintop="0" marginleft="0" marginright="0" marginbottom="0" overwrite="yes">
<cfoutput>#form.data#</cfoutput>
</cfdocument>

Related

Entire div clickable with CSS

I'm using dropzone.js for Ajax uploading of images. The problem is that I have the following div containers
<div id="images-container" class="ui-sortable dz-clickable">
<div id="file-image">
<p><b>Add images</b></p>
<small>Click or drag&drop here</small>
</div>
</div>
And dropzone.js is initialised as follows:
$("#file-image").dropzone();
My css is looking like this:
#file-image {
border: 1px solid rgb(187, 187, 187);
background: rgb(247, 247, 247);
box-sizing: border-box;
float: left;
display: block;
position: relative;
z-index: 20;
cursor:pointer;
}
The problem is that when I click on the text (Add images or Click or drag & drop.) the plugin cannot be activated. How can I make the entire #file-image div clickable?
I've changed your div to a form and added an action and it seems to be working fine.
HTML
<div id="images-container" class="ui-sortable dz-clickable">
<form action="/action" id="file-image" class="dropzone">
<p><b>Add images</b></p>
</form>
</div>
This an extract from the official website - "Dropzone will find all form elements with the class dropzone, automatically attach itself to it, and upload files dropped into it to the specified action attribute."
So I think you need to use the action attribute to get it to work.
Codepen - https://codepen.io/anon/pen/aGKBgY

how to create a simple popup window displaying only text, on a web site

I'm not a programmer, I've created a web site using a major hosting service's application. I want to insert code into a box provided by the hosting service that allows you to paste any HTML code.
I want to create a link on the site that opens a popup window to display text that I hard-code into the code. I don't want to jump to another HTML page.
I found the following code below that allows me to jump to another HTML page (it was set to CNN.com as an example). Is there a way to replace the action of jumping to another HTML page, with opening the popup and displaying the following example text "hello world". (please note in the code below, I deleted the opening and closing "a" tags at the beginning and end of the code since their inclusion causes problems when I type this question out on this web site).
Pop-up Window
Thanks
Easy to make popup window without Jquery. Just copy this code and paste. and clicl the open text. Popup shown.
<p>To display the box, click on the link <a href="#" onClick="document.getElementById('shadowing').style.display='block';
document.getElementById('box').style.display='block';">open</a>
</p>
<div id="shadowing"></div>
<div id="box">
<span id="boxclose" onClick="document.getElementById('box').style.display='none';
document.getElementById('shadowing').style.display='none'">close </span>
<div id="boxcontent">
And this is the static content of the box. <br><br>
Dynamic content in the next demo...
</div>
</div>
<style type="text/css">
#shadowing{display: none;position: fixed;top: 0%;left: 0%;width: 100%;height: 100%; background-color: #CCA; z-index:10; opacity:0.5; filter: alpha(opacity=50);}
#box {display: none;position: fixed;top: 20%;left: 20%;width: 60%;height: 60%;max-height:400px;padding: 0; margin:0;border: 1px solid black;background-color: white;z-index:11; overflow: hidden;}
#boxclose{float:right;position:absolute; top: 0; right: 0px; background-image:url(images/close.gif);background-repeat:no-repeat; background-color:#CCC; border:1px solid black; width:20px;height:20px;margin-right:0px;}
#boxcontent{position:absolute;top:23px;left:0;right:0;bottom:0;margin:0 0 0 0;padding: 8px;overflow: auto;width:100%;height:100%; overflow:hidden;}
</style>
You can place the function in the <head> section OR you can pull the function from a .js file. This will open a window and load the url you want. It won't redirect the original page as you use the # instead of the actual url.
<script>
function popup(){
window.open('http://www.cnn.com','1426494439650','width=440,height=300,toolbar=0,menubar=0,location=1,status=1,scrollbars=1,resizable=1,left=0,top=0')
}
</script>
link

load data of hover image

First of all i'm new at scripting and need your help. I'm trying to achieve the following:
I have four projects i want to show on my website. These projects are visable by images. When people hover over the image a div called "info" will show the additional information of the project they hover on.
So to be clear, data which will be triggered by hovering goes to the same div "info":
Hover over image 1 -> load information of project 1 to -> div "info"
Hover over image 2 -> load information of project 2 to -> div "info"
etc.
A friend told me to use ajax and xml, is that a good combination?
Thanks for the help
You are right that a good way to load content dynamically on a page is to use Javascript and XML. A great way to get into using JavaScript is to load a library to help you operate on the contents of an HTML page. I definitely recommend JQuery.
I would highly recommend not loading the information from separate files, unless the content is a whole bunch of very large images.
Take look at this video: JQuery for Designers they do some really great videos that helped me understand JQuery when I was first starting. The page that I just linked to has some great techniques for switching content into the same place, and will give you some important UX (user experience) tips as well.
Ajax is the best choice to get the data....
But the variations comes at what type of Data...
if you need values from database JSON would be my choice
or
never mind any data can be smoothly framed
if you dont have too much hand on scripting
Just use Jquery Plugins to retrieve data using simple calls
Fancybox plugin CLICK HERE...
and the GUIDE to how to use
GUIDE TO USE FANCYBOX CLICK HERE.....
Thank you all for the response.
I solved the problem temporarily by using the technique given by Mark, using html and css. But, i think using javascript could make things easier and more organised. My knowledge about scripting is not good enough. I posted my html for others underneath.
I still have the question how to use the id of a image as a parameter for retrieving a specific part of information. For example: i have an image with id=img1 and a xml file containing with sub parameters. So when i hover over the image js gets the id of that image and then loads the specific part of the xml onto the "info"div and not the whole xml. (to answer the question of adam, the data type is just text)
enter code here
<!DOCTYPE html>
<html>
<head>
<style>
div.maincontent{
border: none;
margin:0px;
padding:0px;
}
div.leftcol, div.rightcol {
/*
* Note that the left column and the right column use position fixed
* to make placement of the elements on top easier.
*/
position:fixed;
top:0px;
width:200px;
height: 100%;
background-color: green;
color: white;
}
div.leftcol{
left:0px;
}
div.rightcol{
right:0px;
}
div.middlecontent{
/*
* Note the left and right margin to place the div.
* With this margin you can
*/
margin:0px 200px 0px 200px;
position: absolute;
top:0px;
left:0px;
}
div.square{
float:left;
margin:0px;
width:200px;
height:200px;
border:10px solid black;
background-color: blue;
}
div.left_content, .right_content {
/*
*Initially do not display the div.left_content
*and div.right_content.
*I still set the all the styles here the divs have in common.
*/
margin:0px;
position:fixed;
margin:0px;
top:0px;
width:200px;
height: 100%;
background-color: blue;
color:white;
display: none; /* do not display */
}
div.square:hover > div.left_content {
/*
*When you hover over a square take from the children
*those with div.left_content and display them.
*The left one is displayed on top of the left div.leftcol
*/
left:0px;
display:block;
}
div.square:hover > div.right_content {
/*
*When you hover over a square take from the children
*those with div.right_content and display them.
*The right one is displayed on top of the right div.rightcol
*/
right:0px;
display:block;
}
</style>
</head>
<body>
<div class="maincontent">
<div class="leftcol">
<p>
Hover over the blue divs in the middle
</p>
<p>
This trick uses the > to find children of an element.
The children are only displayed when hovering over the parent element.
Look at the CSS how that is done. for instance for the left div it is
div.square:hover > div.left_content
</p>
<p> something inside the left column</p>
</div>
<div class="rightcol">
<p>something inside the right column</p>
</div>
<div class="middlecontent">
<div class="square">
<!--
this div has two children
a div with class="left_content" and
a div with class="right_content"
-->
<div class="left_content">
<p> first div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> first div </p>
<p> something as right content </p>
</div>
</div>
<div class="square">
<div class="left_content">
<p> second div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> second div </p>
<p> something as right content </p>
</div>
</div>
<div class="square">
<div class="left_content">
<p> third div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> third div </p>
<p> something as right content </p>
</div>
</div>
</div>
</div>
</body>
</html>

Read from a txt file - html/css website

I'm doing a personal page in which I have to include some kind of tooltip in css like this
<a class="info" href="#">link<span>Your tooltip text here</span></a>
The css part:
a.info{
position:relative;
z-index:24;
color:#000;
text-decoration:none
}
a.info:hover{
z-index:25;
background-color: #FFF;
}
a.info span{
display: none
}
a.info:hover span{
display:block;
position:absolute;
top:2em;
left:2em;
width:15em;
border:1px solid #000;
background-color:#FFF;
color:#000;
text-align: justify;
font-weight:none;
padding:5px;
}
(I found the code on the net by the way)
I just wondered if in was possible to have the "your tooltip text here" in a text file, either by using html, or javascript and get it to display the text which is inside the text file.
I must not use php for this.
Thanks.
JavaScript can't read or write files ... But you can load the data from a text file with Ajax
You don't really need jQuery for this. You can create a js file with your content that looks like this
var tips = new Array(
"My first tip",
"My second tip"
);
Then just use whatever version of this function you want to load the file. BTW why not use the title attribute to simulate the tooltips:
<a class="info" href="#" title="Your tooltip text here">link</a>
Even if you want a fancy tooltip it seems better remove and then readd a title, rather than creating a whole separate element.
You can do this with ajax. Use jQuery because there are many examples available there.

Phototagging like in Facebook and Orkut album photos?

Is there a jQuery library or any leads on implementing that photo tagging like in Facebook and Orkut Photo albums?
Thanks
Hmmm, I found that the new version of Img Notes seems to do exactly what you want.
Checkout the Demo. It allows you to easily add tag notes and show them using JQuery. He also depends on the imgAreaSelect jquery plugin for adding notes.
you could try Jcrop or imgAreaSelect.
Not 100% the same behaviour as in Facebook, but with some tweaks, this should e possible.
I didn't find any suitable plugins for this purpose. So I ended up writing myself a small plug-in to mark areas over an image based on the coordinates loaded through an XML file.
The basic code is required is:
<div id="imageholder">
<!-- The main image -->
<img src="<link to image file>" alt="Image">
<!-- The grid tags -->
<div class="gridtag" style="bottom: 100px; left: 106px; height: 41px; width: 41px;"/>
<div class="gridtag" style="bottom: 300px; left: 56px; height: 100px; width: 56px;"/>
<div class="gridtag" ...
</div>
And the basic CSS styling required:
#imageholder{
height:500px;
width:497px;
position:relative;
}
div.gridtag {
border:1px solid #F0F0F0;
display:block;
position:absolute;
z-index:3;
}
In the above the divs with class "gridtags" are added using jQuery through XML or JSON and by binding events on this divs, we can make phototagging similar in Orkut.
PS: This only one side of the phototagging, ie. if we already have the coordinates we can mark on an image and add click events, which is the part actually i wanted. :) You guys has to write code for doing the marking part of the phototagging.
A good and complex example of tag like functionality in facebook is
Talking Pictures, Which is a facebook application.

Categories

Resources