Fixing problematic layout / How to get elements height? - javascript

this question is related to my before question:
position relative elements after absolute elements
I updated the JsFiddle provided there to reflect my current html (for which I've no URL right now) more exact. See here: http://jsfiddle.net/dkxUX/22/
I realised that this layout is problematic for me.
In the comments to o.v.'s answer he pointed out that I could create additional wrappers,
like for example a #header div. This is not a bad idea indeed, since this way I would still be able to position my elements absolute within it, however - as long it is positioned anything else than static.
And here comes my problem:
I was curious if the height of an absolute positioned element will affect the height of its parent.
Actually, it seems not: http://jsfiddle.net/qFh6s/1/
Beeing frustrated I tried it with jQuery:
http://jsfiddle.net/WD6LF/1/
Result: Beeing even more frustrated, running out of ideas.
I just cannot give the elements fixed heights, because their content will vary.
Actually, I'm already annoyed by my html, for example the additional wrappers for the sticky footer make it seeming less semantic to me. Furthermore, I begin to understand that putting everything into divs and giving it an absolute position is NOT the answer to all CSS hurdles.
So I'm open to any useful suggestion, whilst making myself ready to scratch everything and start over.

You should really look into floats. Floats will help you position elements even if there height is not known. And you will stop swearing...:)
Good designers do not use tables or positioning, they use floats. You can use clear:both on any div if you don't want it to follow any other div. I didn't quite completely read your question but I am pretty much sure its floats you are looking for. Here is a quick tutorial on floats. Go through it and you yourself will be able to solve your problem. I hope your problem gets solved. Happy designing!!

Related

how to add css style to katex html

I'm using katex for math symbol in my html.
The elements overflow form the parent div, When I'm adding style to the container div, overflow: hidden to parent div those elements not shown at all, it is possible to limit the size of the element?
thanks.
What effect do you expect from limiting the size of the container?
As far as I know, KaTeX doesn't support wrapping. (In part that's because KaTeX doesn't worry much about horizontal widths. It does vertical positioning but horizontal width was left to the browser to sort out. Or at least that was the case last I worked on it, there might have been changes motivated by constructs such as underbrace.)
I guess a more reasonable thing to do would be to scale down the math till it fits the desired width. KaTeX doesn't support that either, but there should be ready to use solutions for that or there somewhere.
If you know the setup where your formula will be shown, then wrapping it manually usually gives the best results. Humans are good at finding places where wrapping makes sense, and at seeing alignment to help the reader.
I've faced this situation and found that you can edit the katex.min.css in order to adjust the font or use your own fonts. Note that you usually ignore node_modules (if you are working with npm)
Heres is the official guide by Katex.

Fixed position in only one direction in future releases of CSS?

I know CSS is not supporting position: fixed for only x or y but only for both a the same time.
The common approach to solve this seem to be to use fixed positioning in combination with jquery to re-position the component with respect to the scroll amount in the non-fixed axis. The downside with this is that the component will lag a lot when scrolling in this direction.
My question is if this is a problem that is being looked at for future specs of CSS? Anyone know?
I think we need a fixed-x and and fixed-y positioning value.
This is especially becoming a problem now with touch devices where scrolling in both dimensions are more common.
Here's a fiddle:
http://jsfiddle.net/UfZPa/1/
which shows what I'm after but not the actual problem because this very small example is very fast as it looks now.
Update
From the CSS ED:
Intersection between the stickily positioned element and the bottom of
the sticky-constraint rectangle limits movement in any direction, so
the offset never pushes the stickily positioned element outside of its
containing block. However, when the element is free to move within its
containing block as the page is scrolled, it appears to be pinned to
the relevant flow root edges, similarly to a fixed position element.
I think this is describing what I want but I'm not sure...
Update 2
To clarify my app is basically a grid with scroll-overflow in both x and y (like Excel). What I want is some labels to stick at the edges in one directionwhen being scrolled out of view but at the same time stay in the normal flow in the opposite direction. I want this for both fixed-x/flow-y and fixed-y/flow-x. And the problem again: With lots of labels this makes scrolling very laggy using the jquery-solution. I think we are missing an option to make components fix in only one dimension and still flow in the other. Maybee I'm the only one wanting this =)
A quick skim through some CSSWG notes such as this one leads me to believe that position: sticky might be a potential solution to this problem, provided you only specify the offsets on the axis you want the element to be fixed.
There is a point of concern though: unlike a fixed element which is considered absolutely positioned, a sticky element starts out relative to its containing block. Since relatively-positioned elements are not taken out of the normal flow, you will have to account for the layout of other elements in the same flow as your element, among other things, and (thus?) forcing the element to act like it's fixed regardless of scroll position may be a little more difficult.
Of course, there is too little information and implementation available to verify any of this — I'm just making an informed guess, and the document I link to is an ED not meant for general reference — but you can always ask the www-style mailing list and see what the good folks there have to say. I haven't experimented enough with position: sticky to be able to comment further myself.

