views:

34

answers:

2

I am just delving into using jQuery and I want to start off by using good coding logic. I am developing an upload site where users can select "upload from computer" or "upload from url". I have two links above the content where users can choose to upload from their computer or from a url, and I want the content to change with jQuery (with some effects) when the user makes their choice.

Demo of what I want: http://imgkk.com/

In the content box where it says Upload: Images URL NFO, I want my content to slide like that.

I know how to accomplish this, but I'm not sure if its the correct way. I was going to check which content is visible when the user clicks the link and act accordingly, is this the best way?

Thanks.

EDIT: In response to someones answer:

            $(".upload-options a").click(function(e){
                var id = $(this).attr('href'),
                    $target = $(id);
                    alert($target);
            if(!$target.is(':visible')){
                // Show $target here since it is not currently visible 
                alert('Show: ' + $target);
            }
            });

Markup:

            <p class="upload-options">
                <a href="#normal-upload" class="normal">Normal upload</a>
                <a href="#url-upload" class="url">URL upload</a>
            </p>
            <div id="normal-upload">
                // normal upload stuff
            </div>
            <div id="url-upload">
                // url upload stuff
            </div>

Cheers!

A: 

Checking the visibility is the simplest way to accomplish this.

Ariel
+1  A: 

I normally follow a pattern like this:

<div id="links">
  <a href="#computer">Computer</a>
  <a href="#url">URL</a>
</div>
<div id="panes">
  <div id="computer">

  </div>
  <div id="url">

  </div>
</div>

And then the jQuery:

$(function(){
    $("#links a").click(function(e){
      var id = $(this).attr('href'),
          $target = $(id);

      if(!$target.is(':visible')){
        // Show $target here since it is not currently visible 
      }
      e.preventDefault();
    })
});
Doug Neiner
+1 | Quick, and clean, as always!
Jonathan Sampson
Hey, thanks for the code. It mostly works but if I `alert()` the output I get: `[object Object]`. I checked and $target is coming back as `[object Object]`. Probably something I've done, will post markup in my original post :)
Matt
Yup, its actually working. The alert box can't render a DOM element, so its showing you *what* it is, which is an object. Try this instead: `alert($target[0].id)` and you will get back the correct id. You will need to supply your own animations and showing/hiding code where I have the comment in my code.
Doug Neiner
Ah tricky, thank you. I can handle the effect stuff :)
Matt
@Matt Np. don't forget to mark the answer as accepted if feel it correctly answers your question. Best of luck on your project!
Doug Neiner