I am trying to perform a scrolling effect.
On scroll, the next page section should cover the current one.
So the current section is docked to the top of the screen and while the next section arrives the current is progressively covered but doesn't move.
Basically I am trying to reproduce the effect I found on this website:
http://www.squarespace.com/seven/interface
It works only with css (I tried with js disabled)
I've tried to reverse engineer it but I am not successful so far.
If someone had so advices I would greatly appreciate.
Main idea is that every <section> has height and position: relative and 'overflow: hidden'. But every tag inside those sections has position: fixed.
I tried looking at the site with JavaScript turned off and got nothing but a blank screen and a scroll bar (same in Chrome, Firefox, and Safari/iOS). Furthermore, Chrome tells me that all kinds of functions get called as you scroll. Unless there is some serious trickery here, squarespace.com seems to be using JavaScript.
Though you may be able to pull of something like the checkbox-hack to set and/or animate the top of different sections, I don't think the result for the minority of users validates the development time.
I put together a small fiddle which should help you on your way if you want something like the website you linked to. Notice that this is still usable if you disable or comment out the JavaScript.
https://jsfiddle.net/kx94my17/1/
Related
I'm new to web development, mostly just trying to teach myself how with internet tutorials and such. I'm a complete newbie, so this might be a dumb question, but I've searched google up and down, and have yet to find an answer.
Basically my problem is, I've created a web page with position: fixed; header at the top of the page. I've adjusted the margins of the page so that everything seems to look great. The page displays exactly as I intended it to.
However, I've come across a small flaw which I find myself incapable of fixing: I have a few links on the page that link to specific headings elsewhere on the same page. (For example, I have an element such as <section id="section_3">...</section>, and elsewhere on the same page I'm using .... It works and leads me to the appropriate header, but unfortunately the top of <section> element I linked to (mostly just the section heading) is being covered up by the fixed header at the top of the page, so I have to scroll up a little to read the section header. I've tried linking to an <h1> rather than a <section> element, thinking it might be incompatibility with html5 or some such, but I have the same problem that way too.
I'd like to have it so that the section header is the first visible element under the header when I follow these ID links. How can I do this? I would assume this is a common enough situation that there would be a simple fix to it, but I can't seem to find anything on the subject. (I have no issues using html5 or css3. Currently this is just a personal project, and by the time I'm making anything public I expect it will be far enough down the road that there won't be any issue using those. For the time being, it only needs to work on my browser.)
Thanks in advance for anyone who can help!
Just adding #johnniebenson comment, add the css like this for the related section. Let suppose the header's height is 60px and you would like to give some space below header about 40px then do this. Example: #section_3:target{ padding-top: 100px;margin-top: -100px}
You can try setting the padding-top of each section equal to the height of your header. Then link to the h1 in each section. That should do the trick.
So my problem is that for some reason on one page of a website I've been fiddling with, the two navigation bars that I have (Top and Sidebar Navigation) are for no apparent reason scaled down in the Google Chrome browser, their behavior is entirely normal in both iE and Firefox. The bar's remain completely functional, but are simply scaled down perhaps to 66% of the intended size.
Here is the code for the page in question: http://pastebin.com/uvrPR1JW
Here is the code for a similar, but functioning page for reference: http://pastebin.com/5dAMREfC
They're running off the same style sheet so the issue is likely in the HTML, however the style sheet is linked in the comment section for reference. If anyone spots any reason why it would be doing anything like this it'd be great to know. And I apologize for the messy code, as I said I'm just playing around with it.
Update:
You may notice that my code includes at least one flexbox, here is question posted by another user that may be related but I can't make heads or tails of it: Chrome shrinks figure elements as they are added to a flexbox
Update: Doesn't seem to be a problem with the flexbox, the issue still exists even when I remove all content except the top header.
I'd say it's the setup of your navbar, how you have an image and you just change the position of it on hover. Chrome has a weird feature where it moves things around when there is images so I would suggest looking up how to make a proper navigation bar (It's pretty easy).
Im havin a big problem.
Im programming a website for a company in germany.
Since there are so many sites on the page i took an iframe in my index.html file instead of using a div tag because this would need a lot more time since i need to write the div stuff on every page.
Every Browser like IE,Chrome,Opera and also Safari shows the website like i want it to be shown.
But Firefox shows the iframe part in a small window in the left upper side of the window.
So you cant see any content or even 100x bigger than normally and in a quite small window.
So do I have to change anything in my code or do i need to add something?
The bigger problem is actually that the man who is able to start the server doesnt want to start it for let the website goin online because that doesnt work on firefox.
He explained the problem to me that way. but my program (mirabyte) shows everything in the right way (ALSO FIREFOX) so what can I do now because I need to let him try every small change i will do. So it would be nice if anyone does know the EXACT answer because he or she already had the problem.
Any ideas?
Thank you so much
Sasse
Make sure that if you have the iframe in any sort of container, that container also has the applicable height attribute. Also make sure that the iframe height is applied to both the HTML and the body tags.
Beyond that, we would have to see the part of your code where you're declaring the iframe to say anything more specific.
I have recently taken control of a large website. My problem is that sometimes, on some browsers/ computers, when you navigate between pages (or hit refresh) the entire content loads slightly to the right, then half a second later, jumps back to the left where it should be. The distance is only around 5mm, over the course of a second, but it is noticeable.
Things that are useful to know:
It is a wordpress site, but has only basic functions- The menu contains jQuery but there's little other javascript to prevent loading.
All content is wrapped within a container that is centred using
{margin: 0 auto;}
There are several CSS style sheets, and some major tags such as the container have been defined several times- i even found a discrepancy between the width between two of these, but when fixed everything still jumps.
There are no images on the side that are causing it to jump by being slow to load.
The content only jumps if the content is greater than the screen height- that is, it goes off screen.
Content will jump with my old computer, but will not jump with my new computer, on the same network and connection.
On an older computer content will jump with IE 10, but not when you put IE10 into compatibility mode.
I'm afraid that i don't have the permission to put a link to the website, so i've tried to put everything i know about it here. I know that makes it more difficult, but any pointers to put me in the right direction will help a lot!
Update!
The scroll bars were the problem- I used the answer from this thread: Making the main scrollbar always visible
and all jumping has stopped!
You should simplify the problem removing 'things' until you isolate it.
If you don't have a preproduction or development environment to test make a copy of the page where the problem still exists. Then start removing things. If any div needs some content so the layout is stable replace anything dynamic or complex with simple text or images.
If the problem seems fixed removing something don't think you got it, undo what you just did so it still fails and keep on removing parts or functions that definitely have nothing to do with the problem.
When you have a minimal example that is still failing it will be much easier to figure out what the problem is or if not post the example here so we can help.
I'm using the Perfect Scrollbar jQuery app (http://www.yuiazu.net/perfect-scrollbar/) for this site:
http://thehummingbirdplace.com/
The scrollbar shows up when you hover over the News section, but it won't scroll down to reveal the content. I've used this scrollbar before successfully, so I'm stumped as to what is different now. I haven't been able to replicate this on a simpler page, when I experiment on another page it either works or just vanishes, so I'm not sure why it is successfully showing up, yet not scrolling on the main page.
I've tried taking out the second use of jQuery on the page too, just in case, but I get the same result.
Any help would be appreciated!!
The error was in the set up for the jQuery.noConflict(); command and has now been fixed