how to make ul scroll down when full? - javascript

I have a <ul> defined as
<ul id="messages">
</ul>
I do not have any <li> items defined in html but in my javascript I use jquery to add <li> items to the <ul>
$("#messages").append("<li>" + string + "</li>");
When I keep adding messages it does not automatically scroll down to the newest added li items when it has too many li items to fit the screen. How do I get the li to scroll down?

You need to use CSS to achieve this:
ul {
overflow-y: scroll;
}
You also need to give the UL a max-height for this to work.

You're looking to automatically have the page scroll down to a li when it's added?
You need to use jQuery and javascript to get the <li>'s offset from the top of the window. Then set scroll the window to that position.
var offset = $('li').offset().top;
$('body').scrollTop(offset);
Here's an example
If you want to animate it use something like this:
$('html,body').animate({
scrollTop: offset
}, 1000);

I've done it on a click event as you haven't really said when you adding the item
HTML you need to get working example is
<button id="click">Click me</button>
<ul id="messages">
</ul>
JQuery is
$(document).ready(function (){
$("#click").click(function (){
$("#messages").append("<li>pow</li>");
//$(this).animate(function(){
$('html, body').animate({
scrollTop: $("#messages li").last().offset().top
}, 2000);
//});
});
});
JSFiddle

Related

jQuery animate position not working

I'm just playing with animate of jQuery and not getting the position of a list element to animate.
I've set the list position to be relative of an absolute unordered list but still not seeing this happening.
Here is the snippet and demo is here JSFiddle
HTML
<button>click</button>
<ul class="nav">
<li>Look</li>
<li>Play</li>
<li>Eat</li>
<li>See</li>
</ul>
jQuery
var menu = $('.nav').children('li');
$('button').on('click', function () {
menu[0].animate({
'top': '+=50'
}, 200);
});
You need to use $(menu[0]) instead.

Javascript animate() scrolling does not work as intended

When I use the code below, it gets very glitchy.
After the animation is complete, I scroll and the page (document) bounces around.
$(document).ready(function (){
$(' .nav, .learn-more').click(function(event){
$('html, body').animate({
scrollTop: $("#"+event.target.id+".featurette").offset().top
}, 1000);
});
});
Please see the demo on Codecademy.
The bouncing happens when the animation didn't finish yet and the script would keep the page scrolling, then you try to counter-scroll, and due to the way jQuery animations work, your counter-scrolling gets reset by the continuation of the scrolling animation.
Upon looking at your linked example, I found out why your animation was jumpy. The selector you use for attaching the click handler is $(' .nav, .learn-more'), and in your HTML, there's 2 .navs, one being the child of the other:
<div class="nav">
<div class="container">
<ul class="pull-leftnavnav-pills">
<li><a id="" href="#">Home</a></li>
Because of this, the animation is called twice, causing the flickering. You should modify your selector to $('.nav .nav, .learn-more'), or use something more unique like $('.nav.nav-pills, .learn-more').
$('.nav .nav, .learn-more').click(function(event){
$('html, body').animate({
scrollTop: $("#"+event.target.id+".featurette").offset().top
}, 2000);
});
Here's the fixed code in the code sharing platform of your choice: http://www.codecademy.com/DJDavid98/codebits/GSoDQf

Scroll to a specific div

