I am using full calendar io plugin for my scheduling tool.
I have fixed the header but I can't make the first column as sticky as it has time and I need to make it stay fixed when I scroll towards right end (due to many Names).
click here Normal picture without scroll
click here second picture little scrolled to right
Related
Before i start, I wanted to let you know that I have been searching high and low for a solution to my issue but the closest thread I've found is unfortunately without the answer to the actual problem - Position absolute inside div with overflow-x scroll and overflow-y visible
Essentially I got main page where I am dynamically loading some other pages and on some of them I used dropdown listboxes. It happened that I haven't noticed it earlier as content any of the pages wasn't wide enough for me to spot the problem.
The problem I face is absolutely positioned div (which contain dropdown) and visible horizontal scroll bar on the parent of this div. When I scroll my page horizontally the dropdown div stays in the same place on the screen. I read about "popping out" absolute divs under this link:https://css-tricks.com/popping-hidden-overflow/ but even there, I can observe similar issue I am currently facing, which is appearing of the vertical scroll on the parent element. I am trying to achieve similar effect like here:
http://jsfiddle.net/matcygan/4rbvewn8/7/ but stop vertical scroll bar to appear when the listbox is expanded - instead it should overflow the box and party cover horizontal scroll bar. Here I've found another prompt example how can I achieve it http://jsfiddle.net/b5fYH/ but when i try to play with it and make red boxes scrollable with content as well as overflowing outside of the content vertically, without creating vertical scrollbar, I am failing... I am also fine with using JS if CSS on it's own can't deliver such effect.
In the end after 3 days battle, the CSS won and I need to ask for a help...
Any support will be greatly appreciated.
Thanks in advance.
I'm trying to create a responsive website in Dreamweaver with a header and menu which initially scroll and then stick to the top of the page.
The header and menu would need to scroll over the top of a fixed hero image.
This hero image can't be defined as a background as it will be powered by a flexslider script to change the image after a set time.
I would also like the sticky header to possibly shrink down in height when it reaches the top of the page, to reduce the amount of screen space it takes up.
I've found a number of sticky menu examples on-line and some seem to have the annoying trait where the content directly below the menu disappears behind it at the point at which the menu sticks to the top of the screen. I would like to avoid this.
Please find a Mock-up of what I'm looking for here
Obviously, all of the above won't be acceptable on a mobile device.
So for mobiles, the header would need to scroll out of the way, leaving just a hamburger style menu fixed at the top of the screen.
I have found a number of examples on-line with elements of what I require, but nothing yet that combines everything.
I've tried cutting and pasting code from different sources, but haven't yet achieved the desired effect.
I don't know if what I'm asking for is workable, but I would appreciate if anyone could point me to examples of how to achieve this (or improve upon what I'm looking for).
Thanks
Neil White
Use this JS
http://stickyjs.com/
it adds the class is-sticky to the element which you wanted to stick to top. So you can add height in css for is-sticky class. Which in terms will reduce or increase the height of element when it reaches to top as per your requirement.
I don't have any experience in web development and I am trying to build a UI Grid to display a large number of data points.
I am trying to create a scrollbar to be able to scroll all data points (let's say for arguments sake that it's 1,000,000) and should be able to scroll horizontally across all data points. It should only load a 20x20 data points and lazy load the next page when the scrollbar is moved appropriately.
I've managed to get the horizontal scrollbar to show on the screen but now I am trying to get it scroll. I am using fattable (https://github.com/fulmicoton/fattable) as my inspiration.
http://jsdo.it/jpez/Q7g0
How can I get my horizontal scrollbar to actually scroll when you click mouse on it and move it? It doesn't move at all.
Your element stacking order is not correct. Add z-index: 1 to your scrollbar or move .signal-viewport before your scrollbars like this:
<div class="signal-viewport">...</div>
<div class="signal-h-scrollbar">...</div>
<div class="signal-v-scrollbar">...</div>
More info about the z-index
Since I'm still new to Javascript/Jquery/HTML5/CSS3, I thought I'd ask a question for all you much more experienced programmers out there.
I'm kind of stuck at the beginning of my program logic. I want to do a website with a parallax "scrolling" effect, however the effect should only take place when the user clicks navigation buttons on the edges of the screen.
The layout of the website will be like this:
O
OXO
O
The "O"'s are the content divs, "X" is the "home" page (point of origin). If the user clicks the arrow at the top of the screen (from point of origin), the page will scroll up. Same goes for any of the other directions. I'm wanting one giant photo of the establishment in the background that shifts it's position based on the specific content div they "scroll" to, using the parallax effect.
I've been racking my brain for two days trying to figure out where to start with this. Any help would be greatly appreciated, and please let me know if I need to be more specific about something. Thank you!
The home page content is in the middle of the parallax experience.
For this reason, you will need a parallax plugin that can handle both vertical and horizontal parallax effects to allow proper navigation in your webpage.
Consider: Scrolling Parallax Plugin for jQuery
The above parallax demo page allows you to scroll both directions.
Here's the method/approach I would take using this plugin.
1. Design your website with horizontal and vertical content as required. Layout example:
OOO Here, the top of the webpage is content about the "starting" point.
OXO Next, you have content on the sides of the "starting" point as shown.
OOO Finally, content is below the "starting" point to complete the webpage.
2. Since the webpage visitor will see the very top of the webpage which is not desired, use jQuery.scrollTo() Plugin to set the "starting" point on page load.
3. Use a plugin or method that will allow 4 transparent arrow "div's" that are at each viewport side in "fixed" position. When clicking (or hovering) with the mouse, this will simulate scrollbar movement and the parallax webpage plugin will react accordingly. Example of layout (note outer navigation is semi-transparent):
UUUUU Webpage top-content is here plus the overlay arrow for UP Navigation.
LOOOR LEFT and RIGHT Navigation arrows are seen on top of more "top" content.
LOXOR The center starting point will show the "fixed" Navigation arrows.
LOOOR LEFT and RIGHT Navigation arrows are seen below the "starting" point.
DDDDD Bottom-content is here plus the overlay arrow for DOWN Navigation.
The most difficult part of the webpage is to have enough "filler-content" that occupies the top and sides of the "starting" point. But if that "filler-content" is a thumbnail gallery, then this particular parallax page would look really nice (and unusual!).
I'm having a little trouble getting my head around a Javascript animated scroll issue.
I'm using the SuperScrollorama Jquery plugin which is built on-top of the Greensock JS tweening library.
The fundamental effect I'm after is to "pin" a section down, then use vertical scrolling to expand some content, then "unpin" the section once the content is fully expanded, so the user can scroll on - i.e. http://blueribbondesign.com.au/example/
But when I try to apply this same effect to multiple sections one after the other, everything gets all broken: the "unpinned" content below the pinned element is pushed off screen and it seems to miscalculate the height of the element when it performs the animation in reverse (i.e. scrolling back up the page). - i.e. http://blueribbondesign.com.au/example2/
I've been endlessly fiddling with the "position:fixed" and "pin-spacer" div, and tried attaching the Superscrollorama plugin to various containing elements, but still cannot work out how to get it to work.
Any help from the brilliant crowd-sourced minds of the web would be much appreciated,
Cheers,
TN.
I've been working with this issue myself. What happens is there's a blank div spacer put above the section being pinned with a height that you've defined in the pin() function. Secondly, the pinned element gets a position:fixed assigned to it. Both of these things allow the scroll bar to continue down the page while the element stays affixed. In turn, whatever you had below that section gets bumped down because of that spacer div's height.
If your pinned element is centered horizontally, first give it a left:50%, margin-left:-{width/2}px to fix it from pushing to the left edge.
Next, you'll have to detect the pin/unpin events (which are offered by the plugin as parameters additional to "anim"), and change the section underneath to also toggle a fixed/relative position. When you change that underlying section to be at a fixed position, be sure to set its "top" property to whatever the pinned element's height is. Once the pinned element becomes unpinned, change it back to relative positioning. Does that make any sense?
It seems that different techniques will call for different fixes, but those things are what I'd pay attention to... fixed positioning, and then using the pin/unpin events for adjustment.