We Keep Coding

how to move the screen without a click to the bottom of the page using JavaScript?

I am trying to create a website using JavaScript. I need to programm it in such a way, that when you open the website, you directly get to the bottom of the page (without clicking anything). That means, the page moves itself automatically downwards.
How can I get this done?

Use window.scrollTo() function
window.scrollTo(0,document.body.scrollHeight);

Here's a good answer:
how to automatically scroll down a html page?
Including a live demo: http://jsfiddle.net/ThinkingStiff/DG8yR/
Script:
function top() {
document.getElementById( 'top' ).scrollIntoView();
};
function bottom() {
document.getElementById( 'bottom' ).scrollIntoView();
window.setTimeout( function () { top(); }, 2000 );
};
bottom();
Html:
<div id="top">top</div>
<div id="bottom">bottom</div>
CSS:
#top {
border: 1px solid black;
height: 3000px;
}
#bottom {
border: 1px solid red;
}
Enjoy :)

Call This function on a component or page that you want the particular behaviour. This function will scroll to the bottom of the page. There won't be any scrolling effect without the css for smooth scroll. I have shown how to specify the css for the scrolling effect below, incase you require the scroll behaviour.
function scrollToPageBottom() {
window.scrollTo(0, document.body.scrollHeight);
}
If you require the scroll behaviour:
Here, I'm specifying the scroll behaviour on the root itself. You can target specific containers as per your requirement
*{
scroll-behavior: smooth;
}
P.S: This question has many answers already posted but I am sharing
this because no one talks about the css scroll behaviour which some
users may require. This answer is specific to the question where the
OP wants to scroll to the bottom of the page without any user action
when a page or component is opened or rendered but also specifyiuing the CSS for scroll behaviour if a user requires it.

Hover on one element causes other element to change

so on my site I created a functionality where when I hover on one of the side buttons the image of the tree in the middle changes. You can see the page here.
The animation is working ok, but now I am trying to make the background image responsive within the div. Thanks to this other jsfiddle, I was able to make the original background image responsive using the following CSS:
#arvore {
background: url('http://vistacamisa.greenpeace.org.br/wp-content/uploads/2015/09/arvore_011.png');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 92.7%;
}
The problem is that this CSS does not apply to the image that shows when I hover on the button, and I've hit a roadblock as to how to make it work. Any ideas or suggestions would be much appreciated!
I'm using the following jQuery:
<script type="text/javascript">
(function($){
$('.arvorehover').hover(function(){
$('#arvore').css({'background':'url('+ $(this).attr('target') +')'});
},function(){
$('#arvore').css({'background':''});
});
})(jQuery)
</script>
My buttons have a class .arvorehover and the div with the tree image has the id #arvore.
Thanks so much!

When you set the hover background in your JavaScript using this:
$('#arvore').css({'background':'url('+ $(this).attr('target') +')'});
...it adds a style attribute to the tag: <div id="arvore" style="background:url(....)">, which overrides your entire CSS background declaration, which in turn sets background-size to auto. You can fix your current code by changing only the background-image property:
<script type="text/javascript">
(function($){
$('.arvorehover').hover(function(){
$('#arvore').css({'background-image':'url('+ $(this).attr('target') +')'});
},function(){
$('#arvore').css({'background-image':''});
});
})(jQuery)
</script>
Alternately you can keep the styling in your CSS by toggling a class in your JavaScript:
<script type="text/javascript">
(function($){
$('.arvorehover').hover(function(){
$('#arvore').addClass('hover');
},function(){
$('#arvore').removeClass('hover')
});
})(jQuery)
</script>
And then in your CSS:
#arvore.hover {
background-image: url("some-url");
}

Creating an overlay page for app

I am looking into adding a single page overlay when a user clicks the "Help" button in a web app I've created. Below is an example of what I want to achieve
I have jquery mobile implemented on my pages with javascript. I looked into the jquery mobile popup panels that overlay a page but it wouldn't serve my purposes.
What resources, libraries, language, etc would I go about doing this? I tried to google but the I get irrelevant results.

