Load elements to fill screen based on screen size - javascript

I'm looking for a way to fill the viewport with elements based on the viewport size.
Is there a way to use methods like createElement() and load() to do this?
Specifically, I'm trying to fill the viewport with small circle divs. The way I have it set up now, is to just manually code them all into the html and set overflow to hidden, so that the divs beyond the screen size aren't visible.
If this isn't possible, is there a way to tell the JS I'm running to animate only those divs which are visible?
I have a codepen with the divs set up here as a reference for what I'm talking about. At full screen size, you can see that there are divs missing from the bottom of the page.

Related

How to create scrollable overlay content?

I'm trying to recreate the page of Hello Monday and I'm currently just adding the static content before adding the parallax effect and auto-scroll. This is what I have so far:
Sandbox Link
One of the issues I'm running into is figuring out the best way to add the content in the overlay div and make it scrollable along with the background image. Should I place numerous divs at 100% height in the overlay? Not entirely sure what would be the best move here.
None of your "scrollable" divs should be scrollable you are going to need to get the wheel event on your body and from that you can basically paginate both parent sections, background and overlay.
All of the divs that will hold your content need to be 100% height or width of the parent depending on the direction of scroll.
document.addEventListener('mousewheel', (e) => {
console.log(e.deltaY);
// this will be the direction up or down
})
You will also need to keep track of the height of your parent containers, this is if the window is resized you can correctly figure out how many pixels it is until the next container.

Using FlowType.js with Flexbox Css

UPDATE: I originally thought this was something between MatchHeight and FlowType but it now appears to be an issue with using flexbox css. I commented out the flex css and FlowType works, but I need it to work with flexbox. Any ideas?
ORIGINAL QUESTION:
I have a page where I have 5 blocks with text and images in them. They are organized in a row and I am using matchheight.js to keep them all the same height and FlowType.js so the text will resize within the boxes and keep the proper layout.
Ideally the header text should all be the same size across the boxes as well as the body text.
However when the page first loads some of the boxes have different size text than the others - even though they all have the same base font size and the boxes are the same size.
When I adjust the size of the window everything recalculates and the font sizes become uniform. What is missing when the page loads that causes the text to not size correctly and/or is there a way to trigger the recalculation without resizing the window.
Here is the code I use to call the js.
$(document).ready(function() {
$('.front-page-guide').flowtype({
maxFont: 40,
});
$('.front-page-guide').matchHeight();
});
Here is a codepen: http://codepen.io/dll416/pen/xgeeoz
So you can see the html and css and see it in action.
The viewport has to be 1200px or below to see the issue.
Thx.

Absolute layout of an element that will overflow but is only constrained on 3 sides

I need to cerate a layout where a div that is the scroll container is absolutely positioned on three sides ( left,right and bottom ) but sizes dynamically with it's sibling container above. Both the scroll container and the sibling are in a fixed dimension container. I have made a jsfiddle which demonstrates my problem.
http://jsfiddle.net/HKu4j/4
If you follow the click instructions there you will see that when you click the top container after clicking the second container it resizes which ideally would push the top of div.myscroll down. This doesn't happen since div.myscroll has top set to 20px; Is there some way with the new CSS3 flexible box layouts to make this work ? I am looking for a solution that uses CSS rather than setting geometry dimensions explicitly with javascipt as I have done in the past.
I'm not sure that this is possible using css alone.
Try this jQuery dynamic width setting example: jQuery/CSS: Set dynamic width by content, avoid inheritance

Use CSS transforms or javascript to scale an element to fit its parent dynamically

I have a page in which I have a wheel of <div> elements, the entire wheel rotates when you click a button.
I achieve this effect by using CSS transforms, which are absolute in nature. However the wheel is very big, it looks nice on my HD display, but smaller screens get the edges cut off. I can not use % widths like I could with a normal layout, what I need is to scale the entire page down in the same way most browsers zoom functions work.
For myself I know that ctr+mouseWheel will zoom out the page so I can see the entire page, however I can not expect others to do this.
I know I can use -browser-transform: scale(amt); on a wrapper div to get the effect I want, however I can not figure out a way to do it dynamically. If I set the scale to .5 it will be .5, no matter the screen. I want the edges of the wheel to just be a few pixels from the edges of the screen on ANY screen. I know that media queries could be used to help the problem, but they would either leave me with results that are less than ideal, or require too many different queries. There must be a way to modify -browser-transform: scale(amt); programmatically, or some other way to have finite control.
Any thoughts?
Have you tried using media queries in css to target different screens. for example, have a media query in your css file that states that at a width of 320 - 480 pixels, the div containing this wheel is scaled to 50%. Then at 481-768 pixels, the div container is scaled to 75%. and from 769 pixels up, the div is scaled to 100%.
That should help you accomplish the dynamic scaling you want at different screen sizes. If you would like a demo, I'll be glad to make a jsfiddle showing it.

How to hide javascript animation outside of certain borders?

I'm new to the wold of javascript/jquery, but had this fantastic idea for an effect for my webpage. Let me explain the layout abit.
My website is contained within a wrapper div, which assures that my content remains at 1000px and centered on the screen regardless of the width of monitor (assuming the monitor is bigger than 1000px). This content contains a header image that is presently used to display a colourful image (1000x400px) displaying the title of the website/company/etc. So this image is the width of the content container.
I thought it would be cool to instead of having the name of the company set on the image, have it scroll left to right, right to left on the image. This can be done with jquery and the animate() function (or a function close to it). The problem is that once the website title has scrolled to one extreme of the webpage, it will overflow out of the 1000x400px image and outside of the content container - thus into the wrapper region, which is simply a grey background.
My problem is that I can't conceptualize a way to hide the scrolling text (which would be represented by a very high z-index) behind the background wrapper (which is a simple background, so the lowest index possible). I only want the section of the scrolling text that is over the 1000px-wide content container to be visible. Anyone would know how to hide what is over the wrapper background? I thought of maybe recreating the wrapper background with some divs delimited by the presence of the content container; this div would have the highest z-index possible so it would hide anything that it superimposes. Is there a better/easier way to implement this?
Let me know if I'm not making sense :)
Pat
Maybe I'm missing something here, but;
If the scrolling text is a child of the wrapper div, then all that needs to be done is to apply the style overflow:hidden; to the wrapper div.

Categories