Good morning all,
I found the script which can be convert to pdf
His works nice, when information have into the tag form..
(function(){
var
form = $('.form'),
cache_width = form.width(),
a4 =[ 595.28, 841.89]; // for a4 size paper width and height
$('#create_pdf').on('click',function(){
$('body').scrollTop(0);
createPDF();
});
//create pdf
function createPDF(){
getCanvas().then(function(canvas){
var
img = canvas.toDataURL("image/png"),
doc = new jsPDF({
unit:'px',
format:'a4'
});
doc.addImage(img, 'JPEG', 20, 20);
doc.save('techumber-html-to-pdf.pdf');
form.width(cache_width);
});
}
// create canvas object
function getCanvas(){
form.width((a4[0]*1.33333) -80).css('max-width','none');
return html2canvas(form,{
imageTimeout:2000,
removeContainer:true
});
}
}());
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML to PDF - techumber</title>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.css">
</head>
<body>
<div class="ui page grid">
<div class="wide column">
<h1 class="ui header aligned center">HTML to PDF</h1>
<div class="ui divider hidden"></div>
<div class="ui segment">
<div class="ui button aligned center teal" id="create_pdf">Create PDF</div>
<div class="ui divider"></div>
<form class="ui form">
<p class="ui paragraph">oasdojasodjasjdaisjdoasjdoij</p>
</form>
</div>
</div>
</div>
<!-- scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.rawgit.com/niklasvh/html2canvas/0.5.0-alpha2/dist/html2canvas.min.js"></script>
<script type="text/javascript" src="http://cdn.rawgit.com/MrRio/jsPDF/master/dist/jspdf.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
How into the var in app.js code transfer to this
my script generates any articles in print format when have after following links to article ?tmpl=component&print=1
The question is How to transfer ?tmpl=component&print=1 to var instead tag form
maybe can try that?
$(document).ready(function(){
$("a").click(function(){
var link = $(this).attr("href");
});
});
or something like this?
UPD!
After the answer #Sergion Alen got this idea:
$(document).ready(function(){
$("a").click(function(){
var link = window.location.href + '?tmpl=component&print=1';
alert(link);
});
});
Displays what i need... How to write array link display here (replace class .forms for the array link) ?:
form = $('.form')
in app.js
You're in the right track then, try this:
$(document).ready(function(){
$("a").on('click', function(e){
e.preventDefault();
var link = $(this).attr("href");
document.location = link + '?tmpl=component&print=1';
});
});
Related
I have a text that I would like to change ("Happy Clients" in the code below). I tried to find the text on the WP dashboard and in the template editor but with no luck, how can i locate the class so I'll be able to change the text?
<div class="_slider_shadow"></div>
</div><!-- /.carousel -->
<div class="count"><div class="count-info"><strong id="targetElem">0</strong><span class="count-description"> Happy Clients</span></div></div>
<script type="text/javascript">
EDIT
I found a file that contains the following code that is related to text that i want to change:
<div class="count"><div class="count-info"><strong id="targetElem">0</strong><span class="count-description"><?php the_field('text_for_count'); ?></span></div></div>
<script type="text/javascript">
var endVal = <?php the_field('count'); ?>;
var numAnim = new CountUp("targetElem", 0, endVal - 300, 0 , );
numAnim.start(function() {
numAnim.update(endVal);
});
</script>
You can install Query Monitor plugin. It has a section called Template which shows all template files that have been used to load the page. That should help you to find what you need.
Example output
Using jQuery you can do this :)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".count-description").text("No Clients");
});
});
</script>
</head>
<body>
<button>Click me</button>
<div class="enigma_slider_shadow"></div>
</div><!-- /.carousel -->
<div class="count"><div class="count-info"><strong id="targetElem">0</strong><span class="count-description"> Happy Clients</span></div></div>
</body>
</html>
I am newbie to javascript ,Help me to display image and description in list view on html page get from the json object ..
Here i am parsed a json object and retrieved image URL and image description. Now I have to display the Image and Description in listview on html page. But I am Not getting How..Plese help me to solve this..
Here is My HTML Page:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link href="../css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jsonData.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(searchAPI);
})
</script>
</head>
<body>
<input type="text" id="search1" value="search here" >
<button id="submit" >submit</button>
<div id="div1">
<img id="img" src="http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy- images.jpg" style="width:200px;height:200px;">
<p id="p2"> </p>
</div>
</div>
</body>
</html>
My js file is:
function searchAPI(){
var searchText= $("#search1").val();
alert(searchText);
$.getJSON('http://api.duckduckgo.com/?q=ashok&format=json&pretty=1&callback=?',function(data){
for (var i = 0; i < data.RelatedTopics.length;i++) {
var desc= data.RelatedTopics[i].Text;
var url= data.RelatedTopics[i].Icon.URL;
}
});
}
Please help me How to display this Image and Description in list view like this
I think this works for you.
modify js like :
function searchAPI(){
var searchText= $("#search1").val();
alert(searchText);
var htmlContent="<ul>";
$.getJSON('http://api.duckduckgo.com/?q=ashok&format=json&pretty=1&callback=?',function(data){
for (var i = 0; i < data.RelatedTopics.length;i++) {
var desc= data.RelatedTopics[i].Text;
var url= data.RelatedTopics[i].Icon.URL;
htmlContent += "<li><img src='" + url + "' style='width:100px;height:100px;display:inline-block'/> <p style='display:inline-block'>"+desc+"</p></li>";
}
htmlContent += "</ul>";
$('#div1').html(htmlContent);
});
}
I'm doing Codeacademy JavaScript course and I'm doing okay. I've been able to solve my problems on my own until now. I just can't get it right.
Heres my code
JavaScript
var main = function() {
$('.btn').click(function() {
var post = $('.status-box').val();
$('<li>').text(post).prependTo('.posts')
$('.status-box').val(''),
});
$('.status-box').keyup(function() {
var postLength = $(this).val().length;
var charactersLeft = 140 - postLength;
$('.counter').text(charactersLeft);
});
}
$(document).ready(main);
HTML
<!doctype html>
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
</div>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
Post
</div>
<ul class="posts">
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
The JavaScript code isn't working. It's supposed to make a character count for how many characters there are left to be used in the textbox. Problem is the code isn't working. Remember I'm a beginner so try to be as clear as possible when presenting a solution to my problem. I think that the problem is small error somewhere in the JavaScript code, but I just can't find it since my JavaScript understanding isn't optimal yet. Thanks!
This is just bad syntax of extra comma, here is the fixed version:
var main = function() {
$('.btn').click(function() {
var post = $('.status-box').val();
$('<li>').text(post).prependTo('.posts');
$('.status-box').val('');
});
$('.status-box').keyup(function() {
var postLength = $(this).val().length;
var charactersLeft = 140 - postLength;
$('.counter').text(charactersLeft);
});
}
$(document).ready(main);
It's very small, just a syntax error, look at this:
$('.status-box').val(''),
Change it to
$('.status-box').val('');
I have created a html webpage here:
http://diagrams.inse1d.info/wbt.html
Code:
<!DOCTYPE html>
<html>
<head>
<title>WBT Charts</title>
<link rel="stylesheet" type="text/css" href="wbt.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="wbt.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
</head>
<body>
<section>
<article>
<div id="wbtBlock">
<p>Press enter to save amendments</p>
<h1>Title of wbt:<input type="text" id="wbtTitle" /></h1>
<div id="graph">
<p>Graph to go here</p>
</div>
<p><strong>Notes: </strong></p>
<p><span><input type="textarea" id="wbtNote" /></span></p>
</div>
</article>
</section>
<button>Add New WBT Chart</button>
</body>
Here is the jQuery code I wrote:
$(document).ready(function() {
$("h1").keypress(function(e) {
//get
wbtTitle = $('#wbtTitle').val();
// Write text after enter
if (e.which == 13) {
$("h1").text(wbtTitle);
}
});
$("span").keypress(function(e) {
//get
wbtNote = $('#wbtNote').val();
// Write note after enter
if (e.which == 13) {
$("span").text(wbtNote);
}
});
//Insert new WBT on button click
$("button").each(function() {
$(this).click(function() {
var wbtSet = $( "article" ).html();
$(wbtSet).insertAfter('section');
});
});
});
What I want to do is set the title and some note text using input boxes which works using jQuery. I then want to add a copy of the html into another article when the button is pressed without copying the inputs previously made with the possibility of setting new values when the article is cloned. The process should repeat over and over again.
Here is an image to help explain:
I am quite new to jQuery, I think you need to use a loop to fix this, I read that a .each() can be used http://api.jquery.com/jQuery.each/ but not quite sure.
Any help will be appreciated. Thanks.
I think I got your answer.
I changed the html a bit, because you duplicated some id's with your approach, that's not good. id's have to be unique on a page. I simply changed them to classes.
<!DOCTYPE html>
<html>
<head>
<title>WBT Charts</title>
<link rel="stylesheet" type="text/css" href="wbt.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="wbt.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
</head>
<body>
<section>
<article>
<div class="wbtBlock">
<p>Press enter to save amendments</p>
<h1>Title of wbt:<input type="text" class="wbtTitle" /></h1>
<div class="graph">
<p>Graph to go here</p>
</div>
<p><strong>Notes: </strong></p>
<p><span><input type="textarea" class="wbtNote" /></span></p>
</div>
</article>
</section>
<button>Add New WBT Chart</button>
</body>
And of course the jQuery. I got rid of your first two functions because they had no purpose in this context.
$(document).ready(function() {
//Insert new WBT on button click
$("button").on('click', function() {
var title = $(this).prev().find('.wbtTitle').val();
var note = $(this).prev().find('.wbtNote').val();
var wbtSet = $(this).prev("section").html();
$(this).prev().find('.wbtTitle').replaceWith(title);
$(this).prev().find('.wbtNote').replaceWith(note);
$(this).prev("section").after('<section>' + wbtSet + '</section>');
});
});
Here is a working fiddel
Fixing the answer given by hitokun_s
window.onload = function() {
// Save a copy of the element wbtSet element on pageload
var wbtSet = $("article").clone();
$("button").each(function() {
$(this).click(function() {
// Append a new one to the holder of the wbSets
$(wbtSet).appendTo($('section'));
});
});
}
I think this is what you want to do.
window.onload = function() {
$("button").each(function() {
$(this).click(function() {
var wbtSet = $("article:first-child").clone();
wbtSet.find("input").val("");
$(wbtSet).appendTo($('section'));
});
});
}
What is the best way to replace
var value = prompt("Enter a URL", "http://www.google.com/");
by a javascript modal (preferably pure javascript, if not possible then jquery)
Thanks!
You will need to change theway you call it, so it now follows event-driven programming style like that:
function prompt(question, callback) {
// here build a modal/form and after form submit:
callback(prompt_value);
}
And then use it like that:
prompt('Enter a URL:', function(result){
// do something with the result:
alert(result);
});
For better alerts, you can use bootboxjs.
For a pure JS modal, you can check ModaliseJS which is compatible with any css classes.
Example of ModaliseJS (change the classes to your design, just keep one .close, .confirm and .cancel as you please) :
<!DOCTYPE html>
<html>
<head>
<title>Modal example</title>
<link href="../../dist/modalise.css" rel="stylesheet">
<script src="../../dist/modalise.js" type="text/javascript">
</script>
<script src="app.js" type="text/javascript">
</script>
</head>
<body>
<h1>Example modal 1</h1><button id="openModal">Show the modal</button>
<div class="mdl mdl-fadein" id="exampleModal">
<div class="mdl-content mdl-slidein">
<center>
<div class="mdl-header mdl-band-primary">
<span class="close">X</span>
<h2>Example modal</h2>
</div>
<div class="mdl-body">
<h3>Content modal</h3>
input data: <input type="text" class="inputdata"><br>
</div>
<div class="mdl-footer mdl-band-primary">
<button class="confirm" onclick="return false">Do
thing</button><button class="cancel" onclick=
"return false">Cancel the thing</button>
</div>
</center>
</div>
</div>
</body>
</html>
Javascript :
var myModal = {}
window.onload = function(){
var btnOpen = document.getElementById('queryData'); // The button to open the modal
// if btnsOpen is not given, you can simply use myModal.show()
// Modalise(id, options);
myModal = new Modalise('exampleModal', {
btnsOpen : [btnOpen]
})
.attach()
.on('onConfirm', function(){
console.log(this.querySelector(".inputdata").value);
});
}