I haven't try it, but you can put the background in a div leaving it in behind the classic background (using low css z-index) with a fixed position (absolute position), a fixed width/height (100%/100%) and a trasparency.
When the user click the "Help" buttons you change the z-index putting it on the front of the page.
UPDATE
Assuming a html layout similar like this:
<html>
<head>...</head>
<body>
<div id="container">
<!-- some others divs with the content of the page and the help link -->
HELP
</div>
<div id="over_image"> <!-- add this -->
<img src="path_to_the_overlapping_image" alt="overlap image" />
</div>
</body>
</html>
A default CSS like this
div#container {
z-index: 100;
}
div#over_image {
z-index: -100; // by default the over image is "behind" the page
position: absolute;
top: 0px;
left: 0px;
width: 100%; // or puts the width/height of the "screen" in pixels
height: 100%;
}
div#over_image img {
width: 100%;
height: 100%;
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
And at the end the jQuery function
$("a#help_button").on("click", function(event){
event.preventDefault(); // it's not really a link
$("div#over_image").css("z-index", "1000");
})
You should implement the "hide" function too, to "reset" the overlapping image on some action, maybe something like this:
$("div#over_image img").on("click", function(){
// when the user click on the overlap image, it disappears
$("div#over_image").css("z-index", "-100");
})
I haven't try it, maybe there are some more little things to change to make it works correctly, but it is a good begin.
SOME REFERENCES
Opacity / transparency: http://www.w3schools.com/css/css_image_transparency.asp
jQuery css: http://api.jquery.com/css/

JavaScript Trouble with div resize

I am relatively new to js and for the life of me can not figure out the issue with this function. I am just trying to resize the div's width on a page resize. The css is also included in case that has anything to do with it.
<div id="lowerPattern"></div>
<script>
$( window ).bind("resize", function() {
// Change the width of the div
$("#lowerPattern").css('width', '300px');
});
</script>
/*CSS*/
#lowerPattern {
height: 99px;
width: 10px;
background-color: green;
/*Keeps div centered on resize*/
position: absolute;
left: 50%;
margin-left: -300px;
}

It's working fine for me: http://jsfiddle.net/kuaYV/
Have you made sure JQuery is loading properly? Also, try putting the function in $(document).ready() like so:
$(document).ready(function() {
$( window ).bind("resize", function(){
// Change the width of the div
$("#lowerPattern").css('width', '300px');
});
});
Edit: If it's still not working, it could be something to do with the parent element's CSS. Also make sure you don't have any other elements with the same id attribute on the page.

enclose your code inside $(document).ready(function(){}); like this:
$(document).ready(function()
{
$( window ).bind("resize", function(){
// Change the width of the div
$("#lowerPattern").css('width', '300px');
});
});

DO you know that you must load Jquery?
You must either put the jquery source code into a file and save it or download it everytime you run the website with a CDN(Contact Delivery network.)
Also you must load Jquery. Go to their site and download the source. Save to a textfile with the .js extension.
After that write
<script type="text/Javascript" src="MyJquery.js"></script>
in the head area of the HTML
The other option is to use a CDN and write:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
This will load the jquery to your website
you must put the code into
$(document).ready(function(){
//put all your code here
});
If you are using a CDN check your net connection. If the internet connection is lost it will not load the Jquery while you are trying to run

Many draggable images freely in the screen

I'm trying to build a page so me and my team can position some images freely on the screen. The problem is that I can't figure out a way to make those images draggable. I tried to figure out by myself and came upon this nice topic about it: HTML5 drag and drop to move a div anywhere on the screen?
I've tried to apply this idea to my page and replace "getElementsByID" with "getElementsByClassName" but no dice.
In addition, it would be twice as nice if the draggable image were to respect the responsiveness of the page, if anyone knows how to do that.
Here is the codepen with my attempt: http://codepen.io/GuiHarrison/pen/EsHyr
Thanks!

Well, I just made this up, it's kinda buggy, but you can play around with it.
<html>
<head>
<style>
#mydiv{
width: 100px;
height: 100px;
border: solid black 1px;
position: absolute;
}
</style>
</head>
<body>
<div id="mydiv" onmousedown="ismousedown(1)" onmouseup="ismousedown(0)" onmousemove="mousemove(event)"></div>
<script>
var mousedown = false;
function ismousedown(tf){
if(tf == 1){
mousedown = true;
}
else{
mousedown = false;
}
}
function mousemove(event){
if(mousedown){
document.getElementById("mydiv").style.left=event.pageX;
document.getElementById("mydiv").style.top=event.pageY;
}
}
</script>
</body>

You can use kineticjs for this. Check this!
http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/
This is more relevant,
http://html5example.net/entry/html5-canvas/html5-canvas-drag-and-drop-multiple-images-with-kineticjs