JQuery :: Toggle Different Elements Depending Upon The Url When It's Clicked ?
Mar 25, 2011
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..."
View 6 Replies
ADVERTISEMENT
Sep 7, 2010
I've been going round in circles on this big time, getting very annoyed, and can't seem to find an answer anywhere. This little bit of jQuery collapses our menu, so that when we roll over, the sub menus float out:
<script type="text/javascript">
function initMenu() {
$('#SideCategoryList ul ul').hide();
$('#SideCategoryList li a').hover(
function() {
$(this).next().slideToggle('slow');
}
);
[Code]....
View 8 Replies
View Related
Jul 28, 2011
ho do itoggle images of a button depending on a check box changep.s. toggle images of a button these are images now depending on check box clicked the image button should show the enabled image.
View 1 Replies
View Related
Feb 25, 2011
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>
View 3 Replies
View Related
Jul 18, 2011
I am building a web application using PHP. It lists each salesperson and below it, the clients assigned to them. There are only about 5 or 6 salespeople. There could be any number of clients for a salesperson. Each salesperson is given their own div and client information (name, email, phone) is grouped with an unordered list:
Code:
<div id="salesperson-1">
<h1>Salesperson 1</h1>
<ul>
<li>Steve Smith</li>
<li>steve@company-a.com</li>
<li>555-5555</li>
<li><a href="#">Delete Client</a></li>
</ul>
<a href="#">Delete Salesperson</a>
</div>
I would like to be able to delete (actually hide) either a salesperson or client depending on which link the user clicked. I have been using JQuery throughout my site so far and I can accomplish the task for the salespeople by creating individual events for 6 salespeople. If there are only 5 people, the 6th event will never be triggered. If there are 6, everyone is covered. The tricky part are the clients since I can't guarantee a specific number of them. I would like to fit best practices as much as possible and reduce the complexity of my code if I can. Keeping that in mind...Is there a better way to handle the salespeople rather than rewriting the function 6 times? Can I pass a variable to a JQuery function using the onClick binder on the <a> tag --> <a href="#" onClick=deleteClient(10)> and use the variable to determine which client to delete? Would using a function in plain javascript and ignoring JQuery for this entirely be better?
View 2 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
Feb 15, 2007
I have an online application used for grading students. On one of the
pages, I have a table with two rows and each row has 16 cells. The
upper row contains the letter grade (A, A-, B+, B, etc) and the lower
row has a 16 radio buttons for selecting the appropriate grade. This
all writes to a SQL server back-end and has been working fine for
several semesters. Some faculty members have complained that it is
hard to read and see which have been graded so far and which still
need to be graded. It has been suggested that we change the
background color of the selected letter grade to a different color. I
have had some sucess with this, but haven't figured out how to
"toggle" the color on and off based on the state of the radio button.
I can get it to change color when selected, but the color persists if
another radio button is selected. Does anyone have some sample code
for this?
View 2 Replies
View Related
Oct 29, 2009
how to set a variable depending on the link that is clicked than pass it to php.It's for a rating plugin - The links will be numbers 1 - 5 and need to pass the integer to php when clicked.. in background.I am assuming I would use "XMLHttpRequest" so I can reload - send variable, and display in the background.Then in php have something like $vote = GET_(vote).
View 1 Replies
View Related
May 20, 2009
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....
View 1 Replies
View Related
Aug 4, 2010
how one can show and hide a div element using a pulldown menu. i need the different selections in the pulldown menu to show hidden DIV elements on the page. this will be used in a system where i only have access to the template, so the only approach i can use is jquery. how to change it for the specific selectors i need.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
[Code].....
View 2 Replies
View Related
Mar 30, 2004
I want to have several text links (not buttons) on a page and when someone clicks a link text appears explaining the link. If they click on a different link the text is replaced with the new text.
View 4 Replies
View Related
Feb 25, 2011
So let's say I have a list of 11 elements and I want to wrap groups of them by 2.
[Code]...
View 1 Replies
View Related
Sep 16, 2009
I've created a form with combobox with different values (this is for my website). What I want is when the user clicks 'submit' that it goes to a different page on the website depending on the value the person has selected in the combobox. Values are numerical, for example 1000, 2000, 5000 etc. I've been trying this for a couple of days now without success!
View 10 Replies
View Related
Nov 4, 2009
Im trying to build on a script that I found on the internet and modified to my needs.urrently there are three images on the left, which, when clicked, change the image on the right depending on which of the left images was clicked.Simply, when you click the whisky link on the left you see a bottle of wiskey on the right. Here is my script:
Code:
<SCRIPT TYPE="text/javascript">
function switchImg(i){
[code]....
View 3 Replies
View Related
Jul 28, 2011
I want to have <div> cells that the background-color css style dynamically change between 4 colors depending on how many times they are clicked. The options are none, yellow, red and green then repeat. So when the page loads, they are all at none, and if you click once it goes to green, twice to yellow, three times to red, then back to none.
View 5 Replies
View Related
May 22, 2009
I have a multi select in a form and underneath this corresponding check boxes which are initally hidden.
What I wish to do is when the user selects or deselects an item in the multi select the corresponding check box is toggled to either show or hide.
I was imagining it would be something like this, I'm not sure what to put in place of the question marks. I've already tried click and select
$(document).ready(function() {
//Hide the checkboxes
$('#checkBox1').hide();
//When the user selects an option toggle the visibility of the checkbox
[Code].....
View 2 Replies
View Related
Apr 28, 2009
[URL]
Click on any of them, and they open up just fine, however, after this point they dont close, and you also can't open any other one, it just... stays stuck there.
I had this working just fine, and in the process of working with wordpress and templating, obviously I changed something to mess it up.
View 5 Replies
View Related
Nov 3, 2011
I eventually want to swap two elements. I've already determined the two buttons from each div. Now I want to swap the elements inside those two divs.
<script type="text/javascript">
var newcolorvalue = 0;
var starterPlayer = 0;
var benchPlayer = 0;
[Code]....
View 13 Replies
View Related
Jan 12, 2011
I have a jquery menu from which i want to post certain information when a particular element is clicked to my php script which searches a db based on the variables input and presents the information back on the page.
So jquery drop down menu has 4 sections all with drop downs. I want to return results based on the section and then the drop down clicked
So clearly i can get this working fine using html and a form but i just want to use the information in the <li> elements instead..
Can i in jquery do this: upon clicking said element post the class attribute and txt as two things to my php scripts?
View 2 Replies
View Related
Sep 30, 2010
I 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 Related
Feb 18, 2009
I am looking for a way to add an id attribute to a div element I append to my document so that i can find the id later and delete it. So far, no luck with jquery .each loop trying to assign unique value and add incrementing value to each of them. In my code, they all seem to have the same id and when I click again it just appends the same value again to all of them.
//first I add a title to the list using append.
function addTitle () {
$('.myList-box').append('<div class="mylistitem"><div class="mylistitem-image"><img width="30" height="40" src="[URL]small.aspx?TitleID=' + titleid + '"/></div><div class="mylistitem-title">' + title + '</div><div class="mylistitem-options"><a href="javascript:removetitle();">Delete From List</a></div>');
}
// then I need a click function, that indexes all the current .mylistitem(s) and allows me to find the id I am clicking on so I can delete it!
function removetitle() {
$(".mylistitem").each(function(i) {
this.id = this.id + "_" + i;
});
var item = $(".mylistitem").attr("id");
alert(item);
}
View 6 Replies
View Related
May 27, 2010
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 Related
Aug 25, 2010
I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page: [URL] And here is the code in question:
[Code]...
I have two questions...
Question 1 How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky. I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this?
Question 2 The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document?
View 3 Replies
View Related
May 14, 2009
I am working on a project that shows archived data as well as current data on the same page. When the page builds, current data is shown, archived data is hidden (by using a div with id="archive"). I found comments here that getElementsByName was not a good cross browser way to handle this (and I'm not sure how to use that anyway). Can someone suggest the correct way to handle this?
There should be a link that, when clicked, will grab each element on the page with id="archive" and toggle the display property (none or block).
Here is the current code:
function archives(toggle) {
if (typeof(toggle) != "undefined") {
if (document.getElementById(toggle).style.display == 'none') {
document.getElementById(toggle).style.display = 'block';
[Code].....
This works just fine, but only for the first element that it finds. I need many elements with the same name to be effected.
View 3 Replies
View Related
Feb 20, 2009
I am creating a form to enable advertisers to create listings on an accommodation directory site.One of the form fields is a drop down with the following optionshotelguestHouseselfCateringinnholidayParkcampingThe top part of my form is the same for all these accommodation types. However I need to include a section specific to the accommodation type. This section will include groups of radio buttons and checkboxes allowing the advertiser to choose which facilities/amenities are available.For exampleA hotel may have 24 room service campsite may have a shop on siteI was planning to have a separate div for each of the accommodation specific sections and toggling the display based on the choice of the accommodation type from a drop down list.I have just had a horrible thought that it may be possible if javascript was not enabled that either none of the sections would be displayed or even worse all of them at once.
View 5 Replies
View Related
Mar 1, 2011
I want to enable the ability to always delete <li> elements when they're clicked. I can't add id's or onclick functions to each <li> because each one is made using document.createElement("li"); So my question is, how can I make a script that easily allows users to delete a <li> element just by clicking on it.
View 6 Replies
View Related
