Put the bar of the scroll bar on the bottom - javascript

I want a css attribute or sort of thing that puts the bar of a scroll bar on the bottom, euh, a div with fix height and width, shows a text, but the text is too big and wrapped into this div, so a scroll bar appears but the bar is in the top, I want it to appears on the bottom, did you understand me? if so, please just say how.
Regards.

If you can use Javascript, I found this handy little snippet: http://radio.javaranch.com/pascarello/2005/12/14/1134573598403.html So, you'd have a div object somewhere on your page and have it call your scroll to bottom function onload:
<html>
<head>
...
<script>
function scroll_to_bottom(){
var objDiv = document.getElementById("divExample");
objDiv.scrollTop = objDiv.scrollHeight;
}
</script>
...
</head>
<body>
...
<div id="divExample" onload="scroll_to_bottom();"></div>
...
</body>
</html>
Now, I'm not sure if that is browser specific or not, but give it a shot and see what happens. Let me know if it works or if you have problems.
UPDATE: It looks like all browsers support scrollTop, and all but the earlier versions of IE support scrollHeight. http://www.quirksmode.org/dom/w3c_cssom.html#elementview

Related

Scroll down one "scroll unit" on click

I want to create a link div which scrolls down on click; like one scroll down of the mouse wheel does or one click down on the arrow of the scroll bar.
Is there a method in CSS or jQuery/JavaScript to do that?
And also several scrolls, like 3 scroll downs?
Thanks for help!
As far as I know, there is no such thing as a scroll unit. This is device dependent.
But to make the window scroll when clicking something is simple with jQuery.
$(function(){
$(".clickScroll").click(function(e) {
document.body.scrollTop += 10;
});
});
This will scroll the view 10 units, of some measure, down on every click.
See this plunker for a full example.
You should try something like:
HTML
<div onclick="myFunction()"></div>
JavaScript
myFunction = function(){
var myVar = $(window).scrollTop();
$(window).scrollTop(myVar+300);
}
MyVar gets your position on the page.
I hope I've been helpful.

dynamically adjusting div height to keep footer at bottom if content doesn't fill window

I need to adjust the container div height so that it keeps the footer at the bottom of the window onload and onresize when the content is too short but not if content pushes the footer off. I've tried variations of the css min-height:100% but it doesn't work. I've managed to make it work onload with this:
<div class="header></div>
<script>
var h = window.innerHeight-205;
document.write('<div id="container" class="container" style="min-height: ' + h + 'px;">');
</script>
....content of container....
</div>
<div class="footer"></div>
but when the window is resized my footer ends up in the middle of the page or off the page. I've tried calling a resize function but never seem to get it to reset the height. The codes I tried were:
function resetHeight () {
var h = window.innerHeight-205;
document.getElementById("container").setAttribute("height",h);
}
and
function resetHeight () {
var h = window.innerHeight-205;
document.getElementById("container").height = h;
}
I'm trying to use only javascript and css, not jquery. I'm not too familiar with JS so if I'm missing something to make the function call work please let me know! I'm not concerned about older browsers, just IE9+ and such, it also needs to work on iPads when the user rotates their screen...
Any help will be appreciated!
Try using a css aproach, like the one outlined here: http://www.cssstickyfooter.com/

Javascript DOM - aligning a text element to the center?

I have a text node attached to a div that I want to position in the middle of the page. These elements are attached to a mainDiv which is like the whole page. Here's the code I'm trying:
title = document.createElement('div');
title.appendChild(document.createTextNode("The big title!"));
title.style.color = "#F5AE20";
title.style.textAlign = "center"; //this is what I'm trying to solve my problem
mainDiv.appendChild(title);
Unfortunately the title stays on the top left of the page; I want it top centered.
EDIT - just to clarify, I would like to do this within Javascript if possible.
Thanks for any help.
Just from what you've posted, we can't give you a definitive answer.
We need to take into consideration what's defined in your CSS and also the parents of the DIV you're inserting.
Setting the left and right margins to auto, for instance, won't work for a div that doesn't have a defined width, and setting text-align to be center won't work as expected for a div whose width has been constrained.
Here's some example code that definitely works, anyway:
<html>
<head>
<script type="text/javascript">
function displayResult()
{
title = document.createElement('div');
title.appendChild(document.createTextNode("The big title!"));
title.style.color = "#F5AE20";
title.style.textAlign = "center"; //this is what I'm trying to solve my problem
document.getElementById("div1").appendChild(title);
}
</script>
</head>
<body>
<div id="div1">This is some text.</div>
<br />
<button type="button" onclick="displayResult()">Align text</button>
</body>
</html>
try setting the left and right margins to 'auto'

