In my jsp i have print button , on that button i want to display data which is already available in js.
jQuery("#printCoupon").click(function() {
PrintDiv();
});
function PrintDiv() {
var divToPrint = couponCode;
var popupWin = window.open('', '_blank', 'width=600,height=800');
var htmlCode='<table frame="box" style="border-style: dashed;" ><div align="left" class="printDiv" style="vertical-align:middle;height: 6px;width: 9px;max-width:350px;margin:10% auto 0;" ><tr><td>';
popupWin.document.write('<html><body onload="window.print()"><div style="text-align:center;">Coupon Details</div>'+htmlCode+'' +buisnessName+''+dealTitle+'<br/>'+dealDesc+'<br/>'+dealendDate+'<br/>'+ couponCode + '</div></table></html>');
popupWin.document.close();
popupWin.window.close();
}
this data is displaying well but now i want to have coupon as image and then all this content to be added in it.
I tried using
background-image: url("../images/automotive_section_bg.png");
background-repeat: repeat;
But it is not at all working I also tried written css in separate file
but the css is not applying to this as it is opening new window.
Here is the jsFiddle
http://jsfiddle.net/pw111ktm/
Please help.
Related
I have <img id="barcode"> and I need to download image from src. The image is generated with base64, and src contain this string:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAACOCAYAAABg4BtLAAADgUlEQVR4Xu2czyt8URjGnyErWfgLWClLCUuxsmCDoijJwpo0GT+S/EhSFmyUErGQ2LBQFrJEmrKxmuIvsLRAo3vM+M5M3c6drnO/hs8s77n3zPu+zznP8z4zZyaWTqfT+gOvGIn+MpRB9JcBKhAF0RKtAEu3RIHzDTsworFYLG+SbEOVvV7YYP2v636ZkmhhZUA0s6RZugXmyPXeZY8GtWnsUfbop+5GTVLsUfZowRqAjCAjyMgpG8O6sC6s+1kBPmHIrATXdsxvfsgIMoKMIKO8NQAZOTYBsC6sC+vCurBubgVcyw6sC+vCurAurAvr5lTgu2QHeUFekBfkBXlBXpCXfxUoVl/RUXQUHUVH0VF0FB1FR78qwBkGn9aI370UFoZjrI6/waap9ykw7gX3gnvBveBecC+4F9wL7sWvI8pex73gXjIV4OcgmUIUa6++637cC+4F94J7wb3gXnAvuBfcC+4l25LSGdEZ0RnRGdEZ0RnRGdEZ0RnRGfmsAY7fcPymRP9FzsZqP3088LdpPz0RW3wkaqtQqY2DaKkhZosXRG0VKnb88fFRy8vLOj4+1uvrqzo6OjQ5OamGhgYVdl3Fzh3k/kgQfXh40PDwsK6vr/Niqqmp0e7urlpbW4PEGuoe54m+vLxobGxM5+fnWlxcVE9Pj8rKynR0dKSZmRk1Nzdra2tL1dXVoRKxPew80fv7e/X29hpE4/G4ysvLTUzv7+9aXV3VxsaGTk9P1djYaIs11LjzRA8PDw2iucm8vb3p8vJS09PTur291f7+vgYGBkIlYnvYeaLr6+tmH3oJ19XVKZlMam5uTmdnZ1+xeSSVSCRssYYad57owsKCLi4utLS0pO3tbe3t7amqqsos55GREbNP29vbNTs7GyoR28POE/UQHR8f/4qjs7NT8/PzRlZSqZT6+/sNQZU8ogcHBxocHFRTU5PRUQ89j3W9193dnbq6uuQVo6+vzwZKqHHniGaTmZiYMKSUe0LMS3Btbe13sO7z87NGR0d1c3Nj5KS7u9sgc3JyYuSmra1Nm5ubqqysDIWY7WHniHoBXF1daWhoSE9PT3nxtLS0aGdnR/X19bY4Q49Hkqh3EtSTlZWVFdMhVVRUGAKamppSbW1t6CSCTBBJokECcX0PibqucNTzg2jUFXf9fiDqusJRzw+iUVfc9fuBqOsKRz3/n0H0A2kqGPz1ouCnAAAAAElFTkSuQmCC
How to download this image with jquery?
I m trying to do this:
$('#save_but').click(function() {
var img = document.getElementById('barcode');
img.src =$('#barcode').attr('src');
window.location.href = img.src.replace('image/png', 'image/octet-stream');
});
File is downloading but I cannot assign name and format (example: img.png) to it.
you can use the download attribute on an a tag ...
<img src="data:image/jpeg;base64,/9j/4AAQSkZ..."/>
see more: https://developer.mozilla.org/en/HTML/element/a#attr-download
Ok, that's solution for my problem:
1) Download this 5kb plugin: download.js
2) Write
<script>
$('#save_but').click(function() {
download($('#barcode').attr('src'),"strcode.png","image/png");
});
</script>
Working in Chrome, FireFox, IE ver. 9+
HTML File:
<div id="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px; padding-left: 25px; padding-top: 10px;">
<strong>Codepedia.info</strong><hr />
<h3 style="color: #3e4b51;">
Html to canvas, and canvas to proper image
</h3>
<p style="color: #3e4b51;">
<b>Codepedia.info</b> is a programming blog. Tutorials focused on Programming ASP.Net,C#, jQuery, AngularJs, Gridview, MVC, Ajax, Javascript, XML, MS SQL-Server, NodeJs, Web Design, Software
</p>
<p style="color: #3e4b51;">
<b>html2canvas</b> script allows you to take "screenshots" of webpages or parts of it, directly on the user's browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation.
</p>
</div>
<a id="btn-Convert-Html2Image" href="#">Download</a>
<br />
<div id="previewImage" style="display: none;">
</div>
Inside the Script tag:
<script>
$(document).ready(function () {
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
$("#btn-Convert-Html2Image").on('click', function () {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});
});
</script>
I am trying to search for a word inside a pdf using a textbox inside the webpage.I embedded the pdf inside a IFRAME, but it is not working.This code is working with normal text.When i search for words, sometimes it opens the pdf or refreshes the page, instead of highlighting it.
<style>
span.highlight {
background: yellow
}
</style>
<input type="text" />
<div class="para">
<button onclick="getIframeText()">get iframe text</button>
<iframe id="myframe1" src="h.pdf" style="width:718px; height:700px;" frameborder="0"></iframe>
</div>
JAVASCRIPT FOR SEACRHING THE TEXT
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript'>
var $para = $('.para')
$("input").keyup(function() {
$para.find('span.highlight').contents().unwrap();
var mysearchword = this.value.trim();
if (mysearchword) {
var re = new RegExp('(' + mysearchword.trim().split(/\s+/).join('|') + ')', "gi");
$para.html(function(i, html) {
return html.replace(re, '<span class="highlight">$1</span>')
});
}
});
</script>
The code will not work for PDF.
Replacing the word found in HTML with highlight class, it's okay. But this is not possible for PDF. You need to convert PDF into HTML first.
Hi I want to rewrite an image Src and Style element.
The image tag has an element called "data-orig-file" wich has the url that I want to write to the src element.
I came up with this but I'm not good at javascript:
function changeImageSrc(img) {
var newurl= document.getElementById("img").getAttribute('data-orig-file');
var oldurl= document.getElementById("img").src;
document.getElementById("img").src = img.src.replace(oldurl, newurl);
}
Now Secondly I want to grab the "Style" element with it's values from the grandparent div of the image and write that style to the image instead of the original style.
Finally I want to do these two things on all images inside a container div on a page when it is loaded (I suppose).
Any help is greatly apreciated!!
Thanks
update:
what I came up with so far is this:
function ChangeImageSrc() {
var image=document.getElementById("img");
var div=document.getElementById("LastPost");;
for each (image in div) {
var newurl= document.getElementById("img").getAttribute('data-orig-file');
var oldurl= document.getElementById("img").src;
document.getElementById("img").src = img.src.replace(oldurl, newurl);
}
}
window.onload = function()
{
ChangeImageSrc();
};
I also tried it with an "onload" event on the body element like this (instead of the wondow.onload part):
onload="javascript:ChangeImageSrc()
Both don't work this far :(
Ok AffluentOwl, here's the HTML:
<div class="gallery-group images-1" style="width: 677px; height: 507px;">
<div class="tiled-gallery-item tiled-gallery-item-large">
<a href="http://i0.wp.com/www.mydomain.com/wp-content/uploads/..../../image.jpg" class="zoom">
<img data-attachment-id="5786" data-orig-file="http://www.mydomain.com/wp-content/uploads/..../../image.jpg" data-orig-size="1333,1000" data-medium-file="http://www.mydomain.com/wp-content/uploads/..../../image-300x225.jpg" data-large-file="http://www.mydomain.com/wp-content/uploads/..../../image-1024x768.jpg" src="http://i0.wp.com/www.mydomain.com/wp-content/uploads/..../../image.jpg?resize=1191%2C893" align="left" title="shelter-childrens-farm" data-recalc-dims="1" style="width: 73px; height: 9px;">
</a>
</div>
</div>
As you can see there is a CDN prefix to the url that I'm trying to loose (for good reasons, it's opposed to me by wordpress and doesn't work for me).
The second thing is about the style of the image tag, that's somehow set to the wrong dimensions so I want to grab the right size from the first div (top of code).
Here's how you replace an images' src attribute with a url stored in an attribute on the image called data-orig-file when the page loads.
<html>
<script>
function ChangeImageSrc() {
var div = document.getElementsByClassName("gallery-group images-1")[0];
var images = div.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
images[i].setAttribute("src", images[i].getAttribute("data-orig-file"));
images[i].setAttribute("style", div.getAttribute("style"));
}
}
window.onload = ChangeImageSrc;
</script>
<div class="gallery-group images-1" style="width: 500px; height: 500px;">
<div class="tiled-gallery-item tiled-gallery-item-large">
<img src="a.jpg" data-orig-file="b.jpg" id="image_id" style="width: 100px; height: 100px">
<img src="c.png" data-orig-file="d.jpg" id="image_id" style="width: 100px; height: 100px">
<img src="e.png" data-orig-file="f.png" id="image_id" style="width: 100px; height: 100px">
</div>
</div>
</html>
It would probably be helpful for you to look into the element selection functions in Javascript.
getElementById
getElementsByClassName
getElementsByTagName
querySelector
You may even like to use jQuery which makes selecting elements much easier. In jQuery you could replace the <script> code with the following for the same result as above:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
var div = $(".gallery-group.images-1");
var images = div.find("img");
images.each(function() {
$(this).attr("src", $(this).attr("data-orig-file"));
$(this).attr("style", div.attr("style"));
});
});
</script>
I need to insert an iframe into a div using javascript. I need this written in javascript so I can use the code in a greasemonkey script (and greasemonkey only allows for javascript).
The greasemonkey script will be inserting AOL's search bar into various websites. I've included the working HTML code below so you can test it out to see what the end result is when this works.
Here is exactly what I need to do, written in HTML:
<div style="overflow: hidden; width: 564px; height: 43px; position: relative;">
<iframe src="http://aol.com" style="border: 0pt none ; left: -453px; top: -70px; position: absolute; width: 1440px; height: 775px;" scrolling="no"></iframe>
</div>
I need to make that HTML code work in greasemonkey, which requires it being written in javascript. Here is what I've got so far (with my final question beneath the "pseudo-code"):
var makeIframe = document.createElement("iframe");
makeIframe.setAttribute("src", "http://aol.com");
makeIframe.setAttribute("scrolling", "no");
makeIframe.setAttribute("border", "0pt");
makeIframe.setAttribute("border", "none");
makeIframe.setAttribute("left", "-453px");
makeIframe.setAttribute("top", "-70px");
makeIframe.setAttribute("position", "absolute");
makeIframe.setAttribute("width", "1440px");
makeIframe.setAttribute("height", "775px");
makeIframe.setAttribute("scrolling", "no");
var makediv = document.createElement("div");
makediv.setAttribute("height", "43px");
makediv.setAttribute("width", "564px");
makediv.setAttribute("position", "relative");
makediv.setAttribute("overflow", "hidden");
I already know how to either insert the iframe OR insert the div into the source code of the sites I need to insert it into, by doing this:
var getRef = document.getElementById("div-id-to-insert-element-before");
var parentDiv = getRef.parentNode;
parentDiv.insertBefore(iframe OR div, getRef);
What I CAN'T figure out how to do, is how to write the iframe INTO the div and then insert that div into the source code. That very last code snippet works for inserting either the div or the iframe into the source code, but I need the iframe inside the div, and then for that div to be inserted into the source code (using that last code snippet).
Any ideas?
1- you can use element.appendChild
makediv.appendChild(makeIframe);
2- Or append iframe as html into div like this,
makediv.innerHTML = '<iframe src="http://aol.com" style="border: 0pt none ;'+
'left: -453px; top: -70px; position: absolute;'+
'width: 1440px;'+
'height: 775px;" scrolling="no"></iframe>';
than insert makediv to where you want,
var getRef = document.getElementById("div-id-to-insert-element-before");
var parentDiv = getRef.parentNode;
parentDiv.insertBefore(makediv, getRef);
UPDATE:
You cannot set style with setAttribute function,
var makeIframe = document.createElement("iframe");
makeIframe.setAttribute("src", "http://aol.com");
makeIframe.setAttribute("scrolling", "no");
makeIframe.style.border = "none";
makeIframe.style.left = "-453px";
makeIframe.style.top = "-70px";
makeIframe.style.position = "absolute";
makeIframe.style.width = "1440px";
makeIframe.style.height = "775px";
var makediv = document.createElement("div");
makediv.style.height = "43px";
makediv.style.width = "564px";
makediv.style.position = "relative";
makediv.style.overflow = "hidden";
Using on page reload the page redirected to the src URL of the iframe.
To avoid this use sandbox iframe, like this:
<pre>
<code>
<iframe sandbox="allow-forms allow-same-origin allow-scripts" src="https://yoururl.com/"></iframe>
</code>
</pre>
I have this loaded before the radio buttons with corresponding color variable:
<script type="text/javascript">
//<![CDATA[
images = {"Black":"http:\/\/ecx.images-amazon.com\/images\/I\/31XwBA2m8pL.jpg", "Slate":"http:\/\/ecx.images-amazon.com\/images\/I\/31SqWkrSb6L.jpg", "White":"http:\/\/ecx.images-amazon.com\/images\/I\/31OJufgJT2L.jpg"};
//]]>
</script>
Here is the jQuery function. The best I can do so far is make the first image disappear, leaving the alt attribute.
function change_large_product_image(url) {
jQuery('.largeprod img').attr('src', url);
return false;
}
Here is a sample source for the radio button.
<label for="Black"
style="background: #fff url(http://ecx.images-amazon.com/images/I/11TeKFAzJsL._SL30_.jpg) center center no-repeat;"
title="Black" >
Black
</label>
<input
id="color_black"
name="color"
onclick="change_large_product_image(images['Black'])"
type="radio"
value="Black" />
What is the value of the parameter, url? It looks like you may need to decode the URL string to remove the '\' characters.
function change_large_product_image(url) {
jQuery('.largeprod img').attr('src', decodeURI(url));
return false;
}
In addition, consider taking thaBadDawg's suggestion.
The easier way to solve the problem is not to try and change the src, but empty the container and put a new img in its place. For example.
<div class"largeprod"><img src="...old..." /></div>
And using jQuery to clear it out and reload it
$('.largeprod').empty().append('<img src="...new..."/>');
If you want to get really clever with it you can "preload" the image in a non-displayed div, then clone and drop it in where you want to. I use a system where I put images (and large pieces of content) into that hidden div, save it's id and where it is going into an array and then when the image finishes loading, the onload event triggers and the moves it to where it is supposed to go.
Here's my solution:
<script type="text/javascript">
var myImages = {
"Black":"http:\/\/ecx.images-amazon.com\/images\/I\/31XwBA2m8pL.jpg"
,"Slate":"http:\/\/ecx.images-amazon.com\/images\/I\/31SqWkrSb6L.jpg"
, "White":"http:\/\/ecx.images-amazon.com\/images\/I\/31OJufgJT2L.jpg"
};
$(document).ready(function() {
for ( var i in myImages ) {
html = '<br />';
html += '<label for="'+i+'" style="background: #fff url('+myImages[i]+') center center no-repeat;" title="'+i+'" >'+i+'</label>';
html += '<input id="'+i+'" name="color" onclick="$(\'#largeImage\').attr(\'src\',\''+myImages[i]+'\');" type="radio" value="'+i+'" />';
html += '<br />';
$('body').append(html);
}
$('body').append("<img id='largeImage'>");
});
</script>