JQuery Mobile Listview Background Color - javascript

How can I adjust the background color of a listview item in jquery mobile? Basically I'd like a user to click a item and have it and only it highlight, very simple, so I thought.
I thought this might achieve it (.groupList is an unordered list with that class). The event is fired but nothing changes.
$(".groupList li").bind('click', function() {
logger.debug("list row click");
$(this).closest("li").siblings().attr("data-theme","a");
$(this).parents("li").attr("data-theme","e");
});
I think the reason this is broken has to do with the fact I can't seem to set data-theme dynamically at all on listviews. I also can't use the background-color css with any luck.
It seems li tags can only have their data-theme set before appending to a list, once appended I can't get it to change.
The logic I've described here works on table rows just fine. Just bind the click event to tbody tr. The jquery functions closest, siblings and parent help us turn on/off the css for the background color. Again, not entirely sure why a listview breaks this.

Related

Determine child-most element clicked on for Javascript event (DataTable related)

It might be that the way I'm approaching this just won't work, but to explain:
I have a DataTable with column sorting enabled via the default column header sorting graphic. In one of the column headers I also have a "select all" checkbox. The sorting and the "select all" both work, but I can't seem to prevent the sort operation from taking place when clicking on the select all checkbox.
The problem seems to be that the DataTables sort function is called ahead of the select all operation - in the capturing rather than bubbling up phase in what I understand to be the correct JS parlance.
I've been back and forward with this between different guides and forum posts, but am starting to wonder if it's going to work. I've added event.stopPropagation() to the select all routine, but because this is only called after the sort routine it seems of little use. I've also gone down the event.target route to conditionally only have the sort operation run if the clicked ID wasn't the checkbox, but for all I can tell the event object holds no reference to the original clicked element (does it?).
So, without editing the DataTables source (I'd really rather keep that off the shelf if at all possible), how do I have the sort routine run only when the column header itself is clicked, as opposed to a child element?
So I want something along the lines of:
function SelectAll(event)
{
event.stopPropagation(); //Doesn't help
...
}
$("#table_id").on("order.dt", function (event, settings)
{
if(event.not_clicked_select_all)
{
table_id.order();
}
});
How might this be done? Thanks.
Edit:
Jsfiddle
You can actually use a little css trickery with the z-index. Just put your inner div on a z-index that is higher than the cell.
th > div {
z-index:9998;
}
That will allow your checkbox (not the SELECT ALL label) to function the way you want it to. If you want to allow users to be able to click on the label too, then (if you are able) wrap the SELECT ALL in a label element and apply the same event.stopPropogation and my css technique to that label as well. Like this:
HTML
<th><div><input type='checkbox' id='select_all' onchange='SelectAll(event, "select_all", "include_")'><label for='select_all'> SELECT ALL</label></div><div>h</div></th>
CSS
th > div {
z-index:9998;
}
th > div > label {
z-index:9999;
}
Javscript
$("#select_all").click(function(event){event.stopPropagation()});
$("label[for='select_all']").click(function(event){event.stopPropagation()});
If you don't have access to the source and cannot wrap SELECT ALL inside a label element, there is probably some other css trick you can do. The key is to be able to target the label text individually and set it's z-index property.
Here is a working sample with both the checkbox AND the label:
https://jsfiddle.net/mspinks/y1g450ng/1/

Ryan Fait custom HTML form and newly added elements

I'm using this script to style checkboxes and radiobuttons and it works fine:
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
The problem is when I add checkboxes and radiobuttons dinamically to the page using jquery. These newly created items don't get styled.
Does anyone know a way around this?
EDIT:
I'm adding the new checkboxes dynamically using this:
dropdown.change(function () {
$('#template').tmpl(data).appendTo('.container'); //here the new elements get added
Custom[init](); //THIS DOESN'T TRIGGER
});
I'm not sure how Ryan's script works, but I've worked on a lot of projects that involve custom radio buttons. Typically what I do is, use CSS and set the opacity of the radio button to zero.
input[type='radio'] {
opacity: 0;
}
Next, I wrap the radio button with a span tag with a class something like .checkbox.
Now you should be easily able to attach an event to show/hide a background image.
See complete demo: http://jsfiddle.net/07x4zr79/
I'm not a big fan of using scripts to do things, when you don't.

Remove hover state on click (not working on phones)

I have a button that performs an ajax action on click (no reload)
On my desktop, when I click the button, the button returns to default style state (when not hovering)
But on phones.. It will stay in hover style, even if I click somewhere else
I have tried off("hover") and unbind("mouseover mouseleave mouseenter mousein mouseout hover")
Also tried setting an :active state in css, and creating a classname for the "not-hovered" state, and changing to that on click in jquery
No effect (on any phone)
How can I achieve this?
try making something like this:
$('#element').on(click, function{
this.toggleClass('selected unselected')
});
selected and unselected are styles you must add to you CSS, if doesnt overwrite the existing styles add !important at the end of the elements in the style class you are changing for the browser to force them.
Let me know if that worked.
Here is my solution in all the cases the mobile version do not need the CSS hover state.
First of all, detect if the browser is desktop or mobile (or is touch) via JS / jQuery. Then, add a 'desktop-version' CSS class to the 'body' tag, and set all the ':hover' pseudoclads CSS rules only to the 'desktop-version' anchors / selectors that have a JS function binded to them.
Doing so, they won't have actually no 'hover' state to get stuck with.

add div from drop down menu selection jquery

I am able to add a row with the dom but how can I get a div to display to the right of drop down depending on what is selected?
Here is an example of what I have so far: http://jsbin.com/#/afojid/1/edit
The first drop down is working correctly but the rest I would like to add when the button is clicked and I would like them to work the same way as the orginal drop down menu. So that if Asian is selected an add section will appear to the right, if Other is selected an other add section will appear to the right, and so on for each time the add button is clicked. I tried clone but I don't want anything to be selected when the add button is clicked
The fact that you're working with ids instead of classes more or less universally makes this very challenging. You should update your code to work with classes and appropriately clone the *Info tables when you create new dropdowns.
You're using an old version of jQuery, so .on is not available to you for delegation. Instead, use .delegate:
$(document).delegate('#typeofEthnicity,[id^=newDDMenu]', 'change', showEthnicity)
This will call the showEthnicity function for the original dropdown and any added dropdowns, but you also have to clone all of the *Info divs and put them in the appropriate spot in the table (I suppose the same spot as the appended row). If you use classes, then it's a simple matter of finding the dropdown's parent row and then locating the corresponding child with the appropriate class to be shown.

Bootstrap: accordion strips ui-droppable class on expand

New to Bootstrap and having some issues with accordion. Hoping someone would help me resolve it.
Basically I have an empty accordion and a drop down menu. Every time a selection made in the drop down menu, it is added to the accordion, with full .accordion-group mark up, but with empty .accordion-body div. After that this accordion-group set as droppable and .ui-droppable class is automatically added.
After that I am able to drag and drop a bunch of other divs into the .accordion-group and those divs are appended to .accordion-body of this particular group. This part works fine, however, as soon as i click to expand any given .accordion-group, .ui-droppable class gets stripped from ALL of them.
How do I stop it from removing .ui-droppable class??
Steps to reproduce:
Use html markup from Bootstrap page:
(For some reason I am unable to format HTML as code here by indenting it with 4 spaces,so im just pasting the link to it)
http://twitter.github.com/bootstrap/javascript.html#collapse
Add JS, which makes groups droppable
$('#accordion2').find('.accordion-group').each(function() {
$(this).droppable();
});
Inspect elements to make sure .ui-droppable class is set
Click to expand a group. Any group.
Inspect elements. .ui-droppable has been stipped from ALL of them
Resolved this, but I think it is a very stupid way to achieve the result, so I am not happy with how Bootstrap handles toggles. I really don't think there is a need to loop though every .accordion-group to re-apply droppable attributes every single time someone opens OR closes a section.
Going to re-do it with just a button and a div for each section.
Here is the solution:
$('#host-groups').on('shown', function() {
$('#host-groups').find('.accordion-group').each(function() {
$(this).attr('id').droppable();
});
});
$('#host-groups').on('hidden', function() {
$('#host-groups').find('.accordion-group').each(function() {
$(this).attr('id').droppable();
});
});
/facepalm

Categories

Resources