I have an <input type="checkbox"> whose immediate parent is an <a> tag. The <a> is significantly larger than the <input>.
I want the checkbox to toggle on/offwhether the <a> is clicked or the checkbox itself. I also wantto store the value of the checkbox after it changes.
This sounds simple butI'm having trouble with the event bubbling (as in, I don't understand it).
Here is my current code.
HTML:
Im creating a portfolio site for myself that my have gotten a little too ambitious but I'd still like to make this work.
My main site loads a video demo reel using the new <video> tag and to make it look cooler has an "ambilight" television effect around it. For usability and for users that find it annoying or distracting I want a toggle to turn the effect off.
I have my checkbox created as well as all the effects working for it.
Here is a piece of the main code as well as a link to the ambilight.js file
<label name="ambilightToggle">
<input type="checkbox" name="toggle"/>
<div class="toggle-switch">
<div class="handle"></div>
[Code]....
If the click function works I should be able to have it check the checkboxes state and have it persist.
When checkbox is clicked email is necessary and if checkbox is not clicked email is not necessary for submitting a button give me the code:
View 1 Replies View Relatedi have a menu generated by a list with nested lists. i want the parent link to stay highlighted when the mouse hovers over the sub menus. because those sub menus are also generated by jquery (qtip), CSS alone won't do it (triedul.topnav li:hover a {background-color: #F00;}).is there a way to do this using jquery?
View 15 Replies View RelatedDemonstration page: [url]
Adjust the CSS margins of the BODY element with the first slider. The yellow P (paragraph) element resizes to fit its smaller containing block, as I would expect.
Then, adjust the CSS border or padding of the BODY element with the second and third sliders. The P element does not resize, though its origin changes. Instead, it overflows its containing block.
Finally, adjust the margins again. The P element snaps back into its containing block.
As you can see from the source, this is jQuery 1.6.4 and jQueryUI 1.8 pulled from googleapis.com.
Edit: Client is Google Chrome16.0.889.0 dev-m.
I have a single page which uses tabs to segment the content. Alongside the tabs themselves is a button for 'Help'. I'd like this button to open a different DIV depending upon the tab that is currently being used.For example, if I am on a tab for 'Ben', if I click the 'Help' button I want the 'helpBen' DIV to slideToggle.If I am on a tab for 'Paul', when I click the 'Help' button I want it to open the 'helpPaul' div.
Some extra needs:
1. switching to a different tab should close the currently open help div (e.g. helpBen or helpPaul)
2. There should only be one help div (e.g. helpBen or helpPaul) open at any one time.
I partly solved this with the following code but with erratic results and I'd like to know what I'm dong so wrong!Here is the HTML for the help button:
<a class="helpTrigger" href="#">Help</a>
The help DIV's are like this:
<div class="helpBen">help relevant to Ben section</div>
<div class="helpPaul">help relevant to Paul section</div>
The CSS for .help is display: none; by default so none are shown from the outset.
And here is the jQuery
$(".helpTrigger").click(function(){
if (location.hash == '#Ben') {[code].....
In the words of Dr Evil, "throw me a frikkin' bone here..."
I basically have many anchor links where when I click each of them it slidesdown its own div with some text in it. So have I wanted is when I click on one link it will show me the current one and hide the others. This is what I have tried which works great but when I click on a link it opens the div, then click on another one opens the div with one click and when I go back to re-click the previous link I have to double click it in order to work..
This is my js code:
$(".anchorlink").toggle(
function() {
var cont_val = $(this).attr("id");
$("div#unique_anchor_text", this).show();
$("div#unique_anchor_text").hide();
$('.unique_anchor_text'+cont_val).slideDown("fast");
},
function() {
var cont_val = $(this).attr("id");
$('.unique_anchor_text'+cont_val).hide();
});
HTML looks like:
<a class='anchorlink' id='$item'>Comment</a>
<div id='unique_anchor_text' class='unique_anchor_text$item'>some text</div>
If it is possible, how to reflect popup checkbox changes on same checkbox in parent window. Main windows contains a list of thumbnails, each one with a checkbox. Clicking on a thumb, a popup window is opened containing a bigger photo beside a checkbox. If the user checks/uncheks it I want the thumbnail checkbox in parent window to be changed in the same way (and onclick tasks to be performed). To achieve this I am using cookies and onClick -> parent.reload.
View 1 Replies View RelatedI made a website in which I -for the first time- included some jquery code. I am totally new at this. I managed to have a menu, whose elements can be clicked, which triggers the apparition of a different "bubbles" with text inside. So far so good. But I would like to make a bubble disappear when I click on another element than the one that triggered its apparition. Explanation :
My menu is for example like: menu element 1 | menu element 2 It should do this
>> click on menu element 1 = bubble1 (it works) >> click on menu element 1 = bubble 1 disappears (it works) OR >> click on menu element 2 = bubble 1 disappears, bubble2 appears (doesn't work! there I have 2 bubbles at the same time)
I just started with Jquery:
<script type="text/javascript">
$(document).ready(function() {
$('#desperation input[type=image]').attr('disabled', true).fadeTo
("fast", 0.10);
$('#1').attr('disabled', false).fadeTo("fast", 0.70);
});
$('#1').toggle(
function () {
$('#1').click(function() {
$('#1').fadeTo("fast", 1.00).attr('checked', true);
$('#2').attr('disabled', false);
});},
function () {
$('#1').click(function() {
$('#1').fadeTo("fast", 0.70).attr('checked', false);
$('#2').attr('disabled', true);
});});
</script>
<div id="skill">
<form action="javascript:void(null);" method="post"
enctype="application/x-www-form-urlencoded" id="skillplanner"
name="skillplanner" >
<fieldset id="desperation"><legend>Freetrader Skills: Desperation</
legend>
<input type="image" src="files/icons/underdog.png" id="1"></input>
<input type="image" src="files/icons/dump_guns.png" id="2"></input>
<input type="image" src="files/icons/desperation_fire.png" id="3"></input>
<input type="image" src="files/icons/rum_ration.png" id="4"></input>
<input type="image" src="files/icons/hasty_fire.png" id="5"></input>
</fieldset></form></div>
The problem is with the toggle function. On click it should "check" clicked one and activate next one. Function doesnt work and I dont have a clue....
I've successfully set up a table with toggling rows and alternate colour, and everything is working decently. Now, I've tried to do a further step by trying to style the parent row who do have child differently from those who don't, so that the user immediatly knows where clicking will bring result and where not. How can I do it? I've tried with the : parent selector but nothing, still keep looking all the same.
Here's my starting code:
<script type="text/javascript" src="../catalogo/js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$('.parent')
.css("cursor","pointer")
.attr("title","Click to see")
.click(function(){
$(this).siblings('.child-'+this.id).toggle();
});
$('tr[@class^=child-]').hide();
});
</script>
<script type="text/javascript" src="../catalogo/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{ $(".parent:even").css("background-color", "#FFFFFF");
$(".parent:odd").css("background-color", "#F2F1ED");
$(".child:even").css("background-color", "#FFFFFF");
$(".child:odd").css("background-color", "#FAFAFA");
$("a").click(function(event){
$('.parent').unbind('click');
});
});
</script>
One more detail: I've got a dynamically generated table (from MySQL db) with more than 1000 rows.
I have some jQuery code to add and remove a class to toggle an image. It works for one but now I want it to work if I add other checkboxes. Currently all the checkboxes change the 1st div. I would like to make it toggle it's respective div.
<html>
<head>
<title>jquery to Show/Hide a Div</title>
<script type="text/javascript" src="[URL]"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").removeAttr("checked");
$("input").click(function(){ .....
I have some jQuery code to add and remove a class to toggle an image. It works for one but now I want it to work if I add other checkboxes. Currently all the checkboxes change the 1st div. I would like to make it toggle it's respective div.
<html>
<head>
<title>jquery to Show/Hide a Div</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
[Code].....
Get ID of a clicked parent ID?
[Code]...
i can successfully bind click events to dynamically added checkboxes, butstuck on how to actually get the checkbox's id attribute out.
<
script
language
=
[Code]....
Not really sure how the best way to start explaining this, but I have a small script set up that activates a second section to an accordion to display information. The idea is that a table cell will be clicked and then the second according will activate displaying information relating to the cell that was clicked in accordion part 1.
I have managed to get it to update coding in the var's by hand, now I want to be able to get certain bits of information from a nested div that is hidden in the table cell (I know, very messy - but it will all be made a little less messy in the future when I have got the process correct).
[Code]...
This is using jquery by the way. I have a list of ethnicity on a form for a person to enter that are checkboxes. One option is 'Other, specify'. When 'other specify' is checked, I would like a text box to pop up and disable the other boxes (if you pick other, you can't pick from the previous ethnicities). If 'other, specify' is unchecked, I would like for the text box to disappear and re-enable the checkboxes. I had the appearing box working just using JS. I can't seem to get the syntax right to use the toggle feature of jquery to make the box disappear when unclicked.
JQUERY
<script type="text/javascript">
$(function(){
$('#other').click(function(){
$('#otherrace').toggle(
function(event) {
$(event.target).css('visible');
},
function(event) {
$(event.target).css('hidden');
});});
</script>
HTML
<input type="checkbox" name="race" value="asian" />Asian<br />
<input type="checkbox" name="race" value="hawaii" />Native Hawaiian or other Pacific Islander<br />
<input type="checkbox" name="race" value="noanswer" />Choose not to answer<br />
<input type="checkbox" name="race" id="other"value="other" />Other, specify<br />
<div style="visibility:hidden" id="race"><input type="text" name="fname" size="25" maxlength="25" id="otherrace" /></div>
I have a menu as follows
<ul id="nav">
<li> <a href="#">Golf</a>
<ul class="golf">
<li class="engine"><a href="#">Engine</a></li>
<li class="brakes"><a href="#">Brakes</a></li>
<li class="transmission"><a href="#">Transmission</a></li>
<li class="interior"><a href="#">Interior</a></li>
<li class="running_gear"><a href="#">Running Gear</a></li>
</ul></li>
<li><a href="#">Polo</a>
<ul class="polo">
<li class="engine"><a href="#">Engine</a></li>
<li class="brakes"><a href="#">Brakes</a></li>
<li class="transmission"><a href="#">Transmission</a></li>
<li class="interior"><a href="#">Interior</a></li>
<li class="running_gear"><a href="#">Running Gear</a></li>
</ul></li>
<li><a href="#">Passat</a>
<ul class="passat">
<li class="engine"><a href="#">Engine</a></li>
<li class="brakes"><a href="#">Brakes</a></li>
<li class="transmission"><a href="#">Transmission</a></li>
<li class="interior"><a href="#">Interior</a></li>
<li class="running_gear"><a href="#">Running Gear</a></li>
</ul></li>
<li><a href="#">Jetta</a>
<ul class="jetta">
<li class="engine"><a href="#">Engine</a></li>
<li class="brakes"><a href="#">Brakes</a></li>
<li class="transmission"><a href="#">Transmission</a></li>
<li class="interior"><a href="#">Interior</a></li>
<li class="running_gear"><a href="#">Running Gear</a></li>
</ul></li></ul>
I want to post the class of the parent ul and the clicked li to php when they are clicked say as "model" and "part". I'm sure its simple but i cant seem to quite grasp how to do it.
I have a list of divs that each look like this (simplified):
<div id="property1" class="property cms-repeat"> <h4>Property 1 - <span class="location cms-editable">location3</span></h4> <p><span class="download">Request a copy of the full property details <a href="#" title="Request property details" class="request"
[code]....
Have a dialog box (containing two divs):
(1) A <div> tag which contains an individual checkbox labeled as Select All.
(2) A <div> containing a reference to a bunch of check boxes (containing e-mail addresses).
JavaScript code:
How to remove any possible check boxes that are checked and remove them from text field
What happens is that when I click on the Select All check box, it populates my To: text field with all the e-mail addresses.
However, the checkboxes belonging inside emailCheckListId_ul are checked.
How can I set it up so that if I click on Select All, all the checkboxes are populated and when I uncheck on Select All, all the checks are removed from the check boxes and the e-mail addresses are removed from the To: text field?
I want the <a/> in an <li/> to be triggered when the click happens anywhere within the </li>. So given the html...
<ul>
<li><a href="javascript:alert('clicked!')">test</a> <span>some other stuff</span></li>
<li><a href="javascript:alert('clicked!')">test</a> <span>some other
[Code]....
I have several divs that each have a certain link. How can I make sure that when a link is clicked that it will only change elements that are within it's parent div and not the others?
View 1 Replies View RelatedI am trying to create a specific menu using jQuery where i want to toggle a clicked menu item. I used toggleClass to accomplish this. All fine and well, but what i want is that once i click a menu item, the previously clicked item should have the active state/class toggled off.. The menu is variable. (I tried and tried and searched all over the internet, but i cannot find it... spent 5 hours trying to combine various selectors and if/else statements, but it did'nt work.)
View 1 Replies View RelatedLooking for a simple method to Toggle textbox yes/no using CheckBox
This example does not work!
What I am trying to do:
I am trying to make a multiple checkbox filter. It works by selecting/unselecting checkboxes the divs with classes revered to the checkboxes will activate deactivate.
This is the javascript I founded on the net:
Code:
<script type="text/javascript">
$(document).ready(function(){
$("#events li."+$("input.type_check").attr('id')).addClass('type_hidden');
$("#events li."+$("input.type_check").attr('id')).slideUp();
$("#events li."+$("input.start_check").attr('id')).addClass('type_hidden');
$("#events li."+$("input.start_check").attr('id')).slideUp();
$("#events li."+$("input.place_check").attr('id')).addClass('type_hidden');
$("#events li."+$("input.place_check").attr('id')).slideUp(); .....
To see it working online look here: [URl]
There two problems. I want to replace the sliding effect. I want to make a table with the divs in it. And when a div is deactivated the text or image shows grey and the link is disabled and when activated the text/image shows black/color and the link is enabled. So when you uncheck/check the boxes the divs will toggle between the two styles clickable and unclickable. I also want to make a second checkbox/radio row with different css styles to choose from. When a style is selected and you click on a link in div it will send you to the page with the selected style.
i have a search icon at the top of my page, when i click this it toggles show/hide on the search form. now when the user loses focus of the search form (.blur), i want it to activate the hide part of the toggle.
when the search icon is clicked, it gives focus to the search form, so the moment the icon is clicked, the search form gains focus, then when someone clicks somewhere else on the page and the form loses focus, i want the search form to hide.
the problem is, if i just have the search form hide on .blur, then when you click the search icon and then click somewhere else and the search form loses focus, and then you click the icon to show the search form again, it will hide the search form(to the user, it looks like it didn't do anything, since the search form is already hidden). so after 2 clicks on the icon, then, it finally shows the search form again.
[Code]...