Using jQuery, I' m downloading an image into SVG format.
Now, I wanted to show a title just above image. I tried to achieve this with keyup event. When I write the title, my script appends it into the div as it suppose to be but as soon as I click on download button, the title disappears and the image downloads without the appended title.
I wanted to download the image with title above that's actually an appended text.
html
<div class="row">
<div class="col-sm-6">
<label>Write Title</label>
<input type="text" name="qr_frame_text" id="qr_frame_text">
</div>
<div class="col-sm-6">
<div id="qr-container">
<div id="get_frame_text"></div> //Here I'm appending the title
<div id="img" class="qr-img">
<img src="data:image/png;base64, {!! base64_encode($image) !!}" class="img-fluid" />
</div>
</div>
</div>
JavaScript
$("#qr_frame_text").keyup(function () {
$("#get_frame_text").html(this.value);
});
$( document ).ready(function() {
domtoimage.toSvg(node)
.then(function (dataUrl) {
var node = document.getElementById("qr-container");
$('#qr2').click(function() {
$('#qr-container').html("div id=\"get_frame_text\"></div>\n" +
"<div id=\"img\" class=\"qr-img\">\n" +
" <img src=\"data:image/png;base64, {!!base64_encode($image) !!}\" class=\"img-fluid\" />\n"+
"</div>\n");
var link = document.createElement('a');
link.download = 'qrcode.svg';
link.href = dataUrl;
link.click();
});
});
});
You are calling domtoimage.toSvg(node) after you have done the following:
$('#qr-container').html("div id=\"get_frame_text\"></div>\n" +
"<div id=\"img\" class=\"qr-img\">\n" +
" <img src=\"data:image/png;base64, {!!base64_encode($image) !!}\" class=\"img-fluid\" />\n"+
"</div>\n");
Remember, var node = document.getElementById("qr-container"); is not saving a snapshot of the node. It will change if it is modified.
You are changing the element to no longer contain the input before saving it. If you are trying to reset the changes, do that in your .then().
Related
I have one code for downloading particular division using javascript. But my problem is in that div contain one image tag .my image src is a URL which is outside my domain.My download function is given below:
function download() {
var options = {
};
var pdf = new jsPDF('p', 'pt', [748, 600]);
pdf.addHTML($("#invoice-POS"), 20, 20, options, function () {
pdf.save("Receipt_" + $scope.ReceiptName + ".pdf");
location.reload();
});
}
My div is
<div id="invoice-POS">
<center id="top">
<div class="info">
<img id="my-image" ng-src="{{Logo}}" alt=""
style="height:150px;width:150px"><br />
<h2 style="color:black" >Invoice</h2>
<img ng-src="{{QrImg}}" alt="" style="height:150px;width:150px" />
<h5>Scan QR Code </h5>
</div>
</center>
</div>
in this div ng-src="{{Logo}} is an external url ,qrImg is genertaed from my domain so qrimg is diplayed.Logo Image displayes in div ,but after downloading the div, Logo image is not showing,Qrimage is showing .Please help me..
thanks in advance.
The question is:
I have 2 buttons that shows the content of the div when the user click on it.
The content of the div are in a function that shows the content when the users click on the button (onclick).
But when the page loads just appear the two buttons without any content, is there any way to 'put' one of these buttons as active by default?
I tried with this:
Html:
<div class="diferencias col-md-12 col-lg-12">
<div class="diferencias col-md-6 col-lg-6"><input type="button" value="Web" onClick="fashioncatweb();">
</div>
<div class="diferencias col-md-6 col-lg-6"> <input type="button" value="Logo" onClick="fashioncatlogo();">
</div>
</div>
<div class="row">
<div id="container">
<div id="content"></div>
</div>
</div>
JS:
function fashioncatweb()
{
var text = "<p>text";
var img = "images/.....";
var content = "<div class=\"col-md-7\"><div class=img><img class=img-responsive src=\"" + img + "\" alt=\"\" /></div></div>"
+ "<div class=\"col-md-5\"><div class=pre-scrollable id=\"fashion\">" + text + "</div></div>";
appendToContainer(content);
}
function fashioncatlogo()
{
var text = "<p>text";
var img = "images/....png";
var content = "<div class=\"col-md-7\"><div class=img><img class=img-responsive src=\"" + img + "\" alt=\"logo\" /></div></div>"
+ "<div class=\"col-md-5\"><div class=pre-scrollable id=\"logo\">" + text + "</div></div>";
appendToContainer(content);
}
$(document).ready(function () {
piramidalweb();
});
But it just works for one section and I have like 15 different sections.
Thanks again!!
You should have a function that is called on the click of the buttons:
Using pure Javascript:
<input type="button" value="Button1" id="btn1" onclick="showContent(this.id)" />
function showContent(id) {
if(id === "btn1") {
// show the content
}
}
Then call immediately at the base of the page within script tags:
showContent("btn1");
That will load the content immediately.
To improve this you would execute this function onload, or in a ready function within jQuery, but hopefully you'll be able to take it from there.
I have a page that is a series of N img elements. I need each image to, when clicked, change to the next image in their own series of three. I have listed my html below to explain.
<body>
<div class="images">
<div class="image_group">
<img id="first" src="group1_image1"></img>
<img id="second" src="group1_image2"></img> //this isn't displayed until clicked
<img id="third" src="group1_image3"></img> //when this is displayed, it cycles back to group1image1
</div>
...
<div class="image_group">
<img id="first" src="groupN_image1"></img>
<img id="second" src="groupN_image2"></img>
<img id="third" src="groupN_image3"></img>
</div>
</div>
</body>
Each image_group div displays only one image until clicked, when it displays the second, then the third when clicked, then cycles back to the first when clicked a third time.
My problem is writing a JQuery method that can do this cycling by making "second" images replace "first" images when clicked and so on. The below method rewrites the image source which seems silly but I can't think of a better way to do it. I'm also not sure if the "first" class image will be isolated in the "image_group" div (as it should) or if it will change all images on the page to their "second" class image.
$("#first").attr("src","group1_image2.jpg");
Can anyone think of a way to do this?
I would do something like this
$("image_group img").on("click", function() {
var index = $(this).index();
$(this).attr("src", index === $("img").length - 1 ? $(this).next().src : $("img")[0].src);
});
refine your html:
<body>
<div class="images">
<div class="image_group">
<img id="1,1" data_num="1,1" src="group1_image1"></img>
</div>
...
<div class="image_group">
<img id="n,1" data_num="n,1" src="groupN_image1"></img>
</div>
</div>
</body>
and then you might do something like:
$("image_group img").on("click", function() {
var max = 3;
var indexes = $(this).data('num').split(',');
if ( indexes[1] == max
indexes[1] = 1;
else
indexes[1]++;
$(this).attr("src", "group" + indexes[0] + "_image" + indexes[1]);
$(this).data('num', indexes.join(','))
});
I'd like to know if there's a way to set g:select value by clicking on an img in a GSP page.
<img src="${resource(dir: 'images', file: 'fiorentina.png')}" id = "Fiorentina">
<div class="fieldcontain ${hasErrors(bean: matchDayInstance, field: 'homeTeam1', 'error')} required">
<label for="homeTeam1">
<g:message code="matchDay.homeTeam1.label" default="Home Team1" />
<span class="required-indicator">*</span>
</label>
<g:select id="homeTeam1" name="homeTeam1.id" from="${com.baoole.domain.Team.list()}" optionKey="id" required="" value="${matchDayInstance?.homeTeam1?.id}" class="many-to-one"/>
</div>
I've tried to write a little script to do this but without success:
<script type="text/javascript">
function setOptionValue(event){
$('#homeTeam1').val(${com.baoole.domain.Team.findByName("Fiorentina")});
}
var img = document.getElementById('Fiorentina');
img.addEventListener("click", setOptionValue);</script>
When I click on the image, it reset the select field.
I think the problem is $('#homeTeam1').val(${com.baoole.domain.Team.findByName("Fiorentina")});
id and ' are missing:
function setOptionValue(event){
$('#homeTeam1').val( '${com.baoole.domain.Team.findByName("Fiorentina")?.id}' );
}
i have a simple question regarding jquery, i have a long list of images directly uploaded from youtube, the image have the same v-code as the video itself, so for simpe downloading of all the videos on one page for browsers i made a list of images, once u click it, the video will appear on its place, the thing is that the code that i have oriented for video's image, but not on another one, anyway here is the code:
$('.youtube_thumb > img').click(function(){
var parts = this.src.split("/");
var id = parts[parts.length-2];
$('<iframe width="50%" height="300" src="http://www.youtube.com/embed/' + id + '?autoplay=1" frameborder="0" allowfullscreen></iframe>').insertAfter(this);
$(this).parent().parent().find(".name,.detail,.youtube_play").hide();
$(this).remove();
});
and the div
<div class="youtube">
<div class="name">
#left(name,30)#
</div>
<div class="detail">#left(detail,50)#</div>
<div class="youtube_play"></div>
<div class="youtube_thumb">
<img src="http://img.youtube.com/vi/#link#/0.jpg" style="width:50%;height:300px;border:0;" />
</div>
</div>
as u can see the code takes the img's src and sort the v-code and then put it inside the frame. But i want to work this code only after i click on the class youtube_play but not on youtube_thumb's image.
Thank you all for the help!
$('.youtube_play').click(function(){
var img = $(this).next().find('>img');
var parts = img.get(0).src.split("/");
var id = parts[parts.length-2];
$('<iframe width="50%" height="300" src="http://www.youtube.com/embed/' + id + '?autoplay=1" frameborder="0" allowfullscreen></iframe>').insertAfter(img.get(0));
img.parent().parent().find(".name,.detail,.youtube_play").hide();
img.remove();
});