Develop Reference

How to change div position with Javascript?

So, here's what I've got so far: https://jsfiddle.net/625qofbe/1/
What I want is for the position of the "about" div, containing the Lorem Ipsum text and what should be an "X" symbol (I dunno how to link images into JSfiddle, sorry) to move, say, 30 pixels to the left when the user clicks on the "About" button in the top-left. Here's the Javascript I've been trying to do that with:
document.getElementById("button").addEventListener("click", AboutOnScreen);
function AboutOnScreen() {
document.getElementById("about").style.left = 30px;
}
I've been Googling and checking the Javascript against successful little experiments like this for ages, but nothing's worked and I can't see what I'm doing wrong here.
The end goal is to have the Lorem text hidden offscreen, slide in when the user clicks on About, then slide offscreen once they click the X icon. I was sure I knew in theory how do that, but I've hit a snag on step one.
EDIT: Thanks for the help guys, but weirdly the two solutions that both worked fine in JSfiddle didn't work even when I copy/pasted the code back into Sublime Text. I did, however, get the thing working by removing the "addEventListener" line and adding "onclick='AboutOnScreen()'" into the div tag for the About button. The "addEventListener" line sent up an error notification when I checked the page source (as suggested by Arindam) so I got rid of it entirely. The weird thing is I'm sure I tried that before with no success, so the solution to this head-scratcher turned out to be a confluence of all the answers below.

As #Rikard mentioned, do the following:
document.getElementById("button").addEventListener("click", AboutOnScreen);
function AboutOnScreen() {
document.getElementById("about").style.left = '30px';
}
Which should get the snippet working.
As for the sliding animation, you can use CSS3 (assuming browser support) to quickly add animation for your page.
A good resource for CSS3 animations would be http://www.w3schools.com/css/css3_animations.asp
Good luck and have fun!

When setting the inline style of an element's distance value in plain JS, it's a combo of Number and String or String. So the value can be: '430px' or 430+'px'.
document.getElementById("button").addEventListener("click", AboutOnScreen);
function AboutOnScreen() {
document.getElementById("about").style.left = 430 + 'px';
}
You said move to the left by 30px, which is interpreted (at least to me), as 30px from the element is positioned currently. So it was left: 400px so the value should be 430px if moving 30px to the left.
FIDDLE

Animating line on scroll

I am trying to animate a line on scroll but I am at a loss at the moment. The final result should be similar to how the lines animate on this site, http://www.teslamotors.com/goelectric#range (you have to scroll a little bit to get to the lines).
There is a static gray line, and then a red line that gets height when the user scrolls down. If the user scrolls up while part, or all of the red line is visible, height will be subtracted from the red line. BUT nothing should happen to the red line until the user has scrolled 200px down the page.
I have created a fiddle for this problem and I am pretty sure I know where my problem lies, but I do not have an answer for how to fix it. I think it is because my variables currentScrollPosition and lastScrollPosition in function countUp135 are always equal to each other.
Any help would be greatly appreciated. Here is my fiddle:
http://jsfiddle.net/tripstar22/2HDVA/5/
Thanks in advance!

Although there is many ways to do this in JS, I'll offer an alternative css method. Instead of animating a line on scroll you can just give the illusion that the line is animating. Check out this fiddle here. As you can see The fixed red element will follow the window on scroll and fill in the transparent area between the divs, making it seem like a red line is being drawn.
You can overlay an image with a transparent line running through it instead of grey divs to minimize the code even more, or you can add js to make the animation more fancy.

There are a lot of functions in your fiddle, where I do not understand why you should need them nor what they do. An updated version of your fiddle, seems to do what you want. There was no need for all thoses methods.
This seems to be enough:
var scrollTop = getScrollTop();
if (scrollTop > 200) {
addHeightPath1(scrollTop - 150);
} else {
addHeightPath1(0);
}
I'm also wondering about the function stoppedScrolling, where an asynchronous time function is beeing started, but you try to get an result from the stoppedSrolling() function, that is never passed as a return.

Marquee text starts moving on mouse hover

Hi I am using jquerymarquee and I want to have displayed the entire line of text at the beginning, and scroll onMouseHover, and when the line of text ends, the beginning of the text to appear after a while. Maybe there are other libraries that are able to do it ?

