I have a rather old script that uses XMLHttpRequest to retrieve some
html and pops it into a div using innerHTML. I'd like to switch over to
using append child since not only is it standardized, but it'll save me
bandwidth in the long run. Code:
I am looking for a way to simplify a large series of �object definitions� in the form:
var Img0 ={init:function(){Img0.div = document.getElementById("img0"); Img1.init();}};
var Img1 ={init:function(){Img1.div = document.getElementById("img1"); Img2.init();}};
[Code]....
The program I have developed (for animated greeting cards) works fine but for a large number of images there are an equal number of these object definitions. I am aware of such techniques as using �+i+� in place of the numbers 0, 1, 2, ... and assigning an increasing value to i in a loop. However, I do not see a way to use such a loop here.
I am using jquery with the cookie plugin and I have multiple image buttons that can hide/show multiple elements. My question is how can I add a cookie to this code to remember whether each separate element is opened or closed?
The code,
$(document).ready(function() {
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='<div class="expanddown"></div>';
var hideText='<div class="expandup"></div>';
// initialise the visibility check
var is_visible = false;
// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append('<a href="#" class="togglelink">'+hideText+'</a>');
// capture clicks on the toggle links
$('a.togglelink').click(function() {
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? hideText : showText);
// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').slideToggle('fast');
// return false so any link destination is not followed
return false;
});
});
HTML,
<a class="togglelink" href="#"></a>
<div class="toggle">
Content
</div>
I am doing a form for my site and would like to enable and disable a radio
button set depending on whether one of the choices on an outer radio button
set is checked. How can I refer to all the inputs of the inner radio button
set (they all share a common name) with javascript. I tried
document.getElementsByNames('thename') but it doesn't work. I know this is
because this method returns an array which you must then refer to by a
specific index number, unless there is another way. I would like to refer to
all of them at once and then set their disabled status to false.
I have a dynamically generated page (PHP), which contains an Explorer
like view of items. I would like to hide multiple <tr>'s by name, but
I can't figure out how thats done.
I have this code to hide one element by id
if (document.getElementById(id)){
document.getElementById(id).style.position = 'relative'
document.getElementById(id).style.display = 'none'
}
Anyone has a cod sample for looping through multiple elements and hide
them?
The short of it is that I am trying to change the background color of all elements with a particular class name. I know there is no getElementsByClassName (wouldn't it be nice if there were?), but is there a simple way to do it? Alternatively, is there a way to apply changes to multiple id's?
View 3 Replies View RelatedIs it possible to move multiple divs with absolute positioning down the page simultaneously by the same amount?
View 3 Replies View RelatedI have written a function to make visible elements with a certain id. however i intended it to be used to make visible multiple elements but it only appears to switch on the first element it comes to with that id. after that it appears to stop. i was wondering how i can adapt this function to make visible multiple elements, will i need a different way of referencing or can it be done through id?
function toggleLayer( layerID ) {
var style2 = document.getElementById( layerID );
if (style2.style.display == "block") {
style2.style.display = "none";
}
else {
style2.style.display = "block";
}
}
I've selected multiple tables and tried to use each for applying cornering to each table. Inside the callback function, I try to find the first/last table cells to apply cornering for each corner. However, when there are multiple tables it looks at _all_ the tr elements for the first/last rows. See example code:
// Add cornering to tables
$('table.corner-me').addClass('ui-corner-all').each(function(){
var $table = $(this);
$table.find('tr:first :first-child').addClass('ui-corner-tl');
[Code].....
Can someone explain to me the best way to loop through the geocode and marker (google maps) part of this code for all of the elements with the "address" class using jQuery (or javascript if need be). I tried wrapping the contents of the codeAddress function in $(".address").each(function () {... and replacing the getElementById with a jquery selector, but I still seem to be lost.
[Code]...
I have this query that does what I want it to do, find the class and remove an extra element within its parent:
$(".emptyTopNavOption").parent().children().first().remove();
But when there are multiple classes, it only deletes the first element in its query. As a successful test, I appended some CSS to ensure the query selected all classes and added a border to each element. So why does remove() not work? Is it a bug or is my query missing something?
I just started using jquery a few days ago and am already addicted.Now I am trying to figure out one thing which I can't seem to get answered by Google:I am building a dynamic website where at one place there will be an unclear number of div-elements. So there can be none, just one or several.The plan is to show them by a click on a button via slideDown(). So I wrapped them with another div.wrapper via wrapAll(). This works nicely for any number.Now the thing is: if my .wrapper has no specified height, the slideDown jumps - which doesn't look very nice.So I gave it a height:$('.wrapper').css({'height': $('div').outerHeight()});Presto, the animation works smoothly. But this works only if there's just one div.
View 2 Replies View RelatedI am putting together a validation function and am having trouble with targeting multiple elements.[code]an onclick event fires my validation function. If any of the fields are empty, the appropriate error message should display.This sort of works. If all of the fields are empty, only the error message of the first element is displayed, not all 3.
View 1 Replies View RelatedI am performing the same animation three different times on three different elements. Is there a more efficient way to do this?
Here's my code:
$('.tier1').animate({opacity:.2}, 500)
$('.tier2').animate({opacity:.2}, 500)
[code]....
I'm having a problem with the <CANVAS> element in JavaScript. here's what i'm trying to do: I need 3 different canvas elements for writing a signature to. they must all 3 be visible at the same time
My problem that i'm having is that i can't seem to get the code to work which will write to more than one canvas.
[Code]...
I have a form that I want to clone and add up to 5 duplicates with slight changes. The changes are:
Add a second question and another set of related radio buttons for only the duplicates. Change the title in the Header to increment by 1 ex. Header 1, Header 2...
I also would like to make the form elements "id" and "names" unique. Also, continue to use the add and remove button at the bottom.
I have included my existing code.
NOTE: for a visual, I mocked up the the original form and 1 copy of the fields in the html, not to be used.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
[Code]....
Normally I would just use document.getElementById to get anything I need but here is my problem:
I have a zip code control that I load using AJAX. it has city, state, country, county and zip code. This gets loaded within a business application and at one point you can have both a bill to and ship to address forms on the screen at the same time, loading my zip control with the same fields, same ids and same name. This forced me to now pass in the form name that contains the control.
I need to get to divs and spans within this form. Primarily as you type in a city or zip code, I am doing a hot search with a popup div that shows you results you can quickly choose from. The only time this becomes an issue is the situation I mentioned before when the zip code control is on the screen twice. I am not certain how to access the innerHTML of a span or div by way of the form name. Is this possible and if so what is the proper syntax?
Here is a very basic example at its simplest form of my problem.
<form name="frm_billto" id="frm_billto">
<span id="myspan">Hello</span>
</form>
<form name="frm_shipto" id="frm_shipto">
<span id="myspan">World</span>
</form>
In the above example because the control was loaded twice, I now have 2 spans with the same ID. I want the innerHTML of the each span based on the form they are in.
We wanted one control that we could use throughout the system that we could update in one place and the entire application be updated. Unfortunately we did not anticipate having it load more than once on the page.
I am working with this script below, to assign a couple images to move randomly (like a sparkle effect), appended to a element,
How do i append it to several elements and still have it work, because when i change
Code:
$('#onedivelement').append(this.n);
to let's say
Code:
$('div').append(this.n);
[Code]....
Is it possible to duplicate a few form elements on click of a button? For example if we have a form with the following fields:
1. Name
2. Address
and we have a button that says add a member
on clicking of which the same two fields above should be added:
1. Name
2. Address
Im working on a ajax app and not sure what is the best way to bind events to elements (performance wise).I have a number of elements with 'click', 'focus', 'keydown' events which can be assigned though the delegate to the parent, like so:$('#parent').delegate('#child', 'click', func.....)but is it better to add a delegate to the 'document' for multiple events and use IF statement to filter for elements which should fire an event, like so:[code]Each element can be replaced with an updated version retrieved from the server.
View 2 Replies View RelatedI am learning jQuery now and have a big interest in this javascript framework. I am trying to bind an event to more than one element. I won't meet any problem if using selector. But now, I've created a function which I will pass the element. And I need within this function, to bind the code. This is my current code :
function updateDay(dayObj, monthObj, yearObj){
//I want to bind both monthObj and yearObj.
yearObj.change(function(){
//do something
});
monthObj.change(function(){yearObj.change()});
}
$(document).ready(function(){
updateDay( $("#day"), $("#month"), $("#year"));
});
As you can see, I must bind twice, once for yearObj, the other for monthObj. Is there anyway to bind the change() event only once? If there are some logic mistake in using function or such as feel free to point out, since I still haven't read all the documentation yet.
Im trying to get 2 elements to execute some effect individually at the same time on a hover.Ive looked at .animate but if I understand it correctly I can do multiple effects but still limited to that single element.[code]So basically Im just trying to get 1st & 2nd on hovers to happen at the same time and 1st and 2nd off hovers to happen at the same time.
View 1 Replies View RelatedI'm wondering how to get access to each element I selected e.g. by the :has()-Selector. To explain a bit more: I want to select several elements and add to each of them attributes, but a different one to each element. So how can I run through the elements and modify each one?
View 3 Replies View RelatedSelecting elements using multiple parameters like here: $('descendant', 'ancestor').text(); seems to be way more popular than css-like syntax: $('ancestor descendant').text(); Do those two differ in performance, or is it just about being intuitive to particular people?
View 1 Replies View RelatedI am creating an FAQ type page with rows of questions that will drop down the respective answer when clicked. I have it mostly working, except I can't find a way to close all answers before opening the next one. I have tried everything I can think of (or search), but to no avail. I am using the following code, where QQQ1/2 are the questions, and AAA1/2 are the answer divs:
//Question/Answer
$(".QQQ1,.QQQ2").click(function () {
// check the visibility of the next element in the DOM
if ($(this).next().is(":hidden")) {
[Code].....
I'm quite new to jquery and i would like to know the best syntax to create an object with couple of DOM elements. I mean something like this:
[Code]...