I am trying to implement html2Canvas v 1.0.0-rc.1 in my Angular 7/Ionic 4 project.
The issue I have is when I try to get the canvas of a simple div, the return canvas is emptied and nothing is appended to my destination div using *.appendChild as per the documentation.
For debugging I console log the return canvas where it looks like this:
<canvas width="0" height="0" style="width: 0px; height: 0px;"></canvas>
Below is my code and console logs. I've tested in Safari 12 and Chrome 74. What am I doing wrong? Thanks in advance
HTML
<ion-content>
<div id="destination">
Destination - Html Canvas to Append to This
</div>
<div id="cover">
Source - Hello World
</div>
</ion-content>
Javascript/Component
printTest(): void {
let element = document.getElementById("cover");
console.log('Source Element', element);
html2canvas(element).then((canvas) =>{
console.log('Console Canvas', canvas)
var destination = document.getElementById('destination');
destination.appendChild(canvas);
});
}
Console Logs
Related
i've been using Bootstrap 3 for a new project and it's being great so far.
The only issue i'm getting is that i need to make a few panels stick to the top of the browser when scrolling down.
I'm trying to use the Sticky-kit but it's not working for me.
HTML
<div class="row" data-sticky_parent>
<div class="col-sm-5" data-sticky_column>content 1...<div>
<div class="col-sm-7">content 2...<div>
</div>
Javascript
$(".col-sm-5").stick_in_parent();
<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/jquery.sticky-kit.min.js"></script>
Does anybody know why is the script not working?
Cheers,
Thales Ribeiro
in Bootstrap 3 you can use the build in Affix plugin (http://getbootstrap.com/javascript/#affix) to stick any content you want.
Here an example http://bootply.com/103035.
You have to tell js which div (ex.:#alert) you want to stick, and the footer div (ex.:#footer).
$( document ).ready(function() {
$('#alert').affix({
offset: {
top: 100
, bottom: function () {
return (this.bottom = $('#footer').outerHeight(true))
}
}
})
});
And create a custom css to .affix, which is the state when the div is sticked.
After the app menu html is retrieved, it is displayed as text instead of html. Chrome complains Resource interpreted as Script but transferred with MIME type text/plain. I'm using MVC on the Force.com platform. I've tried specifying the content type of the response as "text/html" and "application/javascript", but neither worked.
[EDIT 1]
Code
<script>
intuit.ipp.anywhere.setup({
menuProxy: "https://c.na55.visual.force.com/"
+ "apex/bluedot",
grantUrl: "https://c.na55.visual.force.com/"
+ "apex/authpage"
});
</script>
<ipp:bluedot>
<div id="intuitPlatformAppMenu">
<a id="intuitPlatformAppMenuLogo" href="javascript:void(0);" title="Intuit App Center">
<span id="intuitPlatformAppMenuDot"> </span>
</a>
<div id="intuitPlatformAppMenuDropdown" style="display: none;">
<div id="intuitPlatformAppMenuDropdownTop"></div>
<div id="intuitPlatformAppMenuDropdownInner">
<<=======
</div>
</div>
</div>
</ipp:bluedot>
When dropdown is open, code is added at arrow location as string and a class 'open' is addedto #intuitPlatformAppMenuLogo.
Image
[EDIT 2]
Server side apex code
public with sharing class GetBlueDotMenu {
public String response {get; set;}
public GetBlueDotMenu() {
QbApiController api = new QbApiController ('GET', 'QB API' , null, null, 'https://appcenter.intuit.com/api/v1/Account/AppMenu');
response = api.execute();
}
}
api.execute() returns the response body and saves it to response which is then rendered on the page.
This issue arises from Visualforce's default rendering of strings as escaped. To fix it, the apex:outputText attribute escaped needs to be "false". See http://bit.ly/13CSXve
PFB link -
https://developer.intuit.com/docs/0025_quickbooksapi/0060_auth_auth/widgets/blue_dot_menu
For IE8, you should add (as mentioned in the above doc)
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ipp="">
You can clear the browser's cache and try it again.
Plz let me know how it goes.
Thanks
I have site where i used addthis sahring icons code to display the scocial sharing icons. Fb like button is not coming in mozilla but it is working fine in chrome & safari.
I used the below code for displaying the sharing icons as get from addthis site https://www.addthis.com/get/sharing?frm=hp#.UDrCVsHib-s
<div class="addthis_toolbox addthis_default_style ">
<div id="fb-root"></div><a class="addthis_button_facebook_like" fb:like:layout="button_count" ></a>
<a class="addthis_button_tweet" ></a>
<a class="addthis_button_pinterest_pinit" ></a>
<a class="addthis_counter addthis_pill_style" ></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-5022bfc615892c77"></script>
Use this Code for sharing on Facebook, i have use this tons of time and each time i get success, change the sequence if you want...
<span class='st_fblike_vcount'></span>
<span class='st_twitter_vcount'></span>
<span class='st_plusone_vcount'></span>
<span class='st_email_vcount'></span>
<span class='st_sharethis_vcount'></span>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "782110c4-838d-408f-8393-98897995ced4"}); </script>
Go to wp-content/plugins/facebook-like-box-responsive/facebook-like-responsive.css
e.g http://blogs.tarungupta.info/wp-content/plugins/facebook-like-box-responsive/facebook-like-responsive.css
remove !important
/* To fill the container and nothing else */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe {
width: 100%;
}
/* To fill the container and nothing else */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe {
width: 100% !important;
}
I have the following code:
<img style="background: url(./image/data/logo.png) no-repeat top right" src="./image/data/picture.jpg" />
As it is now, it shows the logo.png under the picture.jpg image. How can I make it to be shown above the .jpg image?
Thanks.
You must use 2 images to do that. The img must be with position absolute (The one that you want to be over the other). Don't forget that the container must have position:relative in order to contain the absoluted png.
Here is the example:
http://jsfiddle.net/jNpaH/
The html tags:
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png"
class="png-over" />
<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png"
/> </div>
The styles:
.image{position:relative}
.png-over{position:absolute; top:0; left:0}
The problem with that technique is that your code becomes spammed with the image tags.
One way of solving it with jQuery is to find each div container with the class 'images' and prepend to each one the image tag.
Here is the example:
http://jsfiddle.net/jNpaH/2/
According to your code I assume that you prefer to have a short html code. But it is impossible to have an image_tag with a background covering it.
The cleanest way is to use jQuery:
This is the final code:
http://jsfiddle.net/QyMkh/
First put a div that will contain all your images. The div must have a class, the images don't require it necessarily.
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" />
<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" />
<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" />
</div>
Then add this jQuery block in the html before the closing </body>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
// store in a variable the url of the image that will be used as background
var url = 'http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png';
// select every image_tag that is children of the div with the class 'image'
jQuery('.image img').each(function() {
// every child image will be wrapped inside generated divs with a class 'img-wrap'
$(this).wrap('<div class="img-wrap"></div>');
});
// After the images are wrapped, insert the image tag that will work as background, note that instead of using the source I'm using the variable that stores it.
$('<img src="' + url + '" class="logo" />').prependTo('.img-wrap');
</script>
Finally add those style declarations to get the desired effect.
<style type="text/css">
.img-wrap{position:relative}
.img-wrap img.logo{position:absolute; top:0; left:0}
</style>
This code will keep your html documents with no unnecesary markup when you try to edit next time.
An advantage of using an image_tag as a background, is that with css you can resize its width and height. Try adding this new rule of stylesheet:
.img-wrap img.logo { height: 170px; left: 75px; position: absolute; top: 50px; width: 170px}
To end this, if you want more flexibility, for example you don't want the image_tags be container in a div, do this actions: replace this line of the jQuery block:
jQuery('.image img').each(function() {
with this
jQuery('.image').each(function() {
and add a class="image" to each
<img class="image">
I have a gallery of 5 thumbnails and one larger image. I have jqZoom tied to the large image so when you mouse over it, you can see a zoomed in version.
I'm having trouble when a user clicks an alternate thumbnail. I can get the larger image to change, but the zoomed in image remains the original image. I can't make jqZoom change the zoomed in image to match the thumbnail.
Here is an example of what I'm trying to do. You click on the text and the thumbnail changes, but the larger jqZoom image remains the same. How do I change this so that jqZoom loads the new image in the zoom area?
<script type="text/javascript">
$(function() {
var options = {
zoomWidth: 250,
zoomHeight: 250,
showEffect: 'fadein',
hideEffect: 'fadeout',
fadeinSpeed: 'fast',
fadeoutSpeed: 'fast',
showPreload: true,
title: false,
xOffset: 100
};
$(".jqzoom").jqzoom(options);
});
function changeImgSrc() {
document.getElementById('bigImage').src = '4.jpg';
document.getElementById('smallImage').src = '3.jpg';
var options = {
zoomWidth: 400,
zoomHeight: 400,
showEffect: 'fadein',
hideEffect: 'fadeout',
fadeinSpeed: 'fast',
fadeoutSpeed: 'fast',
showPreload: true,
title: false,
xOffset: 100,
containerImgSmall: '3.jpg',
containerImgLarge: '4.jpg'
};
$(".jqzoom").jqzoom(options);
}
</script>
</head>
<body>
<div id="content" style="margin-top:100px;margin-left:100px;">
<a id="bigImage" href="2.jpg" class="jqzoom" style="" title="Product Zoom">
<img id="smallImage" src="1.jpg" title="Product Zoom" style="border: 0px none;">
</a></select>
<br>
<div id="img" onClick="document.getElementById('bigImage').src = '4.jpg';changeImgSrc();">click here to change source</div>
</div>
Thanks for your help!!
A simple way is to unbind the jqZoom whenever the image changes and then re-bind it once you've changed the source of your main pic
var jqzoomOptions = {
zoomWidth: 438,
zoomHeight: 390,
title: false
}
$("#mainPic").jqzoom(jqzoomOptions);
/* image thumbs */
$("#productPicThumbs a").click(function(){
// change pic source here
$("#mainPic").unbind();
$("#mainPic").jqzoom(jqzoomOptions);
return false;
});
I had similar problem with your...
I've got important tips from that site, please check it...
http://paul.leafish.co.uk/articles/drupal/quick_and_dirty_jqzoom_with_drupal_ecommerce_and_imagecache
Old but good js plugin.
I have solved this problem with jQuery, changing the jqimg attribute on the picture source:
$("#foto_produto").attr("jqimg", "domain-url.com/sample3.jpg");
On the following :
<img src="domain-url.com/sample1.jpg" class="jqzoom" jqimg="domain-url.com/sample2.jpg" alt="domain-url.com/sample1.jpg">
Finally obtaining:
<img src="domain-url.com/sample1.jpg" class="jqzoom" jqimg="domain-url.com/sample3.jpg" alt="domain-url.com/sample1.jpg">
You can also applies the jQuery "attr" function to change the "src" and "alt" of that div.
This is how you can clean the data from jqzoom:
$('.jqclass').removeData('jqzoom');
Because jqzoom keeps the data in this object:
$(el).data("jqzoom", obj);
Removing the main image and re-appending it should make it work, here is an example
$('a.main_thumb').jqzoom({ title: false });
$("a.thumb").click(function (e) {
e.preventDefault();
var thumbUrl = $(this).attr("href");
var thumbImg = $(this).find("img").attr("data-img");
$(".main_thumb").remove();
$(".current_thumbnail").append("<a href='" + thumbUrl + "' class='main_thumb'><img src='" + thumbImg + "' /></a>");
$('a.main_thumb').jqzoom({ title: false });
});
With the last version of jQZoom you can create galleries (jQZoom can manage it for you).
1.Attach the gallery ID to your main anchor "rel" attribute.
<a href="images/big-1.jpg" class="zoom" rel="gallery-1">
<img src="images/small-1.jpg" />
</a>
2.Manage your thumbnails "class" and "rel" attributes.
The class zoomThumbActive is attached to your thumbnails by jQZoom. By default specify this class to the selected thumbnail (it should be the same image in your main anchor element)
<ul>
<li>
<a class="zoomThumbActive" href="javascript:void(0);" rel="{
gallery: 'gallery-1',
smallimage: 'images/small-1.jpg',
largeimage: 'images/big-1.jpg'
}">
<img src="images/thumbnail-1.jpg">
</a>
</li>
<li>
<a href="javascript:void(0);" rel="{
gallery: 'gallery-1',
smallimage: 'images/small-2.jpg',
largeimage: 'images/big-2.jpg'
}">
<img src="images/thumbnail-2.jpg">
</a>
</li>
<li>
<!-- ... -->
</li>
</ul>
The structure of the thumbnail rel attribute is very important.
The base elements are :
gallery: the ID of the gallery to which it belongs,
smallimage: the path to the small image (loaded when you click on the
thumbnail),
largeimage: the path to the big image.