How to move div upward while scrolling downward - javascript

I am creating a small html file for myself just to try some new things. so far, I have a header, a background, and a center area for content. it is in the center and the position is set as fixed.
I want to make it so when someone scrolls down, the center area will move up. So there wont be large white-space at the top. Also, when they scroll up, so the center is near the top, it wont go over the header.
I"m sure this can be done with JavaScript. But, I'm not too sure how.
I'm sorry if this is unclear.

I recommend using jquery to accomplish this.
You can bind an event listener to the scroll event, the handler is passed an event object with all the information you need to achieve your desired result (scrolltop, pageX, pageY, etc....)
Once you have captured the scroll event, you can tell where the user scrolled to (how far down), and position your div accordingly.
http://api.jquery.com/scroll/

This could be achieved using javascript or Jquery (Jquery being the easiest of the two).
1.) Use arbitrary pixels to define when the div should move.
function scrolling() {
if ($(body).scrollTop() > 120px)
{
....perform div transition...
}
}
OR
2.) Use the position of the target div to define when the div should move.
function scrolling() {
if ($(body).scrollTop() > $("#TargetDiv").offset().top;)
{
....perform div transition...
}
}
If you use the second solution, be sure that you call Jquery and this script after the DOM is loaded i.e. after </body>. Otherwise it won't be able to define the #TargetDiv.

This can be done without use of jquery or javascript, if you are looking to do what I think you are.
http://jsfiddle.net/wN8c8/
by setting your content to a fixed size and setting the content to overflow:auto;
likewise, you could also set your page background-attachment to fixed, and create the illusion that the text is 'appearing' without the page moving. You can certainly go more in-depth with it using scripting, but it really depends on your intention.
z-index will also allow you to build your page in layers, so that you can determine what shows and what is hidden behind other page elements.
body {
background-color:yellow;
}
#header{
position:fixed;
width: 100%;
height:20px;
background-color:red;
z-index:2;
}
#content{
position:fixed;
width:80%;
height:60%;
background-color:#ddd;
overflow:auto;
margin:0px 10%;
z-index:1;
}
<div id="header"></div>
<div id="content">
This is some content.<br/>
This is some content.<br/>
This is some content.<br/>
</div>

Related

Full background image initially fixed, then scrolls when DIV content ends

I'm trying to figure out how to have a full background image (background-size: cover) be fixed initially (the text over the image scrolls while the image stays put), but, at the moment when the user scrolls down to the end of the content (like a tall block of text), the background then scrolls up revealing a new section/div below.
For example:
<section id="top-section-with-fixed-bg">
<div class="tall-content-1500px">
<p>Text that's really tall</p>
</div>
</section>
<section id="next-section">
...
</section>
But, again, the background image is fixed until the user has scrolled down 1500px and the content for that section/div is done. At that point, the user continues to scroll and the background image scrolls up.
Not, as with parallax solutions, with the background image being covered by the next section. But the background image going up with the scroll.
I'm thinking this takes some javascript, jQuery fixing, but I'm still a bit novice with it. I'm a designer just wanting a site to look and act this certain way. I'm guessing I have to recognize the height of the content, where that ends, and then either tell the CSS to switch from fixed to scroll (without effecting the position of the image), or having the js move the image up with the scroll action.
Update: Here's a quickly tossed together jsfiddle
UPDATED UPDATE:
I think I've found the solution!
With the pointers provided in responses here, then some digging around, I have it kind of working.
I started with trying to figure out how to detect the window height. I plug that into the text/content DIV, using that value for the DIVs height. This is important, to set the container for the text to the height of the user's window, not to a specific height. Then, I set that DIV to overflow: auto (and hide the scrollbar, for aesthetics). That allowed me to set a trigger so when the end of the content in that DIV is reached, the background-attachment is changed from fixed to scroll.
And, voila! It's not perfect, and I'm sure some real javascript/jQuery experts will right my wrongs on it, but I like how far I've gotten with this so far.
I realize that the swtich from fixed to scroll is probably unnecessary. At the moment, when the switch happens, the image jumps a little to adjust to the window size and its own position, now being set to scroll. If I set the CSS originally to fixed, and make sure the content of the DIV (using padding wisely) to cover the window, as the user scrolls with the mouse the correct action will occur: text scrolls until there is no more text, then the image scrolls up.
Check it out and look forward to help and comments.
jsfiddle
have you set background-attachment:fixed;? This makes background images 'move' with the browser scroll. Be careful when it comes to devices though as this method can cause 'laggy looking sites' because there's too much render for the device (depending on image).
I personally target 'large' and 'modern' browsers with this:
#media query and (max-width:600px){
.top-section-with-fixed-bg{background-attachment:fixed;}
}
EDIT:
sorry I didn't fully understand the question. Here's some CSS to get you going
window.addEventListener('scroll',function(){
//document.body.scrollTop would be the windows scroll position.
if(document.body.scrollTop==1500px)
document.getElementById('top-section-with-fixed-bg').style.backgroundAttachment='static';
}else document.getElementById('top-section-with-fixed-bg').style.backgroundAttachment='fixed';
});
I'm very sorry but this is very basic. I'm about to finish work. The function could use a bit of sprucing up a bit like making it dynamic. This is also only native JS. So it's not all that fancy but you get the idea. When the document.body.scrollTop is at the bottom of your element. Which I'm guessing is 1500px tall? IF not use offsetHeight(). That'll give you the complete height of the element including padding and margins and I think borders as well?
I'd set your background images to background-position: fixed; then put the next background image at the bottom of the text so it overlays on top of the first div. Problem is you can't have the nice <section> structure you had going before.
<style type="text/css">
.section-with-fixed-bg {
min-height: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
#bg-1 {
background-image: url("./background-1.jpg");
}
#bg-2 {
background-image: url("./background-2.jpg");
}
#bg-2 {
background-image: url("./background-3.jpg");
}
</style>
...
<body>
<div id="bg-1" class="section-with-fixed-bg">
<p>Text that's really tall</p>
<div id="bg-2" class="section-with-fixed-bg">
<p>Next section of text that's really tall.</p>
<div id="bg-3" class="section-with-fixed-bg">
<p>Next section of text that's really tall.</p>
</div>
</div>
</div>
I haven't tested this but it should cause the new image to overlap the old one, at least in theory.

