I am using html2canvas library for converting a div to png.
I have an issue about z-index. As you can see on image, I have boxes. Inside a box I have a div for background coloring (z-index: 0), its growing with height value and a div for number (z-index: 1). It works fine on browser as usual but when I try to take image, it seems like z-index doesn't work.
normal on browser:
issue on image version:
Any help, I will be grateful.
Have you checked this: for z-index to work correctly, every element that has one must also have a position set ( e.g.position:relative )...
I got the same issue. And I found out that html2canvas ignores z-index and just follows the order of div when it draws div to img. For example,
<div id=1 zIndex=2></div>
<div id=2 zIndex=3></div>
<div id=3 zIndex=1></div>
If all these divs are overlapping, divid2 comes forward then divid1 and divid3 in webpage since it cares about the zIndex.
html2canvas only cares about the order of divs ignoring zIndex which means divid1 comes forward and divid2 comes behind divid1, and divid3 comes behind div2. I tested multiple times.
I hope it would be helpful.
I had to add position:"relative" to every element at the same level as my images.
Try the following steps and see if one of them works for you:
Try to put high z-index values for different divs. Example: .div1 {z-index:1} .div2{z-index:10000).
Try to every div that you defined a z-index, define a position to him.
Try put the div's with greatest z-index value with position absolute/fixed.
If you are testing it in localhost, You can do so by passing one of the options in the html2canvas function.
html2canvas(document.body,
{
useCORS: true, //By passing this option in function Cross origin images will be rendered properly in the downloaded version of the PDF
onrendered: function (canvas) {
//your functions here
}
});
Related
I am trying to apply a css zoom effect on an img and when I do the jQuery function offset() seems to return the wrong value.
I have created a little jsFiddle Example of my problem that shows the issue I am having. Please check this out in Chrome because that is the browser I am experiencing this problem in (I don't think
If you click on the show frog offset button it will show a value of 219 for the offset().left of the frog img, then if you press the zoom button the from will be zoomed by 2.0. If you then press the show frog offset button again, you will see offset().left of 101.5 for the frog img.
Here is the code I use to zoom and unzoom the frog's img in my jsFiddle Example (also linked above)
$("#zoom-frog-button").click(function() {
$(".frog-img").css("zoom", 2.0);
});
$("#unzoom-frog-button").click(function() {
$(".frog-img").css("zoom", 1.0);
});
This appears to be working correct. When you use the zoom styling property, it increases/decreases the size of the element you apply it to. So, when thinking of offset() returning the position relative to the document, this image zooms at a setting of 2, doubling it's size, and in return, cutting it's offset() in half. The document size isn't changing, but the image is. I think this is what you are thinning is an issue? Hopefully that helps you! Happy coding!
I use this script to toggle a div with an animation. It works like a charm, except that the content below the div to toggle moves jumpy when .click is triggered.
$('.toggle').click(function() {
var $toggled = $(this).attr('href');
$($toggled).siblings('.gallery:visible').hide();
$($toggled).toggle("slide", {direction: 'up'}, 750);
return false;
});
How can I have the content below to slide "gently" (as content of toggled div does)? Thanks in advance! :-)
I can't understand your call to .toggle with regards to the documentation. The order of parameters, their values, just don't match the documentation.
I have tried to use .slideToggle() - it works perfectly.
Try use thumbnails instead.
Use any program to change their size to the "slidedown" size. Change the <img> src to the thumbnail (smaller image) and change the <a> url to the actual size.
The website is loading the large size and then rezise them. This is my best guess why its feels laggy correct me if im wrong.
Good luck!
Hint: Try using a small image on every slot before you create thumbnails and see if it is actually causing the trouble.
I'm trying to create a web design and there are a bit strange forms, something like this:
when the user hover on 1 section the background should change only for it:
the same for the second and third one:
Hope I'm clear...
I have no idea what technology should I use in order to achieve this affect. Can anyone please help?
Could use absolutely positioned pngs with image replacement on hover, then throw a rectangular div inside there
There are two ways:
use SVG to draw the shapes, with a fallback for older versions of IE.
Use background images. on normal shaped divs.
I would go with three separate images, each with the whole background and one "selected" area - on hovering a div just replace the background to the one having that div as "selected".
Quick example for the JS code:
function ReplaceBg(oDiv, num) {
oDiv.parentNode.style.backgroundImage = "url(images/background_" + num + ".png)";
}
function RestoreBg(oDiv) {
oDiv.parentNode.style.backgroundImage = "url(images/background.png)";
}
And the HTML:
<div style="background-image: url(images/background.png);">
<div onmouseover="ReplaceBg(this, 1);" onmouseout="RestoreBg(this);">First</div>
<div onmouseover="ReplaceBg(this, 2);" onmouseout="RestoreBg(this);">Second</div>
<div onmouseover="ReplaceBg(this, 3);" onmouseout="RestoreBg(this);">Third</div>
</div>
Hope the idea is clear enough..
There is a CSS3 syntax boreder-radius and you can do this with it, but you had do the work here , I mean you had set the random pixels and look for the one which suits best. For example here it is -- http://jsfiddle.net/divinemamgai/Ld7He/
OR
Maybe you should keep the main background image as white for images 1 and 3 and for image 2 use png
based background-image and change it on mouseover using Jquery and don't forget to keep the highest z-index for image 2.
Hope this helps you.
May this help http://jsfiddle.net/JeaffreyGilbert/G3VG7/
I am trying to make a div which expands to show hidden content when hovered over. However there seems to be a random space in between images inside the div, hence a premature onmouseout method call. Is there any way to get rid of this problem?
Check out a live version here.
The onmouseout event bubbles.
Therefore, you get the event whenever the mouse moves out of one of your child elements.
You need to check event.target and make sure it's the <div> element. (Or use jQuery's hover method)
Where exactly is the problem? is it the black space between the first two car images when you hover over the first car?
The div is expanding to more than what the image width is. set the width of the image to be 300px.
Then try setting margin,border,padding to zero on all container divs
div.itemHolder {
border:0 none;
margin:0;
padding:0;
}
I think that since you are setting both the height AND width properties, that the image is coming up with a weird aspect ratio. try setting only one of them. If that is not a part of your worries, please ignore
I must not have explained this clear enough, but we managed to fix the issue.
Many thanks for the responses.
So I have this page here:
http://www.eminentmedia.com/development/powercity/
As you can see when you mouse over the images the div slides up and down to show more information. Unfortunately I have 2 problems that i can't figure out and I've searched but haven't found quite the right answer through google and was hoping someone could point me in the direction of a tutorial.
The first problem is that when you mouse over an image it changes to color (loads a new image), but there's a short delay when the image is loading for the first time so the user sees white. Do I have to preload the images or something in order to fix that?
My second problem is that when you move your mouse over the 'additional content area' it goes crazy and starts going up and down a bunch of times. I just don't have any idea what would cause this but i hope one of you will!
All my code is directly in the source of that page if you would like to view the source.
Thanks in advance for your help!
Yes, you have to preload the images. Thankfully, this is simple:
var images_to_preload = ['myimage.jpg', 'myimage2.jpg', ...];
$.each(images_to_preload, function(i) {
$('<img/>').attr({src: images_to_preload[i]});
});
The other thing you have to understand is that when you use jQuery you have to truly embrace it or you will end up doing things the wrong way. For example, as soon as you find yourself repeating the same piece of code in different places, you are probably doing something wrong. Right now you have this all over the place:
<div id="service" onmouseover="javascript:mouseEnter(this.id);" onmouseout="javascript:mouseLeave(this.id);">
Get that out of your head. Now. Forever. Always. Inline javascript events are not proper, especially when you have a library like jQuery at your disposal. The proper way to do what you want is this:
$(function() {
$('div.box').hover(function() {
$(this).addClass('active');
$(this).find('div.slideup').slideDown('slow');
}, function() {
$(this).removeClass('active');
$(this).find('div.slideup').slideUp('slow');
});
});
(You have to give all the #industrial, #sustainable, etc elements a class of 'box' for the above to work)
These changes will also fix your sliding problem.
I can see your images (the ones that are changing) are set in the background of a div. Here is a jquery script that preloads every image found in a css file. I have had the same problem in the past and this script solves it. It is also very easy to use:
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
I will take a look at your other problem...
1) You should be using the jquery events to drive your mouseovers. Give each div a class to indicate that its a category container and use the hover function to produce the mouseover/mouseout action you're after.
html
<div id="industrial" class="category"></div>
Javascript
$(".category").hover(
function () {
$(this).find('.container').show();
},
function () {
$(this).find('.container').hide();
}
);
I simplified the code to just do show and hide, you'll need to use your additional code to slide up and slide down.
2) Yes, you need to preload your images. Another option would be "sprite" the images. This would involve combining both the black and white and colour versions of each image into a single image. You then set it as the div's background image and simply use CSS to adjust the background-position offset. Essentially, sliding instantly from the black and white to colour images as you rollover. This technique guarentees that both images are fully loaded.