How can I print using JQuery - javascript

I have nested divs..in which images generate dynamically ...this is the html code ..my problem is if i click the print button the corresponding image need to be printed.
<div id="outputTemp" style="display:none">
<div id="rightoutputimgae">
<div id="rightimgId" class="rightimg" rel="tooltip" content="
<img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
<div id="outputimageId" class="outputimage">
<img src="jqe13/image/1.jpg" alt="Right Bottom Image"></div>
</div>
<ul>
<li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
<li id="outedit">
<a href="#"><img src="jqe13/image/edit_s.PNG" alt="edit" title="Edit">
</a></li>
<li id="outdelete"><a href="#" onclick="deleteImg(div11)">
<img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete"></a></li>
<li id="outfullscreen">
<a href="#">
<img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen"
title="Full Screen"></a></li>
<li id="outshare">
<img src="jqe13/image/share_c.PNG" alt="Share" title="Share">
<div id="menu">
<div id="tooltip_menu">
<a href="#" class="menu_top" id="email">
<img src="jqe13/image/email.PNG" alt="Email" title="Email"></a>
<a href="#" onClick="postToFeed()" class="facebook"><img src="jqe13/image/fb.PNG"
alt="Facebook" title="Facebook"></a>
<a href="#" id="twitter">
<img src="jqe13/image/twitter.png" alt="Twitter" title="Twitter"></a>
<a href="#" class="menu_bottom" id="save">
<img src="jqe13/image/save.PNG" alt="Save" title="Save"></a>
</div>
</div>
</li>
<li id="outprint"><a href="#">
<img src="jqe13/image/print.PNG" class="printMe" alt="Print" title="Print"></a>
</li>
</ul>
</div>
i need to print the image when i click the print button..
how do i write jquery function to print the image..

Try like
$('.printMe').click(function(){
window.print();
});
or if you want to print selected area try like
$('.printMe').click(function(){
$("#outprint").print();
});

Hey If you want to print selected area or div ,Try This.
<style type="text/css">
#media print
{
body * { visibility: hidden; }
.div2 * { visibility: visible; }
.div2 { position: absolute; top: 40px; left: 30px; }
}
</style>
Hope it helps you