Make front <div> to react to mouse events but propagate them to lower elements too

I have a moving background, composed by some layered images, that must react to mouse position changes. This big <div> is placed in the lowest level of my page, using position:absolute, top: 0px and a low z-index.
You've probably already understood the first problem: initally, this <div> didn't get any mouse event when the cursor moves into one of the upper elements.
The first solution could be to set this CSS property to every front element: pointer-events: none;, but I really don't like it. How about the button? If I move the mouse on it, the background will move as espected, but the click will not be fired.
Secondary option, a mad trick: put another transparent <div> at the root of the page, at the same absolute position of the background, but with a very high z-index. It will listen to mouse coordinates and will transmit them to the moving background.
Don't know what do you think about it, but it should work apart from a thing: this transparent layer captures the mouse events, but they aren't propagated to the lower texts and buttons, that continue to be "inactive".
Is there a way to fix this behavior? Make the transparent listener to catch mouse events but also propagate them to every lower element (something like a "special" pointer-events rule).
Can you provide a JsFiddle? I couldn't reproduce it here in this fiddle.
Making the button a link with a high z-index still allows the mouvemove event to be captured by an underlying div.
Would this solve the problem?
HTML:
<div id='movingBackground' class='moving-background' >
<a class='button'>Button</a>
</div>
<div id='coordinates'>Coordinates get updated here on hover over div above</div>
CSS:
.moving-background {
background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll;
width:300px;
height:100px;
}
.button {
position:absolute;
top:20px;
left:50px;
height:50px;
width:100px;
background:blue;
color:white;
cursor:pointer;
z-index:20;
}
Javascript:
$('#movingBackground').on('mousemove',function(event) {
$('#coordinates').text('X ' + event.pageX + ' - Y ' + event.pageY);
});

how to fix a division using css and js..?

In my webpage a division in the left hand side should be fixed in a particular position.I am using position:fixed;top:150px;left:0px;. So now even we scrolldown the page the division will not change from the current position.
But here i am facing a problem. If am scrolling down the page 150px or more i am getting the white space of 150px at the top of that left hand side division.
So what my requirement is if am scrolling down the page 150px or more then the css of that left hand side division should be changed to position:fixed;top:0px;left:0px; and as well as when i am going to top of the page again the css should change to position:fixed;top:150px;left:0px;
I came to know that this can't be done with only CSS and we have to use JS along with the CSS. But i don't know how to do that.
Please help me...!!
Thanks in advance,
Sreeram
So based of what you said above you want to have an element follow you down the page but change it's top position after you scroll down a little ways.
I've created a jsfiddle that uses js to add a class to an element once the document is scrolled past 150px. It also removes that class if they scroll back above 150px.
http://jsfiddle.net/KQCRC/
.fix {
position:fixed;
top:150px;
left:0px;
width:100px;
height:100px;
background:#fff;
}
.fix.scrolled {
top:0;
}

Interactive HTML webpage

EDIT: Thanks for a lot of great examples on how to solve these. I cant decide between who to accept yet, but I will go though all examples and see which I like the most. Great feedback guys! =D
I normally do these kind of things in flash, but this time it has to be compatible with mac, iPads and all those units too.
So, what do I need help with?
I've got a picture, with some "hotspots" on. I want to be able to click any of those hotspots to show some information.
This should be fairly basic and easy to achieve, but since I've never done this in html before I have to ask you guys =)
So, what would be the best way to do this? It have to be compatible with any browser and device, and it doesnt need to be very advanced. If it's possible to add effects to the box (sliding out, fading in, or anything like that) then thats a nice bonus, but not something I need.
Any help would be great!
BREAKDOWN:
I have a background image with some "hotspots" (numbers 1 and 2 in my example). The users should be able to either hover the mouse over any of these or click it to get more information, as seen in picture #2
This is that happens when you hover/click any of these hotspots.
Text and image is displayed inside a nice little info box.
If the user clicks "more information" it will open up even further to display more information if available. Like in this img:
I don't think the Javascript approach is really necessary here. I created a little CSS-only mock-up for you on JSBin.
Basically the point is that you enclose the image in a relatively positioned div, then absolute position the hotspots inside the same div. Inside the hotspots divs you will have the more info elements, showing only on :hover of their parents.
This makes it simple, and far more accessible.
Update: cropping the image equally from both sides
If you want to keep the image centered and still not use any javascript, you could set the required image as a background-image of the container, and setting its background-position parameters to center center.
You would have to make sure that the width of this div is set to the width of your image, and the max-width to 100%, so that when the window gets resized below the image width it stays at the center.
Now, a problem that I encountered here is how to make the hotspots stay center relatively to the image. I solved it this way:
I created a wrapper div for the hotspots with these characteristics:
margin: 0 auto;
position: relative;
width: 0px;
This basically makes sure that the wrapper div finds the center of our image. Then, you would position the hotspots relatively to the top-center position of the image, instead of the top-left as a starting point.
Then you have what you are looking for.
Working demo
Here's another approach, and in my opinion far superior to using a map or excessive JS. Place <div> elements on top of the element with the background-image and have HTML and CSS do the heavy lifting for you.
See it on JSFiddle
HTML
The HTML should seem pretty each enough to understand, we create <div>s with the class hotspot and rely on certain things being present. Namely .text (to show digit), .hover-popup (to show on hover) and .click-popup (which is inside .hover-popup and is shown when clicked).
<div id="hotspot1" class="hotspot">
<div class="text">1</div>
<div class="hover-popup">
I was hovered!
<div class="click-popup">
I was clicked on!
</div>
</div>
</div>
<div id="hotspot2" class="hotspot">
<div class="text">2</div>
<div class="hover-popup">
I was hovered!
<div class="click-popup">
I was clicked on!
</div>
</div>
</div>
CSS
This is where most of the magic happens, see the comments for further explanation.
/* These two position each hotspot */
#hotspot1 {
left:15%; /* we could use px or position right or bottom also */
top:20%;
}
#hotspot2 {
left:35%;
top:25%;
}
/* General styles on the hotspot */
.hotspot {
border-radius:50%;
width:40px;
height:40px;
line-height:40px;
text-align:center;
background-color:#CCC;
position:absolute;
}
.hotspot .text {
width:40px;
height:40px;
}
/* Show the pointer on hover to signify a click event */
.hotspot .text:hover {
cursor:pointer;
}
/* hide them by default and bring them to the front */
.hover-popup,
.click-popup {
display:none;
z-index:1;
}
/* show when clicked */
.hotspot.clicked .click-popup {
display:block;
}
/* show and position when clicked */
.hotspot:hover .hover-popup {
display:block;
position:absolute;
left:100%;
top:0;
width:300px;
background-color:#BBB;
border:1px solid #000;
}
JavaScript (with jQuery)
Unfortunately you're going to have to use some JavaScript for the clicking part as CSS doesn't have a 'clicked' state (outside of hacks with checkboxes). I'm using jQuery because it's dead easy to do what I want.
$(document).ready(function () {
$('.hotspot').click(function () {
$(this).toggleClass('clicked');
});
});
Creating the arrow
Over at css-tricks you can find a tutorial for attaching an arrow to a element using the :before and/or :after pseudo-elements. You can even 'simulate' a border around them by placing the :after element on top of the :before. But yea, lots of resources on how to do this.
You should be able to use the onclick or OnMouseOver event in the map area (define the href as "").
An example using OnMouseOver is here: http://www.omegagrafix.com/mouseover/mousimap.html
Give a class for that image in html (Ex: imgclass). And in javascript(using jquery), build that hover box in html format and bind it to 'mouseover' event of that image.
For example:
function bindhtmltoimage() {
myimg = $('body').find('.imgclass');
divSlot.each(function (index) {
$(this).bind('mouseover', function () {
try {
//position the hover box on image. you can customize the y and x axis to place it left or right.
var x = $(this).offset().left;
var y = $(this).offset().top;
var position = $(window).height() - ($("#divHover").height() + y);
var widthposition = $(window).width() - ($("#divHover").width() + x);
if (position < 0 || widthposition < 0) {
if (position < 0) {
$("#divHover").css({
position: 'absolute',
left: x + 20,
top: y - $("#divHover").height() - 20
});
}
if (widthposition < 0) {
$("#divHover").css({
position: 'absolute',
left: x - $("#divHover").width(),
top: y + 20
});
}
}
//build your html string for that hover box and apply to it.
$('#divHover').html("your Html content for that box goes here");
$('#divHover').show();
//if you want the box dynamically generated. create the html content and append to the dom.
}
catch (e) {
alert(e)
}
});
});
}
it will work fine in desktop and mobile. if you face any problem in touch devices, bind the function to click event instead of 'mouseover'.
Also, for map approach, i strongly recommend SVG instead of images.

