I have a HTML page with an internal DIV used for content. The internal DIV has its own scrollbars. I would like to automatically scroll to a certain position in the DIV.
How can I do this? (Note that I do NOT want to auto scroll the Window scrollbars - I already know how to do this)
A cross platform solution is needed
The div has a scrollTop property that you can set (and its pal, scrollLeft).
jsFiddle Demo
scrollTop on MDN
scrollLeft on MDN
there is this .scrollTo() method which can help you scroll through your divs. try it for more info visit here
As long as JavaScript is acceptable, I created a demo using jQuery that uses a known element with an ID inside the div.
$(function() {
var testOffset = $('#test').offset(),
scrollOffset = $('#scroll').offset();
$('#scroll').scrollTop(testOffset.top - scrollOffset.top);
});
If you only know how far, in terms of pixels, rather than to a specific element, it could be adapted to:
$(function() {
$('#scroll').scrollTop(100);
});
Add a div (where you want to scroll):
<div id="#scroll-here">Test..</div>
and add a link like this:
Scroll to Test
if you want a smooth scroll you can check this
You have to target taht div and set scrollLeft. scrollTop property.
const scrollingDivElement = document.getElementsByClassName("class_name");
if(scrollingDivElement && scrollingDivElement.length > 0){
//this is the div element that scrolls
scrollingDivElement[0].scrollLeft += 50;
}
I would recommend having a look at the scrollTo jQuery plugin. It's a really handy plugin that allows you to animate a scroll within any element. I've setup a small example in jsFiddle that demonstrates how it works. The example shows how you "scroll to" the third p in the first div, and then the second p in the second div. One thing worth noting, is that to ensure the position().top is correct, you'll need to set the containing div to have a position: relative;. Hopefully this isn't too much of a problem though. :)
Related
I have a div that has overflow: scroll, and I want it to always scroll to bottom along Y-axis no matter what content it has. (think about a chat thread, which always displays the latest message at the bottom.)
I saw there are some jQuery solutions that scrolls the div to its height when new messages get added, but I am wondering if there's any pure CSS solution to this?
Thank you!
Unfortunately, not possible with pure CSS but you can use pure js to get the total scrollable height of element with elem.scrollHeight and scroll the element to that position with elem.scrollTop
you can see in this example
the js code is:
var elem = document.querySelector("theElementClass");
var elemHeight = elem.scrollHeight;
elem.scrollTop = elemHeight;
hope this helps. =D
I want to create a div with CSS (preferably without any library) whose contents can be slided right/left on mouse-click if the content of the div is larger than the div width. Like below:
I tried with overflow-scroll but that gives a scroll-bar which is not what I want. Is it possible to create this with CSS and JavaScript (AngularJS, which I am using in my app) combination, without using any other library? I can use jQuery if it can done using that.
Update: Created a working demo after #Shnibble's answer.
$("#left").mousedown(function() {
var y = $("#content").offset();
$("#content").animate({
left: 0
}, function callback() {
$("#left").fadeOut();
});
});
$("#right").mousedown(function() {
var y = $("#content").offset();
$("#left").show();
$("#content").animate({
left: y.left - 200
});
$("#info").text(y.left - 100);
});
I'm not sure I know exactly what you want, do you want the <> arrows to scroll the content or do you want to click+drag the content left and right? Both can be accomplished with JQuery.
The former can be done by having the parent container positioned as relative and the content within positioned as absolute. Then you can use JQuery to alter the left offset of the content +/- depending on which arrow is clicked.
For the latter, you would do the same setup but check the mouse coordinates on click and apply the difference to the content left attribute until the mouse button is released.
As for making all of this only happen if the content overflows, you will need to do some checking with JQuery again to measure the width of the content and compare it to the parent container and only allow one of the above functions to run if the content is wider.
Alternatively, you co use overflow-x: auto and then style the scrollbar to fit in with your theme better? See here: https://css-tricks.com/custom-scrollbars-in-webkit/.
I have two fixed elements with a background image that I want to have scroll with the page, without the element scrolling. Here's the jsfiddle: http://jsfiddle.net/3s3qu2yv/
Is there a way to accomplish this in pure CSS? I know there is a way to do this is javascript but I'd like to avoid that if possible.
Not sure what you are asking here. It looks like you have already accomplished this in your fiddle.
Otherwise background as a background-attachment attribute that makes it scroll along with an element.
This is commonly used in parralax sites.
There is not a way to do this with just CSS, you will need JavaScript. THIS jQuery to be exact:
http://jsfiddle.net/3s3qu2yv/4/ -- updated to better illustrate the effect I'm going for.
function scr() {
var scrolled = $(window).scrollTop();
$('.fx').css('background-position', 'center -' + scrolled + 'px');
}
$( document ).ready(function() {
$(window).scroll(function(){
scr();
});
});
A fixed element's background cannot scroll with the page, regardless if the background-attachment is set to fixed or scroll because the element itself does not move.
I have a header that is 100% of the page and should have a background-color.
Then I have my content div centered and along width that an extra div to the right for ads.
When shrinking the window so that all content + ads doesn't show I have a horizontal scroll which works great except for that the header looses the background-color for the part which was outside the viewport. How can I get the background-color to run all the way?
A simple solution is to set the top background-color on body instead but we'll want the same design on a future footer. We can't use multiple backgrounds because of browser support issues.
Example page: http://niklasholmberg.se/test.html
As others have pointed out, the problematic thing here is that your "right" column is taken out of normal flow and is therefore not actually part of the "page". Browsers are (IMO) correct in not painting the background all the way to the right in the "head"... but (again IMO) wrong in even allowing you to scroll to see the right column when it is outside the page bounds.
If you set overflow on the boby to hidden you solve the problem of the background... but of-course you don't make advertisers happy that way :)
Suggestion
Maybe it is enough to get what you need:
#fakebg {
position:absolute;
top:0;
width:1102px;
background:#000;
margin:0;
z-index:-1;
}
http://jsfiddle.net/Mfsx6/1/
In summary: I added a dummy div to the head with the same offset placement as the right column. This gives us a surface there to add a background to.
I think the problem you're having is not that the background doesn't run all the way. It's that the content DIV is being resized by your use of right:-200px; That essentially makes the content DIV 200px larger than it should be, pushing it outside of the BODY.
If you set #right to use right:0px; the problem no longer exists.
I'm not sure if that renders correctly for your needs though.
V.
Set the min-width value for the #head. For my resolution it is working perfectly with min-width:1102px.
try this out.
Going further on #Martin Westin's answer, to make it work for any size window dynamically:
I added a div with id = "full-width-bg" to the header where I needed the background to stretch all the way across. Custom.Toolbox.getFullWidth() gets the actual size of the DOM whether it is in the viewport or not, so it includes overflow and the entire width of the page. Then we set the width of #full-width-bg to the full width.
window.Custom = window.Custom || {};
Custom.Toolbox = {
init: function(){
Custom.Toolbox.fixBG('#full-width-bg');
jQuery( window ).resize(function() {
Custom.Toolbox.fixBG('#full-width-bg');
});
},
getFullWidth : function(){
return Math.max(document.documentElement["clientWidth"], document.body["scrollWidth"], document.documentElement["scrollWidth"], document.body["offsetWidth"], document.documentElement["offsetWidth"]);
},
fixBG : function(selector){
jQuery(selector).css('width', Custom.Toolbox.getFullWidth() + 'px');
}
}
jQuery(function(){
Custom.Toolbox.init();
});
Like alert bar of stackoverflow here.
It should not be position:fixed,because it's not supported by all browsers.
Absolutely,neither will position:absolute do.
You could always use EMCAscript or one of its forms (JScript, JavaScript) to calculate the position of the viewport and set the position equal to that.
function positionView()
{
return (window.pageYOffset) ?
window.pageYOffset :
(document.documentElement.scrollTop) ?
document.documentElement.scrollTop :
document.body.scrollTop;
}
function setPosition(object)
{
object.style.top = positionView() + "px";
}
Then just pass in the DIV object you want to use, with document.getElementById.
I'd use position: fixed;. Many people still use IE6, though, which does not support it.
Put the div under the body tag, give it position absolute, top:0, left:0
And if you want it to push the content, just put it there without the CSS I gave you.
Its very simple step if you are using any class in css apply one more property z-index = 1;
it will make that div to always on top, if that div is relative to its parent div.
Make sure the element is directly nested under the body tag, use css with absolute position and top:0;
By the way, fixed is used by a large majority of the browsers.
Only fixed positioning does this, unless you want to use javascript. Which you don't, because it's an ugly way of doing it.
Just do it like SO does it. Use the "notifycontainer" and populate it with InnerHTML from JavaScript when you need to. Since it's a relative positioning, when you rewrite the InnerHTML the page rerenders based on the contents of the div as they are at that moment. Same deal when you want to clear the alert, you just rewrite the InnerHTML. You don't even need to write animation code. The way browsers render now, the animation will be automagical.