Develop Reference

How to run a function when scrolling to the bottom of the page or div?

I would like to know how do I execute a javascript function when reaching the end of the div via the overflow scroll. My case is as follows, I want that when the user sees all the posts arranged in such a div, reaching the end of everything, load more content through ajax, and this is the function that I want to run when scrolling down.

Try this, which shows an alert box once you scroll to the bottom (and disappears once you scroll back up):
$('.watch-scroll').on('scroll', function(e){
var t = $(this);
if(t[0].scrollHeight - t.scrollTop() - t.outerHeight() < 1){
$('.alert').show();
}else{
$('.alert').hide();
}
})
.watch-scroll {
height: 100px;
width:500px;
overflow: auto;
border:1px solid black;
}
.placeholder{
height:300px;
}
.alert{
width:300px;
padding:1em;
color:white;
background-color:#ff5c5c;
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="watch-scroll">
<div class="placeholder"></div>
</div>
<div class="alert">You have scrolled to the bottom</div>

Adding a scroll event like the previous answer will work, but if you want the best performance possible, you should use IntersectionObserver.
<div class="container">
<div class="scrollable">
... All Visible Content Here ...
<div class="scroll-bottom"></div>
</div>
</div>
In this example, make the .scroll-bottom of non-zero height and at the very bottom, and use Javascript to attach an IntersectionObserver on it. Then wait till it intersects with container and you'll know it's scrolled into view which means you've scrolled to the bottom.
You can use something similar for page scrolling, but you can simply detect intersection with the viewport.
You can read up about IntersectionObserver further since it's not entirely trivial to implement.
Of course, if performance is not important, you can just use a scroll listener as suggested by the other answer.

CSS split page: left side expansion causes float to move down

<div id="left" style="float:left; width=20%"></div>
<div id="right" style="float:right"/>
I am loading 2 pages using jquery to above div's. when the page in left is expanded due to its content, the right side div is getting down/moving.
any way to keep the right side not changed?

You need this: https://jsfiddle.net/56ocrp17/
#left {
float:left;
width:20%;
}
#right {
width:80%;
float:left;
}
You need to specify a width for the right side element. It works when both have float:left; too.

Try using
clear:both;
You can find more about it here: http://www.w3schools.com/cssref/pr_class_clear.asp

Div1 covers Div2: how to check if the mouse is over the covered Div2?

I'm a bit lost. I try to check if my mouse is over a Div which is covered by another Div. I search a vanilla js solution if possible.
I tried to use the elementFromPoint method, but it only seems to give me the top Div.
I also tried to mess around with the "onmouseover" Event, but I didn't found a solution either. Maybe I just overlooked something.
Any ideas how to solve this? I want a method to check if my mouse is over the smaller Div2 or not. I made a jsFiddle to show the situation. I made the covering Div
translucent for easier understanding from the setup.
http://jsfiddle.net/y2L5C/
<div id="div1"></div>
<div id="div2"></div>
#div1 {
width:300px;
height:300px;
background:red;
position:absolute;
top:0px;
z-index:1;
opacity: 0.5;
}
#div2 {
width:200px;
height:200px;
background:blue;
position:absolute;
top:0px;
}

if you want to check if your mouse is over a <div> that is covered by another <div>, you can achieve this by declaring this code: pointer-events: none; to the css of the covering <div>.
For example:
<div id="under"></div>
<div id="over"></div>
Add this to your css file:
#over{ pointer-events: none; }
In that case, all pointer events for the div having the id=over will be ignored. You can now then add this code to test if its working.
Add this JavaSCript code:
$('#under').mouseover(function() {
alert("Mouse is over the div having the id='under'");
});
Give it a try! Good luck!

Here's a quick and dirty solution. I'll leave it up to you to optimize it. Here's the fiddle: http://jsfiddle.net/y2L5C/1/
var div2 = $("#div2"),
width = div2.outerWidth(true),
height = div2.outerHeight(true),
offset = div2.offset(),
top = offset.top,
left = offset.left;
$(document).mousemove(function(evt) {
if(evt.pageX <= (left + width) && evt.pageX >= left &&
evt.pageY <= (top + height) && evt.pageY >= top) {
$("#indicator").text("Over the div #2");
} else {
$("#indicator").text("NOT over the div #2");
}
});

Interesting concept. I do want to bring up that for plain CSS events there are plain CSS solutions such as here. However, if what you are looking to do is initiate Javascript events then the trouble is that onMouseOver is not going to trigger for #div1 if #div2 is on top of it.
One potential, very simple solution, is to create a script to copy the position of your #div2 element and change the style to be a higher z-index. While JQuery might be "easier" to create this, you could certainly create a vanilla JS solution. This script may give you a little guidance as to how you can find positioning. You can use element.style values in order to assign CSS values. If your element positions are declared by CSS then you can do something like this:
var div1 = getElementById('div1');
var div2 = getElementById('div2');
var newElem = document.createElement('div');
newElem.id = 'div2makefacade';
Now you can either utilize newElem.style.top etc. and assign div2.style.top's value, or you can even assign a custom class which has the correct position values. When you initiate onMouseOver, you can do so on #div2makefacade rather than #div2, and perform actions on #div2

