jquery with object oriented javascript

Discussion in 'JavaScript' started by freedominator123, Jul 9, 2013.

  1. #1
    i had an open/close tab script that worked:
    http://patrickallard.net63.net/procedureoriented/
    but the code was repetitive and couldnt be expanded for more functionality because i didnt have objects
    now i am treating the tabs as objects, and the code is much neater with them:
    http://patrickallard.net63.net/
    just one problem, it doesnt work! and i have no idea why! could someone please take a look? it is short, well commented and neat and i suppose an experienced person could find the error quickly
    you can find the code at the bottom of each page, and ill post it here for convenience sake
    tyvm!
    
    <script>
    
    //page dimentions
    var tabWidth=300;
    var tabHeight=document.getElementById("experienceshadow").clientHeight;
    var defaultSpeed=400;
    var numRows=2;
    
    //tab constructer
    function tab(divID,row,col)
    {
        // jquery referencer
        this.div=$('div#'+divID);
        
        // store dimentions of divs into variables
        this.height=document.getElementById(divID).clientHeight;
        
        // row and column of tab iterates from 0
        this.row=row;
        this.col=col;
        
        // position of tabs based on row and column number
        this.left=col*parseInt(tabWidth);
        this.top=row*parseInt(tabHeight);
    
        // when page initializes, all windows are open, before the initilization fucntion which closes them all
        // thus we have to set all to open so initilization function sets them to false when closing them
        this.open=true;
        
        // toggle boolian to determine if div is open or closed
        this.toggle=toggle;
        function toggle()
        {
            if(this.open==true)
            {
                this.open=false;
            }
            else
            {
                this.open=true;
            }
        }
    }
    
    // create tabs
    experience=new tab("experience",0,0);
    education=new tab("education",0,1);
    software=new tab("software",0,2);
    codesamples=new tab("codesamples",1,0);
    references=new tab("references",1,1);
    links=new tab("links",1,2);
    
    // jquery functions to open and close tabs
    (function() 
    {
        // close a tab
        $.fn.CloseHopin = function(currentTab,fn) 
        {
            return $(this).animate({
                'height': tabHeight+'px',
            }, defaultSpeed || 400, function() {
                $.isFunction(fn) && fn.call(this);
            }).animate({
                'left': currentTab.left+'px',
                'width': tabWidth+'px',
            }, defaultSpeed || 400, function() {
                $.isFunction(fn) && fn.call(this);
            }).animate({
                'top': currentTab.top+'px',
            }, defaultSpeed || 400, function() {
                $.isFunction(fn) && fn.call(this);
            });
        }
    
        // open a tab
        $.fn.OpenHopin = function(currentTab,fn) 
        {
            return $(this).animate({
                'top': (tabHeight*numRows)+'px',
            }, defaultSpeed || 400, function() {
                $.isFunction(fn) && fn.call(this);
            }).animate({
                'left': '0px',
                'width': '900px',
            }, defaultSpeed || 400, function() {
                $.isFunction(fn) && fn.call(this);
            }).animate({
                'height': currentTab.height+'px',
            }, defaultSpeed || 400, function() {
                $.isFunction(fn) && fn.call(this);
            });
        }
    
        // function to open or close a tab
        $.fn.OpenToggle = function(currentTab,fn) 
        {
        
            // if its open close it
            if(currentTab.open)
            {
                currentTab.toggle();
                $(this).CloseHopin(currentTab,fn);
            }
            
            // if its closed open it
            else
            {
            
                // close other windows if they are open, then open the clicked window
                // error here
                if(experience.open)
                {
                    experience.div.CloseHopin(experience,fn);
                }
                if(education.open)
                {
                    education.div.CloseHopin(education,fn);
                }
                if(software.open)
                {
                    software.div.CloseHopin(software,fn);
                }
                if(codesamples.open)
                {
                    codesamples.div.CloseHopin(codesamples,fn);
                }
                if(references.open)
                {
                    references.div.CloseHopin(references,fn);
                }
                if(links.open)
                {
                    links.div.CloseHopin(links,fn);
                }
                $(this).OpenHopin(currentTab,fn);
            }
        };
    
        // add functions to the tabs
        experience.div.on('click', function() {
            experience.div.OpenToggle(experience,fn);
        });    
        education.div.on('click', function() {
            education.div.OpenToggle(education,fn);
        });    
        software.div.on('click', function() {
            software.div.OpenToggle(software,fn);
        });    
        codesamples.div.on('click', function() {
            codesamples.div.OpenToggle(codesamples,fn);
        });    
        references.div.on('click', function() {
            references.div.OpenToggle(references,fn);
        });    
        links.div.on('click', function() {
            links.div.OpenToggle(links,fn);
        });    
    })();
    
    // when page initializes, close all tabs
    (function() {
            experience.div.OpenToggle(experience,fn);
            education.div.OpenToggle(education,fn);
            software.div.OpenToggle(software,fn);
            codesamples.div.OpenToggle(codesamples,fn);
            references.div.OpenToggle(references,fn);
            links.div.OpenToggle(links,fn);
    })();
    </script>
    
    Code (markup):

     
    freedominator123, Jul 9, 2013 IP
  2. freedominator123

    freedominator123 Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #2
    update!
    i have removed the fn argument and it is half working now
    http://patrickallard.net63.net/
    <script>
    
    //page dimentions
    var tabWidth=300;
    var tabHeight=document.getElementById("experienceshadow").clientHeight;
    var defaultSpeed=400;
    var numRows=2;
    
    //tab constructer
    function tab(divID,row,col)
    {
        // jquery referencer
        this.div=$('div#'+divID);
        
        // store dimentions of divs into variables
        this.height=document.getElementById(divID).clientHeight;
        
        // row and column of tab iterates from 0
        this.row=row;
        this.col=col;
        
        // position of tabs based on row and column number
        this.left=col*parseInt(tabWidth);
        this.top=row*parseInt(tabHeight);
    
        // when page initializes, all windows are open, before the initilization fucntion which closes them all
        // thus we have to set all to open so initilization function sets them to false when closing them
        this.open=true;
        
        // toggle boolian to determine if div is open or closed
        this.toggle=toggle;
        function toggle()
        {
            if(this.open==true)
            {
                this.open=false;
            }
            else
            {
                this.open=true;
            }
        }
    }
    
    // create tabs
    experience=new tab("experience",0,0);
    education=new tab("education",0,1);
    software=new tab("software",0,2);
    codesamples=new tab("codesamples",1,0);
    references=new tab("references",1,1);
    links=new tab("links",1,2);
    
    // jquery functions to open and close tabs
    (function() 
    {
        // close a tab
        $.fn.CloseHopin = function(currentTab) 
        {
            return $(this).animate({
                'height': tabHeight+'px',
            }, defaultSpeed || 400, function() {
                $.isFunction(fn) && fn.call(this);
            }).animate({
                'left': currentTab.left+'px',
                'width': tabWidth+'px',
            }, defaultSpeed || 400, function() {
                $.isFunction(fn) && fn.call(this);
            }).animate({
                'top': currentTab.top+'px',
            }, defaultSpeed || 400, function() {
                $.isFunction(fn) && fn.call(this);
            });
        }
    
        // open a tab
        $.fn.OpenHopin = function(currentTab) 
        {
            return $(this).animate({
                'top': (tabHeight*numRows)+'px',
            }, defaultSpeed || 400, function() {
                $.isFunction(fn) && fn.call(this);
            }).animate({
                'left': '0px',
                'width': '900px',
            }, defaultSpeed || 400, function() {
                $.isFunction(fn) && fn.call(this);
            }).animate({
                'height': currentTab.height+'px',
            }, defaultSpeed || 400, function() {
                $.isFunction(fn) && fn.call(this);
            });
        }
    
        // function to open or close a tab
        $.fn.OpenToggle = function(currentTab) 
        {
        
            // if its open close it
            if(currentTab.open)
            {
                currentTab.toggle();
                $(this).CloseHopin(currentTab);
            }
            
            // if its closed open it
            else
            {
            
                // close other windows if they are open, then open the clicked window
                // error here
                if(experience.open)
                {
                    experience.div.CloseHopin(experience);
                }
                if(education.open)
                {
                    education.div.CloseHopin(education);
                }
                if(software.open)
                {
                    software.div.CloseHopin(software);
                }
                if(codesamples.open)
                {
                    codesamples.div.CloseHopin(codesamples);
                }
                if(references.open)
                {
                    references.div.CloseHopin(references);
                }
                if(links.open)
                {
                    links.div.CloseHopin(links);
                }
                $(this).OpenHopin(currentTab);
            }
        };
    
        // add functions to the tabs
        experience.div.on('click', function() {
            experience.div.OpenToggle(experience);
        });    
        education.div.on('click', function() {
            education.div.OpenToggle(education);
        });    
        software.div.on('click', function() {
            software.div.OpenToggle(software);
        });    
        codesamples.div.on('click', function() {
            codesamples.div.OpenToggle(codesamples);
        });    
        references.div.on('click', function() {
            references.div.OpenToggle(references);
        });    
        links.div.on('click', function() {
            links.div.OpenToggle(links);
        });    
    })();
    
    // when page initializes, close all tabs
    (function() {
            experience.div.OpenToggle(experience);
            education.div.OpenToggle(education);
            software.div.OpenToggle(software);
            codesamples.div.OpenToggle(codesamples);
            references.div.OpenToggle(references);
            links.div.OpenToggle(links);
    })();
    
    
    
    </script>
    
    Code (markup):
     
    freedominator123, Jul 9, 2013 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Really this reeks of 'javascript for nothing' and 'gee ain't it neat' nonsense, that's basically ****ing all over your accessibility given the lack of graceful degradation scripting off.

    You've got nothing resembling semantic markup, nonsensical use of numbered headings, abusing STRONG for no reason inside headings (or are you TRYING to get slapped down by the search engines?), tables for layout, presentational CSS inlined in the markup, endless CSS redundancies, endless pointless DIV and classes for nothing, paragraphs around obvious heading elements, heading around content that is quite obviously NOT a heading to the subsection that follows...

    ... and that's without talking about pissing away your accessibility with the stupid malfing jquery animated BS, that is basically using scripting to replicate everything that was WRONG with framesets.

    My advice, lose that garbage entirely and break that into actual *SHOCK* subpages -- pageloads are NOT evil, particularly if you STOP wasting 36k of HTML on 6k of plaintext -- anywhere from three to four times the code that should be used for such simple content.

    Generally speaking, I think you need to learn more about HTML and building working layouts in CSS before throwing the "gee ain't it neat" scripting nonsense at the page. You've made a laundry list of how not to build a website if you care about visitors actually using it.
     
    deathshadow, Jul 14, 2013 IP
    ryan_uk likes this.