JQuery :: Set Property Based On Sibling Width()?

Oct 5, 2009

I'm trying to set a width of a span class based on the width of the image inside of it. I've got a container that will also have a bunch of images... some of them will have captions and will be wrapped in a class "caption"... some will not be wrapped in the "caption" class. I'm trying to loop through the container... find all the "caption" classes... and then set the width of the caption class based on the width of the image inside of it. Here's what a basic image with a caption will look like:

<span class="caption fltrt">
<img src="" alt="" />
caption goes here
</span>

I'm able to look through the containing div and locate all the images and then get their width using the following:

// Find all images in the overview section
var overviewImgs = $(".overview-content").find("img");
// Get the width of each image in the overview section

[code]....

I can't figure out how to loop through and find all the instances of "caption" and then set the width of the "caption" class based on the
width of the image inside of it.I can find all the "caption" classes... and I can find all the images and get the image widths... but I'm not sure how to combine these two so I am only finding the images inside of the "caption" class and then setting the "caption" class width based on the width of the image inside of it. The images are added by a separate content developer and can be any size. Not all images will have captions... only the ones wrapped in the "caption" class.

View 2 Replies


ADVERTISEMENT

Set Width Of Item Based Off Combined Width Of Other Elements?

Jun 4, 2011

I am trying to setup a javascript function that sets a div's width based on the combined width of the li's with the name "navItem". The problems I have been running into when trying to define the width of the li's is that they do not have a width defined in css. Can anyone help me out with this? The javascript function setWindow is suppose to show the div loginWindow and set the width of it.

Code:
<div id="topNav">
<ul>
<li><img src="<?php print $site->folder['images']['header']; ?>topmenu_left.jpg" border="0" alt="" /></li>
<li name="navItem"><a href="<? print $site->url['about']; ?>">About Us</a></li>
<li name="navItem"><a onmouseover="setWindow('loginWindow');" href="<? print $site->url['billing']; ?>">Client Services</a></li>

[Code]...

View 3 Replies View Related

JQuery :: Removing Item From Array Based On Property?

Apr 27, 2009

I have a question about removing an item from an array.I am looking to remove an item from the array based on the property.Ie.arr = [{a1: 1, a2: 2},{a1: 3, a2: 4}, {a1: 5, a2: 6}]remove first item from array because a1 = 1.I am not entirely sure how to do this. I tried messing around withgrep a bit, but that didn't turn out well.

View 3 Replies View Related

JQuery :: Selecting Div Element Based On Display Property?

Dec 31, 2010

I am trying to select a div element based on its display property. Due to some reasons I can't use Id to select this element, DIV element is structured like this:

<div
class
="details"
id

[Code]....

View 1 Replies View Related

JQuery :: Dynamic CSS Padding Based On Element Width?

Oct 21, 2010

I'm currently working on an IE7 CSS fix for a rather large form. Long story short, I have each input wrapped in a div, all in the same class. What I need, is to have each div define a padding-right value that is equal to the width of that div. I'm fairly new to jQuery, so I'm in need of some help with the syntax. Here's what I currently have, but it keeps printing a padding-right value of "0".

$('.form_label').each(function(){
$(this).css('padding-right', function() {
var w = $(this).width();

[code]....

View 5 Replies View Related

JQuery :: Setting A Div Dimension Based On Window.height & .width?

May 7, 2010

I would like to set the height of certain #div elements on a page based on the height of the user's current window state. It should draw the elements based on the size of the window at onLoad, and also respond to the onResize event.

View 4 Replies View Related

JQuery :: Invalid Argument Error (IE) When Getting "width" Property

May 1, 2009

The following script works fine in all other browsers (centering a nested img). On IE I get the following error message:

Line: 13
Char: 12949
Error: Invalid argument.
Code: 0

I narrowed it down to the line: var i = $("#tabs-1a").css("width"); It appears ie doesn't like the "width" property but I don't know why. Here is the whole script for the page:

$(function(){
$("#FraudVideo").tabs();
$("#TipsNews").tabs();
var i = $("#tabs-1a").css("width");

[Code]....

View 1 Replies View Related

Increase Div Width Based On Input?

Jul 9, 2009

I would like to have the width of a div change automatically based on a number entered into a corresponding input box.

Eg:

<input name="a1" value="10"></input>
<input name="b1" value="20"></input>
<input name="c1" value="30"></input>
<div class="r1" style="width:50%;"></div>
<div class="r2" style="width:50%;"></div>
<div class="r3" style="width:50%;"></div>

Currently they are all just set at 50% width, I'd like the width to automatically adjust the width based on the input box value, without the user having to submit anything! If anything in jQuery exists like this to, to get a nice smooth scrolling that'd be lovely but not essential.

View 8 Replies View Related

Change ID Based On Width Of Image?

Nov 23, 2010

I have a list of thumbnails generated by Wordpress. I've been trying to piece together a script that would change the ID of the parent element based on the image inside of it I can't seem to get anywhere, does anyone have a simple solution?

I need the id of the li to be "sm" or "smp" depending on the width of the image inside of it (landscape or portrait)

<li class="frame" id="sm">
<div class="frm" id="frame1">
<img src="image.jpg">
</div>
</li>

View 5 Replies View Related

Image Resize Based Of Original Px Width

Nov 24, 2010

I am trying to write a custom BBcode for a forum I moderate. I don't have the licensing information because its not my forum and i am just a moderator. If anyone wants to verify the legitimacy of the forum I work for please PM me and I will try and get you any information I can.

View 8 Replies View Related

Moving A <div> Based On Unknown <select> Width?

Jul 6, 2010

I have a number of SELECT drop downs, each in their own DIV. Each of these DIVs is in the same location but only one is visible at a time. I have two buttons on another DIV (previous and next) and want to position the buttons to the right of the SELECT group (based on the position and width of the longest SELECT). I do not know the position of the SELECTs until the page loads.

Here's the code:

Code:
<html>
<head>
<style>

[Code]....

I'm debugging using firebug in firefox and everything works with getting the values I need - it just won't set the left attribute in the DIV.

View 2 Replies View Related

JQuery :: Selecting The Next Sibling

Sep 2, 2010

Such is the structure of my HTML:

<table>
<tr>
<td id="myHeader">
<input type='checkbox'>Header

[Code]....

I am using an ASP.NET Repeater control to create N number of code patterns similar to that above. The server code leads the input controls based on DB values. I want to default the second table to be hidden if the checkbox is blank (not checked) and shown if it is checked. I also want to duplicate this behavior on the click of the checkbox.

View 2 Replies View Related

JQuery :: How To Get Current Sibling Number

Aug 23, 2010

I've made a function for getting a ID for each sibling in a tree. Lets look at this DOM:
<ul>
<li>Five</li> //sibling ID 1
<li>Six</li> //sibling ID 2
<li>Seven</li>//sibling ID 3
</ul>

Here is the function:
function getSiblingId(elm) {
return $(elm).siblings().size() -$(elm).nextAll().size() + 1;
}

And here is how I use it:
var id = getSiblingId($('ul li:first-child')); // id = 1
Is there a more elegant way to get the same result? The work done in the getSiblingId-function has a lot of overehead.

View 1 Replies View Related

JQuery :: Get The Nth Sibling Relative To One Of The Siblings?

Apr 16, 2010

I have an unordered list element which has click events registered. What i want is to be able to find the nth relative sibling to the list item that is clicked. In prototype I can simply say $(elm).next(3) or $(elm).previous(3) for the 3rd sibling forwards or backwards from the current sibling.

In JQuery there doesn't seem to be a way of getting a sibling relative to the current one, other than the immediate next() or prev(). So if I want the third previous I have to do this inJQuery

$(elm).prev().prev().prev()

View 2 Replies View Related

JQuery :: Select Content Of A Sibling <td>?

Oct 27, 2010

I made a table with some customer information. It holds an id (hidden for the users), a company name, a phone number, an e-mail address and so on.

Inside every table row, I've made a "delete" button that should delete the relevant row in that table (see "<td class="delete">"). What I would like to do is getting the customer id that is hidden inside the first (hidden) <td> of the table row you wish to delete. I'm quite new to jQuery and I realy can't find a sollution for it. Here's my HTML [code]...

The alerts are working fine I guess. I've got something like "[object Object]" for the first alert and "object HTMLTableCellElement]" for the second alert. The other 2 testrules don't work. Firebug gave me the error message "$(this).parent().children("td")[4].text is not a function", but for now, I realy don't know what I'm doing (wrong) in those last 2 rules. Anyone who could help me out with this newbie problem about parent, child and/or sibling elements?

View 2 Replies View Related

JQuery :: $(this).next() Not Matching Sibling Table?

May 12, 2009

Trying to hide a table that's a sibling to the anchor to which theclick event is being called. It works, with any element but a tableas a sibling. My code/markup:

<script type="text/javascript">
$(document).ready(function(){
// show/hide details

[code]....

View 1 Replies View Related

JQuery :: Find Next Instance Of Class (not As A Sibling)

Jun 15, 2010

I have the following style markup:

<h2>
<span class="status">
UNDER OFFER
</span>

[Code].....

As i'm trying to add an overlay image to the hyperlink so it will appear on top of the image that is already there (css absolute and z-index).

View 5 Replies View Related

JQuery :: Hide/Show Sibling Element?

Jun 14, 2010

Consider the following:<div id="item-1">
<a href="#">The Link</a>
<div>The contents shown on hover only</div>
</div>

I'm positioning elements absolutely. I want the child DIV to show when I hover over the link. Here is how I'm accomplishing this:

$("#item-1 a").mouseover(function() {$("#item-1 div").fadeIn('fast');})
$("#item-1 a").mouseout(function() {$("#item-1 div").fadeOut('fast');})

This works wonderfully. But I would like to make this generic so that I need 2 lines of code, not 2 times however many items I have.

View 1 Replies View Related

JQuery :: Type - Next Sibling Of The Section With Id Gedicht1 ?

Jan 5, 2012

I have a question about a selector.

How can I type: the next sibling of the section with id gedicht1 ?

View 1 Replies View Related

JQuery :: Selector For Next Non-sibling Input Element?

Oct 8, 2010

I'm working with jQuery on a form where each input element is contained in an <li> element.

Some fields are read-only, identified by a class ".readonly", and I'd like to bind a jQuery function to these fields' "focus" event, to send the focus to the next input whose class is not read-only.

But, because of the containing <li> elements, I don't think .next('input') will work, since the <input> tags aren't siblings.

Is there a simple selector that will do the job without having to climb up and down the DOM via parents and children? To me that feels unsatisfactory and brittle, because should the designer decide to change the layout (lists within lists, <div>'s within <li>'s), my DOM-climbing code might break.

View 5 Replies View Related

JQuery :: Inserting Content Relative To A Sibling?

Dec 13, 2011

I have two divs: #div1 and #div2. what I'm trying to do is attach the second div to follow directly to the right of the first div, but I'm doing something wrong with the left property:

$('#div2').hide().insertAfter($('#div1'));

$('#div2').show().css({$('#div1').css('left', 100%)});so to recap, just trying to insert the second div directly to the right of the first one.

View 6 Replies View Related

JQuery :: LeftNavLink - Sibling DIV Backup Not Sliding

Aug 22, 2009

I have the following layout for my page in ASP.NET:
<div id="content">
<div id="leftnavcover" class="leftnavcover"></div>
<asp:PlaceHolder ID="ph_leftnav" runat="server">
<div class="leftnav" id="leftnav">
<asp:Repeater runat="server" ID="rptr_LeftNav">
<HeaderTemplate> .....

Which renders the following HTML:
<div id="content">
<div id="leftnavcover" class="leftnavcover"/>
<div id="leftnav" class="leftnav" style="left: 0px;">
<ul><li>
<a id="ctl00_rptr_LeftNav_ctl01_hyp_LeftNav" class="LeftNavLink" href="services-subsection-1">
Services Subsection 1</a>
<div class="leftnavmenu" style="display: block;"> .....

And I have the following JQuery script:
$(document).ready(function() {
$("a.LeftNavLink").mouseover(function() {
$(this).next("div.leftnavmenu").slideDown(500).siblings("div.leftnavmenu").slideUp("slow");
});
});
The problem is that when I bring my mouse on top of one of the .LeftNavLink's, it slides down the corresponding .leftnavmenu, but it doesn't slide the sibling divs back up when you put your mouse on top of another .LeftNavLink, which is what it is supposed to do. Anyways, I got this code from: [URL]

View 5 Replies View Related

JQuery :: Disable Form (sibling) Elements?

Oct 19, 2010

What is the selector to disable all form elements on the same 'level'? What I have is this:

Code:
<form>
<input id="element1" name = ........ />

[code]....

View 7 Replies View Related

Jquery :: Toggle The Next Sibling Of A Link In A List?

Aug 6, 2010

I want to toggle the next sibling of a link in a list like this,

Code:

<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a>

[code]....

first of all, it seems fine - I can toggle the targeted sibling, but why after the first toggle at any parent, I have to click twice sometime to hide other siblings when I click/ toggle at the current parent? [URL]

View 15 Replies View Related

JQuery :: Calculate The Width Of Each Column Plus The Combined Width For The Container?

Apr 26, 2011

Is there any way that one could have supersubs functionality applied to drop-down multi-column menus?I assume one would need to calculate the width of each column plus the combined width for the container.

View 1 Replies View Related

JQuery :: Move A HREF Value From One TD To A Sibling TD, Then Hide The Original TD

Aug 14, 2010

I have a table which contains multiple rows. The table has an unknown number of columns.

One of the TD's in the row has an 'A' tag containing the HREF property " /_layouts/DocIdRedir.aspx? somenumber" Let's call this TDSource and ASource

A sibling TD in the same row which has a class of ms-vb-title contains2 links- the'A' tagI want to update the HREF property of is in a DIV with a class of ms-vb itx . Lets call this TDTarget and ATarget.

The highlighted components are unique per row. I need to get the HREF value from ASource in each row and update the HREF value for ATarget in the same row.

It's my first day on jQuery - I understand that I can use children() to getthe TR containing the relevant TD's, and I can see how to use :contains() to identify the specific source HREF property, but I can't understand how to link these bits of information together to do what I want.

View 5 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved