This question has been asked before but I can't seem to get it to work. Hopefully you can see the error of my ways. The code below will capture the text and gray div but not the image.
<div id="snapshot" style="left: -60px; height: 1000px; width: 1000px;">
<p>THIS IS A TEXT TEST</p>
<div style="width: 100px; height: 100px; float: left; background: #f0f0f0">
</div>
<img src="http://photos.capturemyarizona.com/photos/LnnOEyWSV4fh846ohaIAQg/display.jpg" />
</div>
$("#myBtn").click ->
html2canvas $("#snapshot"),
background: "red"
onrendered: (canvas) ->
imgSrc = canvas.toDataURL()
popup = window.open(imgSrc)
return
return
<button id="myBtn">Click Me</button>
Here's the fiddle
jsfiddle
OK, well I figured out what the problem is. html2canvas can't capture an image if it's not from the same origin. My images are coming from a CDN.
html2canvas docs
Related
I am working with bxslider and I'd like to have a different animation for the slide's text.
While the slide slides to the left, I'd like the text box to be fixed in the middle and the text to fade in/out.
Any ideas? I've been trying all day
Here is a pen: Codepen
HTML:
<div class="bxslider" id="banner">
<div>
<img src="img" />
<h3 class="msl-title">Test Article</h3>
</div>
<div>
<img src="img" />
<h3 class="msl-title">Test Article</h3>
</div>
<div>
<img src="img" />
<h3 class="msl-title">Test Article</h3>
</div>
</div>
JS:
$(document).ready(function(){
$('.bxslider').bxSlider();
});
CSS:
#banner .msl-title {
width: 80%;
max-width: 350px;
top: 50%;
background: white;
padding: 40px;
position: relative;
margin: auto;
overflow: auto;
display: table;
height: 160px;
text-align: center;
transform: translateY(-65%);
border: 5px solid #61beb1;}
in order to achieving this you need a different aproach, because the box its inside the slider, it is hard to make fixed, but if you put the textbox outside the slider wrapper you can simply control the behaviour with the custom bxslider
$(document).ready(function(){
$('.msl-title').find('a').text(
$('#banner').children().first('div').data('text') );
$('.bxslider').bxSlider({'onSlideBefore':function(el,oldIndex,newIndex){
$('.msl-title').fadeOut(200,function(){
$('.msl-title').find('a').text($(el).data('text'));
$(this).stop().fadeIn(200);
});
}});
});
And using data properties from jQuery you can set the Text for every slide in the div
<div data-text="Slide 1">
Working Demo
https://codepen.io/Teobis/pen/zLpWKM
Hope this helps
Managed to find the solution. Simply take the info from the slider title and print it in an external div
var slideActive = $('.msl-item.active-slide .msl-title.active-text a').attr( "title" );
$( ".slider-title-box h3" ).text( slideActive );
The first line is looking for the slide title and the second line is printing it in the new div.
I gave absolute position to .slider-title-box so it'd fit over the slider.
Hope this helps another trying to achieve this
I have the following question. is it possible to change the fill color of the svg file with the colorpicker. So far I have come to a moment where I can change the color of the background, but it would be best to change the color of the graphics as if it were a background or foreground. I would be very grateful for the help because I am a person who is just learning to program in jquery and does not understand everything yet. Underneath I attach my code. Pictures placed in the diva are changed using the buttons so they change dynamically. Once again, I will be very grateful for your help.
<style>
.inner1
{
width: 500px;
height: 500px;
margin:0 auto;
position: absolute;
margin-bottom:0;
border:solid 2px black;
overflown:none;
}
</style>
<html>
<div id="Image-Holder-fg" class="inner1 " >
<img class="popart1" src ="img/DCIM/Animal/animal5.svg" style="width:
1425px; height: 1425px;" />
<img class="popart2" src ="img/DCIM/Animal/animal6.svg" style="width:
1425px; height: 1425px;" />
<img class="popart3" src ="img/DCIM/Animal/animal7.svg" style="width:
1425px; height: 1425px;" />
<img class="popart4" src ="img/DCIM/Animal/animal8.svg" style="width:
1425px; height: 1425px;" />
</div>
<div id="picker-fg"></div>
</html>
<script>
$('#picker-fg').colpick({
flat:true,
layout:'hex',
submit:0,
colorScheme:'dark',
onChange:function(hsb,hex,rgb,el,bySetColor) {
$("#Image-Holder-fg").css('background-color','#'+hex);
if(!bySetColor) $(el).val(hex);
}
}).keyup(function(){
$(this).colpickSetColor(this.value);
});
</script>
Use the SVG inline, that way you can select an specific node and set the fill using JS.
I have been looking for an answer on how to save a div as an image when I click save. I have looked everywhere but I cant seem to find an answer, I am using DIV and a preview button to convert the div into an image. The closest thing that i found to save as an image was http://jsfiddle.net/epistemex/kyjs655r/ this is close to what i need to save as an image, but the problem is that this is canvas and its not working with my code this is very similar to what I have my code is messy this is very similar https://jsfiddle.net/8ypxW/3/ I would like to integrate the save from the first URL to the second URL.
This is my script it is similar to the second URL
$(function() {
var element = $("#firstshirt"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
allowTaint: true,
logging: true,
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
});
var myform = document.getElementById('myform');
myform.onsubmit = function(e) { /* do some validation on event here */ };
$("#wrapper").hover(function() {
$("#boxes").css("border-color", "red");
},
function() {
$("#boxes").css("border-color", "transparent");
});
.container {
background-color: transparent;
width: 490px;
height: 500px;
border: 2px solid;
position: relative;
overflow: hidden;
/* Will stretch to specified width/height */
background-size: 490px 500px;
background-repeat: no-repeat;
}
.container5 {
background-color: transparent;
width: 220px;
height: 320px;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid red;
position: absolute;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input id="btn-Preview-Image" type="button" value="Preview"/>
<center>
<div id="firstshirt" class="container" style="float:left;">
<center><div id="wrapper"><div id="boxes" class="container5" style="float:center;">
<div data-bind="foreach:items" class="fix_backround">
<div class="item" data-bind="draggable:true,droppable:true">
<center>
<span id="texter" class="text" data-bind="text:$data"></span>
<input class="edit_text"/>
</center>
</div>
</div>
<a href="" download>
<span id="image" class="preview-area"></span>
</a>
</div>
</div>
</center>
<br><br><br><br>
</div>
</center>
<br/>
</center>
</div>
</div>
<center>
<div id="previewImage">
</div>
</center>
The above code is supposed to have an image but I didn't want to add it because that will need more code I want to keep it short and simple inside their is a text box and I want to save the whole div as an image on click just like the first URL
There is several same questions in SO. Saving Div Contents or Canvas as Image
How to take screenshot of a div with JavaScript?
One way of doing it is using canvas. Working solution is http://html2canvas.hertzen.com/
Here you can see some working examples of using this library
Use this library. ..
https://html2canvas.hertzen.com
Now just select the element and size.. it will take a snapshot as image..
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
},
width: 300,
height: 300
});
<div id="social-links">
<div><img src="pictures/facenh.png"/></div>
<div> <img src="pictures/twitternh.png" /></div>
<div> <img src="pictures/ytnh.png" /></div>
<div> <img src="pictures/mailnh.png" /> </div>
</div>
This is the code I'm using. The thing I want to do is to make another image appear when hovering over the image/link. I'm not sure how to do it, so i would love some help please.
#social-links {
float: left;
width: 100px;
height: 500px;
margin-left: -20px;
}
If you need to know the css for social-links, it's right there. All i want to do is to make another image appear when hovering over the links/the images. Perhaps Javascript is needed?
No JavaScript required, you can just use CSS.
It's not great practice to use images for links as search engines won't read them or get any context from them. Much better to have a text link that you replace with an image in the CSS - e.g.
<div id="social-links">
<div><span>Facebook</span></div>
...
</div>
Then, in your CSS, simply hide the text, and replace with image for both standard and hover.
#social-links {
float: left;
width: 100px;
height: 500px;
margin-left: -20px;
}
#social-links a span {
display: none;
}
#facebookLink {
display: block;
background: url('path-to-facebook-image.jpg');
width: 50px;
height: 50px;
}
#facebookLink:hover {
background: url('path-to-facebook-hover-image.jpg');
}
Here is a jQuery solution. Fiddle Here.
$("#facebook").hover( function () {
$(this).find("img").attr('src', "http://placehold.it/150x150/ff0000/000000");
}, function () {
$(this).find("img").attr('src', 'http://placehold.it/150x150');
});
I really think this Link from #talemyn is what you are looking for also. Either way should get the job done.
I have installed the JQuery Cycle Plugin on my site and it works fine but for the first image which appears floating off to the right when the page loads. This just happens to the first image - all others are ok.
I am not sure why this is occurring as all my code is very simple:
$(function() {
$('#banner').cycle('fade');
});
<div id="banner">
<img src="images/banner01.jpg" />
<img src="images/banner02.jpg" />
<img src="images/banner03.jpg" />
<img src="images/banner04.jpg" />
<img src="images/banner05.jpg" />
</div>
#banner
{
width: 750px;
text-align: center;
height: 370px;
margin: auto;
margin-top: 20px;
}
#banner IMG
{
width: 750px;
height: 320px;
}
I am not sure what I have done wrong or what I can do to fix it. Would anyone know?
The site is here if you want to look: http://austin7.org.au/
EDIT: I have tried moving the JQuery script to the bottom of the page too, to no affect. Also, I have tried using different images - they all have the same result.
Set the left to 0.
#banner img{
left: 0;
}