Title doesn't really give this thread justice ... I have a content div with an image and text included into it. This same div class is being used multiple times. What I want is to be able to click the image, and have the <p> in that div toggle to show or hide. Here is the XHTML code for the front-end:
<div class="content">
<img src="image_big.gif" alt="image" class="toggle_font" />
<p> Caption for the next image. </p>
[code]....
I have a link styled with css that I'd like to change with a mouse event. It's going to be on a touch screen so I'm assuming I should adopta mouseUp/mouseDown model?
[Code]..
i am creating a simple dynamic menu for my study with the following structure:
[Code]...
now i need to find the correct selector for the mouseout event, because now the submenu disappears if i am getting of the current element (this) of the mainmenu, but i only want it to disappear if it is not anymore over the submenu, or if the mouse goes over another element of the main menu.
I have the following$('.eventsMPH').find('li.comingUp:first').attr('id');This gives me the first <li> with a class of 'comingUp'. However how do I get the first <li> with a class of 'comingUp' BUT without a class of 'clone'
View 2 Replies View RelatedI'm fairly new to jquery and I've been stumped on this one for a day now. I'm creating a lighbox type photo gallery on a page. The box is simply a hidden div that is displayed when the user clicks a link. When the link is clicked to launch a gallery I'm using the .load() function to grab another page and load it into the hidden div which is now displayed.
The code looks like this $('#galleryBox').load('boxModal.php?ID=' + ID)); The issue I'm having is after I load up the gallery box with boxModal.php.. I want to be able to respond to the click or mouseover event of the images that have loaded in that box. But I can't seem to find the images in the DOM. Is it possible to add event handlers to images loaded using the .load() function?
I have a calendar in which each day is a separate div, and all these are within a container div #cal. When a user mouses over one of the days, I want to figure out the index number of that day's div within #cal. Simplified example:
<div id="cal">
<div onmouseover="findIt()" id="nov1">1</div>
<div onmouseover="findIt()" id="nov2">2</div>
<div onmouseover="findIt()" id="nov3">3</div>
</div>
I can easily get the index of #nov2 from Firebug if I do this in the console:
$('#cal div').index($('#nov2')
But, I can't figure out how to write a function so that I don't need to assign an id to each day div. I'd like to be able to just take "this" from the moused-over div, and pass that to a function that can turn it into the needed index.
I am working on a little project with fullcalendar but while writing some callback functions stumbled upon an issue: Fullcalendar generates html that looks like this: <a><span></span><span></span><span></span></a>.
Now there is an eventClick callback that is fired when clicking on that <a> element. However, in that callback I would like to know which <span> element was clicked.
First some sample clode:
I have a jQuery click event handler on the dethead tr's which is fine.
But what I want to find in this click event handler is the previous <h3> to the clicked <tr>
So if I click on item1, item2 or item3 I want to find the <h3>Heading 1</h3>
I click on item4, item5 or item6 I want to find the <h3>Heading 2</h3>
NOTE: Not all the <h3> will have the same classes, if any class at all.
Been trying various things from Tree Traversal but have not found the right combination.
So, from this:
<div
id
="act112
"
class
[Code]...
Since jQuery parses the entire dom first, is there any efficiency gain in directing it via the entire CSS chain rather than directly to an ID? That is, if I have a Div with an ID of "foo" and it contains a P with an ID of "bar", is there any speed advantage in using $(div#foo p#bar) as opposed to just using $(p#bar), assuming jQuery would be more efficient if it had both indexes?
View 2 Replies View Related<pre><code><font size="4"><span>
Is there a way to find multiple values?This script checks <u>name = ben</u>, what about I want to check if <u>name = ben</u> and <u>name = joe</u>?
var</span><span> items </span><span>=</span><span> </span><span>[{</span><span>id</span><span>:</span><span>1</span><span>,</span><span> name</span><span>:</span><span>'bob'</span><span>},</span><span> </span><span>{</span><span>id</span><span>:</span><span>2</span><span>,
[code]....
I've been trying to work this out for a bit now but seem to have come a bit unstuck. I'd like to be able to use .find to search an <UL> element and find out if there are any items with two attributes the same as a search choice. i.e. : My UL looks like this :
<ul>
<li id="1" typeref="E" typeid="1">Element 1</li>
<li id="2" typeref="E" typeid="2">Element 2</li>
</ul>
I would like to do a search of the above UL and get back the id of the first LI element you can see in the list there by doing a search for typeref="E" && typeid="1". Is that possible using Jquery?
I have a table containing multiple rows (tr), each row has two columns (td). In the first columnIhave acheckbox, when this checkbox is clicked i need it to change the class of a div in the second column of the row.
[Code]...
I'm trying to create an multiple upload script and the upload part is working fine, but...When a file is uploading a animated gif is shown in the list part <li></li>. If I only upload 1 at the time everything looks just fine and the animated gif is changed to the just uploaded image. Great!. But if I upload 2 or mare at the same time the problem is there. For each upload I start a list object is created. This part works fine, but when picture 1 is done uploading it is shown in the last created list object and the same is picture 2 overwriting picture 2. This is not good... How can I change this?
Code JavaScript:
var mynewLI = null;
new aUpload(uploadBtn, {[code].....
I'm using dynamically created upload fields that are in iframes.(There is an "add another" button.) After uploading the file in the iframe, the file path is passed back to a hidden field in the form. The tricky part is passing the data back to the correct hidden field since the name can't be determined ahead of time. Passing the data through $_GET or $_POST data is highly problematic. So is there a way to find the div that contains the iframe from within the iframe.
View 2 Replies View RelatedHow can jQuery locate a non-predetermined DOM insertion point? My application relies on custom code to "bootstrap" itself. I'm wondering if similar functionality is available in jQuery?
My app works in the following fashion:
- user places a script tag in their web page.
- my script fires and performs the following routines:
- scriptLocation = whereAmI()? (find scripts in document, length -1)
- insertBefore(DIV, scriptLocation);
- use DIV as canvas, DOM target for all that follows
- install application in DIV
Note that my custom app does not wait for any kind of "ready" state. It has no dependencies on the surrounding document. It fires inline. My impression is that jQuery's approach ("Find something, do something") is incompatible, because it relies on a known DOM insertion point. It would seem straightforward to "query" the DOM, and find an element of known ID. That would conflict with my business constraint; I have no control over the destination page. Are my assumptions about jQuery true? Or is there a way for a jQuery script to wake up, find its location, and the install elements there?
I'm trying to add a click listener to a list element that has a hidden unordered list.
<script type="text/javascript">
$(function(){
$('li:has(ul)').click(function(event)
{
[Code]....
Basically, I'm looking for a way to find a list element that has a ul child, and then hide or show that ul. What I have here doesn't seem to be working.
I'm pretty new to jQuery and this is giving me a lot of trouble! I found some code jQuery code to give me a great start but I can't get the logic to where I need it to be. Here is what I have:
$(document).ready(function(){
$('p', 'body')
.andSelf()
[code]....
How to find control inside row of selected rowindex. Here when i select first row, class must be toggled with tat row only.
[CODE]
$("td.Normal").hide();
$("td.Edit").show
[Code]....
how could I get the element with id "testing123" and append it to the body? or print it to the console? or anything to test that its working.
//JS
$("form[name=create_person]").submit(function(){
console.log("submitted");
[code]....
I have a form which I populated with checkboxes having ID based on the records pulled from a table.
[Code]...
What would be the easier way to do this? For each of the list elements I want to check how many image elements are inside each, and do something with the one that has only one image.
<ul>
<li>
<img src="" />
[code]....
I'm trying to learn a bit more Javascript/jQuery and I want to write a bit of code to adjust 'background-position' based on the width of the 'background-image'. So my short question is, How can I find the width of a background image using Javascript/jQuery? For those who are interested in what I'm doing (or trying): I have a list where each item has a background image along with some text. I want the images to all centrally-align along a vertical axis in a space to the left of the text. Problem is, the images are different widths, so I want to use jQuery to find their widths and calculate the appropriate background-position.
[Code]...
I am writing a small module which will have several different aspects to it, all based around ajax calls. I want to allow the main ajax functions i.e beforeSend, success, complete etc (I am using jQuery) to be customizeable.I currently have an options object in the module which can be extended with an options object passed to an init function. In here, I am passing a 'callbacks' object with nested ojects for each different type of action as in...
var insertCallbacks = {
before : function() {
},
success : function() {
[code]....
For example, if we press tab in a page and the tab finds an A Link and then we press enter, it will be like Clicking in the link. I would like to know how do I do to make that kind of selection in my element, cause I wanna make a function to select the item so the user when pressing enter it opens the <a> link.
View 3 Replies View RelatedI have a menu system that toggles the visibility of different divs. Here is an example of how my javascript is now:
$("#one").click(function() { $("#m").hide("fast"); $("#n").hide("fast"); $("#o").hide("fast"); $("p").hide("fast"); $("qx").hide("fast"); $("rx").hide("fast"); $("sx").hide("fast"); $("#one").toggle("fast"); return false; });
Is there any way that I can make it so it hides all divs and then toggles the one I want WITHOUT having to write it out like this. is there a 'hide all' option?