I have few divs .posts which have a attr data-id which corresponds to the mysql DB id.
<div class="posts" data-id="1"></div>
<div class="posts" data-id="2"></div>
Now if I want to scroll to a specific div which I am only known to the data-id.
How will I scroll to it?.
My JSFiddle is here.
Can anyone give an example along with a JSFiddle?
You use link anchors and JQuery.
Just give your link the class "scroll" and use the following code in the head:
$(function() {
// Listen for a click event on the anchor
$('.scroll').click(function(event) {
// Prevent the jump to target that is default browser behavior
event.preventDefault();
// Animate the scrollTop property of the scrollParent to the top offset
// of the target element. In this case, we have an animation duration of 1000ms(1 second).
$('html').animate({
scrollTop: $(this.hash).offset().top
}, 1000);
});
});
/* Just for demo purposes */
.post {
margin: 100vh 0;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Go To Div 8
<div class="post" id="anchor">Scroll to me</div>
You can use jQuery.ScrollTo plugin: https://github.com/flesler/jquery.scrollTo
In this link you can find demos http://demos.flesler.com/jquery/scrollTo/
$(function() {
$('body').scrollTo($('div[data-id=1]'), 1000); //scroll to div 1
});
HTML:
<div class="posts" data-id="1"></div>
You don't need javascript if you have an anchor with a name.
Div to post 8 scrolls to <a name="post8"></a>
I'm seeing a lot of jQuery and Javascript in here, and simple CSS is here to help!
html,body {
scroll-behavior: smooth;
}
To put this in action, use a link and give it an href with the id of the element you're scrolling to:
Section One
<div id="sectionOne">
<h2>Section One</h2>
</div>
Not all browsers however support the scroll-behavior property, in which case I'd recommend the selected answer near the top ;)
Animate to last item with specific attribute
$('html').animate({
scrollTop: $('className:last[data-id]').offset().top - 100
}, 500);
I think this would help $(".element").attr("any-attribute-of-ur-elem");
In your case it would look like: $(".post").attr("data-id")
And you can scrollTo that posts.
try this:
$(document).ready(function (){
$("#button").click(function (){
$('html, body').animate({
scrollTop: $(".post[data-id="+yourID+"]").offset().top
}, 2000);
});
});

Use JQuery Mobile to slide and delete list elements

I'm experimenting with a JQuery Mobile page that has a simple list set up:
When I click the list elements, they are highlighted and stored by id into a local array. Is there a simple (or not so simple) way to make the selected elements slide to the right off the screen and the rest of the elements collapse to fill the gaps?
Relevant code:
var selectedItems = []; // This is updated as items are selected
var deleteButtonTapped = function() {
// code here
};
Edit: If it is of any pertinence, in the actual implementation of the page, the items that I am populating the list with will be drawn from a database, so I will be able to reload the page and the deleted elements will no longer appear.
jsFiddle - This is close to what you are looking for...
using .animate()
EDIT: Adding code...
The .animate() function is saying, if the elements left property is 0, then move it to the right as many pixels as it is wide, then hiding it using the .fadeOut() function. This same formula can also be used to slide the element back into place if needed.
HTML
<ul id="list" data-role="listview">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
<button id='btnDelete'>Delete</button>
CSS
.yellow{
background-color: yellow;
}
jQuery
$('#list li').click(function(){
$(this).addClass('yellow');
});
$('#btnDelete').click(function(){
$('.yellow').each(function(){
$(this).animate({ marginLeft: parseInt($(this).css('marginLeft'),10) === 0 ? $(this).outerWidth() : 0 }).fadeOut('fast');
});
});

Change vertical nav to horizontal using jquery

Basically I have an unordered list acting as my navigation on a one page website sorted by sections. These sections or panels are full width and height of the browser window.
In the first panel, this list is vertical but when the user scrolls down the page to section two (i.e. the second panel from the top of the browser window) I'd like to change the style of it so that it fixes to the top of the browser window and becomes a horizontal nav instead of a vertical one. I don't want to duplicate the list if possible.
I'm not great at jQuery and don't really know where to start. Any help would be great.
This is my current code that gets the width and height of the browser window and displays a full screen div:
function fitElements(){
var height=$(window).height();
var width=$(window).width();
$('.panel').css('height',height);
$('.panel').css('width',width)
};
Here's a very simple example:
DEMO
html:
<ul id="nav">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div id="divOne" class="panel">
</div>
<div id="divTwo" class="panel">
</div>
<div id="divThree" class="panel">
</div>
css:
#nav {
position:fixed;
top:0;
left:10px;
}
#nav.horizontal li {
float:left;
}
#divOne {
background-color:#cef;
}
#divTwo{
background-color:#efc;
}
#divThree{
background-color:#fce;
}
​
js/jQuery:
$("div.panel").css({
height: $(window).height(),
width: $(window).width()
});
$(window).scroll(function() {
($("#divTwo").offset().top <= window.pageYOffset) ? $("#nav").addClass("horizontal") : $("#nav").removeClass("horizontal");
});
$("#linkOne").click(function(e){
$('html, body').animate({
scrollTop: $("#divOne").offset().top
});
$("#nav").removeClass("horizontal");
e.preventDefault();
});
$("#linkTwo").click(function(e){
$('html, body').animate({
scrollTop: $("#divTwo").offset().top
});
$("#nav").addClass("horizontal");
e.preventDefault();
});
$("#linkThree").click(function(e){
$('html, body').animate({
scrollTop: $("#divThree").offset().top
});
$("#nav").addClass("horizontal");
e.preventDefault();
});
​
Okay, providing I understood you correctly (see my comment looking for clarification), your goal is to make sure that your navigation pane is visible to your site visitors even when they scroll down the page. I would caution you against changing the nav bar to show horizontally after reaching a certain point on the page only because it will look pretty choppy, especially in slower browsers, unless (and sometimes even if) you provide a lot more code (complex for a novice) to smooth out the transition.
What I suggest is that you take a look at this question from a few days ago. I created a demo for the effect that he was looking for, which is very similar to what you are looking for, and hosted it on my development site. Take a look and if it's something that you like and if it is and you have trouble implementing it let me know and I'll be more than happy to help you.

Categories

Resources