I'm trying to create an upload system similar to YouTube.
But in PDF. When you upload a video to YouTube, you create a page.
I already have a code for the page that would be the pdf. But I needed to know how I could create a page that does the upload and modify the html by changing the pdf link
* pdfListView.loadPdf ("/ upload / ebooks / 1.pdf"); *
Follow the code below
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Demo of pdfListView</title>
<style>
.page-container {
margin: 10px auto;
}
.page-view canvas {
box-shadow: black 0px 0px 10px;
}
</style>
<!-- File from the PDF.JS Library -->
<script type="text/javascript" src="external/compatibility.js"></script>
<script type="text/javascript" src="external/pdf.js"></script>
<script type="text/javascript">PDFJS.workerSrc = 'external/pdf.worker.js';</script>
<!-- Leave out the following two files if you don't need a textLayer -->
<link rel="stylesheet" href="src/TextLayer.css">
<script src="src/TextLayerBuilder.js"></script>
<!-- Leave out the following two files if you don't need an annotations layer -->
<link rel="stylesheet" href="src/AnnotationsLayer.css">
<script src="src/AnnotationsLayerBuilder.js"></script>
<!-- Core pdfListView file -->
<script src="src/PdfListView.js"></script>
</head>
<body>
<div id="main" style="position: absolute; top:0px; bottom:0px; left: 0; right: 0; overflow:scroll">
<!-- The pageContainers go here !-->
</div>
<script type="text/javascript">
window.pdfListView = new PDFListView(
document.getElementById("main"),
{
// Comment out the next line to get a listView without textLayer.
textLayerBuilder: TextLayerBuilder,
annotationsLayerBuilder: AnnotationsLayerBuilder,
logLevel: PDFListView.Logger.DEBUG
}
);
pdfListView.loadPdf("http://playofthegame.me/ebooks/A_HIST%c3%93RIA_SECRETA_DA_MA%c3%87ONARIA_E_ORDEM_ROSACRUZ_-_por_Jakim_Booz.pdf");
</script>
</body>
</html>
Related
This is modalpopup.php
<h1>Pop Up</h1>
<button id="openBtn">Show Pop Up</button>
<div id="overlay">
<div id="modal">
<button id="closeBtn">Close</button>
</div>
</div>
<script src="js/modalpopup.js"></script>
This is javascript.php
<!DOCTYPE html>
<html>
<head>
<title>Javascript Projects</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<nav>
<ul>
<li>Counter App</li>
<li>Random Number Generator</li>
<li>Color Generator</li>
<li>Pop Up</li>
</ul>
</nav>
<?php
if(isset($_GET['counter'])){
include('counter.php');
}if(isset($_GET['randomnumber'])){
include('randomnumber.php');
}if(isset($_GET['hexgenerator'])){
include('hexgenerator.php');
}if(isset($_GET['popup'])){
include('modalpopup.php');
}
?>
</body>
</html>
This is style.css
body{
background-color: pink;
}
#overlay{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index 1;
background-color: plum;
}
#modal{
max-width: 600px;
height: 300px;
margin: auto;
background-color: white;
position: relative;
}
modalpopup.php is successfully linked to my style.css file because, I have the body background listed as pink in the main file its included in (javascript.php)and when I click the popup item of my menu the included modalpopup.php displays with the background as pink.
HOWEVER,
I used #overlay and I set the ID's properly but, for some reason when I try and add background colors to these items nothing displays. Any ideas what may be wrong ?
EDIT
I figured it out I am using XAAMP and I cleared my cache in safari and now it is working.
Php code
i searched on the web and i didnt see anything about this it looks like no error css status is 200
css code is at the bottom.
.sagalt {
margin-top: 500px
}
<html>
<head>
<meta charset="utf-8">
<title>quantum</title>
<link rel="shortcut icon" href="logo.png" type="image/png">
<link rel="stylesheet" href="qntm.css?v=<?php echo time(); ?>">
<!--link//-->
</head>
<body>
<div>
Sign Out
</div>
</body>
</html>
Think you are trying to apply CSS to the link. Anchor tag being an inline element, margin top/bottom property alone wont have an effect in it as inline elements flow with content on the page. Use display: inline-block or display: flex or float: left as per your requirement.
.sagalt {
color: red;
margin-top: 100px;
display: inline-block;
}
<html>
<head>
<meta charset="utf-8">
<title>quantum</title>
<link rel="shortcut icon" href="logo.png" type="image/png">
<link rel="stylesheet" href="qntm.css?v=<?php echo time(); ?>">
<!--link//-->
</head>
<body>
<div>
Sign Out
</div>
</body>
</html>
Pdf fuction*
This function is call from ajax after getting data from this function it's call anothe file here I am display data which is coming from data base.That file all css part in style tag using then as it is style tag prind in pdf as a text and if this all css file include in css folder then pdf is not create in proper format
public function actionInvoicespacking(){
$pdf = Yii::$app->pdf;
$modelShipment = Shipment::find()->orderBy('ship_id DESC')->one();
if(count($modelShipment) == 0) {
$shipid= 1;
} else
{
$shipid= $modelShipment->ship_id;
}
$htmlContent = file_get_contents('http://localhost/shepherdlogistics_v1.0/backend/views/shipment/invoicespackingdata.php');
$pdf->content = $htmlContent;
return $pdf->render();
}
invoicespackingdata.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Invoice</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.fontawesome.min.css">
<link rel="stylesheet" href="css/stylepdf.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
body {
font-size: 18px;
font-family: cambria;
}
.nopadd {
padding: 0px;
}
</style>
</head>
<body>
<div class="container">
<br>
<br>
<div class="">
<div class="col-lg-2 nopadd">
<img src="logopdf.png" alt="logo" width="100%">
</div>
<div class="col-lg-10">
<h1 style="font-size: 55px;font-weight: bold; padding: 23px 0px;">
SHEPHERD LOGISTICS CO. W.L.L.</h1>
</div>
</div>
</div>
</div>
As the demo states:
Any <style> tag will be skipped (you must use cssInline property for this)
If you have just a few styles to add to the pdf, you can pass it like this:
$pdf->content = $htmlContent;
$pdf->cssInline = '.class1 {color: red} .class2 {color:blue}';
But if you have alot of styles, you can also consider change the default cssFile to any file you want with the correct css. (by default, this property is #vendor/kartik-v/yii2-mpdf/assets/bootstrap.min.css
How to change the alert box size?
I use the following coding.
In Firefox the alert box resize automatically but it not change in chrome?
Kindly give a solution.
window.alert("You answered all questions. Press OK to continue.");
You can't change the size/formatting/title (default settings) of the Javascript Alert Box. Instead you should check out JQuery Alert Box.
The Resizable JQuery Alert Box
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</body>
</html>
To clarify: When you use window.alert() you are using resources of your browser, not of your web page. It's the browser then who is responsible for creating the alert box, and thus you cannot influence its properties (like size etc.)
I placed a single space in a new line at the end of my string which increased the length to a standard Windows message box.
Alert ("Hello World\n ");
I have created PHP files which accept data from $_GET method.
After that I use all the data I get to create HTML pages. Nothing is wrong with the data but in CSS I cannot style HTML elements. Except when it comes to inline styling, that works but it is not good to maintain.
I try to use like this but it doesn't work , Please Help
THANK IN ADVANCE
Example.php
<?php
$dataCover = $_GET['dataCover'];
$dataTitle = $_GET['dataTitle'];
$dataTag = $_GET['dataTag'];
$dataDir = $_GET['dataDir'];
$dataYear = $_GET['dataYear'];
$dataCreated = $_GET['dataCreated'];
$dataModified = $_GET['dataModified'];
$userAUID = $_GET['userAUID'];
$galleryID = $_GET['galleryID'];
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css" media="all">
#container img{
height: 230px;
width: 200px;
}
#container .center{
display: block;
margin: 0 auto;
}
</style>
<script src="../lib/jquery-1.10.2.min.js"></script>
<script src="../lib/jquery.mobile-1.3.1.min.js"></script>
<script src="../lib/se.js"></script>
</head>
<body>
<div data-role ="page" id ="page1">
<div data-role ="header">
<h1> header </h1>
</div>
<div data-role="content">
<div id="container">
<img class="center" src="<?echo $dataCover?>" alt=""/>
<p id="title"><?echo $dataTitle;?></p>
<p id="tag"><?echo $dataTag;?></p>
<p id="created">Created : <?echo $dataCreated?></p>
<p id="modified">modified : <?echo $dataModified?></p>
View Ebook-Gallery
Bookmark
</div>
</div>
</div>
</body>
</html>
When you move your css from inline to style sheet file, you have to refresh your page with Ctrl+F5. Maybe it's coming from the cache.
Also you can assign your css to the image by jquery.
I dont see any reference to any external stylesheet, so it seems like you have forgotten to do this.
Put this line
<link rel="stylesheet" type="text/css" href="/css/style.css" />
Somewhere in the head. Maybe before the script tags.
Make sure you adjust the path to your stylesheet.
Yes When you want to apply external css you have to give the path after the <title> tags within the <head> tags .just follow the html code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--Here css is the folder name where you have keep the style.css file -->
<script src="../lib/jquery-1.10.2.min.js"></script>
<script src="../lib/jquery.mobile-1.3.1.min.js"></script>
<script src="../lib/se.js"></script>
</head>