how do i re-position fixed Header & Footer? - javascript

I have got some issues when using fixed Header & Footer,
But some suggest on me to use Position: Absolute instead of Fixed
and re-position Header and footer when scroll using JavaScript Code,
Does any one know how to do this?
Or this issue faced him.
Any suggestion would be helpful.
Best Regards.

Ahmed, I just came over here from the other thread we had been discussing. Your question isn't clear enough for the other folks to answer. Your question should include the fact that you need to trigger the javascript function to reposition on a specific event.
One way you could do this is this:
Change the elments to absolute position instead of fixed. Don't use fixed at all. Then make the javacript function for positioning elements fire every time the browser window scrolls or finishes scrolling. By doing it this way, the elements will always be moved into view after user finishes scrolling. They will actually pop into view which will look ugly. To make them smoothly move into view, you'll have to extend it further by using css3 transistions OR interpolating the position gradually with javascript. On iOS5 and iOS6, you should be able to use css3 transitions just fine. They would be VERY easy to implement. CSS3 transitions make javascript controlled animations a piece of cake.
The hard part will be implementing the javascript to compute the element positions and then fire the event after the browser finishes scrolling.
Hopefully some other folks can chime in if I've got the right direction.
Vote me up, bro. :)

See if the code below helps (notice how the margin adjustments use negative values that are half the size of the div that is being positioned):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>align</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#text_center {
text-align: center;
width: 200px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-20px;
}
#text_bottom {
text-align: center;
width: 200px;
position:absolute;
left:50%;
bottom:1%;
margin-left:-100px;
}
</style>
</head>
<body>
<div id="text_center">Text 1</div>
<div id="text_bottom">Text 2</div>
</body>
</html>

Related

How is the scroll effect on the iphone 11 site built?

site - https://www.apple.com/iphone-11-pro/
I feel like I this is such a simple effect but I can't seem to wrap my head around how to achieve it. ( I am talking about the way elements are layered behind each other )
I figured it was some mix of position:fixed/sticky but I don't see how that is possible without a bunch of height: ~100vh etc and I hope that isnt how the effect is achieved on their site...
I don't even know what the proper name of this effect is to google it.
If anyone has any resources I could read up on or videos to watch, id greatly appreciate it.
Thank you.
I would use position: absolute for both objects and declare their z-index order to show based on which layer is up-front.
I also see an overflow:hidden style a lot whenever you want to place an element's extra pixels away or behind other elements.
#b1 {
background-color:red;
height:100px;
width:100px;
display:table;
position: absolute;
z-index:1;
}
#b2 {
background-color:blue;
height:100px;
width:100px;
display:table;
position: absolute;
left:50px;
top:50px;
z-index:2;
}
<div id="b1"></div>
<div id="b2"></div>
AOS is a jquery library for on scroll animations
an example of usage
<div data-aos="fade-up"
data-aos-duration="2000">
</div>
The site explains as your scroll.
some nice tutorials keithclark, codepen , w3schools

CSS website fit to width of device

