I have created a drop down menu with animals. But what I wanna do now is, after I have selected one of the animals from the drop down, can I 'display' a checkbox button? Like... hide it initially and then after I have select one of the animals and click on it, the checkbox button will be visible?
I can only do on the code for drop down menu...
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">animals</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
Dogs
Cats
Cow
Goats
Tiger
</div>
</li>
Help please!
using jquery like :
Dogs
<input id="chkdogs" type="checkbox" name="dogs" value="dog" style="display:none;">
What I would suggest you do is:
Add the checkboxes dynamically when an onclick event occurs.
Or hardcode the checkboxes next to each animal then hide them. Then use the onclick event to reveal them.
Lastly use jquery, it's easier
Related
I am facing a drop down menu made of ul and li elements:
<ul class="o_dropdown_theme_values">
<li class="" tabindex="-1">
<label class="myclass" tabindex="0">Category 1</label>
</li>
<li class="" tabindex="-1">
<label class="myclass" tabindex="0">Category 2</label>
</li>
...
</ul>
I know two ways of modifying a dropdown menu with Chromeless:
.evaluate((dropDownValue) => {
select = document.querySelector('select#category1')
select.value = dropDownValue
}, dropDownValue)
and
.click('#id')
.type("first letters of option", '#id')
.click('#id option[value="'+dropDownValue+'"]')
but because of the structure of the menu with ul and li, I am unable to use these.
I also tried to click on the menu and then press the tab key as many times as necessary to select the correct option, as if I was navigating the menu with my keyboard. But the Tab keys I am sending are not taken into account. I was able to send ONE (and only one) DOWN key (and not TAB) to the menu, but nothing more.
How can I manipulate this kind of menu? Any workaround based on javascript would be appreciated.
I found a way in the end.
Use the .focus(#CSSselector) command to highlight the correct option and then valide with .press(13) (Enter key).
So that's a third way to manipulate dropdown menus in chromeless
This question already has answers here:
How to check "checkbox" dynamically - jQuery Mobile
(4 answers)
Closed 8 years ago.
I am trying to put a checkbox like control in the Navbar which should behave like a toggle. When I first select the navbar button it should select all the checkboxes below and clicking again will reset the checkbox.
Here is the code I have to display the controls
<div data-role="page" id="index">
<div data-role="header" data-position="fixed" >
<div data-role="navbar">
<ul><li>All</li></ul>
</div>
</div>
<div data-role="content" id="content">
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0"/>
</div>
Message 1
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-1" id="checkbox-1"/>
</div>
Message 2
</li>
</ul>
</div>
</div>
The JSfiddle link is http://jsfiddle.net/8dyn9e7s/
How do I select all checkboxes on the click on the button and deselect all checkboxes on an another click.
Regards
Malai
You can solve this in three lines of jQuery:
$("#checkAll").on("click", function(){
$("input").prop("checked", !$("input").prop("checked"));
});
All you need to do is add an id to your toggle button as seen here:
http://jsfiddle.net/8dyn9e7s/3/
You can listen to the click event for whatever element, in this case your All checkbutton, and then select all the checkboxes and set the checked property using .prop(). Here's an updated fiddle showing the checks toggling on and off. http://jsfiddle.net/8dyn9e7s/1/
Edit: I would suggest giving your link a unique class to listen for, or an id, so it doesn't have to listen to just the ui-click class. Also you may want to handle a case where you don't have any checkboxes otherwise the condition check won't work and it would be better to scope your checkboxes with a class as well so you don't just grab all of them like the example
And one more version:
$('.ui-navbar .ui-btn').click(function(e) {
$('#content :checkbox').prop('checked', $(this).toggleClass('ui-btn-active').hasClass('ui-btn-active'));
e.stopPropagation();
e.preventDefault();
});
Important part here is that you also need to take care of removing active class from the navigation button when in unchecked state.
Demo: http://jsfiddle.net/8dyn9e7s/4/
Firstly, I need to say that I'm pretty new to jQuery.
I have this situation: http://jsfiddle.net/dVf8m/
I've been wondering if there is a way to do the slideToggle simplier. Now I have two ids on menu elements (#trigger1 and #trigger2) and two ids on the hidden divs (#one and #two). This also results in double jQuery. Is it possible to avoid all the ids and make it simpler?
Another thing is that if I click on both menu elements (First and Second) both divs appear. I want only one of the hidden divs to be visible at one time? How can I force the first div to disappear when the other one is appearing?
Also, if I'd want to use fadeIn/fadeOut in this situation, how to do it when both of them use the .click event?
Change your code to something like below. Have a class for the div and add click listener to it. add any attribute to the div and give the id of the div to be toggled.
<div id="top">
<ul>
<li><span id="trigger1" class="toggler" data-item="item1">First</span></li>
<li><span id="trigger2" class="toggler" data-item="item2">Second</span></li>
<li>Third</li>
</ul>
</div>
<div class="hidden" id="item1">
<ul>
<li>Smthn</li>
<li>Smthn2</li>
<li>Smthn3</li>
</ul>
</div>
<div class="hidden" id="item2">
<ul>
<li>Apple</li>
<li>Orange</li>
<li>...</li>
</ul>
</div>
$(document).ready(function() {
$('.toggler').click(function(e) {
$("#"+$(this).attr("data-item")).slideToggle(500);
});
});
JSFIDDLE
HI I am trying to make a menu where items show up as they hover. I am quite new to jquery, css, etc. and I cant quite figure out what my problem is. Right now I do get my div to show up on hover, but instead of just one all of them show up.
How do I make the div tag of only the item I hover over show up.
Here is the fiddle:
<ul class="navi">
<li> <a class='light'>
Item1
<div class="hover-name" style="display:none">
Businesses
</div>
</a>
</li>
<li> <a class='light'>
Item2
<div class="hover-name" style="display:none">
Agencies
</div>
</a>
</li>
<li> <a class='light'>
Item3
<div class="hover-name" style="display:none">
Billing Plans
</div>
</a>
</li>
</ul>
http://jsfiddle.net/Samfr/
For example if I hover over Item1 then only Businesses would show up. Item2 only Agencies show up
Thank you
You are using the following to show the items:
$('.hover-name').show();
What this does is find everything within the doucment that has a class of .hover-name and does the show() function on it.
All you need to do is change the show line to be context aware:
$(this).find('.hover-name').show();
Using $(this).find('.hover-name') will find all the elements inside of what you hovered over with a class of .hover-name and show that, instead of showing all of them.
Additionally, if you wanted to hide the shown elements when you move over a new element, you could use the following:
$('.navi > li a.light').hover(function () {
$('.hover-name').hide();
$(this).find('.hover-name').show();
});
$('.hover-name').hide(); will hide everything with the class of .hover-name and then show the items inside the element you are currently over.
This code is going to hide the other elements:
$('.navi > li a.light').hover(function () {
$(this).parent().parent().find('.hover-name').hide();
$(this).find('.hover-name').show();
});
Fiddle
You can use the currentTarget of the event, which will return the element that was hovered, and you can use that to filter to only show the hover-name of that element:
$('.navi > li a.light').hover(function (e) {
$(e.currentTarget).find('.hover-name').show();
});
(http://jsfiddle.net/Samfr/4/)
I'm currently working on something to check a box and change the text next to it to a hyperlink once ticked
<li class="myList">
<input class="myCheckBox" type="checkbox" name="frank" value="someVal"/>
<span style="dispaly:none;">
<a class="navigation">mylink</a>
</span>
<span>myLink</span>
</li>
<li class="myList">
<input class="myCheckBox" type="checkbox" name="frank" value="someVal"/>
<span style="dispaly:none;">
<a class="navigation">mylink</a>
</span>
<spanmyLink></span>
</li> .. and so on
Hopefully from this you can gather i have 2 items, and i want one visible as default until checkbox is ticked and the hyperlink span tag takes over from the default span tag. That changes to style="display:none" other becomes style="display:block"
Now for the jQuery
$(window).load(function(){
$('.myCheckBox').click(function(){
//DO DOMETHING
});
});
But once I make the click event occur how to i gain access to these spans and such in order to change the styles of the various elements etc.
Thanks
You would go from this, which is the current element then use any of the tree traversal functions to move around the DOM, for example:
$(window).load(function(){
$('.myCheckBox').change(function() {
$(this).next("span").toggle(this.checked);
});
});
In the above we're using .toggle(bool) to do the hiding/showing, this allows us to hide/show the <span> depending on whether the checkbox we care about is checked.