CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dav.id
Dav.id

Reputation: 2807

Javascript and jQuery to make divs into a tab based content page

I recently had a 30 min test for a job application using only Javascript with jQuery. Didn't have to be styled well or anything. I created a very basic "30 min" page with Javascript and jQuery which I thought was "ok".. I just wanted to get some feedback if there was a more efficient/better way of doing this? as it turned out, I didn't get the job.. always learning, and also the job was quite a way from where I live.

Anyway, the original HTML page given was as follows, and after that is my humble attempt to turn the basic HTML into a tab based content page - again within 30 mins.

<html>
<head>

<!-- stylesheet, javascript, etc. here -->

</head>
<body>

<h1>My Page</h1>

<h2 class="subheading">The first section</h2>
<div class="content">
    <p>Lorem ipsum...</p>
</div>

<h2 class="subheading">The second section</h2>
<div class="content">
    <img src="/some_image" alt="Image" title="Image"></img>
    <p>Some other text</p>
</div>

<h2 class="subheading">The third section</h2>
<div class="content">
    And some more text here
</div>


<div class="footer">
    This is at the foot of the page
</div>

</body>
</html>

Ok, so my humble attempt is as follows:

<html>
<head>
    <title>Test JS page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <style type="text/css">
        #tabs
        {
            width:457px;
            height:60px;
        }
        #tab1, #tab2, #tab3
        {
            width:150px;
            border:1px solid #ccc;
        }
        #tab1
        {
            float:left;
        }
        #tab3, #tab2
        {
            float:right;
        }
        #tab2_content, #tab3_content
        {
            display:none;
        }
        .clear
        {
            clear:both;
        }
        #content
        {
            height:300px;
        }

    </style>

    <script type="text/javascript">
    $(document).ready(function () {

        $('#tab1_link').click(function (e) {
            e.preventDefault();
            clearContent();
            $('#tab1_content').show();
        });

        $('#tab2_link').click(function (e) {
            e.preventDefault();
            clearContent();
            $('#tab2_content').show();
        });

        $('#tab3_link').click(function (e) {
            e.preventDefault();
            clearContent();
            $('#tab3_content').show();
        });

    });

    function clearContent() {
        $("div[id*='_content']").each(function() {
            $(this).hide();
        });
    }

    </script>

</head>

<body>

<h1>My Page</h1>

<div id="tabs">
    <div id="tab1"><a id="tab1_link" class="subheading">The first section</a></div>
    <div id="tab2"><a id="tab2_link" class="subheading">The second section</a></div>
    <div id="tab3"><a id="tab3_link" class="subheading">The third section</a></div>
</div>

<div class="clear">
</div>

<div id="content">

    <div id="tab1_content" class="content">
        <p>Lorem ipsum...</p>
    </div>

    <div id="tab2_content" class="content">
        <img src="/some_image" alt="Image" title="Image"></img>
        <p>Some other text</p>
    </div>

    <div id="tab3_content" class="content">
    And some more text here
    </div>    

</div>

<div class="footer">

This is at the foot of the page

</div>

</body>
</html>

So as you can see, not pretty for sure.. the stylesheet was inline as is the script, however this was meant to be a test to show if you knew Javascript/jQuery enough to perform the tasks.. I figured it wasn't great, but not too bad either..

I would be grateful for any feedback on other ways to achieve the desired result.. again it doesn't have to be pretty, just functional.. and of course all within 30 mins..

Thanks!

Upvotes: 4

Views: 3210

Answers (3)

Asaf Katz
Asaf Katz

Reputation: 4688

you don't need jQuery UI for this.

demo http://jsbin.com/atogil/2/edit

HTML

<div class="tabs">
    <nav class="tab-btns">
        <a href="#tab1">tab btn 1</a>
        <a href="#tab2">tab btn 2</a>
        <a href="#tab3">tab btn 3</a>
        <a href="#tab4">tab btn 4</a>
    </nav>
    <div class="tab-contents">
        <div id="tab1">tab content 1</div>
        <div id="tab2">tab content 2</div>
        <div id="tab3">tab content 3</div>
        <div id="tab4">tab content 4</div>
    </div>
</div>

JS

$.fn.myTabs = function(settings){
  return this.each(function() {

/*
save cached version of the first elements inside the containers. 
by calling the first elements of each container you are not limitng 
the plugin user to any specific class or elememt.
*/
    var btns = $(settings.nav, this).children(),
        tabs = $(settings.tabs, this).children();


/* 
we relying on the order of the elements as the conection between 
the buttons and the tabs notice that .each() get the index of the btn..
we are useinf it to find the current tab.
*/

        btns.each(function(index){
            var btn = $(this),
                tab = tabs.eq(index);


            btn.click(function (e){
                /* prevent unnesscry work by checking 
                   if the button clicked is already active  */
                if(btn.is('.active')) return false;

                /* notice that first filter to find the last 'active' 
                   button before we remove the 'active' class  otherwise it 
                   remove the class for every button. 
                   unnesscry work prevented again */
                btns.filter('.active').removeClass('active');

                /* hide previus tab.. */
                tabs.filter(':visible').hide();

                btn.addClass('active');
                tab.show();


                return false;
            });
        });

        // emulate click on the first tab button;
        btns.first().click();
  });
};

and call your script like this;

$(function() {

  $('.tabs').myTabs({
    // container of navigation inside '.tabs'
    nav : '.tab-btns',
    // container of contents inside '.tabs'
    tabs : '.tab-contents'
  });

});

Upvotes: 1

Darren
Darren

Reputation: 70796

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">The First Section</a></li>
        <li><a href="#tabs-2">The Second Section</a></li>
        <li><a href="#tabs-3">The Third Section</a></li>
    </ul>
   <div id="tabs-1" class="content">
        <p>Lorem ipsum...</p>
   </div>

   <div id="tabs-2" class="content">
       <img src="/some_image" alt="Image" title="Image"></img>
   </div>

   <div id="tabs-3" class="content">
      <p>Some other text</p>
   </div>
</div>

<script>
   $(function() {
    $("#tabs").tabs();
   });
</script>

http://jqueryui.com/demos/tabs/

Upvotes: 5

Les Mac
Les Mac

Reputation: 23

Without knowing something about the company you were taking the test for its hard to say what they were looking for.

In general employers are not looking for perfect code but how you approach the problem. For example you could say that they were looking to see if you would follow their instructions blindly or stick to convention and good practices of adding external style/script references or just clean, standard compliant, concise code.

I am a complete novice so please don't take anything I say too seriously but I would of attempted to create some reusable concise code which would/could be reused and expanded very quickly and easily while being maintenance friendly (Just because its a text doesn't mean that you can forget about these things).

Just doing this very rough and off the top of my head but something like this:

$('#tab-menu').click(function(e) {
   e.preventDefault();
   clearContent();
   $(this).show();
});

If it was for a company that were involved with mobile devices you would probably want to bind the events so you get the same functionality.

Something that I have always done is provided an assumptions document even just if its in notepad. Its always looked upon positively as it shows you are stopping and thinking about what you have to do instead of going gun ho.

Overall I think you did a good job! You have a great attitude and just learn from experiences like these, improve and get better! Today's juniors will be tomorrows experts! if we work hard enough

Upvotes: 1

Related Questions