function printResult() {
var DocumentContainer = document.getElementById('your_div_id');
var WindowObject = window.open('', "PrintWindow", "width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
}

There is a jquery print area. I've been using it for some time now.
$(".printMe").click(function(){
$("#outprint").printArea({ mode: 'popup', popClose: true });
});

Related

jQuery Packery plugin not setting height properly

I'm using the Packery plugin to give my image gallery a more interesting layout on a website I'm building.
Every now and then, I visit the page and some of the images are overlapping each other like so:
But then when I refresh the page, it displays it properly:
I tried specifying a height on the container element but to no avail.
Here is the code I'm using:
CSS:
.packery-grid {
min-height: 500px;
}
.packery-grid-03 {
width: 20%;
}
.packery-grid-06 {
width: 40%;
}
.packery-grid figure {
padding: 15px;
}
jQuery:
$(document).ready(function() {
// visuals
$('.packery-grid').packery({
// options
itemSelector: '.packery-grid-item',
gutter: 0
});
});
HTML:
<div class="row">
<div class="packery-grid">
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/255-198x127.jpg" alt="Six" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/319-198x127.jpg" alt="Five" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/IMG_8204-198x127.jpg" alt="Four" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-06">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/157-426x284.jpg" alt="Three" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-06">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/IMG_4445-426x284.jpg" alt="Two" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/Iceland-198x127.jpg" alt="One" />
</a>
</figure>
</div>
</div>
</div>
</div>
</div>
I think I've found the solution on their support page
Unloaded images can throw off Packery layouts and cause item elements
to overlap. imagesLoaded resolves this issue.
And so I've modified my code like so:
// visuals
var $grid = $('.packery-grid').packery({
// options
itemSelector: '.packery-grid-item',
gutter: 0
});
// layout Packery after each image loads
// to prevent overlapping images
$grid.imagesLoaded().progress( function() {
$grid.packery();
});

Fancybox link doesn't work (Lightbox)

I have a lightbox (using fancybox.net) here: http://desertcinema.com/home-test/
And I use a gallery codes to show images in gallery form:
Here's my jQuery code:
$(document).ready(function() {
$(".gallery").fancybox({
openEffect : 'none',
closeEffect : 'none'
});
});
And here's my HTML:
<li class="portfolio-box photography">
<a class="gallery" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4bav1hxsgwj54nvaww.jpg" title="Concealment">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4baun93pvbri4pf1ts.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Concealment</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery" rel=gallery1" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/Mike-Full-Draw-30sp495yqivl82ubkxq5mo.jpg" title="Concealment">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4baun93pvbri4pf1ts.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Concealment</h4>
</a>
</li>
using the class "gallery" that I place on <a href=""> however when clicking this images there is no next or previous button which must be working.
I just followed this instruction: http://fancyapps.com/fancybox/#examples
am I making any mistakes? You can inspect element using Chrome if you want.
Try this.You are missing rel="gallery1" in first < a >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<script src="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<link href="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.css" rel="stylesheet"/>
<link href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" rel="stylesheet"/>
<li class="portfolio-box photography">
<a class="gallery" rel="gallery1" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4bav1hxsgwj54nvaww.jpg" title="Concealment">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4baun93pvbri4pf1ts.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Concealment</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery" rel="gallery1" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/Mike-Full-Draw-30sp495yqivl82ubkxq5mo.jpg" title="Concealment">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4baun93pvbri4pf1ts.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Concealment</h4>
</a>
</li>
<script>
$(document).ready(function() {
$(".gallery").fancybox({
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
try this way.. No div should be there in li
$(document).ready(function() {
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<script src="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<link href="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.css" rel="stylesheet"/>
<link href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" rel="stylesheet"/>
<a class="fancybox" rel="gallery1" href="http://farm2.staticflickr.com/1617/24108587812_6c9825d0da_b.jpg" title="Morning Godafoss (Brads5)">
<img src="http://farm2.staticflickr.com/1617/24108587812_6c9825d0da_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm4.staticflickr.com/3691/10185053775_701272da37_b.jpg" title="Vertical - Special Edition! (cedarsphoto)">
<img src="http://farm4.staticflickr.com/3691/10185053775_701272da37_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm1.staticflickr.com/574/22407305427_69cc6e845f_b.jpg" title="Racing against the Protons (tom.leuzi)">
<img src="http://farm1.staticflickr.com/574/22407305427_69cc6e845f_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm1.staticflickr.com/291/18653638823_a86b58523c_b.jpg" title="Lupines (Kiddi Einars)">
<img src="http://farm1.staticflickr.com/291/18653638823_a86b58523c_m.jpg" alt="" />
</a>

JQuery - Make icons bigger when hovered

I have a navbar with icons and under each of them some text(like home, contacts, ecc..). I would like that if I go over the text the icons became bigger. For now I can do it only if the mouse go over the icon.
Here's my navbar:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav ">
<li>
<a href="#">
<img src="img/ico_nav/hamburger.jpg" class="img-circle noinmobile icons" alt="Menù" width="50" height="50" style=" margin-bottom:15px">
<p class="navtext">HOME</p>
</a>
</li>
<li>
<a href="#storia">
<img src="img/ico_nav/storia.jpg" class="img-circle noinmobile icons" alt="Menù" width="50" height="50" style=" margin-bottom:15px">
<p class="navtext">STORIA</p>
</a>
</li>
<li>
<a href="#menù">
<img src="img/ico_nav/hamburger.jpg" class="img-circle noinmobile icons" alt="Menù" width="50" height="50" style=" margin-bottom:15px">
<p class="navtext">MENÙ</p>
</a>
</li>
<li>
<a href="#gallery">
<img src="img/ico_nav/gallery.jpg" class="img-circle noinmobile icons" alt="Menù" width="50" height="50" style=" margin-bottom:15px">
<p class="navtext">GALLERY</p>
</a>
</li>
<li>
<a href="#contatti">
<img src="img/ico_nav/contatti.jpg" class="img-circle noinmobile icons" alt="Menù" width="50" height="50" style=" margin-bottom:15px">
<p class="navtext">CONTATTI</p>
</a>
</li>
</ul>
</div>
And here's the script:
function makeBigger() {
$(this).css({height: '+=10%', width: '+=10%'});
}
function returnToOriginalSize() {
$(this).css({height: "", width: ""});
}
$(function(){
$('.icons').hover(makeBigger, returnToOriginalSize);
}
As it is now the icons become bigger when hovered, but I want that they become bigger also if the text under the icon is hovered. How can I do it? I tried but unfortunately I couldn't figured out how to do it.
I hope I explained myself!
Thanks in advance
You don't need javascript for this. You can use simple CSS transitions. Something like:
.navbar-nav li img {
transition: transform 0.4s;
transform: scale(1);
}
.navbar-nav li:hover img {
transform: scale(1.5);
}
If you don't want the transition you can remove the transition line. You can also use width and height instead of transform for some way back (in browser time) browser support.

Update hyperlink on click

I am working on a simple gallery for my site.
Demo: http://jsfiddle.net/fdr6y6y7/
I have a large image that changes when you click a thumbnail underneath it.
However, I have an issue. Each 'large' image has a link to itself in a new window, however you can see that the original main image link never changes.
For example, if I click the 2nd thumbnail image the hyperlink inside the largeimg div should really change to http://placehold.it/250x250.
Can I use jQuery to do this?
$('#thumb_scroll a').click(function(event){
$('#largeimg img').attr("src", $(this).attr("href"));
$('#largelink').attr("href", $(this).attr("rel"));
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="largeimg" class="largeimage">
<img src="http://placehold.it/200x200" />
</div>
<p> </p>
<div id="thumbouter">
<div id="thumbnails">
<div id="thumb_scroll">
<ul>
<li>
<img src="http://placehold.it/100x100" />
</li>
<li>
<img src="http://placehold.it/100x100" />
</li>
</ul>
</div>
</div>
</div>
Thanks to the Anon SO user for this: http://jsfiddle.net/fdr6y6y7/1/
$('#thumb_scroll a').click(function(event) {
$('#largeimg img').attr("src", $(this).attr("href"));
$('#largeimg a').attr("href", $(this).attr("href"));
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="largeimg" class="largeimage">
<a href="http://placehold.it/300x300" target="_blank" class="main">
<img src="http://placehold.it/200x200" />
</a>
</div>
<p> </p>
<div id="thumbouter">
<div id="thumbnails">
<div id="thumb_scroll">
<ul>
<li>
<a href="http://placehold.it/300x300" class="thumb">
<img src="http://placehold.it/100x100" />
</a>
</li>
<li>
<a href="http://placehold.it/250x250" class="thumb">
<img src="http://placehold.it/100x100" />
</a>
</li>
</ul>
</div>
</div>
</div>

how to remove parent div when click on child inner anchor element?

this is my html code for aove fig.....
when i click on delete (id ="outdelete") total div (id="rightoutimage") should be deleted.......................
<div id="rightoutputimgae">
<div id="rightimgId" class="rightimg" rel="tooltip" content="<img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
<div id="outputimageId" class="outputimage"><img src="jqe13/image/1.jpg" alt="Right Bottom Image">
</div>
</div>
<ul>
<li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
<li id="outedit"><img src="jqe13/image/edit_s.PNG" alt="edit" title="Edit"></li>
<li id="outdelete"> <img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete"></li>
<li id="outfullscreen"><img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen" title="Full Screen"></li>
<li id="outshare"><img src="jqe13/image/share_c.PNG" alt="Share" title="Share">
<div id="menu">
<div id="tooltip_menu">
<img src="jqe13/image/email.PNG" alt="Email" title="Email">
<img src="jqe13/image/fb.PNG" alt="Facebook" title="Facebook">
<img src="jqe13/image/twitter.png" alt="Twitter" title="Twitter">
<img src="jqe13/image/save.PNG" alt="Save" title="Save">
</div>
</div>
</li>
<li id="outprint"><img src="jqe13/image/print.PNG" class="printMe" alt="Print" title="Print"></li>
</ul>
</div>
this is my scripting code........
<script>
function deleteImg(id11) {
id11 = document.getElementById("outdelete");
$('#+id11').remove();
}
</script>
$('#outdelete').click(function(){
$("#rightoutputimgae").remove();
});
Here's another option for you, which you can see a working example here:
http://jsfiddle.net/TdLSy/
$(document).ready(function(){
$("li a").click(function(event){
event.preventDefault();
$(this).find('img').remove();
});
});
Along with your original HTML code:
<div id="rightoutputimgae">
<div id="rightimgId" class="rightimg" rel="tooltip" content="<img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
<div id="outputimageId" class="outputimage"><img src="jqe13/image/1.jpg" alt="Right Bottom Image">
</div>
</div>
<ul>
<li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
<li id="outedit"><img src="jqe13/image/edit_s.PNG" alt="edit" title="Edit"></li>
<li id="outdelete"> <img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete" /></li>
<li id="outfullscreen"><img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen" title="Full Screen"></li>
<li id="outshare"><img src="jqe13/image/share_c.PNG" alt="Share" title="Share">
<div id="menu">
<div id="tooltip_menu">
<img src="jqe13/image/email.PNG" alt="Email" title="Email">
<img src="jqe13/image/fb.PNG" alt="Facebook" title="Facebook">
<img src="jqe13/image/twitter.png" alt="Twitter" title="Twitter">
<img src="jqe13/image/save.PNG" alt="Save" title="Save">
</div>
</div>
</li>
<li id="outprint"><img src="jqe13/image/print.PNG" class="printMe" alt="Print" title="Print"></li>
</ul>
</div>
Change:
<li id="outdelete"><a href="#" onClick="deleteImg(outdelete)">
to:
<li id="outdelete"><a href="#" onClick="deleteImg(this)">
and your JS code:
<script>
function deleteImg(self) {
$(self).parents('#rightoutputimgae').get(0).remove();
}
</script>
Try this:
document.getElementById("rightoutimage").addEventListener("click", function(e) {
if(e.target.id === "outdelete") {
var parent = e.target.parentNode;
parent.parentNode.removeChild(parent);
}
});
You can do this:
$('#outdelete > a').click(function(){
$(this).closest('#rightoutputimgae').remove();
});

Categories

Resources