I'm using wkhtmltopdf to convert pages to pdf, through php. This works well on a windows and a ubuntu server, however, on a different linux server, it sometimes (~5 out of 6 times) doesn't execute the javascript (the pdf only contains data that wasn't generated/modified by javascript).
For instance, I'm using it to render some pages containing jqplot graphics.
The server having the issues seems to work well with external links, but when using a link pointing to itself, it fails to load the javascript most of the times.
I used the static binaries (v 0.9.9 and v0.11.0), and they both fail the same way. Using --javascript-delay (or --redirect-delay) doesn't have any effect (other than waiting for the pdf longer to generate).
On v0.11.0 I also used --window-status, which usually blocked the server for a short time (probably because javascript was never loaded, so window.status was not set).
Also, the output from wkhtml doesn't show any errors/warnings when javascript isn't loaded.
Any ideas or suggestions on what can cause this would help.
Edit:
<script type="text/javascript">
$(function(){
$.atk4(function(){ $('#myrealm_charts_jqplot').univ().jqplot(...pramas);
$('#myrealm_charts_jqplot_5').univ().jqplot(...params);
$('#myrealm_charts_jqplot_6').univ().jqplot(...params);
$('#myrealm_charts_jqplot_7').univ().jqplot(...params);
; });
});
</script>
...
<body class="atk-fullscreen gs-10-fluid atk-sticky">
<div class="gs-wrap atk-layout">
<div id="Content">
<div id="myrealm_charts" class="page_charts">
<div style="height: '' ;width:'600px';">
<div id="myrealm_charts_jqplot" class=" pdf-analytics-chart" style="">
</div>
</div>
...
</div>
</div>
</div>
</body>
The page doesn't have any errors reported by firebug.
Related
I have researched some answers that talk about php, javascript, iframes etc. but I have tried a couple and none of them work. I am new to HTML coding.. and coding in general!
<link rel="menu" href="menu.html"> does nothing
<!--#include virtual="/menu.html" --> does nothing (presumably because its a comment?)
<iframe src="page.html"></iframe>
or object... both place the menu in a silly little scroll box.
I want to run my menu on my page as if it were a function in C. Where I can just include it, and it be there, or just link it.
Thanks for the help!
Ryan
webpage file: biology.html
menu file: menu.html
<div class="container">
<img src="homeicon.jpg" width="50" alt="Home">
<div class="redhover">
<div class="dropdown">
<button class="dropbtn">GCSEs</button>
<div class="dropdown-content">
Chemistry
Biology
</div>
</div>
<div class="dropdown">
<button class="dropbtn">A-Levels</button>
<div class="dropdown-content">
Chemistry
Biology
</div>
</div>
<div class="dropdown">
<button class="dropbtn">University</button>
<div class="dropdown-content">
Telecommunications
Electronic Engineering
</div>
</div>
<div class="dropdown">
<button class="dropbtn">More</button>
<div class="dropdown-content">
About me
Youtube
</div>
</div>
</div>
</div>
You can use php to include files on other pages. Here is some example code to get you started:
<?php
require_once('menu.php');
?>
You can put this in your HTML page appropriately, however you must make sure that php can be processed on your server and the file containing php code must end in the .php extension.
There are also other methods of including files via php, see here:
http://php.net/manual/en/function.include.php
and
http://php.net/manual/en/function.require.php
Edit - I'm not a big fan of this approach, but it will work on Github pages.
Create a file called nav.js with your menu defined as a js variable, then use javascript to insert it into an empty div created on each page. This way to update your nav you only have to ever edit nav.js Not pretty but it works
nav.js
var navigation = "<nav>";
navigation += "<ul>";
navigation += "<li>Home</li>";
navigation += "<li>About</li>";
navigation += "</ul>";
navigation += "</nav>";
document.getElementById("navigation").innerHTML = navigation;
Other pages
<div id="navigation"></div>
<!--rest of page goes here.-->
<script src="nav.js"></script>
Fiddle: https://jsfiddle.net/ze3hLxx8/1/
There are multiple ways to include a file into another depending on the backend technology you wish / want / need to use.
PHP
The most common way to do it in php is by using the include or require statement inside a php file.
In your specific case your biology.html file must be converted to a biology.php file and then you can add the relative code to include the file:
<?php include('menu.php');?>
This simple statement will add the content in your menu.php file to the current page. This will not work if php is not present on the server and obviously will not work locally without a local development environment
The differences between require and include can be found on the official documentation:
include: http://php.net/manual/en/function.include.php
require: http://php.net/manual/en/function.require.php
SSI
Another method is to use Server Side Includes. To use the SSI it must be supported and enabled on the webserver. To use SSI you need to change the extension from biology.html to biology.shtml and then add the following statement:
<!--#include file="menu.html" -->
More information on server side includes can be found on wikipedia: https://en.wikipedia.org/wiki/Server_Side_Includes
I use mediawiki to take note about the procedure that I follow, the source codes I write in mediawiki are highlighted with the expansion Genshi Syntax HighLight. I want to modify this expansion in mediawiki so it could be created a box above the source code in which it is written the programming language I used. I tried to see expansion sources in my mediawiki but I didn't find the segment in which is "sketch" the <div>. I also saw material about the creation of new expansion in mediawiki to understand how it runs, but I don't understand where the box is created.
I use syntax hightligher like this
some_code
and this is the result in html code generate from mediawiki
<div class="mw-geshi mw-code mw-content-ltr" dir="ltr">
<div class="bash source-bash">
<pre class="de1">
some_code
</pre>
</div>
</div>
I want to prepen the div to first div, like this
<div class='gsh-lang-label'>Language bash</div>
<div class="mw-geshi mw-code mw-content-ltr" dir="ltr">
<div class="bash source-bash">
<pre class="de1">
some_code
</pre>
</div>
</div>
Can you explain me if it is possible to do it and how can I face the problem?
I think ordinary jQuery will solve this problem. Something like:
$(".mw-geshi").each(function(){
$(this).before("<div class='gsh-lang-label'>" +
$(this).children().first().attr("class").split(' ')[0] +
"</div>")
})
Put this in [[MediaWiki:Common.js]], so this script will be run for every user.
I couldn't find any other info about anyone with this problem... I am not using .page() anywhere, i even unlinked my exterenal javascript file, and it still happens.
I navigate using a navbar and randomly (not always) it will start reloading the page in an infinite loop. and there is this 1 page, that has nothing special that will always happen if i press f5 to reload it, but if i come from another page... it doesnt happen o O it's so weird.
I'm using php and jqm 1.4.2 with jquery 1.10.2. I would post code, but can't really pinpoint anything.
On the page that i can press f5/refresh and it always does this bug, i tried removing all content, and php, other than includes/header/footer partials and it still happens...., removing my js from header and it still happens, the only conclusion I can come to is jqm 1.4.2 jquery or my php settings, which i am clueless on what to do. Any idea? This site used to be in jqm 1.2.0 and don't remember having this problem then.
EDIT: It seems removing the _footer.php partial stopped the bug this is its contents:
<?php
$navCSS = "ui-btn-active ui-state-persist";
?>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>Quarts</li>
<li>Nouvelle</li>
<li>Dispo.</li>
<li>Paies</li>
<li>Autres...</li>
</ul>
</div>
</div>
<!-- page end -->
</div>
</body>
</html>
EDIT: removing data-prefetch stops the issue, but i wanted to prefetch pages for smooth navigation and make it feel like an app, why does it cause this issue?
External pages/links are being prefetched several times as you are using the same navbar internally for each page. Your solution is to use an External footer and navbar which can be accessed from any internal or external page.
<body> <!-- or page container div -->
<div data-role="page">
</div>
<!-- external footer -->
<div data-role="footer" data-theme="a">
<div data-role="navbar">
</div>
</div>
When using external widgets, you need to initialize them manually by calling .toolbar() and then .enhanceWithin() to initialize inner widgets.
$(function () {
$("[data-role=footer]").toolbar().enhanceWithin();
});
So I've got a part on my website where I show a pdf in an iframe.
This works perfectly fine on computers.
However, some mobile devices start downloading the pdf immediately when they load the website.
This is the code I use.
<div class="showbox" style="display: none;">
<div class="embed-container">
<iframe src="/images/pdf-file.pdf" style="border:none;"></iframe>
</div>
</div>
So I just want the mobile users to be able to visit the website without automatically downloading the pdf.
Any ideas how to pull this off?
how about you use Responsive utility classes ?
take a look at: http://getbootstrap.com/2.3.2/scaffolding.html#responsive
scroll down untill "Responsive utility classes"
you can set your html like this:
<div class="showbox" style="display: none;">
<div class="embed-container">
</div>
</div>
and then put this js anywhere:
if( !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$('.showbox .embed-container').append('<iframe src="/images/pdf-file.pdf" style="border:none;"></iframe>');
}
I'm trying to get some attributes for HTML tags in a web page.
<html>
<head>
<title>test page</title>
</head>
<body>
<div id="header" class="clearit" role="banner">
<div id="headerWrapper">
<ul id="primaryNav" role="navigation">
<li id="musicNav" class="navItem">
Music
</li>
<li id="listenNav" class="navItem">
Radio
</li>
<li id="eventsNav" class="navItem">
Events
</li>
<li id="chartsNav" class="navItem">
Charts
</li>
<li id="communityNav" class="navItem">
Community
</li>
<li id="originalsNav" class="navItem">
Originals
</li>
</ul>
</div>
</div>
</body>
</html>
For example, I need the actual height and width for #headerWrapper and compare it with #musicNav in my PHP script. Since PHP is server-side, I can't get these attributes so I'm thinking to append Javascript code to calculate these attributes and store them in a JSON file like in this code:
<script type="text/javascript">
document.ready(function() {
var JSONObject= {
"tagname":"headerWrapper",
"height":$("#headerWrapper").height(),
"width":$("#headerWrapper").width()
},
{
"tagname":"musicNav",
"height":$("#musicNav").height(),
"width":$("#musicNav").width()
}
});
});
</script>
Then I'd like to read it in the php file that contains my algorithm to extract visual features from web pages. So I need to render the web page with appended Javascript using some browser. I'm using exec to send the new file to Firefox, like this:
exec('"C:\Program Files (x86)\Mozilla Firefox\firefox.exe" "http://localhost/Autoextractor/test.html" 2> errors.txt');
And Firefox opens in taskmanager but does not dispaly, the page is not rendered, and my appended Javascript code is not executed.
safe_mode=off - disabled_functions deleted from php.ini and when executing
exec("whoami");
The result is my user (note: my user in Administrator group) and I did try wscript with no result.
Does anyone have any idea why it's not working, or has another solution to get the dimensions of HTML tags?
Simply running a browser won't allow you to read any data back from it, so forget about using system.
You can use Selenium Webdriver to control a browser with PHP, run JavaScript, then return the result.
When you write your real JavaScript, you will need to fix the syntax errors that appear in the example you included in the question.
Keep in mind that the size of elements on screen will depend on factors such as installed fonts, chosen font size, browser, window size, etc. You can get a result for a browser running on your system, but you can't depend on it to be a universal result.
"have another solution to get Get dimension of HTML tags?"
Something wrong with Firebug/Inspect, which will give you rendered offsets with a few simple operations.
Run your code in a console if you want to do it programmatically, though you'll still need firebug/Inspect to find the right selectors (which really obviates the ability to do any of this automatically). Trying to log it all... well, it sounds like you're trying to keep a database... perhaps you should set one up.
This might be a problem that you need to add more context to get a useful response.