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.
Related
I am seeking help in showing and hiding the directional nav arrows on a self-made JQuery Slider. The slider shows 2-3 images at a time depending on the viewport. I want to be able to hide the next(right) arrow when the last slide has appeared in full view and hide the previous(left) arrow whenever the first slide is back to the first item in view.
Trying to find a way to know the positions of the first and last slide because the number of list elements will change and not be a set number.
$(document).on( 'click', '.control-right', function() {
var itemWidth = $(this).parent().children('.module-slider').children('.slider-list').children('.slider-item').outerWidth() + 20;
var leftIndent = parseInt($(this).parent().children('.module-slider').children('.slider-list').css('left')) - itemWidth;
$(this).parent().children('.module-slider').children('.slider-list').animate({left: leftIndent}, 400);
});
$(document).on( 'click', '.control-left', function() {
var itemWidth = $(this).parent().children('.module-slider').children('.slider-list').children('.slider-item').outerWidth() + 20;
var leftIndent = parseInt($(this).parent().children('.module-slider').children('.slider-list').css('left')) + itemWidth;
$(this).parent().children('.module-slider').children('.slider-list').animate({left: leftIndent}, 400);
});
The markup template is as follows
<div class="module">
<div class="slider-control control-left"></div>
<div class="slider-control control-right"></div>
<div class="module-slider">
<ul class="slider-list">
<li class="slider-item"></li>
</ul>
</div>
</div>
I see two ways of doing this. Because I do not know your slider code I will suggest something.
If you want to detect the position of an element you can use JQuery's position() method
That way you can detect the position of an element and have something happen. But besides that what I would do if I made a slider would be to give the current slider a class like ".active" and then in my javascript I would use conditionals to check for the element with the class of ".active" meaning it is shown.
Something like this:
if( $(".element").hasClass("active") ){
//do something
}
Again those are only suggestions, you can go about in whatever way suits your needs.
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
Forgive me if this has been asked, but I've been searching all day on here and have not seen any question relating to my specific problem.
I'm building a one page parallax-style website with a navigation bar utilizing a fixed position to allow users to quickly jump to different sections of the page.
Currently I'm trying to implement the scrollTo jQuery plugin (flesler/jquery.scrollTo - Github) to give a nice smooth animated scroll.
This is the 5th or 6th different jQuery method I've implemented to make this effect work with no success. The scrollTo method seems to be the closest to working, but it still won't work.
It does not work at all on Chrome 42.0.2311.90
It does not work at all on Firefox 37.0.2
It does work on Safari 5.1.10, but I haven't been able to check on the newest version of Safari. Also the site doesn't render right on Safari 5.1.10 yet. I also have not had access to a computer with IE.
The test site is located at http://revolt-designs.com/parallax/
Here is how I'm calling the script:
$(document).ready(function(){
$('#nav-links li a').click(function() {
$.scrollTo($(this).attr('href'), {duration: 3000});
});
});
And the links are formatted this way:
<div id="nav">
<ul id="nav-links">
<li>About</li>
<li>News</li>
<li>Events</li>
<li>Contact</li>
</ul>
</div>
For the sake of simplicity, the anchors are pointing to divs located on the page, ie:
<!-- GROUP 2 -->
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
Lorem Ipsum
</div>
</div><!-- end GROUP 2 -->
Hopefully someone will catch something small and easy that I'm missing. Thanks. To be clear, I'm not asking for an alternative to the script I'm using. I'm asking for help finding the underlying issue that's preventing any smooth scrolling scripts from working on my site.
Change your code to scroll on the .parallax element:
$(document).ready(function() {
$('#nav-links li a').click(function() {
$('.parallax').scrollTo($(this).attr('href'), {duration: 3000});
});
});
Here is a fiddle (Used the HTML from your webpage)
For the sake of browser compatibility, you could consider changing height: 100vh; in your css to perhaps use .height() instead:
$(document).ready(function() {
height = $(window).height();
$('.parallax').css('height',height);
$('#nav-links li a').click(function() {
$('.parallax').scrollTo($(this).attr('href'), {duration: 3000});
});
});
This snippet required jquery and jquery UI, you can remove the easing part at the end if you do not want to include jquery UI
$(document).ready(function(){
$('#nav ul li a').on('click', function(e) {
e.preventDefault();
var target = $(this).attr('href');
//changing the value of offsetValue will help account for fixed headers or whatever.
//EDIT: used data-offset to allow for multiple offsets defualt is 0.
offsetValue = $(this).data('offset') | 0;
$('html, body').animate({
scrollTop: $(target).offset().top-offsetValue
},
{
duration: 2000,
easing: "easeOutQuint"
});
//number at the end here changes the speed, slower = higher
});
});
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');
});
});
I have a horizontal animated menu that has a strange behavior because it works fine only first time, after that the expandable menu is not animated and I don't understand why the
ul#nav ul{display:none;} is not applied any more... this is jQuery function that I use for animation.
function mainMenu(){
$('ul#nav').find('> li').hover(function(){
$(this).find('ul')
.stop(true, true)
.slideDown('slow');
});
};
Maybe this will work:
function mainMenu(){
$('ul#nav').find('> li').hover(function(){
$(this).find('ul')
.stop(true, true)
.slideDown('slow');
}, function(){ $(this).find('ul').hide(); });
};
the problem is that the first time you have your <ul> hidden so it's working just fine. After slideDown(), the <ul> becomes visible but when you move your mouse, you just change the left attribute, not the display. Basically, the <ul> is already visible so slideDown is not working.