SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Help with jQuery feature loader

    Hey all, am updating a site that has a content loader for a div as follows:

    Code:
    $(document).ready(function() {
            $('#featureLoader').load('features/feature1.html');
    });
    
    function loadFeature(featureArea){
            // remove the feature pointer to all existing pointers + hide their features
            for (i=1; i<4; i++){
                if (document.getElementById('feature'+i).className=="featureActive"){
                    document.getElementById('feature'+i).className=null;
                }
                if (document.getElementById('featureArea'+1).style.visibility=="visible"){
                    document.getElementById('featureArea'+1).style.visibility="hidden";
                }
            }
        
            // set the feature pointer to the right area
            document.getElementById('feature'+featureArea).className="featureActive";
            
        
            // set the feature pointer to the right area
            $('#featureLoader').load('features/feature'+featureArea+'.html');
        }
    </script>
    
                    <div id="feature">
                        <div id="featureLoader"></div>
                        <ul id="featureAreas">
                        <li id="feature1" class="featureActive"><a href="#" onclick="loadFeature('1');">News</a></li>
                        <li id="feature2"><a href="#" onclick="loadFeature('2');">Donate</a></li>
                        <li id="feature3"><a href="#" onclick="loadFeature('3');">Get Involved</a></li>
                    </ul>
            </div>
    I would like to use the function on other pages, calling different html to the area. I have tried changing the following:

    Code:
            $('#featureLoader').load('features/feature1.html');
    to

    Code:
            $('#featureLoader').load('features/newfeature1.html');
    and

    Code:
            // set the feature pointer to the right area
            $('#featureLoader').load('features/feature'+featureArea+'.html');
    to

    Code:
            // set the feature pointer to the right area
            $('#featureLoader').load('features/newfeature'+featureArea+'.html');
    ..and I achieve the right file being loaded, but then all other functionality borked.

    I've also tried keeping the "feature" name, but adding a subdirectory for both of the above - and no dice

    Any ideas?
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  2. #2
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    For the record, I'm a spanner. I had the files uploaded to the wrong directory!

    However, using the subdirectory method, I get the second page loaded, but then lose functionality again
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •