Slide in/slide out header div / reveal partially hidden div - javascript

I would appreciate some help and insight on a solution to this problem. I am developing a website with a header div of initial visible height of 180px. The header div is 340px in total height. When a user clicks on a link, I am needing the header div to slide down to reveal the rest (top) of itself. So, mathematically speaking, when a user loads the page, the bottom 180px of the 340px header div will be displayed. When they click the link, the rest of the div slides down to reveal its top 160px. When a user clicks the same link, the header div slides back up so only the bottom 180px is displayed again.
I have tried getting this to work, but am not sure what I am doing wrong. My initial thinking was to use slideToggle() (hide/show), but I can't seem to get that to work. Others on StackOverflow suggest animate(), but I don't know how to get that to work either.
I have searched on StackOverflow and seem to find a lot of questions regarding showing and hiding an entire div, but the problem is this completely shows and hides the divs. I am needing my div to slide down to reveal the top hidden portion and then slide back up to it's original resting position (-160px offscreen).
Any help would greatly be appreciated! I have included my starter code below:
HTML:
<div id="header">
Click me to reveal the top half of this div
</div>
JQuery:
$(document).ready(function(){
$('.toggle').click(function(){
$('#header').slideToggle("slow");
return false;
});
});
CSS:
#header {
position: fixed; /*I would like this div to always be fixed to the top of the browser window*/
top: 160px;
left: 0;
width: 100%;
height: 340px;
z-index: 10;
}

Try this JSFiddle, please.
http://jsfiddle.net/WFxLJ/3/

Related

Jquery slideToggle to slide a div from the top of the screen - but top of screen changes during scroll and div is not visible

I am using Jquery slideToggle to slide a div from the top of the page. The effect is working, and can be seen here (PLEASE HOVER OVER THE MEMBER LOGIN NAV BUTTON TO SEE EFFECT, the blue div will slide down):
My issue is, that when the page is scrolled downwards, the div is still sliding down from the very top of the document, not the top of the viewport window, so it is not visible. If you scroll down the page, and hover over member log in button on the right, you will see the problem (main nav moves down, but the hidden blue div is no longer visible).
I am wondering how I can recalculate where the top is, and tell slidetoggle to slide the blue down from there.
This may be helpful, the code I am using to affix the regular nav to the top of the page is the following:
$(function() {
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});
});
Looks like you'll have to change your script around a bit, but the way I'd go about this is to wrap all your nav elements (the login form and the nav bar) in a div and give that div
position: fixed;
That way your nav will be fixed at the top of the window and the login form will remain at the top of the screen regardless of scrolling.
Like this:
HTML:
<div id="nav-section-wrapper">
<div id="login">...</div>
<div id="nav-wrapper>...</div>
</div>
CSS:
#nav-section-wrapper {
position: fixed;
top: 0;
z-index: 1;
}

when a div is not displayed, forget this css rule

I have a situation where I have 3 divs :
- Menu - Header (#rt-top-surround)
- Showcase (#rt-showcase)
- Main Body content (#rt-mainbody-surround)
The Menu is 'sticky' with position: fixed. Therefor I have to move the div that is rendered below it with padding (padding-top: 120px; margin-bottom: -120px;).
The problem that I run into is that on some pages the second DIV is #rt-mainbody-surround. (Than this div is rendered properly.)
But on other pages I have #rt-showcase (that displays some promotional images) as second DIV followed by the main body DIV.
So what I would need to implement is a rule that not adds the padding & margin on the rt-mainbody-surround div when the rt-showcase is displayed. And I'm not wether to do this with Javascript or with PHP and how to accomplish this.
I've made an illustration to show what I exactly mean.
Hope anyone can help me out here! Thanks!
Illustration
If I understand the question correctly you want a margin below a specific div only if another div isn't actively visible. The best way to handle this is to add a bottom margin to the top div and negative margin to the div below it (that can be shown and hidden). The css for that is:
.top {
margin-bottom: 20px;
}
.middle {
margin-top: -20px;
}
Sometimes a picture is worth more than some code though so I created a fiddle here. Enjoy!

CSS/JS content scroll UP instead of down

I'm building a site with the navigation bar stretching across the entire site and it's fixed.
Under the navigation bar there is an image, a background image, which is set as a cover. And under the image is the main content.
When you scroll down, the navigation bar covers the image from top to bottom and the main content is now visible, effectively scrolling in a downwards fashion. I would like to "reverse" it. So the navigation is still fixed with the cover image under it but this time, when you scroll down the main content comes up and covers the image from bottom to top. So when you scroll down, the main content scrolls up.
Let's say my image has a 1 at the top and a 2 at the bottom. So, normally when you scroll down the navigation bar covers the image from top to bottom the 1 will disappear and the 2 will be visible until that is also covered. The effect I'm looking for would make the 2 disappear and the 1 would remain in the same place until it is covered by the main content.
I looked into parallax but I'm not sure if that's the right thing to go with. And I have no idea how to do achieve this effect.
Hopefully you'll understand what I'm trying to do here. If you need any more info then just let me know.
Thanks in advance.
EDIT
The effect can be seen on the abduzeedo frontpage
You need the image to be "attached" to the background ?
If so, cannot you just fix it to the background ?
body {
background-attachment:fixed;
}
Source: http://www.w3schools.com/cssref/pr_background-attachment.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
Note: Be careful using W3Schools, their information is often incorrect, see here.
Here's an example with an img element.
Demo
code view
The basic HTML layout:
<nav></nav>
<img src="/image.ext" class="scrollup" />
<div class="main"></div>
Your nav will be positioned fixed, as you said. The image also needs fixed positioning. We set its z-index to -1 to make sure it's covered up.
img {
position: fixed;
width: 100%;
z-index: -1;
top: 20px; left: 0;
}
The main element is positioned relatively. Because our nav and image both have fixed positioning, the top value is relative to the top of the viewport. 100% means that .main starts as soon as we start scrolling.
.main {
background: white;
position: relative;
top: 100%;
}

Get rid of useless scroll bars on fancybox iframe

I have some content I want to show in iframe with fancybox. When I use it, it pops up with horizontal and vertical scroll bars even though all the content is inside of it. Inspecting it in Firefox shows that when I click on html everything is inside but there is a little left over that is outside of the highlighted box. The next level up is iframe.fancybox-iframe which includes the scroll bars. I looked at the css and that has padding and margins set to zero so I don't know why the scroll bars are there. Right now as far as options I just have autoSize:false. All I have inside the body of the page I want to show is a form.
If anyone wonders which class name to use
.fancybox-inner {
overflow: hidden !important;
}
And if you found a small white background you can reset it using
.fancybox-skin {
background: inherit;
}
Try adding this to the css:
.style{
overflow: hidden;
}
If it didn't help, please post your HTML and CSS.

Move loading div down as ajax content loads

The form I am creating for a mobile website shows new fields based on previous selections. i.e. - a user selects and option from a dropdown menu (a date) and then a series of times shows up based on the day selected. The times are not showing until the day is selected.
I have a spinning loading div while the times are loaded in the background via ajax. The problem I am having is that the loading div sits at the top of the page when the 'action' is taking place about three-quarters of the way down. This 'action' part is in the viewport (it's a mobile website) and the loading div is at the top of the page - which is far above the users viewport.
How can I bring the loading div down so that it's always in the current viewport? How can I make the loading div follow the place in the form where the user currently is taking into account scrollbars?
I have been trying to use the vertically centred html/CSS model as described here:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
But it is not working and the centre of the page doesn't seem to update at each event when a form element is clicked. I think I need to use the focus or blur event for the form field to update this and reassess, but I don't seem to be able to get it working.
Does anyone have any tips on how to move the loading div to the centre of the current viewport area each time the page increases in length?
If your loading div is designed to be inside the document flow - e.g. a new content block inside the form - it's best to use jQuery to insert the loading div inside the content itself. It will be very difficult to position it pixel-perfect otherwise.
If the loading div is to appear as an overlay to the document then you can use fixed CSS positioning with a high z-index. To center it on all screen resolutions use jQuery and the formula (window.height() - div.height())/2 as the top pixel position. The code will be similar to this answer.
Hope that helps
If you do something like this, and put the div inside your <body> tag, it will stay in the middle of the visible area.
div.loading {
position: fixed;
top: 47%;
left: 47%;
height: 6%;
width: 6%;
z-index: 1000;
}
Another solution is to put it at the end of the container content will be loading into. Just make sure to load the content before it. If you give it a margin:auto; it'll stay right in the middle and keep pushing down.
EDIT: It's also worth noting the answer here. This will prevent covering up something important in a way the user can't fix.
Set your loading div's position to fixed, this will of course cause it to escape from its parent in the DOM structure, you will then need to position it where you want it. Fixed positioning is relative to the visible area of the viewport.
<html>
<head>
<style type="text/css">
#loader {
height: 30px;
position: fixed;
top: 50%;
left: 50%;
background: #ccc;
}
</style>
</head>
<body>
<div id="loader">Loading...</div>
</body>
</html>
This will result in the loader div always being centered on the screen, no matter where the user has scrolled, left/right up/down.

Categories

Resources