So, I am working on a web project, when I encountered a problem when viewing the website on, pretty much, any mobile device. The problem was that, when you first enter the page, the full width of the page would not be displayed, only a small portion of it. I am looking for a solution to correct this problem, without changing all of my code, or implementing a framework, such as bootstrap.
The domain is the-salon.uk if you would like to see the problem for yourself.
Thanks, all.
Harrison
How it appears on Desktop - Screenshot
How it appears on mobiles - Screenshot
Just add
<meta name="viewport" content="width=device-width, initial-scale=1.0">
after the <html> tag. This will make sure your website covers the device's viewport.
You could fudge it by explicitly specifying the width in the meta viewport tag... eg:
<meta name="viewport" content="width=1000px, initial-scale=1.0">
To be perfectly clear, that won't make for a great user experience. It's quite bad in fact, but it will keep all of the content on the page. Users will have to pinch-zoom to use anything though.
Like the comments say, you should look into responsive design. It's really too broad a topic for a SO answer, but it involves using a combination of percentage based/flexible items and css media-queries (look it up) to change the layout of the page at certain screen widths.
Hope that helps somewhat! I'd slap in the change to the meta-viewport as a hot-fix since your site is already live, and then go about the process of learning how to make it responsive. I definitely don't advocate using that viewport trick long term.
If you want everything to fit on the screen, I highly suggest using percentages rather than pixels. Instead of width: 400px, I suggest:
width: 100%
This ensures that the block takes up a certain percentage regardless of which device you are running on.
I can't see your source code, so I can't give any specific feedback. Hope this helps!
Odds are you have width set to an absolute value, I would change this if you have it in the css:
width:{Amount}px
To something more like this
width:{Amount}%
This type of declaration is a relative value meaning it changes with either the size of the browser or the position/size of other elements. If it doesn't resize, odds are you have it set to an absolute value (using the px keyword).This might be useful for you
EDIT
Oop apparently someone said the exact thing as I was typing this up RIP, GG Knightsoul
Add this code will fix your problem.
#media (max-width: 520px) {
.menu { width: 100%;}
.menu li {
float: none
height: 32px;
width: auto;
padding: 0px 6px;
}
#greeting {
padding-right: 25px;
padding-left: 25px;
}
#banner {
background-repeat: no-repeat;
width: 100%;
height: 200px;
max-width: 800px;
background-size: contain;
background-position: center;
background-image: url(/Images/home_background.jpeg);
}
}
*{
box-sizing: border-box;
}
body{
height:100%;
width:100%;
margin:0;
}
<meta name="viewport" content ="width=device-width,initial-scale=1,user-scalable=yes" />
Try this.
Hope this helps.

Image no longer responsive as put in table cell layout

