JQuery help - editing a hidden element based on content of hidden element

Question

Ok, so this is what i currently have. I have a scrolling gallery of 6 or 7 cars. When you mouse over the cars a little window opens up over the car that has vehicle info and a form on it. These windows are hidden elements that are triggered when the mouse hovers over the respective car. Another thing is that it is only ONE element. The data inside the element and the position of the element changes based on what car is being hovered upon. Hope that makes sense.

My problem is that i have some cars that have really long names. The window is a specific width and height so the name of the car wraps to two lines and pushes everything down. This is a problem because it ends up pushing the content off of the bottom of the window.

This is what i am trying to script out. I want to first get the name of the car. See if it is more than 25 characters long. If it is, then i want to move one of the elements below the name up 20px. This will correct the issue. I know how to move the object based on the length of the name of the vehicle; however, i don't know how to fire the script on mouseover. If i just fire the script in the head of the page it doesn't do anything because the data isn't generated until the mouse hovers over the vehicle so if i try it in the head of the page the length of the name of the vehicle will always read 0 characters.

Any help???

The object that gets hovered on is an <li class="model-flow-item">
The object that is the hidden element is a <div id="model-rotator-form">

Here is the code i've been working with:

<script type="text/javascript">
$(window).load(function(){
   if($('#model-rotator-form h2.model-name').text().length > '25'){
      $('#model-rotator-form ul.link-btn').css('margin-top','-20px');
   }
});
</sctipt>

Your thoughts??

Answer 1

try:

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

Answer 2

well Ryan try something like this

lets start my assigning a relative hidden element id to your images

for example:

HTML

<img src="mycarpic.jpg" class="yourcarpic" rel='myhiddenelementid'/>

then your js

$(".yourcarpic").mouseover(function() {
      var relelement = $(this).attr("rel");
      var charcount = $("#"+relelement).val().length;
      if(charcount>25) { 
          $("#"+relelement).css('margin-top','-20px');
      }
      else {
         //leave as it is or do something
      } 
});

Answer 3

Consider it a recommendation.

I did some experiments with analysing lengths with jquery (eg. setting a font size for a text so that it fits a static width&height div best or splitting text with images and tables to screens) yet still I think Your case is not worth messing with javascript. It can be done with some CSS art with overflow: auto and float and a div inside, or quite a few other ways.

If You want more help with that CSS ask in comments.