how to make a div stays in place while scrolled without jquery?
I wanted to make something like the The New Stuff | The Next Big Thing | What's Hot
header part of mashable without using jquery (only javascript)
can someone please help me with this?
Did you try CSS position:fixed with top and left set? It is the only way to make it happen without scripting.
Use this HTML:
<div id="myElement" style="position: absolute">This stays at the top</div>
Javascript:
$(window).scroll(function() {
$('#myElement').css('top', $(this).scrollTop() + "px");
});
It attaches an event to the window's scroll and moves the element down as far as you've scrolled.
You can very well do that using css.
#id_name{position:fixed;top:some_value;left:some_value;}
this will fix the div at the corresponding value you have given for left and top position
You can use the CSS Fixed position :
position:fixed;
And then position the element in relation to the window
left:50px;
top:50px;
This will fix the element in the window 50px from the top left corner.
You can manipulate this in Javascript in the onscroll event if you only want it to occur if they scroll to a certain height.
use css to place a div as fixed so that it will not scroll:
position:fixed
Have a look at the below demo. Hope this help
Js Fiddle Demo
<div class = "hello">
<ul>
<li>Welcome </li>
</ul>
</div>
Related
Im using the classic anchor tag approach to click and scroll to a specific div
<div id="scrollTo"></div>
The problem that im facing is that this approach scrolls till the div top margin in on the top of the screen. Is there a way of scrolling it only galf the way with css only, or I will have to use javscript?
You can use another element inside the div.
If you place a positioned element inside the scrollto div with a negative margin. The negative margin will be the offset you want. Make the inner element have a height of 0px, that way it won't be visible to your users.
You will need to put the id on that element of course.
<div id="olddiv">
<div id="scrollTo" style="margin-top: -100px"></div>
</div>
You can look at using an offset on the div you are using for the anchor:
offsetting an html anchor to adjust for fixed header
Similar question, without a great answer:
How can I include the width of "overflow: auto;" scrollbars in a dynamically sized absolute div?
I have a <div> of fixed height that acts as a menu of buttons of uniform width. Users can add/remove buttons from the menu. When there are more buttons than can fit vertically in the <div>, I want it to become scrollable - so I'm using overflow-y:auto, which indeed adds a scrollbar when the content is too large in y. Unfortunately, when the scrollbar shows up it overlaps the menu buttons, and adds a horizontal scroll bar as a result - the big problem is it just looks horrible.
Is there a "right" way to fix this? I'd love to learn some style trick to make it work right (i.e. the scrollbar sits outside the div rather than inside, or the div automatically expands to accommodate the scroll bar when necessary). If javascript is necessary, that's fine - I'm already using jQuery - in that case, what are the right events are to detect the scrollbar being added/removed, and how do I make sure to use the correct width in a cross-browser/cross-style way?
JSFiddle: http://jsfiddle.net/vAsdJ/
HTML:
<button type="button" id="add">Add a button!</button>
<div id="menu">
</div>
CSS:
#menu{
background:grey;
height:150px;
overflow-y:auto;
float:left;
}
Script:
$('#add').button().click(function(){
var d = $('<div/>');
var b = $('<button type="button">Test</button>');
d.appendTo($('#menu'));
b.button().appendTo(d);
});
First: To remove the horizontal scrollbar set overflow-x: hidden; as Trent Stewart has already mentioned in another answer.
CSS Approach:
One thing I have done in the past is to add a wider wrapping div around the content div to make room for the scrollbar. This, however, only works if your container width is fixed... and may need to be adjusted (by serving different styles) in various browsers due to variable rendering of scrollbars.
Here a jsfiddle for your case. Note the new wrapper <div id="menu-wrap"> and its fixed width width: 95px;. In this case the wrapper div is doing the scrolling.
You could probably also solve this by giving the wrapper some padding on the right, and thereby avoid the fixed width problem.
jQuery Approach:
Another option is to detect the overflow using jquery as described here, and then increasing the width or padding of the div to make space. You may still have to make browser-specific adjustments though.
Here a jsfiddle with a simplified version for your example. This uses your click function to check the div height after every click, and then adds some padding to make room for the scrollbar; a basic comparison between innerHeight and scrollHeight:
if($('#menu').innerHeight() < $('#menu')[0].scrollHeight){
$('#menu').css( "padding", "0 15px 0 0" );
}
To make this more cross-browser friendly you could check for the scrollbar width (as outlined here) and then add the returned value instead of the fixed padding. Here another jsfiddle to demonstrate.
There are probably many other methods, but this is how I would go about it.
Have you tried simply using overflow-x: visible; or hidden
I need to make a certain div contents to simulate a scroll, when new data is added, kind of like facebook chat. How do I go about this? I'm using jQuery.
Here's a markup sample :
<div id="chat-messages">
<div class="msg">John Doe says : Hi!</div>
</div>
First, you need to put a fixed height (height: 400px) on the container div (chat-messages) and a scroll(overflow-y:scroll) for vertical content to make the scroll appear.
Next, when a new message is posted, you need to scroll down using javascript.
For example:
$(".chat-messages").attr({ scrollTop: $(".chat-messages").attr("scrollHeight") });
Or animate the scroll:
$(".chat-messages").animate({ scrollTop: $("chat-messages").attr("scrollHeight") }, 1000);
Solutions found similar to what you are describing:
Load Data From Server While Scrolling Using jQuery AJAX: http://www.codeproject.com/Articles/239436/Load-Data-From-Server-While-Scrolling-Using-JQuery
There are some other solutions here:
Scrolling a div with jQuery
jQuery Scroll to Div
Scroll to a div using jquery
This will append new content at the bottom of a div. I guess that's what you want.
$('#chat-messages').append(newdiv);
But I think you need to do a bit of background reading. Check this out.
I've got this HTML. Flash# divs are for flash objects (swfobjects). There is a container div container2 which I want to place it over its content, like a curtain when flash objects are updated and rebuilt to prevent the user from clicking them.
//rest of html code
<div id="container2">
<div id="flash1"></div>
<div id="flash2"></div>
<div id="flash3"></div>
<div id="flash4"></div>
</div>
//rest of html code
I've tried an absolute positioned div over the flash divs to achieve this but this doesn't work with jQuery slidetoggle effect which I use in a previous div (it has a weird width behaviour that narrows the page) therefore I've decided to try this different approach, which also seems to be more efficient.
Any idea of how to achieve this? I'm open mainly to jQuery but also to strict Javascript or whatever.
Delete div when slide up.
Add div when slide down.
Good luck =)
For me you have to add another div inside the container and use it to overlay the flash objs. Leave the container in position:relative and overflow:hidden and use a div child to cover the content!
Marco
I eventually follow the workaround proposed by mkk. This is to completely delete any applied rule to the slid div and have just worked for me.
Simple but effective.
I would like to know how can make make an ELEMENT float according to scroll .
For example , when I scroll down , the element that is position:fixed and left:0 will slowly come down into viewable top left area.
Can this be done using jQuery?
the floating type of menu/bar you are searching for is little old style. Why dont you try something like this
Fixed floating elements
http://jsfiddle.net/dueWG/9/
http://static.jqueryfordesigners.com/demo/fixedfloat.html
There is a jquery plugin
http://plugins.jquery.com/plugin-tags/floating
OR take a look at this tutorial
http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/
if you need your element to follow the scroll relative to your window you can use
position:fixed;
instead of absolute;