JQuery :: Toggle State Of An Element When Clicking On Another Element?
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
ADVERTISEMENT
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, 2011
I`m trying to make selecting an select list option (as it become when we click on it)by clicking on a special pseudo element.I`m trying to do it in this way:
<script>
$(document).ready(function(){
$(".psevdo-checkbox").each(function(){
$(this).click(function(){
[Code].....
View 6 Replies
View Related
Mar 30, 2010
I have some existing code that I need to alter so that when the user clicks outside the element, the element disappears. I have looked at other show/hide element code, but I'm not sure how to integrate it with the script below.
There's a date form, with an calendar image icon. When you click on the calendar icon, a div with a calendar opens. Then you can click on the dates, that when clicked will fill out a textfield with the date.
The form code:
Code:
<div class="TSearchBox">
<div class="TSearchBoxDate">
<span class="normal TLabel">Frn: </span> <input name="TLfd" type="text" value="2010-03-30" />
<img src="images/datum.gif" class="TCalendarImage" alt=""
[Code]...
View 1 Replies
View Related
Oct 4, 2010
i 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 Related
Sep 25, 2010
i try to make thing like this: My list is like below:
<
ul id="cssdropdown">
<li class="headlink">
Search Engines
<ul>
<li>Home</li>
[Code]...
</ul> what i want is, when i click the <li>(home,downloads..),i will take its value and i write the value instead of "Search engine". How can i make this?
View 1 Replies
View Related
May 22, 2010
I have this simple code and I am trying to change the text in one element by clicking on the other.
Relevent code shown:
<script type="text/javascript" language=javascript>
$(
'#A').click
(
[Code].....
View 2 Replies
View Related
Apr 14, 2010
I'm trying to change content depending on the <a> link the user clicks. My code is far is as follows but isn't working?
HTML
<div id="content">
<div id="cx300">
<div class="auriculares_spec_mx560">
<h2>cx300</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus varius magna.</p>
</div>
<img class="img_cx300" src="img/cx300.jpg" alt="Sennheiser Headphones CX300"/> .....
View 3 Replies
View Related
Jul 21, 2011
To say I'm new to JavaScript is a bit of an understatement so bear with me. I have a site set up with a variety of layers of toggles. When you enter the site all of the items are collapsed and you click the headings to expand. Each of the toggle-able items have ids. It works great for users who start at the homepage.
However, when I send people to any of the inner topics, all they see is the initial collapsed state of the site. I want to be able to provide a URL that will set the toggle to open, and show all of the content for that section on entry.
Here is my code and js, can anyone point me in the right direction?
[Code]....
View 2 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
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
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
Jul 8, 2011
Code...
I want the second element to show/hide when the first element is clicked on, what would the easiest way to do this with javascript
View 10 Replies
View Related
Jun 3, 2010
On a page I display a link of search results which are hyperlinks, which all have the same URL get paramaters with different values (i.e. companyreport.aspx?....). I want to then click on a search result hyperlink and then generate a Div popup (this is called through a javascript call that is attached to each search result hyperlink's onClick property.
For the hyperlink that is clicked, I need to take its 'href' value and use it (reason for us is in a bit).
On the popped up Div element is a dropdown box and two buttons (accept / decline). Once the accept button is pressed, I want to then go to the page the selected hyperlink was pointing to by using the 'href' value I obtain from the clicked search hyperlink and to also append to this hyperlink the a new GET parameter and the value of the dropdown box.
I have got this to work currently but it seems quite mess, so was wondering if there is a better solution to this.
For the search results hyperlinks I have...
Code:
PromptRequestReason(this.href); return false;
this '' javascript method is....
Code:
function PromptRequestReason(hrefLocation)
{
lnkDERequestReason.href = hrefLocation;
popup('popUpDivReason');
}
then on the DIV popup I have the following link....
Code:
<a id="lnkDERequestReason" onclick="this.href = this.href + '&reason=' + document.getElementById('drpPortfolios').value">Select</a>
now this all works, but I really seem like I am taking the long way around when there could be something simple.
View 1 Replies
View Related
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
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
Oct 13, 2009
I'm having some problems understanding the append() function. What I'd like to do is select an element using it's ID and add a row to the table with a HTML form element. The table is dynamically generated using a Django template ( form.as_table() ) so I'm not able to alter the original HTML markup too much.
If I had a table like this...
View 3 Replies
View Related
Jul 26, 2010
I have created a form with malsup's Form Plugin wherein it submits on change of the inputs. I have set up my jQuery script to index drop down menus and visible inputs, and uses that index to determine whether keydown of tab should move focus to the next element or the first element, and likewise with shift+tab keydown. However, instead of moving focus to the first element from the last element on tab keydown like I would like it to, it moves focus to the second element. How can I change it to cycle focus to the actual first and last elements? Here is a live link to my form: [URL]. Here is my script:
$(document).ready(function() {
var options = {
target: '#c_main',
success: setFocus
[Code]....
View 1 Replies
View Related
May 17, 2010
i have got about 50 definition lists on one html-page witch all look linke this:
<dl>
<dt class="title">aaa</dt>
<dd class="subtitle">bbb</dd>
<dd class="city">ccc</dd>
<dd class="email">ddd</dd>
<dd class="website">eee</dd>
<dd class="description">fff</dd>
</dl>
if the dt-element in one of the definition lists has a specific css-property (e.g. length > 100px) then the dd-element with the css-class "subtitle" in the same definition list should be removed.
View 2 Replies
View Related
Apr 28, 2011
I'm doing a very simple expand/collapse function using 'slideToggle'. The button that triggers this event simply says 'Expand/collapse'. I want this text to change depending on whether an element is visible or hidden.
[Code]...
View 4 Replies
View Related
Oct 7, 2010
I have a page with the code below (you can see the page herehttp://thegamingmall.com/realsite/testing.html). I'm using the .toggle() function to show/hide a div tag. However you ALWAYS need to click it twice! It's driving me and the users insane.
<!DOCTYPE html>
<html>
<head>
</head>
[code].....
View 2 Replies
View Related
Sep 24, 2010
If I generate a new element via AJAX, jQuery don't listen to events at this element. I read that live() how to use this function together with post().
That's what I have:
$(document).ready(function() {
$.post('products.php', $('#products_form').serialize(), function(returnData) {
$('.target').html(returnData);
});
[Code].....
View 5 Replies
View Related
Nov 18, 2011
Is this possible with JQuery? I have the following code which I think Should do this, but it's not working :/These are two different functions which I've been testing, and the html element is supposed to create a dropdown list via some PHP which will have the option "Other" within it. Unfortunately, I have no idea exactly how to turn "Other" into a text box when the user clicks, and I've been spending a lot of time on this already.
[Code]...
View 1 Replies
View Related
Nov 5, 2010
fadeout an element then insert someting in that same element then fading it in again all this without using setTimeouts.. i simply dont want to append, before the fadeout animation is done, i cant seem to achieve this unless i use setTimeout. im doing this atm but its often out of sync :/
[Code]...
View 4 Replies
View Related
