I got my tabs working how I want - please view the site here:
http://beelinetest.site50.net/uw_virtual_tour.html#
Does anyone know how I can hide the content at the bottom of the screen (scroll down), this is the info that slides up when the tab is clicked. But make sure it appears as it slides from behind the footer?
In CSS, add overflow: hidden to your #maincontentcontainer element.
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 am creating my website and i have a problem.
On top of my page there is my header and in it my nav
When i scroll down the page and the header isn't in the visible window i want to slide down (from top) another DIV (then fixed to the top and always visible) with a button. When the User clicks on the button must my header slide down.
If the user scrolls back to the top of my page an the header comes in to the visible window my fixed DIV with the buttons must disapear.
I hope you understand what i mean with my very bad english und hope you can help me.
i create an working fiddle for u
https://jsfiddle.net/ps4952ss/5/
hope this help
I think that you want to use StickUp, this will keep things simple and quick. You can get it from Github the url is https://github.com/LiranCohen/stickUp, I hope that this helps...
I created a picture which shows what i want.
Click to see the picture
The user see the page at top - everything is normal
Now the user scrolls down and the header goes up and isn't in the visible area anymore. At this point comes the trigger down..
...and when the user clicks the trigger the header slides down AND can slide up because of the trigger.
If the User scrolls to top the trigger slides up and we are in Stage 1 again
I have created a header image of about half a page. When user scroll down the images goes down with scrolling as well. I want the image to go up and hide and does not effect the content beneath it. I have checked many single page websites websites where images are on some place and when scrolling they goes up and down with scrolling and does not effect the other things.
I tried to use position:fixed but it didn't work, position:relative is also effecting the content beneath it.
Example of what i want : http://www.piedpiper.com/
Kindly tell me how to do this.
Set position:fixed for parent element of image.
I am using wordpress' revolution slider that spans the home page. I want to put a scroll down button, so users are aware they can scroll. I want something like this one: https://exposure.so/
I tried putting a div on top of everything and a link that links to anchor link further down the page. It works, but I don't know how to make the div disappear when the user goes down, and reappear if they go back up. Anyone know how to fix this?
You need to calculate the scrollbar's handle position using javascript or jQuery.
If its towards the bottom of the page, hide the button, else show it.
To find scrollbar position : LINK
I was viewing some Facebook photos. I observed this thing, when you click on an image, it opens as a modal overlay. The background is still hazily visible, the scroll pane is still there, but the scroll bar just disappears. Can anyone tell me how to do it? I mean, setting body's overflow to hidden will make the entire scroll pane disappear. Here the scrollpane is there, but the scrollbar is not..
i think what youre looking for is the osx-like scrollbar that fades out when not being used.
see Lion-like scrollbar with jQuery?