JQuery :: One Function For Multiple Id's?
Oct 28, 2011I am currently creating some buttons dyanmically and the id of each button starts with "remove_" + numberIE.
remove_1
remove_2
remove_3
[code].....
I am currently creating some buttons dyanmically and the id of each button starts with "remove_" + numberIE.
remove_1
remove_2
remove_3
[code].....
I have a simple navigation menu. On hover, the block element changes background color. I'm also fading in/out a div layer. I'm also using the jQuery Color Animations plugin. Very simple to accomplish and I had no trouble doing so.However, I don't want to have to use a whole new function for each individual element, so I wrote the following:
$("div[id^=div]").css('display','none');
$("a[id^=a-nav]").hover(function() {
var tabSelected = $(this).attr("id");
[code]....
is it any shortcut for these lines of code:
$("#div1").fadeToggle("slow", "linear");
$("#div2").fadeToggle("slow", "linear");
$("#div3").fadeToggle("slow", "linear");
i mean assigning a function for multiple objects, i testes code below, but it didn't worked out:
$("#div1").$("#div2").$("#div3").fadeToggle("slow", "linear");
I'm trying to in make in a single function, multiple calls to the same file changing one parameter the problem is thatit is taking it like if I wasn't changing the parameter and is sending only the last value all the times.Here is my code:
$(function(){
$('#btn_search').click(function(){
// what to search for
[code]....
I'm trying to use the function once which is .load() and fetch my content from there,then after that I'd like to seperate the class's or div's I'll be using such as <div d="test1">This content will show in the external website</div>But I'm having trouble doing that, I've used multiple lines just to load the same page and take small bits of content out and it doesn't work well together as some load's results will be different compared to the others.Heres my code:
$('#". $Server['ServiceName'] ."').fadeOut('slow', function(){ $('#". $Server['ServiceName'] ."').load('./includes/serversinfo.php #servers #". $Server['ServiceName'] ."', function(){ $('#". $Server['ServiceName'] ."').fadeIn('slow'); }); });
[code]....
I'm trying to get something to work that sounds simple and it worked great until I had a second item to apply it to. This works fine, with one div. When you hover over the link with the class 1slide, it loads the div with the class panel1. The problem is I can't get it to work if I use a second function for .2slide to load the div .panel2.
<script type="text/javascript">
jQuery().ready(function(){
jQuery(".1slide").hover(function(){
jQuery(".panel1").slideToggle("slow");
});});
</script>
I've tried multiple variations, including 2 <script> tags with the classes swapped, and combining as shown below
<script type="text/javascript">
jQuery().ready(function(){
jQuery(".1slide").hover(function(){
jQuery(".panel1").slideToggle("slow");
});
jQuery(".2slide").hover(function(){
jQuery(".panel2").slideToggle("slow");
});
});
</script>
I think I'm combining these wrong but I've tried multiple different ways. They're classes now but were ID's, and that didn't work either. Figures, I was hesitant about posting hours ago because I knew it might be something simple.. I almost solved everything with this:
<script type="text/javascript">
jQuery().ready(function(){
jQuery(".1slide").hover(function(){
jQuery(".panel1").slideToggle("slow");
jQuery(".2slide").hover(function(){
jQuery(".panel2").slideToggle("slow");
jQuery(".3slide").hover(function(){
jQuery(".panel3").slideToggle("slow");
})})})})
</script>
All 4 div's .panel1, .panel2, .panel3 are set to display:none. The only issue now is panel3 is twitchy. I have a feeling it's yet again just a closing bracket issue. Am I writing this correctly? semi-colons anywhere, mess the entire thing up. I am using FireFox 3.5 for reference.
I want that whenever an HTML or its inner HTML is clicked then a function is invoked. For this,I am using Multiple selector with Child selector and the method is invoked twice. Here is the code that I am using.
[Code]...
How to replicate scenario?1. Click on "Text 1" and you will get the popup only once.2. Now click on "Text 2" or "SPAN text" and you will get alert popup twice. I want that if user clicks anything inside <div id="myDIV" style="background-color:Red;width:200px;">, event/alert to be invoked only once.</div></form>
I have written the following code (quite meaningless. Just to check why setTimeout is not working in a similar real-life code) to enable the user to input a given time interval (hh:mm:ss) when a p is clicked, and then alerting the user with the time entered in the seconds portion one second after the div is clicked. But it is not working. I think the setTimeout is the culprit, the way I am passing parameters to the function inside it, but don't know where exactly am I erring.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
[Code]....
$(document).ready(function(){
Here is the application for this javascript.
When the.slide-button-one(top 'Profile', 'Clients' or 'Contact' links) is clicked,#main-content-portfolio (white-background div) slides down and the display is set to none. This reveals#main-content-info (grey-background div).
Currently however, the display value of #main-content-portfolio is set to none BEFORE the slide. How can I switch this order of events?
I am fairly new with jQuery and am trying to figure something out. I am trying to update multiple SPAN elements on my page using the $.get function. So far this is the code I have...
I can loop through and verify it is catching all of them
This outputs the data I am expecting from the GET
How can I set the data returned to the innerHTML of the current span element in the loop?
I have tried $(this).innerHTML and this.innerHTML, but neither worked
I can't seem to get the syntax correct to get this to work. I'm sure it is something simple.I want to call multiple functions inside my document.ready function.The first function gets called but not the second.
$(document).ready(
function GetSuspectCollection() {
$.ajax({[code].....
I have a grid that uses RowAltRow as the classes for the rows...is there a way to have the hover applied to both instead of having to define it twice (or more)?
[Code]...
I have some modules on my web site that have HTML similiar to this, where the tab is a dynamic generated number:
[Code]...
Basically, anytime someone presses the close class from one of tabs, using AJAX it eliminates it from their page. However, since their are multiple close classes on the page, its calling the AJAX a number of times if they have multiple tabs.
If this search function is included in an include file with other functions it will run more than once if you click another function first, then come back to it to do another search.
Code:
$(document).ready(function() {
$("a#searchowner").click(function() {
var searchval=$("#p1").val();
alert(searchval); //test alert box
$.post("findowner.php", {p1 : searchval}, function(data){
if (data.length>0){
$("#ownerIDdiv2").html(data);
}});
});
}); //end
For example if I click the next page function, then decide to click for a new search it runs more than once:
Next page function:
Code:
$(document).ready(function() {
$('a#nextpage').click(function() {
var page = $(this).attr('page');
var searchval = $(this).attr('schval');
var maxpage = $(this).attr('maxpage');
$.post("findowner.php", {
p1 : searchval,
page : page
}, function(data){
if (data.length>0){
$("#ownerIDdiv2").html(data);
} });
});
}); //end
However, if I put the first search function in a separate include file all works perfect. Why it runs multiple times if it is grouped among other functions?
I'm not exactly sure why this doesn't work. I'm basically just trying a
simple approach at a slide down div.
function slide_div {
setTimeout("document.getElementById('mydiv').style.length=ཆp x'",1000);
setTimeout("document.getElementById('mydiv').style.length=ཐp x'",1000);
setTimeout("document.getElementById('mydiv').style.length=ཚp x'",1000);
setTimeout("document.getElementById('mydiv').style.length=ཤp x'",1000);
setTimeout("document.getElementById('mydiv').style.length=p x'",1000);
setTimeout("document.getElementById('mydiv').style.length=ླྀp x'",1000);
}
It seems like it just runs the last setTimeout line and pops out all at
once. I've even tried adding a=, b=, c=,. etc at the begining of each
line to no avail.
I would like to do multiple functions on one onclick, then go to a new page.
Here is my attempt using one function to do two things. Suggestions please
<SCRIPT language="JavaScript">
function submitform()
{
document.form.submit();
default_b.php?action=add_item&id=<?php echo $row["id"]; ?>&qty=1">
}
</SCRIPT>
</head>
<body>
<form name="form" action="">
<input type='checkbox' name='chk'>
</form>
<A href="#" onClick=" submitform();return false;">Add Item</A>
I made a sort of typewriter script that shows every next character of a text in a particular DIV, each milisecond. (testing in IE, not tested in other browsers yet)
Now, after the function has run, I cannot run it again. It stops all completely.
I have put some variable in it to see it's running or not. But that doesn't help it anyway.
Has this something to do with event bubbling or something else?
Code JavaScript:
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test</title>
[Code].....
I have this function and would like to use it with multiple form.
function validate_form (anyform){
valid = true;
if ( document.anyform.color.selectedIndex == 0 ){
[code].....
I want a specific function to be available to multiple objects.In the script, if it says 'document.Form.Input.value' with 'Form' being the form name and 'Input' being a form element, how can I change this so that I can have two different forms with elements and the function will be able to work for both?
View 4 Replies View RelatedI have an html page which currently has two different text input (I'd like to add more if I can get the two to work!) I then want to output the calculated taxes (eventually I want to add on calculated profit as well) then output the taxes to my page.
My question is, if I input 2 or more dollar amounts, how can I have just one function that calls each of the input ids so I can run them all through one function instead of a different function for each name id? Right now I have a jillion lines of code, and it seems like I should be able to enter each one of these through one function.
Also, is it possible to convert my text to parseFloat within that same one function? Or do I need a separate function that converts each name id to parseFloat?
this is the segment of the html page:
<script language="JavaScript" type="text/javascript" src="calculate.js">
</script>
</head>
<body>
[Code]....
This is one portion of my function that calculates taxes. You can see I have "amount1" called in the function, this is where I am confused as to how I can change this code to call "amount1" then "amount2", then more and more as I want to be able to add on as many amount fields as I would like.
function calculate(getvalueFromField){
if (amount1 > 0 && amount1 <= 5000) {
taxincome = amount1 * .10;
return taxincome;
}
looking for a ways to consolidate multiple instances of a function... Here's the current one:
instance:
<div class="hex" onmouseover="onV('N03')">
<p id="Labbbab6">_ _</p>
<p id="Labbbab5">___</p>
[code]....
It could be done by changing the visibility of class"hN" from 'hidden' to 'visible'; and maybe it could be done by making class "hex" last-child visible.Whichever way, the function needs to be attached to the class.
I have a search function which works when I only want to have only one search per page, but as it involves a string call I'm not sure how to modify it to multiple search requests on a page.
The below works fine for one call:
<script type="text/javascript">
function showHint(str){
if (str.length==0){
[code]...
The above doesn't work and I am not sure what do about the showHint(str) as clearly I am not representing it properly in my attempt to modify the script.
So, I have a working single autocomplete function, but I want to use the same function on different fields.... this is my code:
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
[Code].....
I know the id's are the same in this, but I tried changing them and it still seems to make little difference.. I did wonder if I could add something variable to the id's and pass that in the function call, but could not figure it out.... the above gives me autocomplete on two fields, but will only fill one of them...
I will have a page with about a 100 or so different links and I would like each one to toggle the visibility of its corresponding hidden div.For instance, if I have a county 'Johnson' when it's clicked I would like the hidden div associated with that county to become visible. I would like to do this without having to write a different function for each one. Is there a way to do this easily?
Below is a solution I was given elsewhere but I couldn't get it to work.Most ideal of all I would like it to work with an image map, with each county having it's own set of stats to be toggled in.
<!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].....
I have a function that i like to move 2 image objects around. (it works with 1)
But im getting errors while im trying to pass multiple object id-s.
I believe example will tell you more. code...
I have been using this simple js function to validate a field in a form is filled in.
<script language="JavaScript">
<!--
function SubmitForm()
{
var form = document.formname
if (form.client_id.value.length == 0)
{
alert('Please make a selection from the list');
form.client_id.focus();
}
else
{
form.submit();
}
}
//-->
</script>
Now I have a page with multiple forms and I would like to use the same script to validate depending on which form is submitted. I thought I should be able to do something like this.... but know very little javascript...any suggestions? Code: