CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Thomas
Thomas

Reputation: 5089

Foreach statement w/ Jquery

So I am trying to reposition an element each time a user clicks on an input element. 

<script>

$(document).ready(function(){                   
    $('input').each(function(index) {
             var p = $(this).attr('id');
             var position = p.position();   

             $this.focus(function(){    

             $('#desired_equity_help').css("left", position.left - 435 );
                 $('#desired_equity_help').css("top", position.top -20 );
             $('#desired_equity_help').toggle();                            
             });

    });
});

</script>

'desired_equity_help' is the element that I am trying to toggle and reposition based on the input element clicked. Any ideas why this isn't working?

Here is the HTML:

<div id="desired_equity_help" class="form_tooltip" >
                        <div class="tooltip_inner" >            
                            <strong>Desired Equity</strong>
                            <p>Hello World! This is some dummy text.</p>
                        </div>
                    </div>

                    <span class="apply_form_label">Desired:</span><input  style="width:110px" type="text" id="desired_equity" name="desired_equity"/><br/>
                    <span class="apply_form_label">Break:</span><input style="width:110px" type="text" /> at: <input type="text" style="width:110px" /><select><option>Independent Users</option></select><br/>

                    <span class="apply_form_label">Last One:</span><textarea rows="3" cols="50"></textarea>
                </div>

Upvotes: 1

Views: 259

Answers (3)

tsega
tsega

Reputation: 876

Ohhhhh, it looks like your doing a lot of stuff there, according to what you want to do you don't need the each() or toggle() methods there. Here is what I would do:

$(document).ready(function(){
    $('input').click(function(e){
        var position = $(this).position();
        $('#desired_equity_help')
        .css({"left" : position.left - 435 , 
            "top" : position.top -20 });    
    });
});

By binding the click event to the input you are telling it to execute that function every time the input is clicked. If you don't want the click method you can change it to the focus method or whichever method is relevant to you. The toggle method is unecessary as well, it is more or less used for switch type button, a button you would click once and it goes into one state then after you click it again it goes back to the previous state or something like that.

Hope this helps!

Upvotes: 0

musefan
musefan

Reputation: 48415

Forget the foreach and apply the event straight to the selector like so...

$('input').focus(function(){
   var p = $(this);
   var position = p.position();   
   $('#desired_equity_help').css("left", position.left - 435 );
   $('#desired_equity_help').css("top", position.top -20 );
   $('#desired_equity_help').show();                            
});

$('input').blur(function(){
    $('#desired_equity_help').hide();//hide on exit of input
});

Note: Using position will require your desired_equity_help element to belong to the same parent as your input elements. if this is not the case consider using offset instead

Upvotes: 5

Dennis
Dennis

Reputation: 32598

This is probably closer to what you are looking for. You had an undefined variable and the element should probably be shown instead of toggled.

$('input').each(function(index) {
    var $this = $(this);
    var position = $this.position();

    $this.focus(function() {
        $('#desired_equity_help').css({"left": position.left + 150,
                                       "top": position.top}).show();
    });
});

Demo: http://jsfiddle.net/nEMye/

Upvotes: 3

Related Questions