html2Canvas image border radius - img vs class css - javascript

I am using html2Canvas library version 0.4. In one particular case, I am trying to add border radius to an image. This works if I add this to the CSS:
img{
border-radius:50%;
}
But instead if I specify a class with same properties, and add that class to the image, then the border radius is not respected. I want this to work because not all images need the border radius.
Here is an example fiddle. Please click "Run" first, so the image is loaded.
The actual code JavaScript library is copied in the JavaScript section of the fiddle. Can someone help with where is this happening inside the JavaScript so I can fix this?

I think the problem is that when you create your image you don't specify a class, try adding this line before you append the image to your div :
img.className = "ab";

Related

How to get the url of an img to set it as background image of a div?

I got 3 external images and a div, I need that when I place the mouse over any of the 3 images that image gets to be the backgroundImage of the div and when I mouse out of the div I need the div to get it's original background.
My CodePen
That's how far I could get but my code only shows the first of the three images and I know it's because of the index 0 but I just don't know how to solve it. Please guys help me out I beg you!
I think your problem is that you are always trying to get only first element from array of images in JS file line 6. You should have write it like this instead:
let source = previewPic.getAttribute('src');
you can use :hover to do that
.div1:hover{
background-image : 'url/path'
}
.div2:hover{
background-image : 'url/path'
}
.div3:hover{
background-image : 'url/path'
}

How to Animate Some Text to a Random Place in a Circular Div

Hope So All Of You are Fine.
I have an assignment in which i have to animate some image to a circular div container at its any random place.
Right Now, I had done this Already.
jsfiddle.net/f4p6b/137
But The Problem is that the Container in jsfiddle is not Circular.
I want a Circular div container and image should drag/animate automatically on page load at some random place every time.
Kindly help me with the help of above jsfiddle code.
Thanks.
Add the following css property to make your container circular
border-radius: 50%;
As mentined above, you can add the border-radious:50% attirubute to make your Div circular.
Check out this JSFiddle:
http://jsfiddle.net/internetbird/f4p6b/139/
Check out this updated fiddle :
http://jsfiddle.net/internetbird/f4p6b/141/
I added a function which produces a random point inside the circle (with a little math, which you can find more explination here: Simplest way to plot points randomly inside a circle )

Dynamically edit .svg file that's set as background image

I added an svg image to the background of a div.
div#cover{
background-image:url('dwm.svg');
}
I would like to know if there is any way I could dynamically edit certain aspects of this svg such as fill, stroke , etc.
You can try having the svg as part of the DOM, do the modification and then set the background as a data uri of the modified svg pulled from the DOM.
While this might be kind of hacky it works
$('#bg').css('background-image', 'url(data:image/svg+xml;base64,'+btoa($('#svg').html())+')');
$('button').click(function(){
$('#fill').attr('fill', '#ff00ff');
$('#bg').css('background-image', 'url(data:image/svg+xml;base64,'+btoa($('#svg').html())+')');
});
<div id="bg"></div>
<div id="svg">[svg data]</div>
http://jsfiddle.net/zSRW5/
If you don't want to embed the svg you can always use ajax to get it.
No. I believe you can only do that if you embed the SVG within the page and reference it and even then, you would have to change the background value to something else and back to the reference, due to browser bugs.

How to make custom TinyMCE button in Wordpress change icon on hover

