Seems like a simple thing at first, but becoming a bit more complex than I thought. I'm working on a simple portfolio site which I'm doing as one page with jquery to make it look like a full website. Currently my plan has been to have each piece of a content in its own div. I'll have the content, above, on either side and on the bottom. I specifically want to achieve this effect. How can I align these things so that there's a block of text to each of these directions, all aligned and in such a way that if there's window resizing the whole thing doesn't look broken?
I'm not able to imagine what you are looking for. It would help if you post a sample code or a image of what you are looking for. But you could try style="float:left;width:100px" for the DIV tags. All div tags will appear stacked next to each other.
Also ensure you put these child DIV tags in a parent DIV tag with style="overflow:auto"
I do not know what do you mean, but i think you can look for a css floating grid system.
Here for a starting point: CSS: Fun With Floating in the Grid
Search for a grid system and look at the css definitions.
Related
The main idea is to get width and height from divs (boxes) from Backend and then I want a function or something in react that will structure page like this.
I found this name is Mansory, I want to do a it like it.
Sometimes the big box (Mentions) can stay on top right.
I want the small boxes to occupy empty space. I was thinking about using tables to structure it but I can't figure out how to make a function to do this automatically and dynamically.
So the idea is to never have free space, there always be a box there.
I think you guys got the idea.
Thanks.
You can use the CSS flexbox to do so.
setting flex-wrap: wrap in the container and using flex-grow: #desiredSize for items will probably do.
here is a great guide by css-tricks:
A Complete Guide to Flexbox
I'm not sure receiving width and height dimensions from the backend is a good idea, this will not result in a responsive website. For your use case, CSS may be the best solution.
You can use either Flexbox or CSS Grid. In my opinion, a screen like this can work really well with CSS Grid and template-areas. Take a look at this.
I want to have one image above another one that is being revealed on scroll.
I am thinking of a similar effect as on this page: https://affinity.serif.com/de/photo/ (live-filters section, called "fixed-scroll" here).
Preferrably a native CSS solution or with as little JS as possible.
So far, I've found this example https://tympanus.net/Blueprints/ScrollingLayout/
It's almost what I want but I can't think of a way to make the background-attachment fixed to the element's parent rather than the whole viewport.
It only works when it's fullscreen and there's nothing above this effect.
I've also thought about a solution using translate-y but can't find a way to slide the top image up revealing the image underneath instead of sliding the lower image upon the first one.
Can you help me out here or point me in the right direction, how this may be achieved? Thanks!
As far as I know using background-attachment: fixed might be the only way to achieve this particular effect using only CSS, but it looks like that doesn't quite solve your problem.
I would try a simple parallax scrolling library such as parallax.js. This uses javascript to achieve the desired effect but you can apply all the code via CSS data attributes, like so:
<div id="mydiv" data-parallax="scroll" data-speed="0" data-image-src="/path/to/image.jpg"></div>
With data-speed="0" the image inside the div will be stationary as you scroll past.
I wonder how to achieve this effect on http://www.squarespace.com. What I mean is:
you scroll down and at one point the image of computer monitor stays at fixed position
after that, the images keep changing while you scroll.
How can you control content and change CSS using Javascript? It should be on window scroll event:
window.onscroll = function () {
// but I don't know what to use here
}
At smaller browser width, the above elements become a carousel, but I am not interested in that.
Because of the tags on this post I'm going to assume that this question is regarding the skrollr library
Skrollr is controlled via HTML data attributes. What you're seeing when the monitor scrolls, and then becomes fixed at a given position, is referred to as "pinning". How you define data attributes in Skrollr can be pretty confusing at first, but once that is understood, the library is kind of a dream to work with.
I printed and pinned Petr Tichy's cheat sheet next to my monitor the first few weeks of my first skrollr project.
An example of pinning in Skroller would be accomplished as such:
<div id="example"
data-100-top="position:fixed;"
data-anchor-target="#example">
These words are pinned 100px from the top of the screen
</div>
The purpose of Skrollr is that knowledge of jQuery/JavaScript isn't really required. The css is manipulated by the library, and defied in the data elements. The above example shows changing the position to fixed, but if you wanted the div to expand 100px from the top you could input width/height css parameters in there, or just about any other css you'd like.
If you're looking for a more robust skrolling library, in which jQuery knowledge is more of a requirement, I recommend you take a look at ScrollMagic (my lack of reputation prevents me from linking to scrollmagic).
(Sorry in advance for the long post)
I'm trying to help an open source CMS project called N2 CMS modernize its drag & drop toolbox. I'm not sure what the best way to do this is, but I basically want to take a floating menu and "dock" it against the left side of a web page, such that the entire body of the page is shrunk in width. However, the functionality of this panel depends on the user's ability to drag something out of the panel and drop it onto the page.
This is what it looks like currently. There is an outer "management" page wrapper (the blue bar that is visible at the top) and an inner iframe which wraps the content page being edited. The drag & drop panel is a floating div that is rendered by including some code in the content page akin to #{ RenderToolbox(); } (it basically just writes the div + some inline CSS out to the page)
This is what I'd like it to look like, ideally. You can see how the toolbox now has the whole left column (so the page isn't obstructed) and the whole width of the page has shrunk.
Is it possible to accomplish this by injecting a <div> into the page? Maybe some kind of jquery that can re-parent the whole body inside of a <div> container? Is this even the best way of going about this sort of thing?
I guess something like this would be possible:
jQuery(function(){
$('body').wrapInner('<div class="wrap" />')
})
However, we are worried that it might be hard to make this look good on all layouts, e.g. layouts that use absolute positioning or html/body margins.
Therefore, we are turning to the larger Stack Overflow community for any advice and thoughts on this problem. Your guidance is much appreciated!
I went through many posts and couldn't find a solution. (I came across with a similar problem in this post, but I can't really related to my exact situation).
Issue: I have to display a large data table (with more than 30 columns) on a screen. My challenge is - the client doesn't like Horizontal scroll bar of any mean.
I am thinking of splitting a table into pieces and using a simple sliders like Jquery: "serialScroll" or "ContentSlider". However, here is another challenge: for 508 compliance, my table needs to be a single table instead of splitting multiple table in different slides.
I am visioning I need a "view finder" div on top of "large table" with control to shift table the size of div Left and Right, http://img202.imageshack.us/i/tableviewfinderidea.jpg/.
My question is:
Is there a JS or Jquery solution out there doing this? (I seriously searched two weeks without any luck.)
Is there any other recommendation?
using a container div styled with 'overflow:hidden' allows you to do the masking as shown in your graphic. then it's easy to move the masked content by setting it to 'position:absolute' and tweaking the 'left' value.
i put a short example of this online at http://jsfiddle.net/BDZPj/
only thing is, you have to know the height of the content being scrolled, as you have to set a height for the mask too. you could read the height from the table on document.ready though, and apply it to the container initially.
anyway, like 'Pointy' says in the comment above, using a standard scrollbar is surely the best way to do it - sometimes the client has to move, too.