CODEWITHSUNDEEP
javascriptjqueryresize
Ardit Hyka
Ardit Hyka

Reputation: 784

resize two elements simultaneously using jquery/js

i have been trying to resize two windows simultaneously but for some reason it doesnt work. i tried to catch errors but nothing.

Note: i dont want to use jquery resize since it doesnt have a fast inteval for checking resizes

JAVASCRIPT:

function _u(e){
    try {
        e.parent('.boss').find('.first').width( e.width() ); //tried with parent('.boss').next('.first') or directy with prev('.first')
    } catch(err){alert(err);}
}

$(document).ready(function(){
    $(".data").each(function(){
        var resizerint;
        $(this).mousedown(function(){
            try {
                var eee = $(this);
                var resizerint = setInterval(function(){
                        try {
                            _u( eee );
                        } catch(err){alert(err);}
                    },10); // i need it 10ms
            } catch(err){alert(err);}

            $('.test').html('<font style="position:absolute;top:0;right:0;color:red;"> mouse DOWN </font>');
        }).mouseup(function(){
            try{
                clearInterval(resizerint);
                } catch(err){alert(err);}

            $('.test').html('<font style="position:absolute;top:0;right:0;color:green;"> mouse UP </font>');
        });
    });
});

and HTML:

<div class="boss">
    <div class="first">
        <table>
            <tr>
                <td>
                    <div class="title">ONEEEEE</div>
                </td>
            </tr>
        </table>
    </div>
    <div class="second">
        <textarea class="data" > ONEEE TEXTY TESTY NJAMMM! </textarea>
    </div>
</div>

<div class="boss">
    <div class="first">
        <table>
            <tr>
                <td>
                    <div class="title">TWOOOOOO</div>
                </td>
            </tr>
        </table>
    </div>
    <div class="second">
        <textarea class="data" > TWOOO TEXTY TESTY NJAMMM! </textarea>
    </div>
</div>

<div class="text"></div>

Thank you in advance for any help you can provide.

JSFIDDLE (IF YOU SEE , THE BLUE DOESNT RESIZE WHEN MOUSEDOWN at the TEXTAREA ) http://jsfiddle.net/2sfFW/

Upvotes: 0

Views: 386

Answers (2)

EepMoody
EepMoody

Reputation: 124

My first answer was that there was a missing "$" but it didn't fix the problem.

Got it working to some extent, but you have to click into the text field first before it will initialize. I used your blue version as a visualizer.

The proper jquery traversal is 

 e.parent().parent('.boss').find('.first')

or

 e.parents('.boss').find('.first')

You have to use the plural version because there are two parent divs above it. Using parent().parent() is more specific but probably not necessary in this case.

http://jsfiddle.net/aQKVD/1/

If you remove the mouseup/mousedown handlers it will initialize at document.ready instead, which I think might be what you want. You don't necessarily need to do the clearing of the variable unless you have some other need for it, since .each() creates a separate instance of the function tied to the specific div in question. Here's a version like that:

http://jsfiddle.net/aQKVD/2/

Upvotes: 1

EepMoody
EepMoody

Reputation: 124

Doesn't fix it in JSfiddle, but for starters you've left off a "$". I've set up a JSfiddle link so other people can try it. http://jsfiddle.net/aQKVD/

function _u(e){
try {
    e.parent('.boss').find('.first').width( e.width() ); //tried with parent('.boss').next('.first') or directly with prev('.first')
    } catch(err){alert(err);}
}

$(document).ready(function(){
   (".data").each(function(){

last line should be

   $(".data").each(function(){

Upvotes: 0

Related Questions