I created TinyMCE plugin for Wordpress editor to insert Youtube videos. Everything works fine except this button has no hover state (like the default buttons have). I explored the code and found a difference - default buttons are spans with background-image sprite, and my custom button is a plain image. There's no option in TinyMCE addButton() function to insert a span, only image:
ed.addButton('p2_youtube_button', {
title : 'Insert Youtube video',
cmd : 'mceYoutube',
image: url + '/shortcode-youtube.png'
});
Is there a way to solve this little problem?
To illustrate how it looks (the red Youtube icon should be gray and turn red on hover):
http://d.pr/aszC
I noticed that the Crayon Syntax Highlighter plugin has managed to do this. It is a bit of code to read through, I found the tinyMCE specific part in /wp-content/plugins/crayon-syntax-highlighter/util/tag-editor/crayon_tinymce.js . I hope this helps.
The style which causes the highlight is here:
.wp_themeSkin span.mce_crayon_tinymce {
background: url(images/crayon_tinymce.png);
}
.wp_themeSkin .mceButtonEnabled:hover span.mce_crayon_tinymce,
.wp_themeSkin .mceButtonActive span.mce_crayon_tinymce {
background-position: -20px 0;
}
The image uses the same size as the other TinyMCE icons:
There are additional parameters you can pass to the addButton method that give you some options for how you skin your button.
If you remove the image property and replace it with icon, you can use a font-ified icon instead. This is a multi-step process, which starts with actually building your icon font. Here's a good tutorial that walks you through the process. The tutorial author recommends IcoMoon as a reliable way to build your icon fonts. There are probably others.
The way that I use is similar to #feonix83's approach, using CSS instead. Following the way WordPress itself does it, you lay your icons out in a sprite sheet, with the "hover" state 20px above the "off" state. If you don't know what I'm talking about, take a look at the defalt WordPress icon sprite sheet: wp-includes/images/wpicons.png
If you remove the image property altogether, TinyMCE just puts a span of class mceIcon inside the button anchor block. It's quite easy then to style that element and use the background-image referencing your sprite sheet. You use background-position to set the offset for the appropriate icon.
There's one additional trick that you can use to help you target only your buttons. You can add a class property to the addButton call and pass any number of classes. You will need to manually specify a specific class that can be used to target that button in particular, but you can also pass in an additional class that can be used to style all your buttons at once, since they won't automatically inherit the styles that WordPress uses.
class: "my-buttons my-specific-button"
Here's the CSS that I use. Note that this approach works best when each button has its own individual sprite sheet, as opposed to the WordPress approach that loads all the icons at once, though that approach has some performance benefits that are not to be ignored:
.mceButtonEnabled:hover span.mceIcon.my-buttons { background-position: 0 0; }
span.mceIcon.my-buttons.my-specific-button { background: url( images/my_button.png ) no-repeat 0 -20px; }

How to hide img elements that do not have src attribute, until the attribute is added?

My JS code includes some images that are empty at the beginning
(without src attribute specified at all + display:none).
When added to sites with CSS1 compatibility I see broken image icon where the image should be even though the images are supposed not to be displayed (display:none).
Any idea how I can hide the broken image icons?
Notes:
I don't want to load empty images.
I tried width and height= 1px or 0px . didn't work.
specifying src="" also gives empty image icons.
Edit:
I found the solution:
add style="display:none" to the img definition (Not in CSS)
Have you tried wrapping the images inside a div and hiding the div instead?
My JS code includes some images that are empty at the beginning (without src attribute specified
That's not a valid state for an image. Best use a placeholder transparent image or leave the image out of the DOM until you can set a ‘real’ src attribute.
I see broken image icon where the image should be even though the images are supposed not to be displayed (display:none).
Doesn't happen for me, either ‘display: none’ or ‘visibility: hidden’ removes the visible image from the page. Example code demonstrating the problem, and which browser(s)?
The solution is quite simple:
add style="display:none" to the img definition (Not in CSS)
how about just having a placeholder div tag and replacing it with an image when the time comes to show the image? any decent ajax framework (e.g. jQuery) will make this easy to do so it works across all major browsers
in addition to display:none, maybe try setting visibility:hidden
If you are using a JavaScript library it may be worth applying a class to name to all of these images and letting the library handle it. Prototype example using a class name of myImages would be
var images = $$('.myImages');
if (image != null)
{
for (int i = 0; i < images.Length; i++)
{
images[i].hide;
}
}
You would still need to add the style attribute style="display: none;" to the images

Categories