Use JQuery Mobile to slide and delete list elements - javascript

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');
});
});

Related

Changing background body image hovering a list with jQuery with fadeIn and fadeOut effects + zoom

Long title, I know. It pretty much explains what I'm trying to accomplish.
My HTML looks like this:
<ul>
<li class="bg-0">
<h2>New Bikes</h2>
<span class="bg-0">http://localhost/sublime/wp-content/uploads/2016/10/new.jpg</span>
</li>
<li class="bg-1">
<h2>Smart Control</h2>
<span class="bg-1">http://localhost/sublime/wp-content/uploads/2016/10/smart.png</span>
</li>
<li class="bg-2">
<h2>Laura</h2>
<span class="bg-2">http://localhost/sublime/wp-content/uploads/2016/10/laura.jpg</span>
</li>
</ul>
It's not the tidiest,but I'm generating it with Wordpress and I don't know any better (still learning my way through PHP too).
And, what I want is, when the user hovers on a list item the body image changes using the image url of that span within the list item. And on mouse out it reverts to the original color. I can do that using this code (again, I'm sure it's very ugly and dirty):
$('.our-work li').hover(
function(e){
//mouseenter
var theClass = $(this).attr('class');
var theImage = $(this).find('span').text();
$('body.page-template-ourwork-page').css({'backgroundImage' : 'url(' + theImage + ')'});
console.log($('body').css('background'));
},
function(e){
//mouseleave
var theClass = $(this).attr('class');
var theImage = $(this).find('span').text();
$('body.page-template-ourwork-page').css({'backgroundImage' : 'url()'});
}
);
But what I can't seem to accomplish is a "soft" change with a fadeIn and fadeOut effect. More importantly, I'd like that while the mouse is still on a list item, the background images slowly zooms in (gets "bigger") until a certain point of course and then stops.
I've tried the fadeIn and fadeOut functions but they seem to now work properly so I'm sure it's something I'm doing wrong.
Sorry for the long post and thank you.
need add index to CSS and put the higher number to the layer you need keep on/over the other.
<ul class="slide"></ul>
css
.slide{
z-index: -1;/*Use it according to your needs.*/
}
for your Jquery need zoom:
$('img').load(function() {
$(this).data('height', this.height);
}).bind('mouseenter mouseleave', function(e) {
$(this).stop().animate({
height: $(this).data('height') * (e.type === 'mouseenter' ? 1.5 : 1)
});
});
It is not exactly the answer is just one example will have to adapt to your needs.

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.

Show/Hide JQuery Slider Navigation Based On First & Last Slide

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.

jCarousel show item with class selected

I have a list of items with one of them that have class=selected, every n second change the class=selected to the next item.
How can I activate the jCarousel scrolling and showing always the item with class=selected?
Won't it be easyer to set an autoscroll on the jcarousel?
You can find the information here: http://sorgalla.com/projects/jcarousel/
property: "auto"Specifies how many seconds to periodically autoscroll the content. If set to 0 (default) then autoscrolling is turned off.
You won't need extra coding to change the class to "selected"
You can use jcarousel scroll method like this:
var link = $("#linkIWantToScrollTo");
var scrollTo = link.parent().attr("jcarouselindex");
var animateScrolling = true;
// Using jcarousel instance from the element where you applied jcarousel, scroll it...
$("#menu").jcarousel('scroll', scrollTo - 1, animateScrolling, function(scrolled) {
if (scrolled) {
console.log('The carousel has been scrolled');
} else {
console.log('The carousel has not been scrolled');
}
});
Note: it's necessary to use scrollTo - 1 because index is 0 based. Otherwise you'll get undesired results! :)
link is an anchor <a> like this one:
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-8 jcarousel-item-8-horizontal" style="float: left; list-style: none outside none;" jcarouselindex="14">
<a id="linkIWantToScrollTo" title="Educação de Pacientes e Familiares" href="#">
</li>
With the above code jcarousel will scroll to position 14. This is working great right now in one of my projects. Position 14 was out of sight and applying the scroll method allows a great user experience since the item will be in sight.

iScroll doesn't show the scrollbar but lets me drag the content

This is how I call it
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
/**/
$(document).ready(function() {
//Created an array for adding n iScroll objects
var myScroll = new Array();
$('.content').each(function(){
if($(this).attr('id')==null){
$(this).attr('id') = $(this).attr('class');
}
id = $(this).attr('id');
console.log(id);
$(this).html('<div class="scroller">'+$(this).html()+'</div>');
myScroll.push(new iScroll(id));
});
});
I modified it a little bit so you can use it with a class and not only id.
It seems to work (to be enabled) because I can drag the container and its content (but it wont keep position, it will restore on mouse release)
If you want to see it happening please visit http://toniweb.us/grano and click on any item in the menu, the new shown has the effect.
Any idea why it is working but not as expected?
The reason I want to do this is because the container has several subcontainers that will be hidden or shown depending on the content selection.
CSS:
#nvl1{
padding:0px 25px;
z-index:10;
position:absolute;
left:0px;
background:url("../img/fondoNivel2.jpg") no-repeat scroll right 0 #79797B ;
height:100%;
}
#nvl1 .content{
width:650px;
z-index:11;
display:none;
color:#6666b6b;
position:relative;
line-height:30px;
}
I had a look at your code on: http://toniweb.us/grano
I think what you would like to do is use iScroll on your class with "scrolling". That is not what you are doing in the following code but instead you are actually setting iScroll to use the parent of your scroller DIV:
id = $(this).attr('id');
$(this).html('<div class="scroller">'+$(this).html()+'</div>');
myScroll.push(new iScroll(id));
For reference: iScroll uses an ID rather than a class
The effect this is having is that it is causing the "snap" effect on the immediately following block level element - your scroller DIV.
Consider this example where there is a DIV (id="scroller") containing an OL which contains a number of (block level) LIs:
http://cubiq.org/dropbox/iscroll4/examples/simple/
Long story short, give your DIV with the scroller class an id and create your iScroll from that instead.
if you set the style on the div tag you put the scroller on to (example)
style="position:relative;overflow: hidden;height:350px;
i think it's setting the height explicitly that should solve the dragging problem
Don't you just want:
.content {overflow-y:scroll;}
Is that not what you're saying mate?
The elements within the scroll div can't be floating. If they are floating and not cleared the flow of the page will mean your scrolling div is not the correct height. Try avoiding any floats within your scrolling and div and see how that goes. This was the problem for me.
I also found Matthews answer to be helpful as I was also calling iscroll on the wrong div. I think the confusing thing about the iScroll example is that it's easy to assume iScroll is called on the div with the ID scroller, but it's called on the wrapper div. The div with the ID scroller doesn't actually need an ID and I think for the examples sake this would be clearer without that. e.g.
<div id="wrapper">
<div>
<p>Whatever you want here</p>
<ul>
<li>1</li>
</ul>
</div>
</div>
...
myScroll = new iScroll('wrapper');

Categories

Resources