I'm trying to center an image on a site. As I want it to be centered both horizontally and vertically I used a table/table-cell layout as following:
<div id="mainContainer>
<div id="horizon">
<img src="url">
</div>
</div>
Here mainContainer ist set to display: table and horizon is set to display: table-cell.
Unfortunately the image is no longer resizing proportionally as it becomes part of this structure. As soon as I move it into the table/table-cell divs it resizes to its original size (instead of being resized proportionally because of max-width: 100% and max-height: 100%)
see: http://jsfiddle.net/U8KcN/
EDIT:
My bad. I just tried to simplify the issue. I want to build a little slideshow for images. The problem here is that I do not know which sizes the images are (referring to someone else using the slideshow). So in simple terms I need a specific CSS that 1) centers the image vertically and horizontally in the div if its width and height are smaller than the div's dimensions, 2) resizes the image automatically if it is bigger than the div's dimensions (unnecessary to add, it is unknown whether it's width or height is bigger).
source: OP Comment
Every time I hear someone talk about the evils of using tables and then see them create a complete table structure out of DIVs with pretty much the same amount of markup -- sometimes more -- it really gets on my nerves.
By the way, have you ever developed a site for someone who wanted to do some of their own layouts in the content area using a CMS like Wordpress? The only way someone with almost no HTML knowledge can do that well is by allowing them to use table tools in Tiny MCE or another editor. So yes, tables are still important.
Recently, I had to do just that for a customer, but the images in the table cells were not responding and shrinking for smaller screen sizes. All I had to add to my CSS to care of that problem was:
table {
table-layout: fixed;
}
Now the images in the table cells are growing and shrinking accordingly, and the horizontal scrollbar is no longer appearing. Oh, of course you have to use percentages in your table width and td widths as well.
How about dropping that "CSS-table" stuff and doing it a bit easier?
<div style="width:auto;height:auto;margin:25%;text-align:center;vertical-align:middle">
<img src="URL">
</div>
At least, that’s how I would handle it...
EDIT:
Please note that I've put the CSS inline to show you what element should get what style. In production, you should — as a comment to this answer correctly stated — always separate style from code like. So, practically, you'll end up with something like this:
<style>
.centerimg {
width:auto;
height:auto;
margin:25%;
text-align:center;
vertical-align:middle
}
</style>
...
<div class="centerimg">
<img src="#">
</div>
EDIT 2:
Replying to the related comment, here's the update to make the image fit it's parent proportionally:
If your image has a bigger width than height...
<style>
...
img{
max-width:100%;
height:auto
}
</style>
or, if your image has a smaller width than height...
<style>
...
img{
max-height:100%;
width:auto
}
</style>
EDIT 3:
Looking at your fiddle, I came up with this which works like you want it to work:
<style>
*{
width:100%;
height:100%;
margin:0;
text-align:center;
vertical-align:middle
}
img{
width:auto;
height:100%;
}
</style>
I've forked your fiddle to show the updates: http://jsfiddle.net/LPrkb/1/
EDIT 3:
As the OP doesn't seem to be able to decide what he needs, I'm adding this final edit due to his latest comment.
You could also use a CSS background-image with "background-size:contain" on the "mainContainer" and be done with it... check http://jsfiddle.net/HGpfJ/2/ or look at this 100% working example taking a completely different approach which results in just the same effect/functionality:
<!DOCTYPE HTML>
<html itemscope="itemscope" itemtype="http://schema.org/WebPage">
<head>
<title>Example</title>
<style>
html,body{width:100%;height:100%;margin:0;padding:0}
#centerimg{
width:100%;
height:100%;
background:transparent url(http://oi42.tinypic.com/v9g8i.jpg) no-repeat scroll center;
background-size:contain;
}
</style>
<body>
<div id="centerimg"></div>
</body>
</html>
Let's face the facts: depending on where in the document structure you want to have the image "centered", there are more than a dozen of ways to do it.
If OP needs specific code, we will need the complete document structure from OP and not simply a "generalized" code-snippet which could be anywhere in whatever document structure.
Using tables (display: table-cell) for layout is a web development anti-pattern these days. Try using the <span> element with display: inline-block to vertically and horizontally center the image, as this method will work all the way back to IE 6. Also, you can change the image size to be a percentage if you want it to resize according to its container:
http://jsfiddle.net/hHWy8/1/
HTML:
<span class="horizontal">
<span class="vertical">
<img src="url" />
</span>
</span>
CSS:
span {
display: inline-block;
}
span.horizontal {
text-align: center;
width: 100%;
}
span.vertical {
vertical-align: middle;
border: 1px solid black; /* put a border on container for display purposes */
line-height: 1000px; /* this sets the vertical height */
overflow: hidden;
white-space: nowrap;
}
span.vertical img {
height: 50px; /* set your image height (could be percent) */
width: 50px; /* set your image width (could be percent) */
}
span.vertical br {
display: none;
}
To resize your image you could use this css:
html,body,div,img{
height:100%;
}
img { width:100%}
It sets the html and body's height to 100%, this is needed so the height of your page takes all available space

CSS Dynamic Margin on Window Resize

Can I dynamically ensure that the content always remains centered in the window pane on this website?
Right now it uses a static margin-left on the .items class, and it uses jquery tools.
http://andstones.ca/newsite/
Can I do it in just CSS or CSS and Javascript?
Thanks,
Kory
I didn't quite see what part you were talking about as it looks like most of it works just fine.
For auto-centering, you should use auto for margins:
margin: 0 auto;
Put that one whatever div you want centered.
Lets say that you want to center a container with 900px wide, the most cross browser way that I've used is:
div#container{
width:900px;
position:relative;
left:50%;
margin-left:-450px;
}
This goes to the center of the x axis and stays there regardless of other elements of that page!
Of course that this only works with a fixed width and not a dynamic one!
If i remember correctly, you have to use the following in IE
text-align: center;
Even to center a div

Force <div></div> to the bottom of the web page centered

