Animate left off screen with jquery

Hi,
I have the following code - see attached html file. When you click the picture at the top, the bar in the lower part of the screen (red and blue) slides all the way off the screen. What I want is that it only slides halfway of the screen (blue remains showing) and the picture link on the blue part becomes the link to activate the animation.
Thanks,
NL
HtmlPage3.html
LVL 2
nedloganAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Divide the width by 2, assuming the elements will always be equal widths

left: parseInt($lefty.css('left'), 10) == 0 ?-($lefty.innerWidth()/2) :
0
nedloganAuthor Commented:
They won't be equal. Left will be 200px, right variable.
0
GaryCommented:
So the .menu div is always 200px ?
left: parseInt($lefty.css('left'), 10) == 0 ?-200:0
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

nedloganAuthor Commented:
Yes, that works can you help me understand what this bit means: ('left'), 10) == 0 ?-200:0
I understand what the -200 relates to.
Thanks,
NL
0
GaryCommented:
If its current position is 0 (i.e. it hasnt been moved left yet) then animate left -200px else animate left 0px (basically do nothing).
0
nedloganAuthor Commented:
Ok thanks.
The other part of the question, I am trying to move the link from the one on the top left to one on the blue bar (the link that makes it slide). Every time I move the link any where inside class="inner" it stops working, even if I reference the id correctly. Do you have any idea why?
0
GaryCommented:
You want to move the link
<a href="#"><img src="img/banner01.jpg" width="100" height="100" /></a>

in the slideleft div into the blue div or the inner div?
0
nedloganAuthor Commented:
To the blue div but it never triggers the slide...
0
GaryCommented:
Confused here, so you don't want the link at the top then, you want it in the blue div to start with? And where there is already a div
0
nedloganAuthor Commented:
<div id="slideleft" class="slide">
        <a href="#"><img src="img/banner01.jpg" width="100" height="100" /></a>
        <div class="inner">
            <div class="menu">Slide from left</div>
            <div class="main">next<a href="#"><img src="img/banner01.jpg" width="100" height="100" /></a></div>
        </div>

Open in new window


So instead of the link on line 2 I want to use the one on line 5 to trigger the slide. If I add an ID to the link on line 5 and reference it in the jquery code, it doesn't trigger the slide.
0
GaryCommented:
Change this
$('#slideleft a').click(function () {

to

$('.inner a').click(function () {
0
nedloganAuthor Commented:
Yes tried that, nothing happens. That's what I can't understand.
0
GaryCommented:
        $(document).ready(function () {
            $('.inner a').click(function () { 
                var $lefty = $(".inner");
                $lefty.animate({
                    left: parseInt($lefty.css('left'), 10) == 0 ?-200:0
                });
            });
        });

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
nedloganAuthor Commented:
Great, thanks for your help.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.