Manipulating hidden div's

Ok, so i have a few <div1> elements with static content inside of them. Then if you hover over the <div1> another <div2> pops up over top of it. (note: how this happens is the "display" property changes from "none" to "block") This <div2> has data that is relevant to <div1>. It populates dynamically based on the <div1> that you over on.

These <div> elements i do not have access to manipulate. What i am trying to do is create a JQuery script that says if this particular data is populated into the <div2> than manipulate it in this way.

Could someone please help me with this? I would greatly appreciate it. Thanks!

If you have any questions or anything please let me know!

EDITED: Ok, here is what i have... <div id="model-rotator-form"> is the div that stays hidden until you hover over an "li", then it displays with dynamic content.

Within this <div> is an H2 element that holds the vehicle name, a UL element that holds two link images, and a bunch of other elements that i'm not trying to change.

The H2 element is <h2 class="model-name">Vehicle Name</h2> and the UL element is <ul class="link-btn"><li><a class="linkBtn" href="Model.aspx?d=711" id="model-rotator-link-1">Research</a></li><li><a class="linkBtn" href="/Dallas/For-Sale/New/Volkswagen/Jetta SportWagen/" id="model-rotator-link-2">Inventory</a></li></ul>

My code right now doesn't work i know...this is just a reference point... $('#model-rotator-form *'); if($('$h2.model-name').length() >= 25){ $('ul.link-btn').css('margin-top','-20px'); }

Let me know what i can do. Again...hope this code helps.

Ok, i think this helps me out. - testing it now

RyanPitts 2010-09-08 16:32:32

i tried this...$('#model-rotator ul li.model-flow-item').hover(function(){if($('#model-rotator-form').find('h2.model-name').text().length > 25 ){ $('#model-rotator-form').find('ul.link-btn').css('margin-top','0px');}});This is setting every LI item to have a margin-top of 0px, not just the ones that have names longer than 25 characters. What could be my problem. Could it be that this script is running before the fields populates the new dynamic vehicle name? So it is not actually counting the new characters?

RyanPitts 2010-09-08 16:43:50

Change that to this:

Coach John 2010-09-08 16:45:50

$('#model-rotator ul li.model-flow-item').hover(function() { if($(this).find('h2.model-name').text().length > 25 ){ $(this).find('ul.link-btn').css('margin-top','0px'); } });

Coach John 2010-09-08 16:46:20

(this) works on the CURRENT pop-out, by simply using the ID, it works globally. Is this a shared pop-out that gets constantly changed with new content, or a specific pop-out for each hover image? If it's separate the above code will work. If it's a shared one, then you'll want to reset the .css() after you close the pop out.

Coach John 2010-09-08 16:47:55

It is shared.The above code is not working. The reason is that the hidden div that pops out is not inside of the <div id='#model-rotator'>. So (this) won't work, right?

RyanPitts 2010-09-08 16:56:52

<div id="#model-rotator"> and <div id="model-rotator-form"> are siblings in the hierarchy of the code

RyanPitts 2010-09-08 16:57:56

Ok, this works...now i just have to remove the class on "mouseout"...I think i can handle this part. Thanks for your help!

RyanPitts 2010-09-08 17:04:03

You're right, since its shared and a sibling, $(this) is incorrect. What I would do is ensure that you can even get the length. When that box pops, can you just alert( $("h2.model-name").length ) to ensure that we're in the right ballpark? Assuming so, you should then be able to assign a new/proper class to ul.link-btn based on the length or size of that H2

Coach John 2010-09-08 17:18:44

This code actually works...$('#model-rotator ul li.model-flow-item').hover( function() { if($(this).find('span.vehicle-info strong').text().length > 25 ){ $('#model-rotator-form').find('ul.link-btn').css('margin-top','0px'); }else if($(this).find('span.vehicle-info strong').text().length < 25 ){ $('#model-rotator-form').find('ul.link-btn').css('margin-top','20px'); }});

RyanPitts 2010-09-08 20:06:00

ansaurus

tags:

views:

answers:

Manipulating hidden div's

related questions