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
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:
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)
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>
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.
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.
(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 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.
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; });
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>
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.
$('.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'); });});
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:
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?
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.
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
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.
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.
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.
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
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.
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).
