mPDF - Inline blocks not displaying side by side - javascript

I have a bunch of small tables that are formatted as inline-block elements. In the browser they display side by side as intended, but when using mPDF to output them they break after each table. No matter how I try to format them, they always break after the table. Is there a trick with mPDF to get elements to stack side-by-side?
I am pulling the exact HTML from the page and sending it via AJAX
Below is an example of the browser and pdf view.
My mPDF generator page looks like this:
<?php
include("mpdf60/mpdf.php");
$html = $_POST['html'];
$mpdf=new mPDF('utf-8', 'A4');
$mpdf->SetDisplayMode('fullpage');
// LOAD a stylesheet
$stylesheet = file_get_contents('../../_css/main.css');
$mpdf->WriteHTML($stylesheet,1); // The parameter 1 tells that this is css/style only and no body/html/text
$mpdf->WriteHTML($html);
$mpdf->Output('myPDF.pdf','D');
exit;
?>

I try a lot of thinks too, but finally i found a solution, just use:
float: left;
Thats work for me.

I've spent a couple of hours figuring out how to make inline <div> or <p> elements with mPDF. I found some limitations, which contains the inline-block too. The display: inline or display: inline-block is ignored. You have to put everything in <span> elements if you want to see them one beside the other.

Related

Remove element from source code with CSS/JavaScript

I have a "catalog" which is basically a (Divi) image gallery, where the prices are hidden for not-logged on users. The price is the image caption which is hidden on every page with CSS. However (of course) the element (price) is still in the source code which is not the intention, because it may only be seen by logged in clients.
The caption is hidden with this code:
.et_pb_gallery_caption {visibility:hidden;}
I've tried to add this javascript to completely remove the element from the source code:
if ( $(element).css('visibility') == 'hidden' ){
$(element).remove();
}
But that doesn't do the trick. Hopefully someone can help me.
Thanks in advance!
<?php if($userLoggedIn){ ?>
<caption>$9.99</caption>
<?php } ?>
as a commentor mentioned, you need to do this server side so the HTML sent over to the browser does not include your price.
Please note - i made up the name for the logged in check, you need to search for the proper variable in your wordpress install that represents different user log in and their types.
It is an ambiguous question without having source code snippet, btw if you are trying to remove the element whose visibility is set to hidden you can use following jquery code to remove it from the DOM as:
$(document).ready(function(){
$(".et_pb_gallery_caption").remove();
});
However, one can better comment if you show some code snippet.

need to add contentEditable=false to p tag inside CKEditor

i need inside my CKEditor some boilerplate verbiage that is not editable, then the rest of the my string information. I concatenate the boilerplate verbiage [which is in a p tag], to a string variable that my CKEditor displays inside a certain div. By the time the verbiage, here:
<p id='abc' contentEditable='false'>verbiage</p>
... and the string information is displayed on the page, they are deep inside a number of nested tags - within a body with multiple classes. So both the verbiage, which is now in only a p tag with no attributes[they got stripped out], is nested way inside the original body tag [the first body tag, way up in the page] with lots and lots of divs, then finally comes an iframe, then ... the verbiage and string are like this:
<body contenteditable="true" class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" spellcheck="false">
<p>boilerplate verbiage</p>
...then the rest of the information is displayed in the editor, inside various spans, etc. i need to make the boilerplate verbiage readonly, contentEditable='false'. Yet everything I try both from the console in Chrome, and in code.... nothing changes that boilerplate verbiage tag. i have tried various things, including these - perhaps you can see where I need to tweak something; and i hope this will show you things i have tried and that i am run out of options so far:
jQuery("body.cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders").first().contentEditable='false';
jQuery("body.cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders").attr("readonly", "1");
jQuery("body.cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders p:first-child").contentEditable='false';
jQuery("body.cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders").find( "p" ).contentEditable='false';
jQuery("iframe", ".cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders").contents().find("p").contentEditable='false';
jQuery("iframe", "body .cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders").contents().find("p").contentEditable='false';
var editor= jQuery("body", ".cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders");
editor.val(editor.val().replace(/<p>/gi, "<p class='tiny_p'>"))
var editor= jQuery("body.cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders");
editor.val(editor.val().replace(/<p>/gi, "<p class='tiny_p'>"))
yet if i hard code in the Chrome browser, contenteditable="false",
it works perfectly. So, how can i access that p tag and assign it this attribute?
It really depends on moment and how you want to access, one option to access directly from separate script.
CKEDITOR.instances[YOUR_INSTANCE].window.$.document.getElementById("your_p_tag")
Note, that it should be done after CKEDITOR initilized
UPDATE:
CKEDITOR.instances[YOUR_INSTANCE].window.$.document.body.firstChild

Issue in making appear the div in the foreach loop

