SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot Oznob's Avatar
    Join Date
    Jun 2002
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Calling Function in href help ....

    I have the following JS in my site:

    Code:
    $(document).ready(function() {
                               
        var hash = window.location.hash.substr(1);
        var href = $('#nav li a').each(function(){
            var href = $(this).attr('href');
            if(hash==href.substr(0,href.length-5)){
                var toLoad = hash+'.html #content';
                $('#content').load(toLoad)
            }                                            
        });
    
        $('#nav li a').click(function(){
                                      
            var toLoad = $(this).attr('href')+' #content';
            $('#content').hide('fast',loadContent);
            $('#load').remove();
            $('#wrapper').append('<span id="load">LOADING...</span>');
            $('#load').fadeIn('normal');
            window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
            function loadContent() {
                $('#content').load(toLoad,'',showNewContent())
            }
            function showNewContent() {
                $('#content').show('normal',hideLoader());
            }
            function hideLoader() {
                $('#load').fadeOut('normal');
            }
            return false;
            
        });
    
    });

    I have the following html on my site:

    Code:
    <div id="content001">
    <div id="wrapper">
        <ul id="nav">
            <li><a href="index.html">welcome</a></li>
            <li><a href="about.html">about</a></li>
            <li><a href="portfolio.html">portfolio</a></li>
            <li><a href="contact.html">contact</a></li>
            <li><a href="terms.html">terms</a></li>
        </ul>
        <div id="content">        
            <h2>Welcome!</h2>
            <p>Nulla facilisi. Nam massa dolor, gravida nec, luctus vitae, tristique vel, arcu. Suspendisse rutrum. Integer ligula velit, malesuada sed, rhoncus sed, feugiat eget, mi. Nulla pharetra convallis mi. Cras euismod consectetuer mi. Integer molestie tincidunt ante. Vestibulum lacinia orci a est. Quisque aliquam dolor non urna. Praesent felis. Nulla elementum. Curabitur mi augue, mollis at, volutpat ut, fermentum in, neque. Donec eget arcu. Donec id velit nec arcu facilisis aliquet. Nulla vel nibh ac lacus tristique interdum. Cras sed dui in nibh hendrerit dignissim. Aenean at est ac purus consectetuer mollis.</p>
        </div>
        <div id="foot">Social Links Here Maybe .. Or Whatever</div>
    </div>
    
    </div>
    This sets up a nice little slider menu but what I need is a href link to make the tabs slide just like the links you see above for about.html .. etc...

    I think it should be something along the lines of :

    Code:
    <a href="javascript:loadContent('#nav','about.html')">about tab</a>
    But nope .. Please Help if you know ....

  2. #2
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Oznob View Post
    I need is a href link to make the tabs slide just like the links you see above for about.html .. etc...
    Running javascript from a href is not generally considered to be best practice nowadays. A href is meant for navigationg to another location, not for running javascript.

    A more acceptable way to do it nowadays is to use an onclick with return false; at the end to suppress the default onclick action for the <a> which is to navigate to the href.
    Code:
    <a href="" onclick="myFunction(); return false;">My Link</a>

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Max Height View Post
    A more acceptable way to do it nowadays is to use an onclick with return false;
    An even more acceptable way these days is to keep the concerns of the behaviour and the content separate, for easier management.

    HTML Code:
    <a id="abouttab">about tab</a>
    Code javascript:
    document.getElementById('abouttab').onclick = function () {
        loadContent('#nav','about.html');
    }

    Or perhaps even a bit more fancier, so that you can then use it multiple times with different content:

    Code javascript:
    function tabClickHandler(linkId, sourceUrl, targetSelector) {
        document.getElementById(linkId).onclick = function () {
            loadContent(targetSelector , sourceUrl);
        };
    }
    tabClickHandler('abouttab', 'about.html', '#nav');
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •