Sorry for my English at first :-)
I have a web site! And only one page I need to export to PDF.
I use kendo.all.min.js and it works excellent on desktop browsers!
I read documentation and found that mobile browsers not support (((
But i need export only one page .... Would you so kind help me with this problem! Only this part of code i need to work on mobile devices
My JS: (button.js)
var generatePDF = function() {
kendo.drawing.drawDOM($("#formConfirmation")).then(function(group) {
kendo.drawing.pdf.saveAs(group, "Converted PDF.pdf");
});
}
kendo.pdf.defineFont({
"DejaVu Sans" : "/lk-tst/fonts/Sans.ttf",
});
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>{title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name = "viewport" content = "width=device-width, maximum-scale = 1, minimum-scale=1" />
<link rel="stylesheet" href="css/site_001.css">
<script src="/lk-tst/pdfmake/jquery.min.js"></script>
<script src="/lk-tst/pdfmake/kendo.all.min.js"></script>
<script src="/lk-tst/pdfmake/button.js"></script>
</head>
<body>
</div>
<div class="content">
<div id="formConfirmation">
<button onclick="generatePDF().open();">Save as PDF</button>
{pers_plan}
</div>
</div>
<div class="footer">
<div class="copyright">
{copyright}
</div>
</div>
{script}
</body>
</html>
Related
I'm trying to add a default 404 error page to my Spring app, and I thought it would be nice to add an animate template like that: https://codepen.io/wikyware-net/pen/xywexE
The whole idea is a validation of form and redirection to the error page, if it fails.
Basically, redirection works fine, but the problem I have is I can not make the JS part running (the tost doesn't pop up :-/)...
Here's how my error page looks like:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Ooops... Something went wrong!</title>
<meta name="description" content="Создание адаптивного сайта"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" th:href="#{/css/error.css}"/>
<script type="text/javascript" th:src="#{/static/js/error.js}"></script>
</head>
<body>
<div class="ag-page-404">
<div class="ag-toaster-wrap">
<div class="ag-toaster">
<div class="ag-toaster_back"></div>
<div class="ag-toaster_front">
<div class="js-toaster_lever ag-toaster_lever"></div>
</div>
<div class="ag-toaster_toast-handler">
<div class="ag-toaster_shadow"></div>
<div class="js-toaster_toast ag-toaster_toast js-ag-hide"></div>
</div>
</div>
<canvas id="canvas-404" class="ag-canvas-404"></canvas>
<img class="ag-canvas-404_img"
src="https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/404-error-smoke-from-toaster/images/smoke.png">
</div>
<div>
<a th:href="#{/home}" target="_blank" class="btn-primary">Go back</a>
</div>
</div>
</body>
Both CSS and JS code I use, is included in the template I attached at the very beginning.
Here's also the snapshot of the project's resources structure:
What am I doing wrong here?
What are best practices in importing such a HTML template into a Spring Boot/Thymeleaf project?
Thank you in advance for your help.
Kind regards,
Matthew
EDIT:
So I changed my html page to that form:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Ooops... Something went wrong!</title>
<meta name="description" content="Создание адаптивного сайта"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" th:href="#{/css/error.css}"/>
</head>
<body>
<div class="ag-page-404">
<div class="ag-toaster-wrap">
<div class="ag-toaster">
<div class="ag-toaster_back"></div>
<div class="ag-toaster_front">
<div class="js-toaster_lever ag-toaster_lever"></div>
</div>
<div class="ag-toaster_toast-handler">
<div class="ag-toaster_shadow"></div>
<div class="js-toaster_toast ag-toaster_toast js-ag-hide"></div>
</div>
</div>
<canvas id="canvas-404" class="ag-canvas-404"></canvas>
<img class="ag-canvas-404_img" src="https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/404-error-smoke-from-toaster/images/smoke.png">
</div>
</div>
<div>
<a th:href="#{/home}" target="_blank" class="btn-primary">Go back</a>
</div>
<script src="webjars/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" th:src="#{/js/error.js}"></script>
<script src="webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</div>
</body>
Plus, I also updated my build.gradle file:
buildscript {
ext {
springBootVersion = '2.0.5.RELEASE'
}
repositories {
mavenCentral()
}
dependencies {
classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
}
}
plugins {
id 'war'
}
apply plugin: 'java'
apply plugin: 'eclipse'
apply plugin: 'org.springframework.boot'
apply plugin: 'io.spring.dependency-management'
group = 'pl.mpas'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = 1.8
targetCompatibility = 1.8
repositories {
mavenLocal()
mavenCentral()
}
dependencies {
compile('org.springframework.boot:spring-boot-starter-data-jpa')
compile('org.springframework.boot:spring-boot-starter-thymeleaf')
compile('org.springframework.boot:spring-boot-starter-web')
compile group: 'org.springframework.boot', name: 'spring-boot-starter-validation', version: '2.3.7.RELEASE'
compile group: 'org.webjars', name: 'bootstrap', version: '3.3.6'
compile group: 'org.webjars', name: 'bootstrap-datepicker', version: '1.0.1'
compile group: 'org.webjars.bower', name: 'jquery', version: '3.5.1'
runtime('org.springframework.boot:spring-boot-devtools')
runtime('com.h2database:h2')
runtime('mysql:mysql-connector-java')
testCompile('org.springframework.boot:spring-boot-starter-test')
compile('org.apache.struts:struts2-core:2.3.16.1')
providedCompile('javax.servlet.jsp:jsp-api:2.1')
providedCompile('javax.servlet:javax.servlet-api:3.1.0')
}
Thanks to that, I no longer see any errors in the browser's console.
However... JS still doesn't work as expected. :-/
Your files structure looks good. you have added your js file in error page by
<script type="text/javascript" th:src="#{/static/js/error.js}"></script>
but I don't thing you need to mention static in your source URL for JS, Change it to
<script type="text/javascript" th:src="#{/js/error.js}"></script>
also please add the below dependencies in your pom.xml for jQuery and Bootstrap
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.6</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap-datepicker</artifactId>
<version>1.0.1</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>1.9.1</version>
</dependency>
change your error.html file as shown below
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Ooops... Something went wrong!</title>
<meta name="description" content="Создание адаптивного сайта"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" th:href="#{/css/error.css}"/>
</head>
<body>
<div class="ag-page-404">
<div class="ag-toaster-wrap">
<div class="ag-toaster">
<div class="ag-toaster_back"></div>
<div class="ag-toaster_front">
<div class="js-toaster_lever ag-toaster_lever"></div>
</div>
<div class="ag-toaster_toast-handler">
<div class="ag-toaster_shadow"></div>
<div class="js-toaster_toast ag-toaster_toast js-ag-hide"></div>
</div>
</div>
<canvas id="canvas-404" class="ag-canvas-404"></canvas>
<img class="ag-canvas-404_img" src="https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/404-error-smoke-from-toaster/images/smoke.png">
</div>
</div>
<script src="webjars/jquery/1.9.1/jquery.min.js"></script>
<script src="webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="#{/js/error.js}"></script>
</body>
</html>
now it will work fine. Let me know if any doubt.
Refer:https://www.springboottutorial.com/spring-boot-with-jquery-and-bootstrap-web-jars
A couple of notes:
Change your JavaScript reference for your error.js script to this:
<script type="text/javascript" th:src="#{/js/error.js}"></script>
There is no need to include the /static portion of the URL.
Also, have you included jQuery in the page? For example:
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
You will see an error in the browser's console if jQuery is not available.
Try to change your JavaScript reference in your HTML page:
<link rel="stylesheet" href="../static/css/error.js" type="text/javascript" th:href="#{/error.js}">
All right guys, I finally made it running. In my case the problem was a lack of jQuery's script tag in html's head section. I used Google's CDN hosting:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
So the final, working version of my page looks as follows:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Ooops... Something went wrong!</title>
<meta name="description" content="Создание адаптивного сайта"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" th:href="#{/css/error.css}"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="ag-page-404">
<div class="ag-toaster-wrap">
<div class="ag-toaster">
<div class="ag-toaster_back"></div>
<div class="ag-toaster_front">
<div class="js-toaster_lever ag-toaster_lever"></div>
</div>
<div class="ag-toaster_toast-handler">
<div class="ag-toaster_shadow"></div>
<div class="js-toaster_toast ag-toaster_toast js-ag-hide"></div>
</div>
</div>
<canvas id="canvas-404" class="ag-canvas-404"></canvas>
<img class="ag-canvas-404_img"
src="https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/404-error-smoke-from-toaster/images/smoke.png">
</div>
</div>
<div>
<a th:href="#{/home}" target="_blank" class="btn-primary">Go back</a>
</div>
<script src="webjars/jquery/3.5.1/jquery.min.js"></script>
<script src="webjars/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="#{/js/error.js}"></script>
</div>
</body>
Thanks again for your help! Cheers!
Inside my entry header I have entry title (h1 tag) and inside of it I have <sup> tag. This title is coming from WordPress and superscript tag is working but I want to find every "tm" inside every title and capitalize it using js/jquery.
This is my html:
<div class="entry-header">
<h1 class="entry-title">Just Testing Something<sup>TM</sup></h1>
</div>
and my js:
$(document).ready(function(){
$('sup:contains("tm")')
$(this).css({
'cssText': 'text-transform: uppercase !important'
});
});
But this doesn't work. Does anybody know why?
I was working on a "pure JS" solution when #gabriel-lupu answered! :-D
Well, I'm posting here just in case:
<!DOCTYPE html>
<html>
<head>
<title>My Title</title>
<style type="text/css">
.myStyle {
text-transform: uppercase;
color: red;
}
</style>
</head>
<body>
<div class="entry-header">
<h1 class="entry-title">Just Testing Something<sup>TM1</sup></h1>
</div>
<div class="entry-header">
<h1 class="entry-title">Just Testing Something<sup>Middle</sup></h1>
</div>
<div class="entry-header">
<h1 class="entry-title">Just Testing Something<sup>TM2</sup></h1>
</div>
<script type="text/javascript">
function setClassOfElemWithText(elem, text, myClass) {
var nodes = document.querySelectorAll(elem);
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
if (node.textContent.indexOf(text) !== -1) {
node.setAttribute('class', myClass);
}
}
}
setClassOfElemWithText('sup', 'TM', 'myStyle');
</script>
</body>
</html>
Just looked at your question and this works for me:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Change tm</title>
</head>
<body>
<div class="entry-header">
<h1 class="entry-title">
<sup>copy</sup>Just Testing Something<sup>tm</sup>
</h1>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"
></script>
<script>
$(document).ready(function () {
$("sup:contains('tm')").css("text-transform", "uppercase");
});
</script>
</body>
</html>
I'm pretty new to JavaScript, I am trying to execute my external JS to html, what im trying to do is to see if the mouseover responds when my mouse hovers one img.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GWW- A Global Warming Warning...</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="gridContainer clearfix">
<div class="world">
<img src="poluicao/poluicao0001.png" alt="Mundo">
<div class="botao1">
<img src="poluicao/offbuton.png" alt="but1">
</div>
<div class="botao2">
<!--<a href="#" >//-->
<img id="readybotao" src="degelo/offbutton.gif" alt="but2">
<!-- </a> //-->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="javascript.js"</script>
</body>
</html>
And this is my JS file:
function buttonon() {
alert("If it showed up it worked!");
}
document.getElementById('readybotao').addEventListener("onmousover",buttonon());
What am I doing wrong?
change external javascript like this :
var ele = document.getElementById("readybotao");
ele.addEventListener("mouseover",buttonon);
function buttonon() {
alert("If it showed up it worked!");
}
and close tag script :
<script src="javascript.js"></script>
you have >missing on the line <script src="javascript.js"</script>
I would like to start saying that I'm not that experienced with the technologies that I'm using, I'm doing this project to practice using them.
I just downloaded JetBrains Webstorm and created a Foundation Project.
I created a <textarea> and I want to bind it to a value I defined in my AngularJS controller. The controller code is very simple (it's in my main.js file):
var readerApp = angular.module("readerApp", []);
function ReaderCtrl = function($scope){
$scope.data = {
text = "Default text"
}
}
So I only have a simple text that I want to bind like this: ng-model="{{data.text}}"
Although when I do that, the <textarea> still doesn't show anything. I'll post the entire HTML page, maybe there's a small detail I'm missing, but it seems right to me
<!doctype html>
<html class="no-js" lang="en" ng-app="readerApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Speed Reader | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div>
<div class="row">
<div class="large-12 columns large-text-center">
<h1>Welcome to Speed Reader!</h1>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="panel" ng-controller="ReaderCtrl">
<h3>Insert your text here! </h3>
<textarea id="textarea" rows="25" ng-model="{{data.text}}"></textarea>
Start reading
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/main.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
I've been wanting to try out the Accordion effect on mootools but I can't get it to work, it's just like the js doesn't load at all
this is the HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>BarDiJan - We Deliver</title>
<link rel="stylesheet" href="/stylesheets/reset.css" type="text/css" />
<link rel="stylesheet" href="/stylesheets/style.css" type="text/css" />
<script type="text/javascript" src="/javascripts/mootools-core-1.3-accordion.js"></script>
<script type="text/javascript" src="/javascripts/mootools-more.js"></script>
<script type="text/javascript" src="/javascripts/application.js"></script>
</head>
<body>
<div class="container">
<div id="accordion">
<h3 class="toggler">What we Do</h3>
<div class="element">
<p>We are people who deliver professional quality identity to you, we have wide range of support.
</p>
</div>
<h3 class="toggler">What we Did</h3>
<div class="element">
<p>Under Construction</p>
</div>
<h3 class="toggler">What we Offer</h3>
<div class="">
<ul>
<li>Web Design</li>
<li>Identity</li>
</ul>
</div>
</div>
</div>
</body>
</html>
This is the application.js code
windows.addEvent('domready', function() {
var accordion = new Accordion($$('h3.toggler'),$$('div.element'), {
display: 2,
opacity: false,
alwaysHide: true,
onActive: function(toggler) { toggler.setStyle('color', '#929292'); },
onBackground: function(toggler) { toggler.setStyle('color', '#000000'); }
});
});
Is there anything that I did wrong? Also I use sinatra if that matters.
Also thanks for your time. . .
You forgot to add the element class to the last element.
This is a working jsfiddle: http://jsfiddle.net/arian/YqNuh/
windows.addEvent('domready', function() {...
you make a mistake, window, not windows ;-)
so :
window.addEvent('domready', function() {...