I am working on magnific-popup gallery and trying to achieve gallery design as show in image below
So far i managed to make it look like as it is show in image. But it always show image from the first image irrespective of which mage we click in the image gallery.
here is the codepen example http://codepen.io/anon/pen/LvFxH
I am not sure how to fix it so that it can start the sequence from image user click on and also hide left or right arrow it is first or last image in the galler
CODE
<div id="gallery1" class="mfp-hide">
<div class="slide">
<div class="imgg"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Anthochaera_chrysoptera.jpg/800px-Anthochaera_chrysoptera.jpg" /> </div>
<div class="detailss">
<span class="d-title">This is the caption of the image along with some other information</span>
<span class="d-hr">Download</span>
<span class="d-date">01-01-2014</span>
</div>
</div>
<div class="slide">
<div class="imgg"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Water_Dolphin.jpg/800px-Water_Dolphin.jpg" /> </div>
<div class="detailss">
<span class="d-title">This is image two</span>
<span class="d-hr">Download</span>
<span class="d-date">02-02-2014</span>
</div>
</div>
<div class="slide">
<div class="imgg"><img src="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower1.jpg" /> </div>
<div class="detailss">
<span class="d-title">This is image three</span>
<span class="d-hr">Download</span>
<span class="d-date">03-03-2014</span>
</div>
</div>
</div>
<a href="#gallery1" class="open-gallery-link">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Anthochaera_chrysoptera.jpg/800px-Anthochaera_chrysoptera.jpg" width="172" height="115" />
</a>
<a href="#gallery1" class="open-gallery-link">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Water_Dolphin.jpg/800px-Water_Dolphin.jpg" width="172" height="115" />
</a>
<a href="#gallery1" class="open-gallery-link">
<img src="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower1.jpg" width="172" height="115" />
</a>
You have some incorrect code... this is my code:
Live Demo on JSFiddle
Demo 2 - Next/Prev Button
HTML
<div id='gallery'>
<div class='imgwrapper'>
<img src='http://8pic.ir/images/6s75jpffwom32fhct7q4.jpg' title='' alt=''/>
<span class='date'>15-02-2013</span>
<span class='info'>This is the caption of the image along with some other information</span>
<a href='http://gah-blog.blogspot.com/'>download</a>
</div>
<div class='imgwrapper'>
<img src='http://8pic.ir/images/ypzla17xaqmhjiocih64.jpg' title='' alt=''/>
<span class='date'>10-07-2013</span>
<span class='info'>This is the caption of the image along with some other information</span>
<a href='http://gah-blog.blogspot.com/'>download</a>
</div>
<div class='imgwrapper'>
<img src='http://8pic.ir/images/tuwvju35ajgts0rxzufw.jpg' title='' alt=''/>
<span class='date'>21-10-2013</span>
<span class='info'>This is the caption of the image along with some other information</span>
<a href='http://gah-blog.blogspot.com/'>download</a>
</div>
<div class='imgwrapper'>
<img src='http://8pic.ir/images/usra1shyel8nxudsj8vs.jpg' title='' alt=''/>
<span class='date'>02-02-2014</span>
<span class='info'>This is the caption of the image along with some other information</span>
<a href='http://gah-blog.blogspot.com/'>download</a>
</div>
<div class='imgwrapper'>
<img src='http://8pic.ir/images/vp7wnu7ohpx2i3im6nem.jpg' title='' alt=''/>
<span class='date'>20-05-2014</span>
<span class='info'>This is the caption of the image along with some other information</span>
<a href='http://gah-blog.blogspot.com/'>download</a>
</div>
</div>
<div id="popupbg">
<div id="popup">
<img src='' title='' alt=''/>
<span class='date'></span>
<span class='info'></span>
<a href=''>download</a>
<span class="btn" id="close">Close</span>
</div>
</div>
CSS
#gallery{
position:relative;
width:100%;
background:#e7e7e7;
}
.imgwrapper{
position:relative;
width:150px;
height:150px;
display:inline-block;
}
.imgwrapper img{
width:150px;
height:150px;
}
.imgwrapper span,.imgwrapper a{
display:none;
}
#popupbg{
display:none;
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
background:rgba(0,0,0,0.92);
z-index:1000;
}
#popup{
position:relative;
top:5%;
margin:0 auto;
font-size:17px;
width:70%;
height:65%;
background:#fff;
padding:20px;
border:solid 10px #CCCCCC;
}
#popup img{
position:relative;
display:block;
width:95%;
height:200px;
}
#popup span.date,#popup span.info,#popup span#close{
display:block;
}
jQuery
$(document).ready(function(e) {
$(".imgwrapper").click(function(){
var img=$(' > img', this).attr("src");
var date=$(' > span.date', this).html();
var info=$(' > span.info', this).html();
var a=$(' > a', this).attr("href");
$('#popup img').attr("src",img);
$('#popup span.date').html(date);
$('#popup span.info').html(info);
$('#popup a').attr("href",a);
user_guide()
});
});
function user_guide(){
$("#popupbg").fadeToggle("slow");
}
$(document).ready(function(e) {
$("#close").click(function(){
$("#popupbg").fadeToggle("slow");
});
});
Related
I'm making a sort of card game. I'm using Bootstrap 3 as my framework with a deck of cards in a grid, each card in their own column.
When a card is clicked, I want the card to be displayed with its backside up as an overlay, like Bootstraps modal or equivalent. But when the card is clicked (or touched) it should flip, displaying the front which is the same as the image that was clicked to trigger the modal. It should be able to flip back and forward infinite number of times. Clicking outside the modal or on a close button, closes the modal and returns to the deck.
I'm able to do a card flip on an image. And I'm able to trigger a modal with dynamic content. But what I can't figure out is how to do this together so that I don't have to create a seperate modal for each card.
I've been pulling my hair over this issue for days now and I truly cannot wrap my head around how this can be made. My javascript skills are quite limited and I cant find any plugin or code example to help me in this (I've tried numerous options).
My grid is displayed in the snippet. No data-targets, modules or javascripts included though since I havn't found anything that works yet.
Any ideas?
main {
.container-fluid;
.text-center;
background: none;
header {
.container-fluid;
.text-center;
padding: 50px;
h1 {
font-weight: #font-weight-heading;
}
}
.cardColumns {
.make-row();
.cCard {
.make-xs-column(4);
.make-sm-column(3);
.make-md-column(2);
padding: 10px;
img {
width: 100%;
height: auto;
.img-rounded;
modal-body-shadow: 0 4px 8px 0 #000;
transition: 0.3s;
}
img:hover {
modal-body-shadow: 0 8px 16px 0 #000;
}
}
}
}
<main>
<div class="cardColumns">
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
</div>
</main>
This basically just changes the background image in the mid spin.
$(document).ready(function() {
initListeners();
});
function initListeners() {
$(".container").off();
$(".container").on("click",function() {
$(".container").removeClass("toggle")
$(this).addClass("toggle");
});
}
/*var Cards;
setTimeout(function() {
Cards = document.querySelectorAll(".container");
for (let i = 0; i < (e = Cards.length); i++)
Cards[i].addEventListener("click", function(elem) {
for (let i = 0; i < (e = Cards.length); i++)
Cards[i].classList.remove('toggle');
elem.target.parentElement.classList.add('toggle');
});
}, 1);*/
.container {
perspective: 1000px;
display: inline-block;
position: relative;
}
.card {
margin: 5px;
width: 105px;
height: 150px;
background: #000;
transition: transform .35s linear;
transform: rotateX(180deg);
transform-style: preserve-3d;
}
.card::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://i.stack.imgur.com/gcRWf.png) center center;
background-size: cover!important;
transition: background 0.01s linear;
transition-delay: 0.175s;
}
.container.toggle .card {
transform: rotateX(0deg);
}
.container.toggle .card::after {
background: url(https://s-media-cache-ak0.pinimg.com/736x/f4/e3/97/f4e397ef5e0a4cd7cdbf30e65aa149c0.jpg) center center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
Copy pest code in individual file and check in your local it will run. perfect. Given below is modern way of doing it. You can refer this link for further details of the way of creating modal dynamically.
With that also i have used external js to flip images reference to which you will get here.
$('.flip-card').flip();
function openModal(front_image, back_image) {
var message = $('#modal_1');
BootstrapDialog.show({
message: $('#modal_1'),
onshown: function() {
$('.front img').attr('src', front_image);
$('.back img').attr('src', back_image);
},
onhide: function(dialogRef) {
$('#hidden-div').append(message);
},
});
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<button type="button" class="btn btn-primary" onclick="openModal('http://fillmurray.com/200/200','http://fillmurray.com/600/600')">Open modal</button>
<div id="hidden-div" style="display: none">
<div class="container-fluid" id="modal_1">
<div class="row">
<div class="col-sm-3 col-xs-6">
<div class="flip-card" ontouchstart="this.classList.toggle('hover');" style="height : 300px;">
<div class="front front-side" style="">
<img src="" alt="" style="width : 100%; height: 100%">
</div>
<div class="back back-side" style="background-color : blue">
<img src="" alt="" style="width : 100%; height: 100%">
</div>
</div>
</div>
</div>
</div>
</div>
I have a page that has a background wallpaper with 100% width and its 100vh height. The page has 3 buttons on it and one of the buttons is located at the extreme left side of the screen. When I click that button, I am hoping the div would slide to the right to cover the entire page.
I had tried using slide toggle but my div is currently located at the bottom of my title page so when it toggles, the div toggles vertically--not horizontally.
My title page is 100vh but the div I'm trying to slide into place doesn't have a fixed height.
#title {
width: 100%;
background-image: url(../Images/Arthur%20and%20Merlin%202%20updated.jpg);
background-repeat: no-repeat;
background-size: 100%;
height: 100vh;
position: relative;
display: inline-block;
}
#characters {
width: 100%;
display: inline-block;
}
<div id="maincontainer">
<header id="title">
<h1>Arthur and Merlin</h1>
<h3>Battle For Camelot</h3>
<div id="titlebutton">Join The Battle
</div>
<input id="checkboxforplaces" type="checkbox">
<label id="toplaces" for="checkboxforplaces">
<img src="Icons/castle.png">
</label>
<input id="checkboxforchar" type="checkbox">
<label id="tocharacters" for="checkboxforchar">
<img src="Icons/helmet.png">
</label>
</header>
<section id="characters">
<div id="firstrow">
<article id="arthurbox">
<a id="arthur" href="#">
<img src="Images/Arthur/Arthur%201.jpg" </a>
</article>
<article id="merlinbox">
<a id="merlin" href="#">
<img src="Images/Merlin/merlin%202.jpg">
</a>
</article>
</div>
<div id="clear"></div>
<div id="secondrow">
<article id="morganabox">
<a id="morgana" href="#">
<img src="Images/Morgana/Morgana1.jpg">
</a>
</article>
<article id="youngmordredbox">
<a id="youngmordred" href="#">
<img src="Images/YoungMordred/Mordred2.jpg">
</a>
</article>
</div>
<div id="clear"></div>
<div id="thirdrow">
<article id="utherbox">
<a id="uther" href="#">
<img src="Images/Uther/Uther.jpg">
</a>
</article>
<article id="gaiusbox">
<a id="gaius" href="#">
<img src="Images/Gaius/Gaius-15hdg5a.jpg">
</a>
</article>
<div id="clear"></div>
</div>
</section>
</div>
I think this jsfiddle may be useful for you.
$(document).ready(function(){
$('#hide').click(function(){
var hidden = $('.hidden');
hidden.hide('slide', {direction: 'left'}, 400);
});
$('#show').click(function(){
var hidden = $('.hidden');
hidden.show('slide', {direction: 'left'}, 400);
});
});
https://jsfiddle.net/ZQTFq/3372/
Modify the code depending on your needs.
I have a HTML5 web page and I use 4 canvas controls to render images from my web cam.
By double-clicking and image/canvas I hide the 4 canvases and display a larger canvas control instead.
As soon as I done this one of my controls is highlighted.
This is the original web page BEFORE the double-click:
And this is the web page AFTER the double click:
This is the code that handles the double-click of the smaller canvas element:
$('#canvasLiveView1').on('dblclick', function () {
$('#divSingleView').css('display', '');
$('#divMultiView').css('display', 'none');
camDoubleClickCam = 1;
});
I have tried adding this to the double-click event:
$('#btnPlaysave').blur();
where 'btnPlaySave' is ID of the highlighted control.
Incidentally, this behavior/effect does not appear in IE.
Any suggestions?
ND.
this is the HTML for the canavs 'toggle'
<div style="height:362px;">
<div id="divSingleView" style="float:left;margin:0px;padding:0px;background-color:black;width:520px;display:none;">
<div style="float:left;width:95px;"> </div>
<div style="float:left;width:330px;margin-top:75px;"><canvas id="canvasLiveView" style="width:330px;height:220px;outline: yellow 1px solid;"></canvas></div>
<div style="float:left;width:95px;"></div>
</div>
<div id="divMultiView" style="float:left;margin:0px;padding:0px;background-color:black;width:520px;">
<div style="float:left;height:170px;margin-left:2px; margin-top:10px;"><canvas id="canvasLiveView1" style="width:255px;height:170px;outline: grey 1px ridge;margin-left:3px;margin-top:3px;"></canvas></div>
<div style="float:left;height:170px;margin-top:10px;"><canvas id="canvasLiveView2" style="width:255px;height:170px;outline: grey 1px ridge;margin-right:3px;margin-top:3px;"></canvas></div>
<div style="float:left;height:170px;margin-left:2px; margin-bottom:10px;"><canvas id="canvasLiveView3" style="width:255px;height:170px;outline: grey 1px ridge;margin-left:3px;margin-top:3px;margin-bottom:3px;"></canvas></div>
<div style="float:left;height:170px;margin-bottom:10px;"><canvas id="canvasLiveView4" style="width:255px;height:170px;outline: grey 1px ridge;margin-right:3px;margin-top:3px;margin-bottom:3px;"></canvas></div>
</div>
</div>
<div style="height:30px;">
<div id="divPaused" style="display:none; float:left;margin-left:5px;color:white;font-size:9pt; font-weight:800;">
Paused
</div>
<div style="width:290px;margin: 0 auto;">
<div style="float:left;width:24px;margin-left:5px;">
<img id="btnPlaySave" alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/save.png" class="imgPlaySave" title="Save Image" onclick="PlaySave();" />
</div>
<div style="float:left;width:24px;margin-left:5px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/button_minus_red.png" class="imgPlaySlower" title="Decrease Playback Speed" onclick="PlaySlower();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" cursor:pointer" src="/Content/Images/button_plus_green.png" class="imgPlayFaster" title="Decrease Playback Speed" onclick="PlayFaster();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_start.png" class="imgPlayStart" title="Go to First Frame" onclick="PlayStart();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_back.png" class="imgPlayStepBack" title="Step to Previous Frame" onclick="PlayStepBack();" />
</div>
<div id="Tempo" style="float: left; width: 40px; text-align: center; vertical-align: middle; font-weight: bold;color:white; font-size: x-small; font-family: Arial, Helvetica, sans-serif;">
100
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_pause.png" class="imgPlayPause" title="Pause" onclick="PlayPause();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_play.png" class=" imgPlayPlay" title="Play" onclick="PlayPlay();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_next.png" class="imgPlayStepNext" title="Step to Next Frame" onclick="PlayStepNext();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_end.png" class="imgPlayEnd" title="Go to Last Frame" onclick="PlayEnd();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/LiveFeed.png" class="imgLiveFeed" title="Back to Live Feed" onclick="LiveFeed();" />
</div>
</div>
</div>
So the canvas creates weird behaviour when double clicked. I found and answer that supposed that in order for it to work properly you can cancel out the events that are triggered by:
document.getElementById('canvas').onmousedown = function(){ return false; };
I grabbed this answer from: HTML Canvas Double Click Highlight Issue which lead to... Clicking inside canvas element selects text
hope this helps people so they don't have to jump around a few questions.
im trying to build a gallery that loads a div with images when a button i clicked.
the problem is that when i have 2 buttons only the last images are clickable, a little hard to explain but you can try it out on my page: http://www.bravitus.com/#gallery
is it wrong having two javascrips like that
script1:
<script type="text/javascript">
$(document).ready(function(){
$(".slidingpriv").hide();
$(".show_priv").show();
$('.show_priv').click(function(){
$(".slidingpriv").slideToggle();
});
});
script2:
<script type="text/javascript">
$(document).ready(function(){
$(".slidinggf").hide();
$(".show_gf").show();
$('.show_gf').click(function(){
$(".slidinggf").slideToggle();
});
});
html:
<div class="row">
<div class="container">
<!---section--->
<div class="center">
Private projects
</div>
<div class="slidingpriv">
<a href="pages/inasecond/inasecond.html"><div id="imgstyle" class="image">
<img href="" src="img/inasecond.jpg" width="300" height="300" alt=""/></a>
</div>
<a href="pages/2012/2012.html"><div id="imgstyle" class="image">
<img src="img/2012.jpg" width="300" height="300" alt=""/> </div></a>
<a href="pages/greenlights/greenlights.html"><div id="imgstyle" class="image">
<img src="img/Cover-text.jpg" width="300" height="300" alt=""/> </div> </a>
</div>
<!---section--->
<div class="center">
Grundforløb
</div>
<div class="slidinggf">
<a href="pages/inasecond/inasecond.html"><div id="imgstyle" class="image">
<img href="" src="img/inasecond.jpg" width="300" height="300" alt=""/></a>
</div>
<a href="pages/2012/2012.html"><div id="imgstyle" class="image">
<img src="img/2012.jpg" width="300" height="300" alt=""/> </div></a>
<a href="pages/greenlights/greenlights.html"><div id="imgstyle" class="image">
<img src="img/Cover-text.jpg" width="300" height="300" alt=""/> </div> </a>
</div>
css:
.center{
position:relative;
width:100%;
height:100%;
margin:0 auto;
text-align:center;
/*background-color:#0C3;*/
}
.show_priv {
display:none;
position:relative;
height:100%;
/*background-color: #99CCFF;*/
}
.slidinggf {
height:100%;
/**background-color: #99CCFF;**/
width:100%;
position:relative;
}
.show_gf {
display:none;
position:relative;
height:100%;
/*background-color: #99CCFF;*/
}
.slidingpriv {
height:100%;
/**background-color: #99CCFF;**/
width:100%;
position:relative;
}
Thanks ;)
You should look at using your browser developer tools which has some very easy to use tools for debugging, such as the inspect element.
https://developer.chrome.com/devtools
https://developer.mozilla.org/en-US/docs/Tools
With this you can find what may be blocking your ability to click on some elements, even if you're sure they should work.
Also try to combine scripts into the same document ($(document).ready(function(){});)
I am creating a PDF with CSS page breaks, but the PDF is not not breaking the page. When I remove postion:absolute it works, but it creates space after every page. I think it's a CSS problem but I'm not sure.
If there is problem with the CSS, how I can resolve it?
<html>
<head>
<title> PDF </title>
<style type="text/css">
<!--
body { font-family: Arial; font-size: 33.0px }
.pos { position: absolute; z-index: 0; left: 0px; top: 0px }
-->
</style>
</head>
<body>
<div style="page-break-after: always;">
<div class="pos" id="_0:0" style="top:0"><img name="_1170:828" src="page_001.jpg"
height="1170" width="828" border="0" usemap="#Map" /></div>
<div class="pos" id="_126:284" style="top:284;left:126">
<span id="_30.8" style="font-family:Arial; font-size:30.8px; color:#fdfffd">Documents for the</span>
</div>
<div class="pos" id="_126:323" style="top:323;left:126">
<span id="_30.8" style="font-family:Arial; font-size:30.8px; color:#fdfffd">procurement</span>
</div>
<div class="pos" id="_138:975" style="top:975;left:138">
<span id="_15.4" style="font-weight:bold; font-family:Arial; font-size:15.4px; color:#fdfffd">Return
Date:<span>12-08-2014</span></span>
</div>
<div class="pos" id="_492:975" style="top:975;left:492">
<span id="_15.4" style="font-weight:bold; font-family:Arial; font-size:15.4px; color:#fdfffd">Reference No : test</span>
</div>
<div class="pos" id="_609:1094" style="top:1094;left:609">
<span id="_13.6" style="font-weight:bold;font-style:italic; font-family:Palatino Linotype; font-size:13.6px; color:#000000">
</span>
</div>
</div>
<div style="page-break-after: always;">
<div class="pos" id="_0:0" style="top:1170"><img name="_1170:827" src="page_002.jpg"
height="1170" width="827" border="0" usemap="#Map" /></div>
<div class="pos" id="_157:1357" style="top:1357;left:157">
<span id="_24.5" style="font-family:Arial; font-size:24.5px; color:#61c5c5">Contents</span>
</div>
<div class="pos" id="_414:1348" style="top:1348;left:414">
<span id="_24.5" style="font-family:Arial; font-size:24.5px; color:#fcfcfc">Part
01</span>
</div>
<div class="pos" id="_414:1392" style="top:1392;left:414">
<span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000">INTRODUCTION</span>
</div>
<div class="pos" id="_154:1560" style="top:1560;left:154">
<span id="_24.5" style="font-family:Arial; font-size:24.5px; color:#fcfcfc">Part
02</span>
</div>
<div class="pos" id="_414:1569" style="top:1569;left:414">
<span id="_24.5" style="font-family:Arial; font-size:24.5px; color:#fcfcfc">Part
03</span>
</div>
<div class="pos" id="_154:1597" style="top:1597;left:154">
<span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000">PASS /
FAIL</span>
</div>
<div class="pos" id="_154:1615" style="top:1615;left:154">
<span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000">REQUIREMENTS</span>
</div>
<div class="pos" id="_414:1607" style="top:1607;left:414">
<span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000">SELECTION
CRITERIA</span>
</div>
</div>
<div style="page-break-after: always;">
<div class="pos" id="_0:0" style="top:2340"><img name="_1170:827" src="page_003.jpg"
height="1170" width="827" border="0" usemap="#Map" /></div>
<div class="pos" id="_168:2645" style="top:2645;left:168">
<span id="_65.4" style="font-family:Arial; font-size:65.4px; color:#fcfcfc">Part
01</span>
</div>
<div class="pos" id="_168:2782" style="top:2782;left:168">
<span id="_24.5" style="font-weight:bold; font-family:Arial; font-size:24.5px; color:#000000">INTRODUCTION</span>
</div>
<div class="pos" id="_737:3442" style="top:3442;left:737">
<span id="_19.1" style="font-style:italic; font-family:Times New Roman; font-size:19.1px; color:#000000">1</span>
</div>
</div>
</body>
</html>
When you use position:absolute the PDF will be rendered using the elements absolute position. If you remove position:absolute without changing the top and left attributes of the elements to zero, they will be rendered relativelly and you will get the spaces between the pages.
Try:
#media print {
.pos { position: relative; z-index: 0; left: 0px; top: 0px }
}