Wordpress template div not expanding

I have a wordpress theme that i'm building but i've hit a snag with some code and can't seem to get my div to expand correctly. I've tried clearing the floats at different positions, i've tried overflow: hidden, but nothing seems to work.
What i'm trying to do is have the content slide in from either side based on what header you click. The content is based on a wordpress post for each link. So the client can easilly edit it to any size.
Because of this it isn't viable to use pixels in the sizing of it. And i know that absolute positioning means that pixels are very nearly the only option.
I've messed with everything i can think of in firebug and just cannot get it to expand.
You'll find the site here: http://tinyurl.com/okd5wnf
However i couldn't get this to work either. Maybe that'll give you a clue as to what might be wrong.
I know it's a long winded post, and i apologise. If i have time later, i should be able to make a jsfiddle. However time is short at the moment.
Any help would be appreciated. Thank you very much.
Your problems stems from setting the <div class="box"></div>'s position property to absolute. Give the parent element(<div id="body-wrapper"></div>) overflow-x:hidden; to hide children that are not being displayed, and then use negative margins to position child elements within the viewport (the parent element). This is basically how most sliders work.
Remove position absolute from box class. please also mention what desired layout you need for content. we will suggest you classes for that.
Romove position:absolute from div.box
I guess that's all.

CSS Skill Bar Animation on Scroll

I'm looking to do something like this. I'm using code from this answer here but the answer is never made entirely clear. They are suggested to use this jquery plugin here but I haven't been able to get it to work. I would go with the first example's code, only, I'm using Foundation 4 and the progress bars are something that come with it and are simpler to create. Also, the animation code provided in the second example is a lot cleaner-- overall, the first example is kinda messy, code heavy, and redundant.
My code is live here. I'm working with the skill bars in the about section. Before the user gets to this point, the animation should be paused. Once the user scrolls to this part of the page, the animation should play.
EDIT: Also, if you have any suggestions to stop the bars from "breaking" out of their containers when you scale the page (this site is meant to be responsive), I would appreciate that as well.
EDIT2: I've noticed as I've been playing with this that overflow: hidden; on .progress fixes my "breaking" issue.. however, when you resize the window, the sizes stay at what they initialized at. I know realistically users visiting my site likely won't be resizing the window a whole lot, but for employers looking at it, it'll kinda be lame if it doesn't work properly. I'm having this same issue with the grumpy-cat button overlays where it initializes at the first size and doesn't resize the overlay after that. Suggestions to this would be really, really appreciated!
If you know where your skill bar is and you know where your screen is at, you only need javascript. (no plugins or weird stuff)
To get the vertical position of your screen it's simple:
window.pageYOffset
To get the vertical position of your div, you just need
div.offsetTop
In your case, I would give an id to the div that wraps all the skill bars and set a loop (window.requestAnimationFrame https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame ) to check if you're within reach of the div (say, if the difference between the window offset and the div is less than some amount).
If the answer is yes, trigger the animation.
The best way to do the animation is by a css transition. (if you need a good intro to css animations here's a video that i found helpful: http://www.youtube.com/watch?v=VoncDvOfUkk )
You can set css animations from javascript.
The idea is that you would set all your "meter" widths to 0. Then in javascript do something like:
div.style.transition = "width 1s";
div.style.width = someValue;
My recommendation for the value to include in the div is some constant fraction of the "progress" div, as in with % as opposed to em or px. This technique should work. (in case you still have issues, you have a window.requestAnimationFrame loop going on so you can recalculate the values at each timestep... although... beware performance).
The reason you were recommended jQuery is because when you're going to have to update all the divs in order to animate them, just writing $(this).find('.meter') and then addClass('.expand') is so much easier.
Hope this helps

Marquee on mouseover and overflow

I've searched high and low for a tutorial but I can't find one.
It is really a simple task that I see in lots of websites.
Pretty much like I have a menu, with a set width, and if my link is extra long, I want the overflow to be hidden, and when the user mouseovers the link, it will marquee the rest of the text.
It really shouldnt be this hard cuz I see it in lots of websites.
I really want to avoid using the marquee tag and go for javascript instead but my javascript is quite horrible and jquery is absolutely impossible to follow.
Any suggestions?
Try this:
http://jsfiddle.net/bryanjamesross/vsQFE/4/
The trick is that you will need individual container elements with overflow:hidden and set widths for each link, otherwise the whole container will scroll, instead of each link. In my example, I contained each <a> inside <li> tags that had set widths and overflow:hidden.
Then it's just a matter of hooking up the jQuery and animating correctly.
edited: fixed an animation bug, and made a the code a bit easier to follow
Just add this to your element
onmouseover="this.style.overflow=''" onmouseout="this.style.overflow='hidden'
Did it help?

Categories