We Keep Coding

scrollTo javascript issue

I have a js function to scroll into a div.
Here is the function, It works fine, but i'm going to explain later what's wrong with this.
scrollAnchor= function(){
var element = document.getElementById('generalAnchor');
var position = element.getBoundingClientRect();
var x = position.left;
var y = position.top;
window.scrollTo(x,y);
}
Then an html (nevermind we just need the div generalAnchor)
<button onclick="scrollAnchor()">Click me</button>
<div id="generalAnchor">Test</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
This is en example of very long page, so the scroll works fine.
But here is the thing, if i remove all those br then, the scroll isn't working, because the page isn't long enough.
i could use a true url sometink like myPage#generalAnchor, but in fact i can't do that because i can't load a new page or i loose other informations.
Do you have an idea do deal with this ?
PS: I put the sample here: https://www.w3schools.com/code/tryit.asp?filename=FHHEHPNB4O1V
There is two case, the first button is working fine. But the second isn't working.
Thanks for your help!

Have you already thought about to use the default functionality of html anchor?
So if you replace the second button with
Click me
your code should work.
You can change the design if you want or wrap your button with the link.

Styles created using JavaScript are not applied until page is refreshed

I have created a script that adds the scrollTop value to the height of a DIV
var scroll = $(this).scrollTop();
console.log(scroll);
function scrollH() {
document.getElementById("overlay").style.height = scroll + 'px';
}
document.getElementById("overlay").addEventListener("scroll", scrollH());
I need this style to keep updating (I'm making a progress bar). Currently it only changes when I refresh the page.
Thanks in advance
(Sorry if I did not follow the correct question format for this site, this is my first question :L )

You want to apply styles via JavaScript after the DOM has loaded.
JQuery helps with this:
$(document).ready(function() {
//do something to css
});
https://learn.jquery.com/using-jquery-core/document-ready/

You could apply a listener to whatever event is triggering an update, and then replace or fill the progressbar with it's new value.

style a JavaScript onmouseover alert

This is my code to make the alert appear when i hover over the image;
var special_offers = document.getElementsByClassName("special_offer");
//for each special offer
for(i=0;i<special_offers.length;i++){
var special_offer = special_offers[i];
special_offer.setAttribute("offer_shown", "0");
special_offer.onmouseover = function(){
if( this.getAttribute("offer_shown") == "0" ){
this.setAttribute("offer_shown", "1");
alert('This room has the special offer attached to it, please book soon before you miss out!');
}
}
I wanted to find out how i change this from the bog standard JS alert to a box that i can style, i imagine i'd use some sort of a div.
Any help is much appreciated.

http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
This is a good resource for creating your own modal window. You can use your function to fire the modal window you created instead of just using alert() to fire up the standard alert.

Do you want to direct your message to a div?
Create the div
<div id="mySpecialOffer">
Some Text gets updated
</div>
In your js you could then target this id and update with what ever message you would like.
document.getElementById("mySpecialOffer").innerHTML = 'some Text';
You could even hide the div in css and then unhide with the JS.
Or you can create the HTML...
document.getElementById("mySpecialOffer").innerHTML = '<div> Special Offer Div Inserted </div>';
This is even easier with jQuery.
Is this what you had in mind?

What you should do is open a whole new window, like a small webpage with that message. That would be the easiest way to go!Here is a link: http://www.w3schools.com/jsref/met_win_open.asp
You will want to have the window.open() activated when people mouseover an image.you can specify the size and positioning of the window, in this case the center of the screen, and a small window.
Hope that helps!

change the position of div tag dyanmically with javascript

I have an ASP button in a div to the right side of a page. I want to change the position to the left in the same row dynamically with onchange event of a dropdown.
I did this way:
document.getElementById('divButtonGo').style.Paddingleft="80px"
How do I do this with Javascript?

The example you have provided already is javascript. If you want to change what triggers the code to run, change where you place it.
from an onchange event, into a function in a script tag that is called by something else.
example
<input type="button" onclick="movediv()" />
<script>
function movediv(){
document.getElementById('divButtonGo').style.Paddingleft="80px"
}
</script>

There's several things wrong here. In order of increasing importance:
You're missing the closing slash from your i tag.
I don't see a "divButtonGo" in your html. If it's not there at all, obviously it won't work. If it is, include it in your code snippet.
I'm pretty sure to set the style you're going to need elem.style.paddingLeft, not elem.style.Paddingleft
Your script isn't wrapped inside <script> tags. All Javascript has to be wrapped in these tags, and, in order for that code to operate sucessfully, it's going to have to be placed after the "divButtonGo", or you'll have to wire up an onload event, like window.onload = function() { /* Bombs away! */ };
Your final result should look something like...
<div id="divButtonGo">
My Awesome Content
</div>
<script type="text/javascript">
var el = document.getElementById("divButtonGo");
el.style.paddingLeft = "30px";
</script>
Also, to note, padding wont' exactly change the position of the div, only the position of the content inside. If you want to change the position of the div, use margin-left (in JS, element.style.marginLeft, i believe)
EDIT:
I forgot you wanted it in the onchange event of a dropdown; so you'd do somethign like:
var dropdown = document.getElementById("MyDropDown");
dropdown.onchange = function() {
var el = document.getElementById("divButtonGo");
el.style.paddingLeft = "30px";
};

goto HTML document location dynamically

My page adds # to the html programatically and have this in the tag
function InsertTag(){
//Add <a name="spot"></a> to the middle of this document
}
window.addEventListener('load', InsertTag, false);
my question is how can I make the document then jump to #spot?

Here's a suggestion: use id's instead. If you have:
<div id="something">
Then page.html#something will take you straight to that div. It doesn't have to be a div, it can be used on any element. If you can manipulate the DOM to add that anchor, I am pretty sure you'll be able to do this.
Now... To get there, you can use:
// this approach should work with anchors too
window.location.hash = 'something';
// or scroll silently to position
var node = document.getElementById('something');
window.scroll(0, node.offsetTop);
See it in action here: http://ablazex.com/demos/jump.html
There are subtle differences between the methods. Eg: The first one will cause the location on the address bar to be updated, the second one won't.
If you want it to look nicer you can use a jQuery plugin, like ScrollTo.

Try
window.location = currentUrl+'#spot';
where currentUrl is a variable having the address of the current url

You can try this.
var el = document.getElementById('spot');
var eloffsetTop = el.offsetTop;
window.scroll(0,eloffsetTop);