I know how to do this is JavaScript but is it possible to-do using css and media queries only to achieve the same result.
If the the window scroll position is greater than 100
then resize "myDiv" height to 100px
and if window scroll position is less than 100px
then resize "myDiv" height to its default value
No you can't do this with CSS, if you want to manipulate the view based on the current viewport position/scroll bar you need JavaScript.
Related
I am trying to position a logo just above the nav overlaying a responsive carousel. The trouble is, depending on the window size, the logo doesn't stay anchored to the nav. I don't know how to even approach this problem. Here is the project I am currently working on. Is there even a way to accomplish this?
The problem is that your logo (I assume you meant the transparent white round logo) is absolute positioned to the top of the browser, AND you're trying to make its position move with the resizing carousel. Try moving the logo inside the #slider1_container and absolute position, bottom:0 (instead of top:0)
This will force it to stick to the bottom of the carousel, regardless of the height of the slider, so it will appear to move with it.
Then, you've got the issue of resizing the logo to shrink with the window as well. If you set the logo's width to a percentage, and its height to auto, with a max-width set to whatever the greatest size you want to allow it to become, then that should manage that.
I have enormous table to render on website. I need to make it scroll horizontally. Normally I would set fixed width and overflow: scroll but not in this case. The table is pretty tall so I don't see scroll at the bottom of web browser.
Demo: http://jsfiddle.net/cpmjng5b/1/embedded/result/
I could set fixed height but I have text before table that height is dynamic.
http://jsfiddle.net/cpmjng5b/5/embedded/result/
What should I do? Try to calculate div.container height in JS? I already tried floating scroll plugin for jQuery but it is relatively slow. Can I make it in pure css somehow?
This solution is using jquery, but you could also do it with javascript.
Calculate the height of your window and subtract the height of the dynamic text.
Take that number and make it the max-height of your div surrounding the table.
The height in the fiddle is a little off due to the jsfiddle "Result" header, but you can add/subtract any additional pixels if you have a top navigation.
var viewportHeight = $(window).height();
var topcontentHeight = $(".dynamicText").height();
$(".container").css("max-height", (viewportHeight - topcontentHeight) + 'px');
fiddle
We have a DIV that is centered vertically in its parent and shows different text at different times, meaning its height is not fixed.
Is it possible to use CSS only to position this DIV just off the screen, at the top, then slide it down with animation?
We tried various combinations of translateY and webkit-transform, but these fail because translateY is based on the element's height, not the parent's, when using percentages. Using pixels doesn't work since the DIV's height varies.
A JavaScript solution is obviously possible, but is there a way to do this with CSS only?
http://pastebin.com/pVmXyfxi
Not 100% sure if this is what you mean, but you can move the div off the screen with top:-1000px and then change the top: value on hover (or click or whatnot). The animation part is defined in the div css settings and it runs when one of the settings is changed.
Live Site
I have a site using jmpress, and I'm having a hard time getting scrolling on my content. I'm able to scroll in Chrome by simply selecting text on the page and dragging down, but I'd like to achieve this in all browsers with native scroll, perhaps emulated by javascript. I've checked a number of plugins to do this like jScrollpane and tinyScrollbar, but none of them will work without a height set and overflow-y set to scroll. The second problem: even when I set the overflow-y to scroll, scrolling does not occur with the mousewheel.
Try this in the console: $(".step").jScrollPane();. Nothing happens. Set each step to have a height of 800px and overflow-y scroll, and scrolling works, but still this is only relative to the height of the window. I need some way of calculating the size of the surrounding elements (relatively positioned) so that the height can be calculated when the user resizes the screen.
So is it possible to achieve scrolling on an absolutely positioned element (slide) and keep the height as auto using jmpress?
You could use the window resize event of jquery to set your height dynamically after you set the height you could call the update method of tinyscrollbar to update the scrollbar.
I'm trying to make a fixed width, fixed height box that "mimics" overflow:scroll, but the scroll bar is actually the widow scrollbar (or a pseudo-window scrollbar). What I mean by that is, the box is sitting there and you have the scroll bar on the side of the browser scroll the box contents up and down. Possible with just css? If not, is there a solution with javascript?
Your box height is exceeding your window height. In following manner this could happen if you are in resolution 1024 by 768px
div style="width:400px; height:1000px; overflow:scroll;"
Solutions-
css- reduce height of the box
or
js- control height of the box [screen.Height] for different
resolutions