So, I am having trouble with iframes, I included in the dropdown navigation and the alignment of these iframes according to the navigation length, but its going across the horizontal way.
I am quite new to HTML and don't know how to solve this. I have attached the picture too as a reference. I want the result on the same page so I don't have to scroll.
Related
I've integrated a Dash dashboard into a Flask application. Basically I've sticked to this medium and tailored it to my needs. Everything works as expected and the dashboard's content shows up as an iframe element. My problem is that the whole iframe situation feels a little hacky since the website has two scroll bars. The outer one for the main content and the inner one for the iframe. The UX is just not perfect as the iframe content sometimes starts scrolling before it's entirely visible.
There's one obvious solution to this problem that sadly isn't suitable for my dashboard. I could just increase the height of the iframe element until it fits the entire dashboard. That way I would get rid of the scrollbar. However, I have a sticky element in my dashboard that follows the user from a certain element onwards. Getting rid of the iframe's scrollbar would break the sticky element and I would really like to keep it.
Another solution I thought about that I'm just not capable of developing on my own is the following:
Enable main scrollbar and disable iframe scrollbar if the iframe element is not entirely visible. If the iframe element is entirely visible check if the iframe's scrollbar is at its topmost/bottommost position and enable upwards/downwards scrolling while disabling downwards/upwards scrolling.
I guess (hope) it's a lot harder to phrase than to actually code it. So I prepared some top-notch powerpoint visuals for easier understanding.
Blue background: main content
Red bordered rectangle: current view (scrollable)
Yellow rectangle: iframe (scrollabe)
Is there a way to achieve this behavior? I'm not particularly good at js & css so I would really appreciate if you could help me out.
Cheers
I am developing a react web page, where I am using this kind of layout.
But the height of the page could be even more than 4k px because I do not exactly know how many "boxes" will be displayed. Therefore, I added scrollbar to the page.
Now I would like to have aligned items to the bottom (top is already aligned by default) when the user is scrolling.
To achieve this, every column must scroll independently but synchronized at the same time.
Does someone have any suggestions on how to achieve this goal? It is some kind of parallax in combination with the masonry effect.
Thanks for any ideas.
An idea would be to contain each of the columns in their own div and then use the parallax effect to scroll all of them together.
Wondering how I can achieve the following effect on a website I'm building:
Div with 100vw width and 100vh height (we'll call this #container2) hides to the right of the home page (we'll call the home page #container1).
Moving mouse towards the right edge of the page causes #container2 to peek out.
If the user clicks on the visible portion of #container2, it slides all the way to the left, fully obscuring #container1.
The user is now on a new page with a corresponding URL, where they can scroll down and view more content.
I've got the first 3 steps more or less figured out. What I need help with is figuring out the best way to:
Handle the URL transition from site.com into site.com/newpage during the sliding animation
How to dynamically load the new page's content to the #container2 once the page transition happens, so the user can scroll down and see the new pages content if they click into it, but don't have to load the content if they choose to stay on the homepage.
Making it so if someone types or is linked directly to site.com/newpage, they will see the same thing that someone who started on the home page, clicked #container2, and watched the transition animation sees (but without showing a page transition).
I don't have any code snippets to show because I'm not really sure where to start. Any help or direction would be greatly appreciated. If possible, I'd like to use a vanilla javascript solution, as I've managed to make all the other features on the site run without JQuery. If JQuery is the only way to do this though, I'd still love to hear the solution.
There are a lot of ways you could do this. My intuition would be to have only one page that has different url fragments. Your question is fairly broad so my answer will also be broad.
One approach would be to use the target pseudo-class in css. All you need to do is make container2 a link that adds fragment to the end of the url that matches the classname of said container. You could have a some style for :hover that makes the container slide out and some settings for :target that brings the container to the center of the page. Container2 could have have a second section beneath the fold that contains the rest of the content for the page.
You could do something very similar with javascript by adding and removing classes from the various elements, but using the target pseudo class will help with your last bullet point. If a user goes directly to the link with the fragment, they will see the page with that container displayed.
I hope that gives you a place to start. Here is some info about the target pseudo-class.
I'm building a one-page site with the content area as large content boxes stacked down the page.
http://salondoreen.com/lowercasemenu.html
I'm looking for ideas on a way to use javascript to jump to each content box. With a one-page site like this, it takes a lot of scrolling to get to the bottom.
My idea is to somehow make this easier. If you are in one box, and you scroll down just a single click, I want the next box to scroll all the way up the page in one jump. That way the content stays easy and readable, and a box will never be half-on half-off the page. Theoretically you could scroll to the bottom of the page in less than ten clicks.
Does that make sense? I'm thinking of something similar to the home screen on android phones. It jumps horizontally between screens, no matter how little you swipe. There will only be one box on the page at time.
Disclaimer: I am a noob web developer, any and all help is appreciated. Thanks!
I would point you toward binding on the scroll event with jquery .scroll(), and using either IDs via http://myurl.com/derp#scrollhere style of links or use the jquery.ScrollTo plugin
I am trying to make a sidebar div sit below a header secion, when you scroll down, it will turn into a fixed div and stay fixed until the bottom of the page, once it reaches a footer section, it will stick to the top of it and allow me to scroll down the footer area without seeing it anymore.
There is a perfect emaxple of what I am trying to describe on this site http://madebymany.com/blog/apples-aesthetic-dichotomy
In the left column, it sticks as you scroll down and then un-sticks at the bottom
I am looking for a good way to do this, hopefully an example or tutorial, I realize it is done with javascript changing the divs properties. I have tried searching but all I could find was old outdated articles over 5-6 years old and they only did half the job. I am not sure even what to call this feature?
That web site is using jQuery Scroll Follow.
Note that according to the jQuery Scoll Follow web site...
The Scroll Follow object will remain inside its immediate container.
... hence why the scrolling stops before the comments on your example web site; the element which is scrolling on the page is constrained inside of its parent <aside> element. You can check out the example.
You basically handle the page's scroll event and move the box around.
Most tutorials require jQuery, so get familiar with it. If you want a tutorial, here's a working one: http://designwoop.com/2011/01/how-to-create-a-jquery-sticky-sidebar/.
Why not dissect the code of that website too?