I have a <div>...</div> section in my HTML that is basically like a toolbar.
Is there a way I could force that section to the bottom of the web page (the document, not the viewport) and center it?
I think what you're looking for is this: http://ryanfait.com/sticky-footer/
It's an elegant, CSS only solution!
I use it and it works perfect with all kinds of layouts in all browsers! As far as I'm concerned it is the only elegant solution which works with all browsers and layouts.
#Josh: No it isn't and that's what Blankman wants, he wants a footer that sticks to the bottom of the document, not of the viewport (browser window). So if the content is shorter than the browser window, the footer sticks to the lower end of the window, if the content is longer, the footer goes down and is not visible until you scroll down.
Twitter Bootstrap implementation
I've seen a lot of people asking how this can be combined with Twitter Bootstrap. While it's easy to figure out, here are some snippets that should help.
// _sticky-footer.scss SASS partial for a Ryan Fait style sticky footer
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -1*($footerHeight + 2); /* + 2 for the two 1px borders */
}
.push {
height: $footerHeight;
}
.wrapper > .container {
padding-top: $navbarHeight + $gridGutterWidth;
}
#media (max-width: 480px) {
.push {
height: $topFooterHeight !important;
}
.wrapper {
margin: 0 auto -1*($topFooterHeight + 2) !important;
}
}
And the rough markup body:
<body>
<div class="navbar navbar-fixed-top">
// navbar content
</div>
<div class="wrapper">
<div class="container">
// main content with your grids, etc.
</div>
<div class="push"><!--//--></div>
</div>
<footer class="footer">
// footer content
</footer>
</body>
If I understand you correctly, you want the toolbar to always be visible, regardless of the vertical scroll position. If that is correct, I would recommend the following CSS...
body {
margin:0;
padding:0;
z-index:0;
}
#toolbar {
background:#ddd;
border-top:solid 1px #666;
bottom:0;
height:15px;
padding:5px;
position:fixed;
width:100%;
z-index:1000;
}
I just want to be clear on what your saying here:
bottom of the web page (the
document, not the viewport)
Naturally, a div will be at the bottom of the "document", depending on your layout.
If it's not going to the bottom of a document, or not paying attention to how tall your columns are, is it because your floating? Clear: both; would be in order to solve that.
The sticky footers are what I think your looking for, but when you say document, and not the viewport, I get a bit confused. Sticky footers typically do this: Watch for short pages, and if its shorter than the view port, the sticky footer tacks the footer div to the bottom.
Here's some sticky footers (there's gajillions of em, but this is in order of my favorites):
http://www.cssstickyfooter.com/
http://css-tricks.com/sticky-footer/
http://ryanfait.com/sticky-footer/ (listed previously)
http://brassblogs.com/blog/sticky-footer
http://alistapart.com/ (theres one there I just can't find it)
Maybe if you gave a quick illustration or were a bit more specific on what you want? Hope this helps :D
-Ken
Try this: Fixed footers without Javascript. I don't know if it will be a perfect fit, but I think it's close enough.
You can just give the div a:
clear:both; text-align:center;
and put the div as the last element before the closing body statement. That would force it to be the last element without anything next to it.
Your best bet is to use javascript to determine the size of your page. You can get the height with window.innerHeight with non-IE browsers and document.documentElement.clientHeight with IE. With that value you should be able to absolutely position your element on the page setting top to that value minus the height of your div. If the height of your div is variable you will need to check the div's offsetHeight property to get the real height.
For centering use the following example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.wrapper
{
width: 100%;
padding-left: 50%;
}
.test
{
width: 400px;
margin-left: -200px;
border: 1px solid black;
padding-left: -200px;
}
</style>
</head>
<div class="wrapper">
<div class="test">This is a test</div>
</div>
</html>
You have a wrapper div around the div you want centered. The wrapper div has a width of 100% the inner div has a width set to whatever you want it to be. Give the wrapper div a left padding of 50% and the inner div a negative left margin equal to half of its width.

Categories