Checkbox Toggle To Turn Off Element?
Jul 12, 2011
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.
View 1 Replies
ADVERTISEMENT
Aug 6, 2010
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:
View 4 Replies
View Related
Jan 24, 2005
I am trying to dynamically display a select menu when a checkbox is selected. I have successfully go the select menu to come up when the box is checked but the problem is that you can't uncheck the box to get it to go away. Can you tell me how to do this or even better show me a better way? Code:
View 2 Replies
View Related
Oct 13, 2011
I 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)
View 9 Replies
View Related
Mar 9, 2010
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(){ .....
View 1 Replies
View Related
Mar 9, 2010
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].....
View 2 Replies
View Related
Dec 12, 2010
Looking for a simple method to Toggle textbox yes/no using CheckBox
This example does not work!
What I am trying to do:
View 2 Replies
View Related
Oct 29, 2010
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.
View 6 Replies
View Related
Dec 8, 2010
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>
View 3 Replies
View Related
Aug 3, 2011
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?
View 3 Replies
View Related
Nov 9, 2009
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]...
View 1 Replies
View Related
Jul 29, 2009
How can I pick an id element (here #bridge1,#bridge2) and toggle its child (here a p element) without actually using the id element as parent?
'this > p' apparently does not work.
$('#bridge1,#bridge2').click(function(){
$('this > p').toggle();
return false;
});
View 3 Replies
View Related
Sep 6, 2009
I found this little script and it works fine but the only thing is when the page first loads it displays the "This is foo" text. I would like it to not display the text until it is clicked. So instead of it displaying "This is foo" when the page loads I would like it to not display anything.
Here is the script:
Code:
<body>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo">This is foo</div>
</body>
View 9 Replies
View Related
Apr 10, 2010
I'm looking for a toggle script that is much like this one. [URL]. Only I am in need of 5 links and have so only one div or element is open at a time. So by clicking one the other closes.
View 2 Replies
View Related
Apr 16, 2011
$('.viewBookBtn').click(function() {
$(this).parent().parent().find('.hideable').toggle( // just the toggle function works fine
function(){
$(this).css('visibility', 'visible'); // but when defined it doesn't target the hideable classed element
}, function(){
$(this).css('visibility', 'hidden');
});});
View 4 Replies
View Related
Nov 6, 2010
On my website I have a lot of entries which are similar to blog-entries. Every single entry has about 500 signs and if there are more than there is supposed to be a button "read further"(atm there is no button but later it will be). If the user click this button, the remaining text of the entry is supposed to slide down. My problem is now that I don't know how to slide down just one article. Every article looks like this:
<article class="dark">
<div class="text"><h2>Title</h2> .....
<div class="slide_text"> .....
</div></div>
</article>
But how to slide down only the "slide_text" which belongs to the clicked article. If I use:
$('article').click(function() {
$('.slide_text').slideToggle(200);
});
Every singe "slide_text" of all the entries appears. But this is not, what I want. Is there a way to toggle just the child-slide_text of one entry? Or do I have to give every entry an id to define which entry is supposed to toggle?
View 1 Replies
View Related
Mar 1, 2011
Im trying to delete an element if the checkbox inside it is checked.
if($j(this).find('input[id^="checkbox"]:checked').length == 1)
{
var parts = $j('input[id^="checkbox"]:checked').attr('id').split('-');
$j('input[id^="checkbox"]:checked').each(function(){
$j('dl#row-'+parts[1]).remove();
});
});
however it only removes the last element.
View 6 Replies
View Related
Sep 28, 2006
I'm currently developing an online work brief, where the user has to
enter details regarding the project into a form. I've come to a section
in the form where the user has the option of selecting between two
checkboxes and an input element. I have to ensure that at least one of
the checkboxes have been checked or that the input element is not
empty. I've come up with this function:
function validateMedia(){
var count = 0;
if(document.workBrief.mediaOnline.checked){
count++;
}
if(document.workBrief.mediaPrint.checked){
count++;
}
if(document.workBrief.mediaOther.value != ""){
count++;
}
if(count 0){
return true;
}else{
alert('Please choose at least one media option');
return false;
}}
I'm sure there is a more effiecient way of writing this.
View 2 Replies
View Related
Feb 22, 2011
I'm extremely new to jquery and trying to write a toggle function without using the built-in functionality. From what I've read, this should be a fairly straightforward exerciseHowever, I'm running an issue. My code doesn't seem to do anything. Not clear to me why because nothing is erroring out? Here's what I've got:
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> // we will add our javascript code here
[code]....
View 1 Replies
View Related
Sep 1, 2011
here is my scenario:
I have a link and a div on a webpage. With the link I want to toggle the content (HTML) of the div. On toggle, I want to load the content from a PHP-file and I want it to load on the toggle, not when the webpage originally loaded (to reduce loading time on the webpage itself).
The file that is loaded on toggle doesn't have to be PHP, but it would help a lot.
View 1 Replies
View Related
Jul 8, 2011
I have a web page that has javascript running an html5 page where as the embedded movie plays, the captions play below the movie. What I'd like to do is to have a button that turns the captions' visibility on and off, but I can't seem to get it to work. Probably easier to just show you the web page so you can see the files and view source: [URL] Click the test.html file and hit the play button for the movies to see the captions. I think it might have something to do with the captions being within the media div, but I'm not sure how to address the caption id other than the way I have.
View 3 Replies
View Related
Aug 2, 2005
Setting: chruch multimedia computer and projection system, with 2 display
monitors. The projector is connected to monitor #2.
Is there some way using JavaScript I can display a ".jpg" picture on display
#2? I know how to send the <form> tag to turn on/off the projector, but
don't know how to put up a picture. I don't want any browser artifacts to
show. Just the picture.
View 3 Replies
View Related
May 31, 2009
How do you turn 'this' into a jQuery object so that you can invoke jQuery methods on it?
For example I have this code currently:
But I would like to use jQuery's addClass and removeClass function. So Ive tried things like:
Which doesnt work I assume because this is not yet a jQuery wrapped-object
And:
Which doesnt work because I guess its like calling document.getElementById('this')
View 1 Replies
View Related
Oct 1, 2011
I have this javaascript which validates fields on a form, and if one of the fields are empty or 0 it will turn that field red, but it does it individually and i want it to turn all fields that are in error in red at the same time
[Code]...
Im new to javascript so this could be a simple change for someone with more knowledge then my self. the webpage is built with ASP.Net
View 8 Replies
View Related
Oct 7, 2011
I have scripting that currently disables a C.O.D. option in a dropdown and disables a coupon code input box depending on login pulled from a cookie. I would like to use/modify this script to also disable a "free shipping" option depending on login with a condition of the cart subtotal (if ss_subtotal <= 199...). I have all of the variables but cannot figure out the syntax to implement the modification. Here is the current script that disables the C.O.D. option and coupon box:
<script type="text/javascript">
var LexiConn = {
regCustomer: false,
reg_cookie: /.*ss_reg_.*/,
[Code]....
If the source code is needed i can post a shortened version of it.
View 3 Replies
View Related
Aug 8, 2011
I'm using parseInt to try to turn the innerHTML of a div into a number. Pretty straight-forward and it works for every one except the string 08 and 09. works for 01-07, works for 10 and higher, just not 08 and 09. This is in Chrome and Firefox. In IE it works. Here's some code to illustrate the issue.
var items = ['04', '05', '06', '07', '08', '09', '10', '11'];
for(var i in items){
document.write(parseInt(items[i]) + '<br>');
}
where you should see 8 and 9 it just comes back as 0 (except in IE 9).
View 2 Replies
View Related