Sliding from side with jquery (without Jquery UI)

I want to make specialist_pagecontent to appear (slide) from the left, like blindleftin from here but I just can't make it work with this. Actually, the plan is, instead of hide() ideal would be blindLeftOut('fast');hide(), and instead of show() I need show();blindLeftOut('slow'), but as I said, I just can't make blindLeftOut and blindLeftIn work for me.
I think jQuery's animate function might be of use to you.
What you'd need to do is either have a hidden div positioned out of the window added to your HTML (or maybe add it dynamically using jquery on document.ready event, if you prefer) and the use the above mentioned animate function to slide it in and out and bind it to the menu item's click function.
Working Fiddle
Here is a working JSFiddle for you
Give the elements you want to animate in and out a viweport. A layer through which you look to see the elements within. Then set this viewport's overflow property to hidden and give it a specific width/height.
This way you can animate the elements within the viewport so they appear to slide in/out.
Here are the changes I'd make to your JS:
//notice the use of the "active" class to save state
$('.specialist_pagecontent').eq(0).addClass("active").animate({ left : 0 }, 500);
$('.specialist').click(function() {
//stop() is used to stop the current animation, so animations don't queue up if many buttons are clicked rapidly
$('.specialist_pagecontent').filter(".active").removeClass("active").stop(true).animate({ left : '-100%' }, 500);
$('.selected-specialist').removeClass('selected-specialist');
$(this).addClass('selected-specialist');
$('.specialist_pagecontent').eq($(this).index('.specialist')).addClass("active").stop(true).animate({ left : 0 }, 500);
});
And here are my suggested edits to the CSS:
.specialist_pagecontent {
position:absolute;
top:0;
left:-100%;
}
#specialist_lists {
float:left;
border: 1px solid #000000;
position:relative;
width:200px;
height:200px;
overflow:hidden;
}
Here is a demo: http://jsfiddle.net/Jwkw6/1/
This absolutely positions the elements that are to be animated, which is very useful since it removes the elements from the regular flow of the document (meaning it won't trigger whole page redraws when it animates). This also creates the viewport I mentioned, creating a window into which we look to see the animations.

Categories

Resources