Here is my Fiddle
Where i have
<div id="mulitplefileuploader" class="fileuploader">Upload</div>
<div id="status"></div>
in the html. In the Body i have the script that was in the fiddle and i have $(".fileuploader").uploadFile(settings); in the document.ready. All this will have only on file upload div,
If i am using a for loop say 5 times. It is not working I mean the div itself not appearing. As the for loop may have any count i can run the div in the for loop. But I should not have the same script in my html page (Because of few restrictions).
What shall i do to achieve my result. Allowing multiple div according to the html.
I tried here in this fiddle but it didn't succeed. How can i do this.
Note : All the upload should work, the js don't know how many loop will appear in the html
Update To run the code Here is the chop and you shall try it here in the display at html mode.
#reply to your comment: alright i see. If you take a look into the source code of the plugin, it has the missing .each to iterate all the retrieved selectors. so you can simply add one for it
$(".fileuploader").each(function(){ $(this).uploadFile(settings); });
http://jsfiddle.net/L08p1upt/4/

Truncating A php String for given Width in Pixels

I want to truncate a given string taken from MySQL database through PHP to fit within given pixels. Most of the solutions I found were based on number of characters. But I specifically want it according to pixel length.(I don't want to use monospace font)
I found out that $('#idName').width() can be used in JavaScript for fitting. And that works fine with strings written in HTML simply. But here is the deal. My string is a variable stored in PHP, I need JavaScript to get width in pixels and I need to have that string in a span (in HTML) with specific id name.
So, I have tried to make it work using all three of them- PHP, HTML and JavaScript. Below is my code.
<?php
$len=100;
?>
<span id='d' style="display:none;"><?php echo substr($details,0,$len) ?></span>
<script>
var len=370;
while($('#d').width()>len){
<?php
$len=$len-1;
echo "<span id='d' style='display:none;'>" . substr($details,0,$len) . "</span>";
?>
}
<?php echo substr($details,0,$len); ?>
</script>
So I take my string's first 100 letters and put them in a span with id d. Then in JavaScript, I get its width and check in while loop. I run while loop (keep decreasing $len) until the pixel length of the substring is within desired width and keep redifining that substring in span with same id. Then I print that substring.
Could someone please change the code to make it work or suggest a better method? I am newbie in this, so please make it as simple as you can.
As far as I understand from your question, you are trying to hide an overflow when the string is longer than container given?
I would rather suggest using overflow:hidden; white-space:nowrap; and maybe some text-overflow:ellipsis; to make "..." effect just before the end of container. But you have to remember, that fonts render differently through most browsers and operating systems, so the user experience might be different on Windows than on Mac.
That probably won't work. JS and PHP can't be mixed like that. The while loop is useless.
One solution that came to my mind is that you can first get the PHP string, through ajax, and then display it according to the width using JS.

Javascript If statement to run some html code

I've got a little bit of javascript embedded in my html (using a .aspx file). I want to perform some sort of if statement which then determines whether or not some sort of chart is displayed. This chart is displayed using html, and I'm assuming the if statement should be written in javascript. However, I don't really know how to "run" this html code from within java. It is basically just drawing a table. Any suggestions? I've seen document.write, but I've only seen that being used with single lines.
You don't really "run" an HTML code. HTML is a markup language and it is mostly used to format and arrange elements that are displayed in the web browser.
The problem you are probably trying to solve is: Display or hide an element based on some condition. A JavaScript code like this is what you want.
if (condition) {
document.getElementById('chart').style.display = "none"
} else {
document.getElementById('chart').style.display = ""
}
Of course whatever element is responsible for displaying the chart should have an id="chart" attribute. e.g. <div id="chart"><!-- Chart related code goes here --></div>.
The JavaScript code I have given alters the display CSS property of this element to hide it or make it visible.
In case this is not what you want but you want to dynamically modify the HTML responsible for the chart, then you need to use the innerHTML property of the element.
Example:
if (condition) {
document.getElementById('chart').innerHTML = "<!-- HTML Code for the chart here -->"
} else {
document.getElementById('chart').innerHTML = ""
}
I'm assuming the if statement should be written in javascript
Unless you are testing something that you can only find out out in JS, then do it server side in your ASP.NET code.
I don't really know how to "run" this html code from within
This is covered by chapter 47 of Opera's WSC: Creating and modifying HTML. You may wish to read some of the earlier chapters first.
java
Java has about as much in common with JavaScript as Car does with Carpet. They are completely different programming languages.
Try writing the if statement in javascript and then rendering the html with the JQuery html() function. Just use a custom html id to locate where you want the html code to go.
<div id = "custom-tag"> </div>
<script>
if (true){
$('#custom-tag').html('YourHtmlString');
} else {
$('#custom-tag').html('DifferentHtmlString');
}
</script>
Read more about html() here: http://api.jquery.com/html/
YourHtmlString & DifferentHtmlString is where you should store your custom html in string format. It will then be rendered wherever you included "div id = 'custom-id'
Hope this helps!

Categories