Ok, so I have my website which has a div container on the left side which includes my navBar with links. On the right side is another div container which I want content to fade in when a link is clicked. I don't want the whole page to refresh however. I have the code which will do this but it won't work for some reason. It worked on a previous blank html document however. Thanks in advance.
HTML:
<!doctype html>
<html lang="en"><head>
<link rel="stylesheet" type="text/css" href="../styless.css" />
<link rel="stylesheet" type="text/css" href="../images/jquery.fancybox-1.3.4.css" media="screen" />
<link href="../fadeStyle.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="../../../GJDG/js/nav.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="../images/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="../images/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a[rel=example_group]").fancybox({
'overlayColor' : '#000',
'overlayOpacity' : 0.9,
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">' +(title.length ? ' ' + title : '') + '</span>';
}
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "fast");
},
function() {
$(this).stop().animate({"opacity": "1"}, "fast");
});
$("img.c").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "fast");
},
function() {
$(this).stop().animate({"opacity": "1"}, "fast");
});
$("img.e").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "fast");
},
function() {
$(this).stop().animate({"opacity": "1"}, "fast");
});
});
</script>
<style>
body { font-family: Helvetica, Arial, sans-serif; }
.container {
width: 100%; left: 0; right: 0; top:0; bottom: 0; position: fixed; overflow: auto;
background: rgba(16,16,16,0.0);
}
</style>
</head>
<body>
<div class="container">
<div id="menu">
<img style="position:absolute; top:25px; left:50px; width:200px; height:73px" src="../../../Envy1.png">
<div style="position: absolute; top:630px; left:50px; font-size:11px; width:200px; color:#FFF">© 2012 Envy Cosmetics</div>
<div id="navBar">
<font face="abeatbyKai">
<ul id="menu-list">
<li><a class="menu_side" href="../News.html" style="text-decoration: none" id="one">News</a></li>
<li><a class="menu_side" href="../About Us.html" style="text-decoration: none" id="two">About Us</a></li>
<li><a class="menu_side" href="../Gallery.html" style="text-decoration: none" id="three">Gallery</a></li>
<li><a class="menu_side" href="../Affiliates.html" style="text-decoration: none" id="four">Affiliates</a></li>
<li><a class="menu_side" href="../Biography.html" style="text-decoration: none" id="five">Biography</a></li>
<li><a class="menu_side" href="../Contact.html" style="text-decoration: none" id="six">Contact</a></li>
</ul>
</font>
</div>
<div class="fadehover1">
<img src="../../../twitter1.png" alt="" class="a" />
<img src="../../../twitter2.png" alt="" class="b" />
</div>
<div class="fadehover2">
<img src="../../../facebook1.png" alt="" class="c" />
<img src="../../../facebook2.png" alt="" class="d" />
</div>
<div class="fadehover3">
<img src="../../../youtube1.png" alt="" class="e" />
<img src="../../../youtube2.png" alt="" class="f" />
</div>
</div>
<div id="main">
<div id="gallery1">
<a rel="example_group" href="../images/1_b.jpg" title="ENVY!"><img alt="" src="../images/1_s.jpg" /></a>
<a rel="example_group" href="../images/2_b.jpg" title="ENVY!"><img alt="" src="../images/2_s.jpg" /></a>
<a rel="example_group" href="../images/3_b.jpg" title="ENVY!"><img alt="" src="../images/3_s.jpg" /></a>
<a rel="example_group" href="../images/4_b.jpg" title="ENVY!"><img alt="" src="../images/4_s.jpg" /></a>
<a rel="example_group" href="../images/5_b.jpg" title="ENVY!"><img alt="" src="../images/5_s.jpg" /></a>
<a rel="example_group" href="../images/6_b.jpg" title="ENVY!"><img alt="" src="../images/6_s.jpg" /></a><br>
<a rel="example_group" href="../images/7_b.jpg" title="ENVY!"><img alt="" src="../images/7_s.jpg" /></a>
<a rel="example_group" href="../images/8_b.jpg" title="ENVY!"><img alt="" src="../images/8_s.jpg" /></a>
<a rel="example_group" href="../images/9_b.jpg" title="ENVY!"><img alt="" src="../images/9_s.jpg" /></a>
<a rel="example_group" href="../images/10_b.jpg" title="ENVY!"><img alt="" src="../images/10_s.jpg" /></a>
<a rel="example_group" href="../images/11_b.jpg" title="ENVY!"><img alt="" src="../images/11_s.jpg" /></a>
<a rel="example_group" href="../images/12_b.jpg" title="ENVY!"><img alt="" src="../images/12_s.jpg" /></a>
</div>
</div>
</div>
<script src="../jquery.backstretch.min.js"></script>
<script>
$.backstretch("photo1.jpg", {speed: 500});
</script>
<div id="mesh"></div>
nav.js
$(document).ready(function() {
$('#main').load($().attr('href'));
});
$('.menu_side').click(function() {
var href = $(this).attr('href');
$('#main').hide().load(href).fadeIn('fast');
return false;
});
The trick is that the fadeIn needs to occur when the load is successful. It's currently being called before the content has loaded. You need to use the load() method's callback handler argument:
$('.menu_side').click(function() {
var href = $(this).attr('href');
$('#main').hide().load(href, function() { $(this).fadeIn('fast'); });
return false;
});
Will probably do what you want.
Related
I have an image gallery with magnificPopup plugin. This is my code:
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<div class="thumbs">
<a href="https://picsum.photos/id/237/800.jpg" target="_blank">
<img src="https://picsum.photos/id/237/100.jpg">
</a>
<a href="https://picsum.photos/id/1003/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1003/100.jpg">
</a>
<a href="https://picsum.photos/id/1011/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1011/100.jpg">
</a>
<a href="https://picsum.photos/id/1025/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1025/100.jpg">
</a>
</div>
Javascript:
$(()=>{
$('.thumbs').magnificPopup({
type: 'image',
delegate: 'a',
gallery: {
enabled: true
}
});
});
$(()=>{
$('.thumbs').magnificPopup({
type: 'image',
delegate: 'a',
gallery: {
enabled: true
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<div class="thumbs">
<a href="https://picsum.photos/id/237/800.jpg" target="_blank">
<img src="https://picsum.photos/id/237/100.jpg">
</a>
<a href="https://picsum.photos/id/1003/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1003/100.jpg">
</a>
<a href="https://picsum.photos/id/1011/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1011/100.jpg">
</a>
<a href="https://picsum.photos/id/1025/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1025/100.jpg">
</a>
</div>
How to destroy/uninitialize Magnific Popup?
This is how to destroy magnificPopup:
$.magnificPopup.close();
$('.thumbs').off('click');
$('.thumbs a').off('click');
// initialize magnificPopup
function initMagnificPopup() {
$('.thumbs').magnificPopup({
type: 'image',
delegate: 'a',
gallery: {
enabled: true
}
});
}
// destroy magnificPopup
function destroyMagnificPopup() {
$.magnificPopup.close();
$('.thumbs').off('click');
$('.thumbs a').off('click');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<button type="button" onclick="initMagnificPopup()">initialize magnificPopup</button>
<div class="thumbs">
<a href="https://picsum.photos/id/237/800.jpg" target="_blank">
<img src="https://picsum.photos/id/237/100.jpg">
</a>
<a href="https://picsum.photos/id/1003/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1003/100.jpg">
</a>
<a href="https://picsum.photos/id/1011/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1011/100.jpg">
</a>
<a href="https://picsum.photos/id/1025/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1025/100.jpg">
</a>
</div>
<button type="button" onclick="destroyMagnificPopup()">destroy magnificPopup</button>
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>
I am working on website and i have this code:
http://liveweave.com/KDPgcO
It shows a menu that displays some content when a url is clicked, That is what i want but the only thing is that i need that one choice is selected or displayed by default:
So when the page loads that javascript must show the first choice on the menu by default.
the code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="pages_about" class="textContainer_about">
<div class="textWord_about" data-link="first">
<img src="../images/fondo1.png" alt="" height="" width="800"/>
</div>
<div class="textWord_about" data-link="second">
<img src="../images/fondo2.png" alt="" height="" width="800"/>
</div>
<div class="textWord_about" data-link="third">
<img src="../images/fondo3.png" alt="" height="" width="800"/>
</div>
<div class="textWord_about" data-link="fourth">
<img src="../images/fondo4.png" alt="" height="" width="800"/>
</div>
<CENTER>
<div id="menu_about">
<a class="link" href="#about" data-link="first"><img src="../images/edif.png" alt="" height="" width="65"/></a>
<a class="link" href="#about" data-link="second"><img src="../images/admininver.png" alt="" height="" width="65"/></a>
<a class="link" href="#about" data-link="third"><img src="../images/finan.png" alt="" height="" width="60"/></a>
<a class="link" href="#about" data-link="fourth"><img src="../images/inmo.png" alt="" height="" width="60"/></a>
</div>
</CENTER>
</div>
</div>
<script type="text/javascript">
$('.textWord_about').hide();
$('.link').click(function() {
$('.textWord_about').hide();
$('.textWord_about[data-link=' + $(this).data('link') + ']').fadeIn({
width: '200px'
}, 300);
});
</script>
Thanks for any comments that you can provide.
You could trigger click on the first link:
<script type="text/javascript">
$('.textWord_about').hide();
$('.link').click(function() {
$('.textWord_about').hide();
$('.textWord_about[data-link=' + $(this).data('link') + ']').fadeIn({
width: '200px'
}, 300);
}).first().trigger('click');
</script>
I currently have two different javascripts running on my page. One for a slideshow and another for a timed image swap. I can only get one or the other to work, depending on which one of the scripts is lower in the code. I read many tutorials and it seemed adding <body onload="func1();func2()"> would fix the problem but it did not.
I have made two sample pages
Where image swap works but slide show does not show up
http://pancakeparadise.com/shirtswap.html
Where slide show shows up and works but images do not swap out
http://pancakeparadise.com/shirtswap1.html
Thank you for any help you can provide!
<!DOCTYPE html>
<head>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Amatic+SC:700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(
function func2(){
$('ul#portfolio').innerfade({
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '500px'
});
}
);
</script>
</head>
<body onload="func1();func2()">
<div id="wholebody">
<section id="slideshow">
<aside id="slides">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt ="" >
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt="">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt="">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt="">
</aside>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>
<script>
$(function func1() {
$('#slides').slidesjs({
width: 980,
height: 500,
play: {
active: true,
auto: true,
interval: 4500,
swap: true,
pauseOnHover: true
}
});
});
</script>
</section>
<aside id="frontbubbles">
<aside id="shirtswapfront">
<p id="fronttextheader">Shirt Swap!</p>
<ul id="portfolio">
<li>
<a href="">
<img src="img/1.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/2.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/3.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/4.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/5.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/6.jpg" alt="" />
</a>
</li>
</ul>
</aside>
</aside>
</div>
You have two jQuery files included in the same HTML page which is causing the conflict. Try this code.
<!DOCTYPE html>
<head>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Amatic+SC:700' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('ul#portfolio').innerfade({
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '500px'
});
$('#slides').slidesjs({
width: 980,
height: 500,
play: {
active: true,
auto: true,
interval: 4500,
swap: true,
pauseOnHover: true
}
});
});
</script>
</head>
<body>
<div id="wholebody">
<section id="slideshow">
<aside id="slides">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt ="" >
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt="">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt="">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt="">
</aside>
</section>
<aside id="frontbubbles">
<aside id="shirtswapfront">
<p id="fronttextheader">Shirt Swap!</p>
<ul id="portfolio">
<li>
<a href="">
<img src="img/1.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/2.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/3.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/4.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/5.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/6.jpg" alt="" />
</a>
</li>
</ul>
</aside>
</aside>
</div>
I have cleaned up your code a little bit... dont use body onload both functions and then define one of the functions later in the code... well here it goes, this worked for me...
$(document).ready(function func2(){
$('ul#portfolio').innerfade({
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '500px'
});
});
$(document).ready(function func1() {
$('#slides').slidesjs({
width: 980,
height: 500,
play: {
active: true,
auto: true,
interval: 4500,
swap: true,
pauseOnHover: true
}
});
});
<div id="wholebody">
<section id="slideshow">
<aside id="slides">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt ="" />
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt=""/>
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt=""/>
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt=""/>
</aside>
</section>
<aside id="frontbubbles">
<aside id="shirtswapfront">
<p id="fronttextheader">Shirt Swap!</p>
<ul id="portfolio">
<li>
<a href="">
<img src="http://pancakeparadise.com/img/1.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="http://pancakeparadise.com/img/2.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="http://pancakeparadise.com/img/3.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="http://pancakeparadise.com/img/4.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="http://pancakeparadise.com/img/5.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="http://pancakeparadise.com/img/6.jpg" alt="" />
</a>
</li>
</ul>
</aside>
</aside>
</div>
now add your css and js files in the head like usual... it should work. here is a fiddle link for it as well http://jsfiddle.net/z5yeLq2k/
If you want both of these functions to execute, the easiest way possible is to not put them in separate functions, or to not put them in functions at all. Here is what I mean...
$(document).ready(
$('ul#portfolio').innerfade({
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '500px'
});
$('#slides').slidesjs({
width: 980,
height: 500,
play: {
active: true,
auto: true,
interval: 4500,
swap: true,
pauseOnHover: true
}
});
);
Outside of functions, as soon as the document.ready executes (once the page is done loading), both of those pieces of code will be executed sequentially.
EDIT: Also, as was said in another answer, you are including jquery twice...don't do that.
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 });
});