well i made a function that perhaps it help you in some way, first in your view you have to load jquery librarie like this
<script type="text/javascript" src="Scripts/jquery-1.6.2.js"></script>
and your css you have this
.visiblepanel{
display: none;
}
.visiblepanela{
display: none;
}
your script this, you have to add the hover function
$('#quickstart').hover(function() {
$('#visiblepanel').toggle();
});
$('#quickstarta').hover(function() {
$('#visiblepanela').toggle();
});
and your html body
<div id="quickstart">Div 1</div>
<div id="quickstarta">Div 2</div>
<div id="visiblepanel" class="visiblepanel">mouse encima div 1</div>
<div id="visiblepanela" class="visiblepanel">mouse encima div 2</div>
so it consist that when the mouse is over the DIV 1 it will show an advice that your mouse is there, and so on with DIV 2...i hope i could helped you...

Customizing where a div wraps to

Is it possible to have two divs wrap as if their one line?
<div class="multiLine">
<div class="topLine"></div>
<div class="bottomLine"><div>
</div>
so if top line was all "A"'s and the bottom line was all "B"'s we would see it wrap like
AAAAAAAAA
BBBBBBBBB
AAAAAAAAA
BBBBBBBBB
I'm trying to accomplish this with JavaScript, jQuery, and css3.

This could actually be done just by using CSS and playing with the div positions and the line heights.
For example:
.multiLine {
position:relative;
width:100px;
eight:100px;
}
.topLine {
position:absolute;
word-break:break-all;
line-height:40px;
top:20px;
}
.bottomLine {
position:absolute;
word-break:break-all;
line-height:40px;
}
This would work although it may not be an optimal solution for what you want. It depends on the context and what you want to achieve with this effect.
EDIT: You can see an example of how it would look like here: http://jsfiddle.net/78f94/

You cannot do it with html/css alone. But with Javascript you can find viewport width, truncate the string and add it as content to new inner divs. This could get very complicated when you resize as width changes!
Here is more info on getting viewport width: Get the browser viewport dimensions with JavaScript

Is there anyway in CSS to make the page width variable?

I have a page that has no vertical scroll, rather, everything is displayed horizontally.
if you scroll all the way to the end of my page (all the way to the right) you will see my contact info.
For example:
<div1></div1>
<div2></div2>
<div3></div3>
<divN></divN>
In this case, div1 is the most left item, with div2 in the center div3 to the right of it... and all the way at the end, divN is displayed.
every div is 500 px wide.
I can set my page width to 20000px ( for 4 divs ) and that works great.
However, I wanna make my page dynamic and each div, other than divN is loaded from a database. This means, each time I add content, I have to manually increase my page width.
Is there a way to automate this process.

As per i understand may be that's you want this:
.parent{
overflow:hidden;
white-space:nowrap;
}
.parent > div{
width:500px;
height:300px;
border:1px solid red;
display:inline-block;
*display:inline;/*For IE7*/
*zoom:1;
white-space:normal;
}
Check this http://jsfiddle.net/HJsrJ/

Why don't you use width:100% for an external div and make other divs width:33% with every content floated in the right way?
See example

You could save the CSS into a table, inserting placeholders where you want to dynamically change values. Heck, this could even just be a template file somewhere. Then, whenever you publish a new section on the base, pull the template, string-replace the placeholders, and then write the new CSS out to file.
Make sense?

Another option would be to give each of these div a class then use javasript to count the number of classes present multiply this by the required width of each div then use javascript to set the page width with the on document ready event.

I'm not 100% sure what OP wants here, but here's a 'solution':
HTML:
<div class="parent">
<div id="div1">1 has content</div>
<div id="div2" class="nocontent"><!-- no content --></div>
<div id="div3">3 has content</div>
<div id="div4">4 has content</div>
<div id="div5" class="nocontent"><!-- no content --></div>
<div id="div6" class="nocontent"><!-- no content --></div>
</div>​
CSS:
.parent {
white-space: nowrap;
}
.parent > div {
display: inline-block;
width: 200px;
margin-left: 1px;
background: #eee;
}
.parent > .nocontent {
display: none;
}
​
JavaScript (jQuery):
$(function() {
// Simulate loading content
setTimeout(function() {
$('#div2').text('2 has content now').removeClass('nocontent');
}, 3000);
});​
Demo:
http://jsfiddle.net/foxbunny/EY9sc/