I am using window.print function to print a div content and I need to add custom header and footer which shows on every page. can some one please guide me on this ?
I able to add a header and a footer but thats only at top and bottom of the print document
what i can do
I want to repeat them in each page
what I want
Usualy you are not allowed to overwrite header and footer. (defaulted by browser - optional on users choice)
Did you try something like this?
.footer { position: absolute; bottom: 0; }
.header { position: absolute; top: 0; }
try this:
var pageHeight = parseInt($('body').css('height'))
var offsetHeight=1230;
for(var i=0;i<pageHeight;i++){
if(i%offsetHeight==0 || i==0){
$('body').append('<div style="position: absolute;top:'+i+';">your header</div>')
}
}
yue can play with offsetHeight
Related
I have two div in site body.I want to have fixed position to the left div...
but when scrolling to bottom it comes on my contact us div..this is the sample page:http://www.runsensible.com/legal/privacypolicy
here is my code:
.sticky {
position: fixed;
}
<div id="menu-privacy">
<div class="fusion-text">
<p>
– What information we collect from you
– How your information is used
– How your information is shared
– Terms of service
</p>
</div>
</div>
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("menu-privacy").getElementsByClassName("fusion-text")[0];
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
What I suggest is instead of having a JavaScript function, we can use a CSS class for it.
NOTE: Based on the requirements of your specification, you can vary the size of width & height. And you can put this as class="fixed" for the div tag containing id="menu-privacy" as you can see below.
.fixed{
position: fixed;
top: 80px;
right: 0px;
width: 100px;
height: 150px;
}
1) give an id to footer or add a wrapper for footer section
2) let your function like this - you need to let condition by footer position
function myFunction() {
if (sticky < footerIdOffset) {// footerIdOffset is an offset for footer section
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
3) you need to subtract margin/gabs between footer and upper section to work in your point truth.
Good luck
I suggest you use position:sticky instead so this effect can be achieved with pure CSS rather than adding javascript. Looking at your site it's rather possible to do this
Here's what you need to do
Remove the javascript that add/remove the sticky class
Add this style in your div with id="menu-privacy", something like this
CSS
#menu-privacy {
position: sticky;
top: 80px;
}
note that you can play around the top value to achieve the gap that you like. Hope this helps!
You can try adding the attribute "z-index" to the contact div.
On "Contact Us" div set (z-index:10) .
Im having this proplem with an iframe that from JavaScript uses .load every 20 sec, and its allways moving the site in a short sec like pops up and then down,
are there somehow i can get it to hold its position??
You can see what i mean by looking at the ads on this site - http://www.pixel.tv/
the code im using to refresh it is this one
var adforsidetop = setInterval(function () {
$('#forsidetop').fadeOut('slow', function() {
$(this).load('/adsrefresh/forsidetop.html', function() {
$(this).fadeIn('slow');
});
});
}, 20000); // milliseconds
So how can i get it to hold the frame ? without its popping the site
Problem with this is that when element is faded out element css display: is set to none, one way is to add code to set iFrame visibility: hidden or you can simply crate div that contains your iFrame
<div id="iframe-container">
<iframe></iframe>
</div>
and set css for div to be same as iframe
#iframe-container {
height: xxxpx;
width: xxxpx;
}
change your style in screen.css as under:
.fAdvertisement.fBanner {
max-width: 728px;
max-height: 90px;
height: 90px
margin: 30px auto 0;
}
I've been trying - and I'm at the point where I just don't know what to try anymore.
I'm trying to make my website's chat fill the entire page with this script
<script>
$(document).ready(function() {
function setHeight() {
windowHeight = $(window).innerHeight();
$('ul').css('min-height', windowHeight);
};
setHeight();
$(window).resize(function() {
setHeight();
});
});
</script>
I'm using this script for my chat's ul tag, and it fits the height so the script works, but I'm trying to figure out how to make it fill about 95% of the page, so I still have room for the content below. (Send message, settings and emotes.)
I have a div tag around the entire chat, but setting that in the script doesn't affect the list of messages.
Any ideas to my struggle?
dont bother with js/jquery, use css, pure css like this :
div {
position: fixed!important;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div id="container">
...
</div>
<script>
var container=document.getElementById('container');
var h=document.documentElement.clientHeight;
container.style.height=h+'px';
</script>
I'm trying to fix a div at the top of a layout that will contain a blog post's information (date posted, # of notes, permalink, etc.) and change this information as you scroll down past posts. I'm not sure if it would require any kind of javascript or just some intricate positioning using css. Here's how I would layout the posts. How can I get the specific post information from each post to change within that fixed div as the posts scroll past it?
#container {
width: 960px;
margin: 0px auto;
}
#changingpostinformation {
position: fixed;
margin: 0px auto;
}
<div id="container">
<div id="changingpostinformation">fixed post information div that's information changes as each post below reaches the top of #container</div>
<div class="post">
<h3>Post Title>
<p>This is the body of this example post.</p>
</div>
<div class="post">
<h3>Post Title>
<p>This is the body of this example post.</p>
</div>
</div>
Like #ShankarSangoli says, you should add top: 0;, and also left: 0; to #changingpostinformation (or other values to position it however you like)
You'll need some javascript to find out which post appears first on the page and show its info.
$(function() {
$(window).bind('load resize scroll', function() {
var doctop = $('body').scrollTop();
// loop over all posts, from top to bottom
$('.post').each(function() {
if ($(this).position().top > doctop) {
put_postinfo_in_fixed_div($(this));
return false; // breaks from the loop
}
});
});
});
This function runs once when page is loaded, and also when the window is resized or scrolled.
You need to implement put_postinfo_in_fixed_div() which gets an post div, and does what it says.
Use this CSS:
#changingpostinformation {
position: fixed;
top: 0px;
}
I'm writing my own small pager control in Javascript and jQuery and having trouble positioning it properly.
The pager is set to only be a specific width (340px in this case) which allows it to display roughly ten page buttons. If the user has selected a higher page, I'd like the reel to slide to the left and show the selected page in the center. Since the number of pages is set dynamically (I build the pager in js when the page is loaded) and their width is not constant (double-digit page number buttons are wider than single-digit buttons) how can I determine and then set the pager to the correct position?
I was attempting to use the following code:
(where my buttons are labeled "#Nav1", "#Nav2", etc...)
if (currentPage < 7) {
newPos = 0;
}
else {
newPos = $('#Nav' + (currentPage-5)).position().left;
}
$('#reel').animate({left: newPos*-1}, 700);
But the #reel div is wrapping so position().left doesn't return the position I need.
Suggestions?
Here is my HTML/CSS markup:
<style type="text/css">
div#pager div
{
display: inline-block;
}
#navContainer
{
width: 340px;
height: 28px;
overflow: hidden;
position: relative;
}
#reel
{
position: absolute;
top: 0;
left: 0;
}
</style>
<div id="pager" class="buttons">
<div id="preButtons"></div>
<div id="navContainer">
<div id="reel">
</div>
</div>
<div id="postButtons"></div>
</div>
You'll need to manually give #reel a width equivalent to the number of items * the width of each item.
A dynamic way to do this is to load in all of the items, place them in a hidden, unbounded div, then set the width of #reel equal to the width of that div.
Try this before your carousel code:
var dummyDiv = $('<div id="dummy" class="buttons" style="position:absolute;display:none"></div>');
dummyDiv.appendTo('body');
dummyDiv.html($('#reel').html());
var reelWidth = dummyDiv.css('width');
$('#reel').css({'width':reelWidth});
This will allow you to dynamically set the width of the #reel div so it doesn't wrap without knowing the exact size of the contents statically.