I got it to work as you wanted. It is the same library which you are using.
I didn't start the marquee onload, and waited for the user to put his mouse over the text. And as the user puts his mouse over the text, marquee started.
You can check the demo here.
http://jsfiddle.net/VJkxe/1/

in the example only..
$('.marquee-with-options').hover(function(e) {
});
dont use..property..pauseOnHover: true
you have to try some thing and if any problem occurs you have to ask here..

divs, textareas, text and cursor detection

I have the following problems:
1.) I want to use a contenditable div or a textarea ( preferrably a contenteditable div because I can also use there html tags, not just text ), as a writing pad. However I want the writing to STOP once the cursor reaches the BOTTOM RIGHT corner of the div/textarea. This seems hard to implement. I have managed with max-height and overflow:hidden to make the element ( div / textarea ) to not expand, however the user can still type, it will just be invisible, something unwanted. What I want is the writing to stop when the cursor reaches the bottom right corner and then go on, on a new empty "page".
My first idea was to use some monospace font and calculate the max chars allowed but the issue is that 1st not all browsers show the same number of monospace characters of the same font, per line and 2nd the div can be variable in size, not constant.
The ideal would be a div so that i can enter html tags ( bold, italic, etc. ) and the div that shows the content can be of a different size, depending on the screen resolution.
2.) Given a div which represents a "page" which gets filled with a text/html from the database, how can I show only the content that fills the div, and when the user presses a "next page" button, show the next content. This seems undoable to me, figuring out via javascript how much content can fill into the div.
Any ideas on these two correlated problems would be greatly appreciated
No flash, no java, no plugins. only: html,css,javascript
Thanks in advance.

you can try the below code.
<div id="editable_div"></div>
var content_id = document.getElementById("editable_div");
max = 10;
//binding keyup/down events on the contenteditable div
$('#'+content_id).keyup(function(e){ check_charcount(content_id, max, e); });
$('#'+content_id).keydown(function(e){ check_charcount(content_id, max, e); });
function check_charcount(content_id, max, e)
{
if(e.which != 8 && $('#'+content_id).text().length > max)
{
// $('#'+content_id).text($('#'+content_id).text().substring(0, max));
e.preventDefault();
}
}

HTML textarea; scroll vertically to text

I have an HTML textarea:
<textarea>
Some text
Another text in another line
BOOM
Hello there.
</textarea>
I want to be able to vertically scroll to the word BOOM so that it is visible (it doesn't matter on which line it appears).
Is this possible?

There's actually a way to do this using window.find() and some variation for IE browsers.
Here's what I came up with so far:
var gotoText = function(text) {
function iefind(string) {
var txt = document.body.createTextRange();
if (txt.findText(string)) {
txt.scrollIntoView();
txt.collapse(false);
}
}
if(!window.find) { // ie
iefind(text);
return;
}
// a double window.find() for backwards and forward search
if(!window.find(text, false, true)){
window.find(text, false, false);
}
};

$('textarea').animate({ 'scrollTop': 30 });
of course 30 is working for my own example with my cols and rows. so find the the right value for yourself.
Note to self:
There is no way of calculating the scroll height which a particular word is at however if you set a fixed value as your css line-height then you can see the story from the point of view that of boom is on for example the 4th line then its scroll height value is 4x (x:line-height)
but i can't really right now be bothered to check how good that will work when someone zooms in the browser. but worth a try for you as you have the case.

But how do I know that BOOM is 30 from the top?
Create a <div>, add it to the page and style it with exactly the same font, white-space, dimensions, border, padding and overflow as the <textarea> object. Wrap the ‘BOOM’ in a <span>, and measure the position of the span relative to the position of the div.
(This isn't a lot of fun.)

It's possible with some javascript!
Even if I'm late I hope it can be usefull to someone else!
I published an answer here:
http://blog.blupixelit.eu/scroll-textarea-to-selected-word-using-javascript-jquery/
It works perfectly with jsut one needed rule: Set a line-height n the css of the textarea!
It calculate the position of the word to scroll to just by doing some simple mathematic calculation and it worked perfectly in all my experiments!
Feel free to ask me anything you need about the code!