I'm toggling a class that hides and unhides a div within a list item, but I'm having problems applying a slideToggle to it.
Here is the HTML and CSS;
<style>
.collapsed .widget-content {
display:none !important;
}
</style>
<ul id="column1" class="column">
<li class="widget color-green" id="intro">
<div class="widget-head">
<a class="collapse" href"#">collapse</a>
<h3>The Title</h3>
</div>
<div class="widget-content">
<p>content here</p>
</div>
</li>
</ul>
Here is the jQuery to toggle the class of the li on click on the link with the class "collapse"
$(this).parents(settings.widgetSelector).toggleClass('collapsed');
How do I apply the slideToggle so that it only slides away the "widget-content" div whilst toggling the "collapsed" class on the li at the same time?
Thanks in advance for your advice.
you could try a callback when the toggle is complete:
$(this).parents(settings.widgetSelector).slideToggle('slow', function() {
$('#intro').toggleClass('collapsed');
});
something like that?
Related
I have a list view inside a popup , when the user select a list element I want to change this element "li" background color , I have tried the following code it was working on jQuery mobile 1.3.2 but it didn't work when i upgraded my app to 1.4.0 , How can I change the background color of the list element when the user click on it ? please help me
<div data-role="page" id="index">
<div data-role="header" data-theme="b">Main</div>
<div data-role="content">
Show Popup
</div>
<div data-role="popup" id="MyPOPUP" data-position-to="window" data-corners="false" data- overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="a">
<div style="text-align:center;float:center;padding-top:11px;">
<font size="6px" color="white">Countries</font>
</div>
</div>
<div id="scrollContent" class="content" data-role="content" style="background-color: white;">
<ul data-role="listview" id="countrieslist" style="margin: 0 !important;">
</ul>
</div>
</div>
</div>
Java script code
$('#index').on( 'pageinit',function(){
for(var i=1;i<=50;i++)
{
$('#countrieslist').append('<li id="'+i+'">'+''+'<font>'+Country+i+'</font>' +'</li>');
}
$('#countrieslist').listview('refresh');
});
$('#Btn1').on('touchstart', function(){
$(this).css({background: 'white'});
$(this).attr('href','#MyPOPUP');
});
$('#countrieslist').on('click','li', function() {
$(this).css({background: 'blue'});
selected_elem = $(this).attr('id');
alert('you selected' + selected_elem);
$('#MyPOPUP').popup('close');
});
You have a little typo in your loop that creates the countries, but other than that the code seems to work,
Here is a working DEMO
Because pageinit is deprecated n 1.4, I have used pagecreate; and in the for loop the word country after the font tag should be within the single quotes as it is not a variable. Also, in the li click, I reset all other countries to transparent background before setting the newly selected one:
$(document).on( 'pagecreate', '#index',function(){
for(var i=1;i<=50;i++) {
$('#countrieslist').append('<li id="'+i+'"><font>Country' + i +'</font></li>');
}
$('#countrieslist').listview('refresh');
$('#Btn1').on('click', function(){
$(this).css({background: 'white'});
$(this).attr('href','#MyPOPUP');
});
$('#countrieslist').on('click','li', function() {
$('#countrieslist li').css({background: 'transparent'});
$(this).css({background: 'blue'});
selected_elem = $(this).attr('id');
alert('you selected' + selected_elem);
$('#MyPOPUP').popup('close');
});
});
I am trying to select only the outer container for the drop target with jQuery UI.
I am trying to drop in media-content but not in media-list-items.
The reason is that media-list-items is not the full width of it's parent and I only want to drop to the right side which is a different background color the full height.
HTML:
<div class="media-content clearfix ui-droppable on" style="">
<form method="post" class="form-horizontal" action="./">
<fieldset>
<div class="media-list-items clearfix">
<ul data-gallery_id="18" class="media-list ui-sortable" style="">
<li id="media_17"></li>
<li id="media_15"></li>
</ul>
</div>
</fieldset>
</form>
</div>
JS:
var $trash = $('.media-content:not(.media-list-items), .media-content');
$trash.droppable({
accept: '.media-list > li',
drop: function(event, ui) {
console.log('trashed');
}
});
I'm not sure you can achieve what you want without adding another element as your "trash" droppable. With some neat css you can make it look pretty much the same :)
html
<div class="media-content">
<form method="post" class="form-horizontal" action="./">
<fieldset>
<div class="trash"></div> <!-- added a trash element -->
<div class="media-list-items">
<ul class="media-list">
<li id="media_25"></li>
<li id="media_26"></li>
<li id="media_27"></li>
</ul>
</div>
</fieldset>
</form>
</div>
css
.media-content {
position: relative; /* makes it contain absolutely positioned descendants */
}
.media-content .trash {
position: absolute;
top: 0; bottom: 0; /* stretches to full height of .media-content */
right: 0;
width: 100px;
background:#f5f5f5;
}
js
$('.media-content .trash').droppable({
drop: function(event, ui) {
console.log('trashed');
}
});
Demo at: http://jsfiddle.net/KazeG/6/
I want to make the div - "small_box" in the first item of sortable list to be always not visible. I tried with jquery first() but that works only once and only for one and same element whenever it's dragged. How can i simple make it back to be visible when I dragg it into other than first place and then make invisible "small_box" for the item which jumps in the first place?
I put the live example here: http://jsfiddle.net/kriskasper/3knnn/
<ul id="sortable" class='connectedSortable'>
<li>
<div class="small_box">small box</div>
<div class="big_box">big box</div>
</li>
<li>
<div class="small_box">small box</div>
<div class="big_box">big box</div>
</li>
<li>
<div class="small_box">small box</div>
<div class="big_box">big box</div>
</li>
<li>
<div class="small_box">small box</div>
<div class="big_box">big box</div>
</li>
</ul>
And here is jquery ui function:
$(function() {
$( "#sortable" ).sortable({
connectWith: ".connectedSortable",
placeholder: "ui-state-highlight",
forcePlaceholderSize: true,
opacity: 0.6,
revert: 70
});
});
Please help.
You should play with the sortable plugin events. The sortreceive event is fired when the connected element receives an item. My guess would be something like ...
$("#sortable").bind("sortreceive", function(event, ui) {
$(".connectedSortable .small_box").show();
$("#sortable .small_box").first().hide();
});
Is it possible to have multiple split buttons in a jQuery mobile list?
I've tried doing this:
<ul data-role='listview'>
<li>
<a href='#' id='1'>1</a>
<a href='#' id='btn1'></a>
<a href='#' id='btn2'></a>
</li>
</ul>
But it doesn't work. Neither does wrapping the links in a <div data-role='controlgroup>. Am I doing something wrong, or is it just not possible without a hack?
UPDATE: The list is dynamically generated by doing $("#listid).append("<li>...</li>"). http://jsfiddle.net/nrpMN/3/ . As pointed out by mdmullinax below, the following does work:
<ul data-role='listview'>
<li>
<a href='#' id='1'>1</a>
<div data-role='controlgroup' data-type='horizontal'>
<a href='#' id='btn1'></a>
<a href='#' id='btn2'></a>
</div>
</li>
</ul>
Thanks
Sounds like what you want is a horizontal controlgroup nested in a listview.
http://jsfiddle.net/nrpMN/
<ul data-role='listview'>
<li>
<div data-role="controlgroup" data-type="horizontal">
Yes
No
Maybe
</div>
</li>
</ul>
Here is extension to the solution. Problem with above solution is that you cannot control the placement of buttons on the right side of the list item. One way to do it is add class='ui-li-aside' to the control. That will make the buttons come on right, but you will have to adjust the area which aside covers, by default it is 50%. You can modify it to reduce it so that it does not cover your list content on left
.ui-li-aside { float: right; width: 10%; text-align: right; margin: .3em 0; }
Or you can add another class
.ui-li-asideNew { float: right; width: 10%; text-align: right; margin: .3em 0; }
And change the div to adjust the
<ul data-role='listview'>
<li>
<div class='ui-li-aside' data-role="controlgroup" data-type="horizontal">
Yes
No
Maybe
</div>
</li>
</ul>
I think, Controlgroup not rendered well in dynamic listview. You should make complete html code for controlgroup in dynamic listview.
<li>
<a href='#popupItem' data-rel='popup'>List Text</a>
<div class='ui-controlgroup-controls' style='width: 110px;float: right;position: absolute;right: 0em;top: 0.5em;'><a href='#' id='tolistminus' data-role='button' data-icon='minus' data-iconpos='notext' style='width: 1.0em;float: left;' data-theme='b' class='ui-link ui-btn ui-btn-b ui-icon-minus ui-btn-icon-notext ui-shadow ui-corner-all ui-first-child' role='button'>-1</a><a href='#' id='tolistplus' data-role='button' data-icon='plus' data-iconpos='notext' style='width: 1.0em;float: left;' data-theme='b' class='ui-link ui-btn ui-btn-b ui-icon-plus ui-btn-icon-notext ui-shadow ui-corner-all ui-last-child' role='button'>+1</a></div>
</li>
My question is similar, but different from jquery-hover-menu-when-hovering-over-child-menu-disappears.
I originally had the hover event on the li.item, which was a little quirky, but did what i needed it to do. I switched the hover to the span so that the event would fire on the text block, rather than the list block, which expands the full width of the list.
The effect I'm trying to achieve is when hovering over ul.sub. I'd like it to continue with the animation in queue from span.text's hover, which is displaying it, but also keep it open.
What is happening is that the mouse is leaving the span, so the li.item is firing its mouseout portion of the trigger.
jsFiddle Page
HTML
<ul id="main">
<li class="head">Title Bar</li>
<li class="item odd">
<span class="text">A</span>
<ul class="sub">
<li>1</li>
<li>2</li>
</ul>
</li>
<li class="item even">
<span class="text">B</span>
<ul class="sub">
<li>3</li>
<li>4</li>
</ul>
</li>
<li class="item odd">
<span class="text">C</span>
<ul class="sub">
<li>5</li>
<li>6</li>
</ul>
</li>
<li class="item even">
<span class="text">D</span>
<ul class="sub">
<li>7</li>
<li>8</li>
</ul>
</li>
</ul>
CSS
/* colors used are not for production; they are
used only to enhance the example's visual distinction */
#main{width:10em;}
.head,.item{border:1px solid black;padding:.5em;}
.head{font-weight:bold; background:#336; color:#fff; cursor:pointer;}
.item{background:#f90;}
.sub{display:none;}
.sub li{padding-left:1em;}
.text,.sub{cursor:pointer;}
JavaScript
$(document).ready(function(){
// specific here because of other divs/list items
$('#main li.item span.text').hover(function(){
$(this).siblings().stop(true,true).toggle('slow');
});
$('li.head').hover(function(){
$(this).parent().find('ul.sub').stop(true,true).toggle('slow');
});
});
Edit:
I think something along these lines is what I need, however the animation is refired when going from the sub to the span.
$(document).ready(function(){
// specific here because of other divs/list items
$('#main li.item span.text').hover(
function(){$(this).siblings().stop(false,true).show('slow');}
,function(){$(this).siblings().stop(true,true).hide('slow');}
);
$('#main li.item ul.sub').hover(
function(){$(this).stop(false,true).show();}
,function(){$(this).stop(false,true).hide('slow');}
);
$('li.head').hover(function(){
$(this).parent().find('ul.sub').stop(true,true).toggle('slow');
});
});
Split the hover behavior into its two constituents, mouseenter and mouseleave. Also split toggle() into show() and hide(). Bind mouseenter to the span.text and mouseleave to the li.item:
$(document).ready(function() {
// specific here because of other divs/list items
$('#main li.item span.text').mouseenter(function() {
$(this).siblings().stop(true, true).show('slow');
});
$('#main li.item').mouseleave(function() {
$(this).children("ul").stop(true, true).hide('slow');
});
$('li.head').hover(function() {
$(this).parent().find('ul.sub').stop(true, true).toggle('slow');
});
});
That way, the hover is not triggered by whitespace, which is what you want.