I'm currently working on a project, I m generate a html with many tables, then I successfully introduced the footer and header to keep them in all printed pages, but i wish put in the footer how many pages I already have without JS.
But I don't know how I can do this.
I tried to put css with counter(pages) directly in the fixed footer, but the css work just for the first page, after that it disappears.
I tried to put a div with css counter and a relative position in the footer which has fixed position, but it worked just for the first page.
Related
On my site http://math.byu.edu
I've been trying to make it responsive to screen size but I noticed a problem when I resize the broawser while on the page. If I shrink and enlarge the browser multiple times the min-height is dynamically getting set to a huge number and I end up with a lot of whitespace.
I've searched my php templates and my css and I can't find anythign that owuld be causing this min-height issue. Does anyone have any ideas?
As per the comments, just comment out the line positionFooter() from the $(window).resize() function.
The reason this theme has this script is to make sure the footer doesn't float into the middle of the page assuming the page has zero content. When the page has zero content, there's nothing to push the footer down. So that script is supposed to keep the footer at the bottom of the page, though it does it poorly.
For future reference, if you need a sticky footer (as it's called), I suggest using Ryan Faits Sticky Footer. Just wrap the content in a main wrapper, make sure the footer is a sibling of the main wrapper then use the supplied CSS to make it work.
So I apologize in advance if this question has been answered before- I tried searching but couldn't find much on it.
A designer and I are working to create this website- www.zeinal-jundi.com
This is predominantly a one-page layout using a scroll effect to navigate to different sections, although the site's Discography section does link to a separate page for each album. We also have a fixed header that allows the navigation to be visible the whole time. Originally, I had added a margin to each section of the page to accommodate the height of the fixed header. This however made the space between each section far too large, so my designer requested I find a way around this. I was able to fix it by instead adding a value to the scroll animation script that brings the section around 250px from the top, rather than to the overall top of the page (where it would then be covered by the fixed header)
So now, I've of course encountered the issue of linking to these sections from off another page- using code like the following:
Biography
This of course links back to the front page, but brings the section up to the very top, where it is hidden by our header. I'm wondering if anyone knows of a way I can link to this section from another page but add an action similar to the one I have on the scrolling function that will bring it up to 250px down from the top of the page rather than the very top without me having to add margins to each div.
Another option of course it to just make that pesky fixed header a lot shorter, or possibly hide the site title after the page scrolls to a certain point, but our client seems pretty adamant about having the entire header visible throughout, so I of course am trying to find a work around so we won't have to rethink the entire element (if such a solution even exists).
I hope I explained this well enough! Let me know if you need to see any additional code- would love to hear your thoughts on how to achieve such a thing! :)
If you're placing the block through CSS, you can use the CSS3 :target pseudo selector to position whatever section the link pointed to, e.g.:
:target {
/* ... example:
top: 250px;
*/
}
So i built this website (using Angularjs) and for whatever reason, in one of the pages, the footer is keep floating no matter whatever i do.
You can see the issue here:
http://www.deliverightlogistics.com/howitworks
While if you go here, you see the footer positioned in the right place:
http://www.deliverightlogistics.com/ourprocess
The weird part is that given that they both generated into the same Angular content (ng-view), i can't find the reason why i have this issue in one page and not the other.
Keep in mind that I would need a change that would fix the problem but not causing other pages' footer to 'misbehave'.
Thx
This isn't an Angular issue, but a CSS one. In your style.css, you have both #howitworks_second and #howitworks_second article positioned absolutely. Take those declarations out, add a clear: both; to the footer, and your footer pops back to the bottom.
In my current project i have footer with dynamic contents ie all links are from database, can add any number of links.Now i want to position it on the bottom of my page.I have searched a lot to get a solution but all are coming with a fixed height footer.Is there any solution for this? This project is done with bootstrap 3.
On the following website, www.josecvega.com, I have a navigation bar with years that link to sections on that same page. Unfortunately it is not working they way I hoped, when the user selects a year it moves to the section of the page and puts that section on the top of the page, I have a fixed div on the top of the page that covers the sections and prevents it from properly displaying. What can I do for this to work?
It hard to explain my situation, but it can be seen by going to www.josecvega.com and clicking one of the years.
Put your anchors earlier in the file. Perhaps use a fixed-height element (the same height as your header) in the margin just before each section and apply the anchor to that.
Or use a script run after the jump and scroll back down X pixels.
Or use a frameset to display the fixed header rather than the position:fixed div you are using now.
I would probably do the latter.
your header (class=bannercontainer") is position:fixed
so this element will not scroll.
if you now click on a year it scrolls the page behind the header.
probably position:fixed is not what you want