sample imageenter image description here
How to display the whole PDF (not just one page) with PDF.JS ?
I got the reference from the code here : https://codepen.io/ValerioEmanuele/pen/pGRZqe
but it only shows 1 page, can't display the whole pdf page ?
and i use library :
pdfjsLib.GlobalWorkerOptions.workerSrc =
'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js';
example index.php
<?php
$pdf = base64_encode(file_get_contents('tes2.pdf'));
?>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12" style="padding:10px">
<label>Xpos:</label>
<input type="text" id="Xpos" value="Xpos" readonly>
<label>Ypos:</label>
<input type="text" id="Ypos" value="Ypos" readonly>
</div>
</div>
<div class="row">
<div class="col-md-12" id="pdfManager" style="display:none">
<div class="row" id="selectorContainer">
<div class="col-fixed-605 col-md-9">
<div style="display:block;height:100px">
<img class="drag-drop dropped-out" data-x="0" data-y="0" src="ttd.png" style="width:150px;height: auto">
</div>
<div id="pageContainer" class="pdfViewer singlePageView dropzone nopadding" style="background-color:transparent">
<canvas id="the-canvas" style="border:1px solid black"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- parameters showed on the left sidebar -->
<input id="parameters" type="hidden" value='[{"idParametro":480,"descrizione":"RAPINA","valore":"X","nota":null},{"idParametro":481,"descrizione":"CAUSAL_G00","valore":"X","nota":null},{"idParametro":482,"descrizione":"A","valore":"A","nota":null},{"idParametro":483,"descrizione":"POSTA_REGISTRATA","valore":"X","nota":null},{"idParametro":484,"descrizione":"CD","valore":"CD","nota":null},{"idParametro":485,"descrizione":"DATA_ALERT","valore":"data alert","nota":null},{"idParametro":486,"descrizione":"UP","valore":"UP","nota":null},{"idParametro":488,"descrizione":"DATA_MP","valore":"DATA1","nota":null},{"idParametro":489,"descrizione":"AL_QUALITA","valore":"AL_QUALITA","nota":null},{"idParametro":490,"descrizione":"CAUSAL_G60","valore":"X","nota":null},{"idParametro":491,"descrizione":"DATA","valore":"DATA","nota":null},{"idParametro":492,"descrizione":"DATA_DENUNCIA","valore":"data denuncia","nota":null},{"idParametro":493,"descrizione":"DATA_SPEDIZIONE","valore":"data spedizione","nota":null},{"idParametro":494,"descrizione":"DATA_LAVORAZIONE","valore":"DATA_LAVORAZIONE","nota":null},{"idParametro":495,"descrizione":"NUMERO_FAX","valore":"NUMERO_FAX","nota":null},{"idParametro":496,"descrizione":"SMARRIMENTO","valore":"X","nota":null},{"idParametro":497,"descrizione":"STRUTT_ACCETTAZIONE","valore":"STRUTT_ACCETTAZIONE","nota":null},{"idParametro":498,"descrizione":"FURTO","valore":"X","nota":null},{"idParametro":499,"descrizione":"BARCODE","valore":"BARCODE","nota":null},{"idParametro":502,"descrizione":"CAUSA_MAGGIORE","valore":"X","nota":null},{"idParametro":503,"descrizione":"PACCHI","valore":"X","nota":null},{"idParametro":504,"descrizione":"TIPOLOGIA_EVENTO","valore":"TIPOLOGIA_EVENTO","nota":null},{"idParametro":505,"descrizione":"NOTE","valore":"NOTE","nota":null},{"idParametro":506,"descrizione":"DATA_RITROVAMENTO","valore":"data ritrovamento","nota":null},{"idParametro":507,"descrizione":"DATA_ACCETTAZIONE","valore":"DATA_ACCETTAZIONE","nota":null},{"idParametro":509,"descrizione":"AREA_LOGISTICA","valore":"AREA_LOGISTICA","nota":null},{"idParametro":511,"descrizione":"DA","valore":"DA","nota":null},{"idParametro":512,"descrizione":"DATA_DENUNCIA","valore":"DATA_DENUNCIA","nota":null},{"idParametro":513,"descrizione":"TIPOLOGIA_ALERT","valore":"TIPOLOGIA","nota":null},{"idParametro":515,"descrizione":"STRUTTURA_RILIEVO","valore":"STRUTTURA_RILIEVO","nota":null},{"idParametro":516,"descrizione":"STRUTTURA_DENUNCIA","valore":"STRUTTURA_DENUNCIA","nota":null},{"idParametro":517,"descrizione":"DISPACCIO","valore":"DISPACCIO","nota":null},{"idParametro":518,"descrizione":"CMP_CP","valore":"CMP_CP","nota":null},{"idParametro":520,"descrizione":"FURTO_EFFRAZIONE","valore":"X","nota":null}]' />
<!-- Below the pdf base 64 rapresentation -->
<input id="pdfBase64" type="hidden" value="<?php echo $pdf ?>" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.9/interact.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js"></script>
<script src="script.js"></script>
</body>
</html>
example css.css
#messageContainer{
display:none;
}
#outer-dropzone {
height: 140px;
touch-action: none;
}
#inner-dropzone {
height: 80px;
}
.dropzone {
background-color: #ccc;
border: dashed 4px transparent;
border-radius: 4px;
margin: 10px auto 30px;
padding: 10px;
width: 100%;
transition: background-color 0.3s;
}
.drop-active {
border-color: #aaa;
}
.drop-target {
background-color: #29e;
border-color: #fff;
border-style: solid;
}
.drag-drop {
display: inline-block;
position:absolute;
z-index:999;
min-width: 40px;
padding: 0em 0.5em;
padding-left:0;
color: #fff;
background-color: #29e;
border: none;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
transition: background-color 0.3s;
line-height: 10px;
padding-right: 0 !important;
padding-left: 5px !important;
}
.drag-drop.can-drop {
color: #000;
background-color: transparent;
opacity:0.9;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
/* IE 5-7 */
filter: alpha(opacity=90);
/* Netscape */
-moz-opacity: 0.9;
/* Safari 1.x */
-khtml-opacity: 0.9;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.circle {
width: 10px;
height: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #323c3c;
float: left;
display: inline-block;
margin-top: 1px;
margin-right: 2px;
}
.dropped-out{
display: block;
padding: .75rem 1.25rem;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid rgba(0,0,0,.125);
width:200px;
color: black;
}
.col-fixed-240{
width:240px;
height:100%;
z-index:1;
}
.col-fixed-605{
margin-left:240px;
width:605px;
height:100%;
z-index:1;
}
.page-item{
cursor:pointer;
}
.pager{
margin-bottom:30px !important;
margin-top:0px !important;
margin-bottom: -31px !important;
}
.drag-drop.dropped-out .descrizione {
font-size: 12px !important;
}
#the-canvas{
height:842px;
width: 595px;
}
example script.js
var pdfData = atob($('#pdfBase64').val());
/*
* costanti per i placaholder
*/
var maxPDFx = 595;
var maxPDFy = 842;
var offsetY = 0;
'use strict';
// The workerSrc property shall be specified.
//
pdfjsLib.GlobalWorkerOptions.workerSrc =
'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js';
//
// Asynchronous download PDF
//
var loadingTask = pdfjsLib.getDocument({data: pdfData});
loadingTask.promise.then(function(pdf) {
//
// Fetch the first page
//
pdf.getPage(1).then(function(page) {
var scale = 1.0;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
var renderContext = {
canvasContext: context,
viewport: viewport
};
//page.render(renderContext);
page.render(renderContext).then(function() {
$(document).trigger("pagerendered");
}, function() {
console.log("ERROR");
});
});
});
/* The dragging code for '.draggable' from the demo above
* applies to this demo as well so it doesn't have to be repeated. */
// enable draggables to be dropped into this
interact('.dropzone').dropzone({
// only accept elements matching this CSS selector
accept: '.drag-drop',
// Require a 100% element overlap for a drop to be possible
overlap: 1,
// listen for drop related events:
ondropactivate: function (event) {
// add active dropzone feedback
event.target.classList.add('drop-active');
},
ondragenter: function (event) {
var draggableElement = event.relatedTarget,
dropzoneElement = event.target;
// feedback the possibility of a drop
dropzoneElement.classList.add('drop-target');
draggableElement.classList.add('can-drop');
draggableElement.classList.remove('dropped-out');
//draggableElement.textContent = 'Dragged in';
},
ondragleave: function (event) {
// remove the drop feedback style
event.target.classList.remove('drop-target');
event.relatedTarget.classList.remove('can-drop');
event.relatedTarget.classList.add('dropped-out');
//event.relatedTarget.textContent = 'Dragged out';
},
ondrop: function (event) {
//console.log(event);
},
ondropdeactivate: function (event) {
var dropzonePostion = $(event.target).position();
elementPosition = $(event.relatedTarget).position();
console.log(elementPosition.top +$(event.target).height());
x = elementPosition.left - dropzonePostion.left;
y = (dropzonePostion.top +$(event.target).height()) - (elementPosition.top + $(event.relatedTarget).height());
$('#Xpos').val(x);
$('#Ypos').val(y);
// remove active dropzone feedback
event.target.classList.remove('drop-active');
event.target.classList.remove('drop-target');
}
});
interact('.drag-drop')
.draggable({
inertia: false,
restrict: {
restriction: "#selectorContainer",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
autoScroll: true,
// dragMoveListener from the dragging demo above
onmove: dragMoveListener,
});
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform ='translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
// this is used later in the resizing demo
window.dragMoveListener = dragMoveListener;
$(document).bind('pagerendered', function (e) {
$('#pdfManager').show();
});
I have loading bar in specific div, that is 700px from top of the page. JavaScript for loading bar is working fine, but it is triggered at the start page, and when I reach to specific div, bar is already loaded, what I want is to start loading when I reach to that div. Please, help.
JavaScript:
<script>
$('.numberprogress[data-percentage]').each(function () {
var progress = $(this);
var percentage = Math.ceil($(this).attr('data-percentage'));
$({countNum: 0}).animate({countNum: percentage}, {
duration: 5000,
easing:'linear',
step: function() {
// What todo on every count
var pct = '';
if(percentage == 0){
pct = Math.floor(this.countNum) + '%';
}else{
pct = Math.floor(this.countNum+1) + '%';
}
progress.text(pct) && progress.siblings().children().css('width',pct);
}
});
});
</script>
HTML:
<div class="middle>
<div class="progress"><div class="numberprogress" data-percentage="80"></div>
<div class="progressbar"><div class="progresspercent"></div></div></div>
</div>
CSS:
.progress{
float:left;
width:300px;
height:50px;
color:#FFF;
background-color:#38B1CC;
margin-top:5px;
border-radius:4px;
font-family: sans-serif;
text-align:center;
font-size:0.8em;
}
.numberprogress{
float:left;
height:18px;
width:18%;
color:white;
font-size:14px;
text-align:center;
background: rgba(0,0,0,0.13);
padding: 9px 0px;
border-radius:4px;
margin:5px;
}
.progressbar{
margin-left:0px;
float:right;
border-radius:10px;
margin:5px;
height:10px;
width:75%;
background: rgba(0,0,0,0.13);
margin-top:18px;
overflow: hidden;
}
.progresspercent{
height:100%;
float:left;
background-color:white;
border-radius:10px;
}
.middle{
height:600px;
width:auto;
font-family:Bizon;
}
Instead of load it on DOM ready or onload event, you should load it when it reach that specific div.
if ($(document).scrollTop() >= $('.target-div').offset().top) {
Your function
}
To add on #Syahrul answer, here is a working example:a working example
$(document).scroll(function () {
$('.numberprogress[data-percentage]').each(function () {
if ($(document).scrollTop() >= $(this).offset().top) {
animateProgress($(this));
}
});});
First off, here is the fiddle: http://jsfiddle.net/ribbs2521/Q7C3m/1/
I thought I could run JS on fiddle but it's not working, either way all of my code is on there so I think we should be good.
So, I am trying to create my own custom image viewer which was working great until I tried to implement PREV and NEXT (in the fiddle they are text but they're actually images). I click next and it changes the picture in the viewer but then my overlay div disappears.
The reason I know it actually changes the picture is because if I put an alert at the end of prevImage() and/or nextImage() I see the changed picture, but once I click OK it all disappears.
I don't know what is going on. I am not sure if it's my JS or CSS causing the issue, I am fairly new to JS, CSS and HTML.
Can anyone tell me why my div disappears after this function is performed?
Here is the JS:
var images = Array();
var cursor = 0;
function showHide(obj) {
alert("Working");
var overlay = document.getElementById("ImgOverlay");
if (obj instanceof HTMLImageElement) {
// Get list of images in gallery
var gallery = document.getElementById("gallery");
images = gallery.getElementsByTagName("img");
cursor = -1;
while (images[++cursor].src != obj.src) {}
// Show the image
putImageInViewer(obj);
overlay.style.display = "block";
} else if (overlay.style.display !== "none" && overlay.style.display !== "") { // If it's the div that you clicked...
hideElement(overlay);
}
}
function hideElement(element) {
element.style.display = "none";
}
function putImageInViewer(obj) {
var img = new Image();
img.src = obj.src;
var size = 600;
var h = img.height;
var w = img.width;
// We want a max size of 600 but don't want to blow images up (bad graphics)
// Images should be their actual size but limited to 600px MAX
if (h <= 600 && w <= 600) {
if (h > w) {
size = h;
} else {
size = w;
}
}
if (h > w) {
document.getElementById("overlay-img").innerHTML = "<img src=\"" + img.src + "\" height=\"" + size + "\">";
} else {
document.getElementById("overlay-img").innerHTML = "<img src=\"" + img.src + "\" width=\"" + size + "\">";
}
}
function nextImage() {
// Check if we need to loop around
if (cursor < images.length) {
cursor++;
} else {
cursor = 0;
}
putImageInViewer(images[cursor]);
}
function prevImage() {
// Check if we need to loop around
if (cursor > 0) {
cursor--;
} else {
cursor = images.length;
}
putImageInViewer(images[cursor]);
}
Here is the CSS:
#wrap {
margin: 0 auto;
}
#wrap li {
float:left;
position:relative;
display:inline-block;
width:240px;
height:240px;
margin:10px;
padding:10px;
background:#fff;
box-shadow:0 0 5px rgba(0, 0, 0, .35);
overflow: hidden;
}
#wrap li div {
position:absolute;
height:0;
width:220px;
background:rgba(0, 0, 0, .45);
overflow:hidden;
bottom:10px;
left:10px;
padding: 0 10px;
line-height:50px;
color:#fff;
transition:height 1s;
}
#wrap li:hover div {
height:50px;
}
#wrap li img {
width: 240px;
height: 240px;
margin: 0px 0 0 0px;
cursor: pointer;
}
#ImgOverlay {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
/*fallback*/
background-color: rgba(0, 0, 0, 0.6);
/*background-image:none;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;*/
display: none;
}
#imgnav {
position: fixed;
top: 38%;
left: 50%;
margin: -15px 0 0 -363px;
width: 730px;
height: 60px;
}
#overlay-img {
position: fixed;
top: 50%;
left: 50%;
margin: -300px 0 0 -300px;
width: 600px;
height: 600px;
}
#overlay-img img {
border: 2px solid white;
display: block;
margin: auto;
}
And finally, the HTML:
<div id="wrap">
<h1>An Image Gallery</h1>
<ul id="gallery">
<li>
<img src="w" onclick="showHide(this);">
<div>Image 1</div>
</li>
<li>
<img src="w" onclick="showHide(this);">
<div>Image 2</div>
</li>
</ul>
<div id="clear"></div>
</div>
<!-- For Image Viewer -->
<div id="ImgOverlay" onclick="showHide(this);">
<div id="imgnav"> <span style="color: white; cursor: pointer; float: left" height="60px" width="60px" onclick="prevImage();">PREV</span>
<div id="overlay-img">
<!-- Image will go here -->
</div> <span style="color: white; cursor: pointer; float: left" height="60px" width="60px" onclick="prevImage();">NEXT</span>
</div>
</div>
<!-- End Image Viewer -->
You are probably running into JavaScript event propagation. In a nutshell, events that fire on DOM elements (such as the "click" event on your "PREV" and "NEXT" buttons), bubble up the DOM, firing again on each of the original element's parents. In your case, this means that when you click your "NEXT" button, it fires prevImage() and then when the event bubbles up to ImgOverlay, it fires showHide(this).
You need to modify your event handlers to tell the browser not to propagate the event. Change your button markup to something like the following:
<span id="nextButton" style="color: white; cursor: pointer; float: left" height="60px" width="60px">NEXT</span>
Then use the following to handle the click event:
var nextButton = document.getElementById('nextButton');
nextButton.onclick = function (ev) {
nextImage();
if (!ev) {
// Old versions of Internet Explorer do not pass the event to handlers.
ev = window.event;
}
ev.cancelBubble = true;
if (ev.stopPropagation) {
// W3C standard, works in Chrome, Firefox, Safari, etc.
ev.stopPropagation();
}
};
I'm a beginner with javascript and css
Now I want to create a pop-up box show message,meanwhile the html body is translucence.but now what I did is not work so good,what should i do?
I need your help
my code is below
html code
<div id="confirm_box" class="info_box">
<div class="info_box confirm_info">
<div class="info_box confirm_title">{$confirmTitle}</div>
<div class="info_box confirm_close">
<span id="confirm_close" class="info_box confirm_close">×</span>
</div>
</div>
<div id="info_box_content" class="info_box confirm_content">
<div class="info_box info_img_box">
<img src="{$url_app_dir}img/confirm_dog.png" class="info_box confirm_img"/>
</div>
<div id="content_box" class="info_box content_box">
{$confirmContent}<label id="info_box_text" class="info_box info_text"></label>
</div>
</div>
<div class="info_box confirm_button">
<button class="info_box confirm_submit" >确认</button>
</div>
js code
window.onload = function ()
{
var confrimWin = document.getElementById("confirm_box");
var comfirmBtn = document.getElementById("show_confirm_box");
var closeBtn = document.getElementById("confirm_close");
var bodyElement = document.getElementsByTagName("body")[0];
//show pop-up box
comfirmBtn.onclick = function()
{
confrimWin.style.display = "block";
bodyElement.setAttribute('class',"body_mask");
var text = document.getElementById("name").value;
document.getElementById("info_box_text").innerHTML= text ;
};
//close box
closeBtn.onclick = function()
{
confrimWin.style.display = "none";
bodyElement.setAttribute('class',"");
}
//get mouse Object
document.onclick = function(){
var e = arguments[0] || window.event;
var eventSource = e.srcElement||e.target;
var isShow = eventSource.className.toLowerCase().indexOf('info_box');
if(eventSource.className == 'btn'){
comfirmBtn.onclick();
}
else if( isShow < 0)
{
confrimWin.style.display = "none";
bodyElement.setAttribute('class',"");
}
}
};
html code
#confirm_box{
position:fixed;
top:50%;
left:50%;
width:500px;
height:300px;
border-radius: 5px 5px 5px 5px;
background:#fff;
z-index:100;
border:4px solid rgb( 220,220,220);
margin:-102px 0 0 -202px;
display:none;
}
.body_mask{
position: fixed;
background-color: none repeat scroll 0% 0% rgb(128,128,128);
opacity: 0.75;
/* z-index: 100; */
display:block;
}
.confirm_info{
font-size:16px;
text-align:right;
background:#fff;
border-bottom:1px solid rgb(135,180,250);
padding:5px;
height:20px;
}
.confirm_title {
font-family:"微软雅黑","黑体";
float:left;
font-weight: bold;
color:rgba(30, 144, 255, 0.75);
}
.confirm_close {
float:right;
}
.confirm_close span{
font-size:16px;
color:#fff;
cursor:pointer;
background:rgb(135,180,250);
border:1px solid rgba(30, 144, 255, 0.75);
padding:0 2px;
}
.confirm_content{
font-family:"微软雅黑","黑体";
font-size: 14px;
line-height: 24px;
padding:5px;
height:70%;
width:100%;
}
.info_text{
font-family:"微软雅黑","黑体";
color: rgb(0, 108, 202);
line-height: 24px;
height:70%;
width:100%;
}
.info_img_box{
float:left;
width: 200px;
height: 200px;
}
.content_box{
float:left;
width: 230px;
height: 200px;
}
.confirm_button{
background:#C4C4C4;
border:1px solid rgba(30, 144, 255, 0.75);
}
.confirm_submit {
float:right;
font-size: 15px;
width: 80px;
height:30px;
cursor:pointer;
color: rgb(255,245,238);
padding: 0px 10px;
margin:8px 10px;
border-radius: 5px 5px 5px 5px;
/* text-shadow: 1px 1px 3px rgb(255, 255, 255); */
border: 1px solid rgb(135,170,230);
background: -moz-linear-gradient(center top , rgb(135,180,250),rgb(135,180,250) ) repeat scroll 0% 0% transparent;
}
.confirm_submit:hover {
background: none repeat scroll 0% 0% rgb(135,160,230);
}
As a beginner with javascript&css ,I try to solve the problem again and again.and at last sovled it in a not so prefert way
below is what I changed code,it's better than before
#confirm_box{
position:fixed;
top:50%;
left:50%;
width:500px;
height:300px;
border-radius: 5px 5px 5px 5px;
background:#fff;
border:4px solid rgb( 220,220,220);
margin:-102px 0 0 -202px;
z-index: 1002;/*this add css code will show confirm_box upon body_mask*/
display:none;
}
html code
<div id="confirm_box" class="info_box">
</div>
<div id="hide_info_box" class="body_mask"></div>
javascript code
window.onload = function ()
{
var confrimWin = document.getElementById("confirm_box");
var comfirmBtn = document.getElementById("show_confirm_box");
var closeBtn = document.getElementById("confirm_close");
var hideElement = document.getElementById("hide_info_box");
//show info box
comfirmBtn.onclick = function()
{
confrimWin.style.display = "block";
hideElement.style.display = "block";
var text = document.getElementById("name").value;
document.getElementById("info_box_text").innerHTML= text ;
};
//close info box
closeBtn.onclick=hideElement.onclick=function()
{
confrimWin.style.display = "none";
hideElement.style.display = "none";
}
};
I'want that my box scroll down with my page but this script seem dosn't work her's my code:
CSS
/* Print and Download Buttons */
#box {top: 271px;}
a.print{ background:#ffffff url(images/bg-print.jpg) no-repeat top center; border:1px solid #ccc; display:block; height:24px; padding:2px;
position:absolute; right:765px; text-indent:-9999px; top:271px; width:24px; z-index:110; }
a.download{ background:#ffffff url(images/bg-download.jpg) no-repeat top center; border:1px solid #ccc; display:block; height:24px; padding:2px;
position:absolute; right:765px; text-indent:-9999px; top:300px; width:24px; z-index:111; }
a.print:hover, a.download:hover{ padding-right:12px; }
HTML Code :
<script type="text/javascript" src="_layout/js/costum.js"></script> <!--The Js file call !-->
<!-- My div Box that's i want to scroll down !-->
<div id="box">
Print CV
Download CV
</div>
And this is my costum.js
window.onload = function() {
function getScrollTop() {
if (typeof window.pageYOffset !== 'undefined' ) {
// Most browsers
return window.pageYOffset;
}
var d = document.documentElement;
if (d.clientHeight) {
// IE in standards mode
return d.scrollTop;
}
// IE in quirks mode
return document.body.scrollTop;
}
window.onscroll = function() {
var box = document.getElementById('box'),
scroll = getScrollTop();
if (scroll <= 300) {
box.style.top = "300px";
}
else {
box.style.top = (scroll + 2) + "px";
}
};
};
You have set position:absolute on the a tags not box so setting top will not affect its position. Move position to the div and it should work fine:
/* Print and Download Buttons */
#box {
position:absolute;
right:765px;
top:271px;
}
a.print {
background:#f00;
border:1px solid #ccc;
display:block;
height:24px;
padding:2px;
text-indent:-9999px;
width:24px;
z-index:110;
}
a.download {
background:#c00;
border:1px solid #ccc;
display:block;
height:24px;
padding:2px;
position:absolute;
text-indent:-9999px;
width:24px;
z-index:111;
}
a.print:hover, a.download:hover {
padding-right:12px;
}