Relation between div position and DOCTYPE's effects

I have a div element that I'm trying, basically, to move wherever the user clicks on a canvas element.
I have a CSS style for the div setting the position to absolute, with an initial position (top,left).
I have javascript that captures the user's click event, and sets the div element's left and top to the location of the click, and set the text of the div.
My problem is that this worked fine before I set a DOCTYPE on the html file. Now the div stays in the same place, while displaying the new text, and I'm assuming the position issue is something to do with how I'm using CSS.
What's the right way to set the position of a div element? The html goes more or less like this:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#myDiv{
position:absolute;
top:100px;
left:835px;
}
</style>
</head>
<body><canvas id='canv'></canvas>
<div id='myDiv'>-</div>
</body>
</html>
Here's what the javascript looks like, which locates the div for me:
var theDiv = document.getElementById('myDiv');
theDiv.style.left = selShp.pinx; // selShp.pinx is the position of a shape object I've created, which is how I position the shape on the canvas
theDiv.style.top = selShp.piny; // piny is just the y position
Before setting a DOCTYPE, this worked beautifully on Chrome, Firefox, Safari mobile, and Opera. With it set, I can render to the canvas in IE9, but then the positioning of the div in all the browser stops working - just stays in the initial position.
I figured out my problem. My javascript for setting the new position went like this:
var theDiv = getElementByID(...)
theDiv.style.left = selShp.pinx; // selShp is the selected shape object, and pinx is x location (numeric) on canvas
theDiv.style.top = selShp.piny; // piny is y location on canvas (numeric)
This worked fine before I was using the doctype, because apparently the browser was fine with me just giving a number, but I had to change the code to this, and it works:
var theDiv = getElementByID(...)
theDiv.style.left = selShp.pinx.toString() + 'px';
theDiv.style.top = selShp.piny.toString() + 'px';
Stupid, rookie mistake, I guess. My understanding of the solution is, standard HTML requires you to set the left and top as strings, with units specified.
The real problem begins with not using a doctype. A doctype is required of all modern web pages to keep the browser out of 'quirks mode'. In that case, the box model is different than it should be using current web standards. You should read about quirks on Wikipedia or Google for it.

Chrome Extension Scrollbar Placement

After dabbling in Chrome Extensions I've noticed that when the data inside the Page Action gets to a certain point the scroll bars automatically attach themselves to the popup, this I expect. However, instead of pushing the content to the left of the scroll bar it overlays the content causing a horizontal scrollbar to become active. I ended up just adding a check on my data and applying a css class to push the content to the left more to run parallel to the scroll bar and beside it not under it. What is the correct way to handle this besides my hackish solution?
I was wondering this myself too. Currently I just don't put anything important closer than 20px to the right side of a popup and disable horizontal scrollbars:
body {overflow-x:hidden;overflow-y:auto;}
So when a vertical scrollbar appears the content at least doesn't jump.
Perhaps you need to specify a width on the scrollbar.
::-webkit-scrollbar {
width: 42px; //Do not know actual width, but I assume you do
}
I haven't found a way to do this that isn't a hack, but here's the simplest hack I could think of:
<script type="text/javascript">
function tweakWidthForScrollbar() {
var db = document.body;
var scrollBarWidth = db.scrollHeight > db.clientHeight ?
db.clientWidth - db.offsetWidth : 0;
db.style.paddingRight = scrollBarWidth + "px";
}
</script>
...
<body onresize="tweakWidthForScrollbar()">
The idea is to detect whether the vertical scrollbar is in use, and if it is, calculate its width and allocate just enough extra padding for it.

Categories