I am using this script code but it display the font blurry.How it solve the problem
$(document).ready(function() {
console.log("Doc is ready");
$('#pdf').click(function() {
var pdf = new jsPDF('portrait', 'mm', 'letter');
var options = {
pagesplit: true
};
pdf.addHTML($('body'), 0, 0, options, function(){
pdf.save("Report10.pdf");
});
})
})
</script>
I also had same problem with jsPDF export for Highcharts and AngularJS. I have found one solution for this. I don't know why jsPDF behaves like this, but this solution Solved my problem. :)
You can check screenshot
Step 1) Add one empty div with id before your graph element div.
<div id="tempStyleDiv"></div>
Step 2) Write CSS selector for text element of your graph and assign property display:none. Here I have used inspect element of chrome browser to find CSS selector. You need to add following line of js code just before pdf.addHTML() function.
$('#tempStyleDiv').append("<style>.highcharts-container>svg>g>text{display:none;}</style>");
Step 3) After successfully export of pdf, now we need to remove display:none property. So just add following line after pdf.save(),
setTimeout(function(){$('#tempStyleDiv').html("");},2000);
Related
I've added some custom elements to be included with my WooCommerce account page to be seen with the order history. Unfortunately the page is setup with tabs to only display the information pertaining to the active tab.
I'm not very familiar with jquery, but I thought it would be simple enough to use Jquery to hide the divs I added when the order history has a display of none.
I added the following script to my theme's main.js file:
$(document).ready(function(){
var display = $('.my_account_orders');
if(display.css("display") == "none") {
$('.paging-nav').css("display","none");
}
});
When the class .my_account_orders has a display of none it should change the div I added (.paging-nav) to have a display of none. But it just doesn't work.
Is there something wrong with this script or do I need to do something special to initiate it? Since it's in my theme's main.js file and I used $(document).ready(function() I figured it would just load with the page.
Any help with this would be greatly appreciated.
Instead of using:
var display = $('.my_account_orders');
Implement it into the if statement like this:
if($('.my_account_orders').css("display") == "none") {
Because originally it is trying to find a variable called $display, so it would return a syntax error of undefined.
You've got an errant $ in your if statement. This should work instead:
$(document).ready(function(){
var display = $('.my_account_orders');
if(display.css("display") == "none") {
$('.paging-nav').css("display","none");
}
});
Also keep in mind that your var display is only going to match the first element that has a class of my_account_orders, so if there are multiple elements with that class, and they don't all have the same display, you could get unexpected results.
Try this:
$(document).ready(function(){
var display = $('.my_account_orders');
if(display.css("display") == "none") {
$('.paging-nav').css("display","none");
}
});
I believe it's a very lame way to check for a css property such as display to determine if an element is hidden or not. With jquery, you can make use of :hidden selector which determines whether an element is hidden and return a bool value.
$(document).ready(function(){
if($('.my_account_orders').eq(0).is(":hidden")) // eq(0) is optional - it basically targets the 1st occurring element with class 'my_account_orders'
{
$('.paging-nav').css("display","none");
}
});
Example : https://jsfiddle.net/DinoMyte/sgcrupm8/2/
I'm using http://snapsvg.io/
When the user clicks on a chip to bet it should show an svg image with the chip color, then if the user clicks another chip it shoud show that new chip. And it does but I'm not being able to remove the content before appending a diferent svg content, so what's happening is that svg gets put on top of previous svg.
I don't really want to append more content, I want to replace it. But I don't seem to find any other option besides .append()
That's why I try to .removeData() before appending but is not working. It keeps putting the next svg image on top of the previous one.
I hope I'm making a little sense here.
This is how my code looks like on react.
componentWillReceiveProps () {
if (this.props.chipSelectedSvg) {
const tipChipSnap = snap('#tipChip');
const tipChipSvgContent = Snap.parse(this.props.chipSelectedSvg.content);
tipChipSnap.removeData();
tipChipSnap.append(tipChipSvgContent);
}
}
render () {
return (
<div id="tips-tooltip-container" style={{visibility : tooltip}}>
<svg id="tipChip" className="chip" viewBox="-15 -20 120 120"></svg>
</div>
}
Use the Element.remove() method.
http://snapsvg.io/docs/#Element.remove
I am trying to implement a webpage which should have expected to have the following properties.
The HTML page contains many lines of text (thousands of lines), basically a log file.
Upon a desired action, line which is related to the action should be highlighted and shown . (exactly the way that would happen if you click on corresponding source button of a logged variable in chrome inspect element.)
This seems to be very basic but I couldn't figure out how! May be I am missing some literary terms.
Thank you.
You need to do a few things:
$("li").each(function(i, element) {
var li = $(element);
if (li.text() == "Orange") {
li.addClass("selected");
// Get position of selected element relative to top of document
var position = li.offset().top;
// Get the height of the window
var windowHeight = $(window).height();
// Scroll to and center the selected element in the viewport
$("body").scrollTop(position - (windowHeight/2));
}
});
See DEMO.
There are many ways to go about this. But is there any class tags in the logged source or is just one large text block?
If there are class or id tags on the html you can use javascript or jquery to do this.
document.getElementById('myText');
or in jquery
var element = $("#myText");
//example css changes
element.css("position","center");
element.css("color","red");
Then change the css style on those html elements.
I am now using jQuery tooltip plugin to create some quick reminders for users during data input. Here is the jQuery tooltip I am using:
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
However, I have encountered a problem.
How can I add a new line in the body of the tooltip?
I have tried the following codes, but still cannot get it done.
?
?
So could anyone help me on this issue?
Thanks~
I think
<br/>
should do the trick.
For example:
?
Do you mean a line break? I'd recommend using a CSS rule to add a margin to the anchor tag. Else insert some <br />'s between the 2 a tags.
You could "encode" your line breaks and use the bodyHandler attribute, like:
The documentation shows examples of linking to a #id in the href, which will display the content of that #id. So place a element with your and #id somewhere on your page, and specifiy that as the tooltip, like:
<a id="yourLink" href="Hello#world">Some text</a>
$("#yourLink").tooltip({
bodyHandler: function() {
var href_value = $(this).attr("href");
return href_value.replace("#","<br/>");
}
});
I'm using it this way (jQuery 1.9 and standard tooltip function):
$(".myClass").tooltip({
content: function() {
return $(this).attr('title');
}
})
And then in the title you can use HTML
Example:
<span title="Line1 <br> Line 2 <br> <b>Bold</b><br>">(?)</span>
You can't just paste the HTML as string, as other people said you have to use content.
I have a form in which I want to edit a HTML template. It has 2 textareas, one for the HTML and another one for the CSS.
I'd like to use either TinyMCE or CKEditor for the HTML textarea.
Is there any way to change the content CSS in either of them to match the CSS in the CSS textarea on the run, so when I change the CSS it is automatically loaded into the editor?
Thanks.
I have no experience with CKEditor, but i know that it is possible with TinyMce. What you need to do is to write an own plugin which will provide the necessary functionality.
OnNodeChange in the 2nd textarea (the one with your css) you need to update the head of the first editors iframe. This code snippet to be executed on a special action (for example onNodeChange) should point you into the right direction:
var DEBUG = false;
var css_code = tinymce.editors[1].getContent(); // get content of 2nd editorinstance on page (your css)
iframe_id = tinymce.editors[0].id+'_ifr';
with(document.getElementById(iframe_id).contentWindow){
var h=document.getElementsByTagName("head");
if (!h.length) {
if (DEBUG) console.log('length of h is null');
return;
}
var newStyleSheet=document.createElement("style");
newStyleSheet.type="text/css";
h[0].appendChild(newStyleSheet);
try{
if (typeof newStyleSheet.styleSheet !== "undefined") {
newStyleSheet.styleSheet.cssText = css_code;
}
else {
newStyleSheet.appendChild(document.createTextNode(css_code));
newStyleSheet.innerHTML=css_code;
}
}
Be aware that this code will add a new style sheet everytime it is called - yielding in increasing the editor iframes head. So i think best practice is to clean up the last inserted style before appliing the new one. Removing the last Node of the head shozld be sufficient.