I currently have a site with a menu in a frame on the left and the content in a frame on the on the right. I want to move the menu frame to the top of the page (horizontal instead of vertical), but I want the menu to move up off the visible page when scrolling on a large content page, as though the menu was part of the content.
Note: I do not want to render the menu on the content page as all the current links target specific frames/windows and I would like to not have to render the menu on every request.
If you're asking whether it's possible to scroll a frame off the page, it is. Just use an IFrame. http://www.w3.org/TR/html4/present/frames.html
Just be aware that if you had lengthy dropdowns in your vertical frames, they may get truncated in a horizontal "menu" in an iframe of limited height.
Related
I have a webpage with a horizontal top sticky navbar 60px high.
On my page, I have links to locations on the same page with Link leading to id="someTarget"
My problem is that when the resulting link is clicked, the page scrolls to the target heading, but it is at the very top of the screen, behind my sticky navbar.
How can I specify that the scroll add a 60px cushion so that the target is at the top of the viewable area, not at the top of the screen?
So far I have just been manually adding in my id="someTarget" a few lines above what I actually want to be the target, but this seems a pretty imprecise way of doing it.
If you are okay with using a CSS framework for this, Bootstrap has what you need. There is an offset option that you could use.
Good evening community,
I have a problem related to a vertical menu that is scrollable when there are more items in the menu than the page can take vertically. If I scroll down to an item that is not displayed on the screen when I'm at the top of the menu and I click this item to get to the respective page, the page will get loaded but the menu jumps back to the top, so that the item i just clicked is not displayed on the screen again. But I want that the part of the menu with the item is shown when the new page is loaded and not the top of the menu.
I'm developing my site with python and django and using bootstrap for frontend, if that helps with my problem.
I will add some pictures to visualize my problem. Sadly i can't post pictures directly yet.
Starting Position 1 <- This is the top of the menu with the page 'Einführung' loaded
Scrolled Position 2 <- This is the scrolled position and I want to click the 'Print-Funktion'-link
Top Position 3 <- This is the menu after I clicked on the link (top position)
Scrolled Position 4 <- This is the menu when I scroll down after I clicked on the link
I numbered the pictures for easier reference. Currently the menu is in the state of the 3rd picture after I clicked on the link but I want the menu to be in the state of the 4th picture.
Edit1:
I forgot to add how I made the menu scrollable. I used the malihu-custom-scrollbar-plugin. The Plugin
Thank you in advance for your answers!
I've found a solution which is not perfect, because it will always jump to the top for some milliseconds after clicking on a link and then to the desired position.
I've used this when the page is loading
$(selector).mCustomScrollbar("scrollTo",position);
Html frames are good choice for some scenarios on web content, especially simple content management.
My page contains a top frame and content frame. My problem is, as the page moves down to end, the top should move too, and if scrolling equals top heiht, the top woldn's be seem.
Note: There is only one top page in this project and many content pages. The content pages do not contains also a top page code. Jus the known frameset template. The only difference is frames are desired to move .
What I could understand is that you tried to create a section of the page that scrolls as you scroll down/up on the page.
In your CSS, if your iframe id is "frame",
then do this
#frame{
position:fixed;
/* specify widths and heights as you like */
}
If you have a header that needs to stay at the top of the page use the
position: fixed;
technique, if im wrong you need to seriously rephrase your question.
http://nickscarantino.ministryportfolio.com/ Is the website I'm working on.
My plan for it was to have a different "header" for each section (the navication on the top). I want those headers to stick to the top, and use anchors to scroll down the page. But the anchors end up jumping around the page.
For instance, when i click "history" it should scroll to the "history" anchor and keep that header at the top of the page. But sometimes when i click "history" (for instance- after clicking resume) it will scroll all the way to the top of the page, rather than where the history anchor is located.
How do i fix this?
So on my page I have a menu that is fixed to the top of the page. The menu is roughly 50px high and spans the entire width of the screen. In order to display the content of the page properly on load I set an arbitrary amount of padding to the top of the body content. Now, if I want to link to an element on the page using:
anchor text
Normally when these links are clicked, the element in question is displayed at the top of the browser window. However, since I have my fixed menu there, the content (or at least the first ~50px of it) is hidden by the menu.
Is there a way to offset the inner-page link so it doesn't bring the requested element to the very top of the page?
Using Javascript (jQuery), assuming your content div and your hyperlink have an id, and, assuming I understand your question:
$("#yourAId").click(function(){
$("#yourContentId").css("padding-top", $("#yourContentId").css("padding-top") + 50 );
});