CODEWITHSUNDEEP
javascriptjqueryajax
Qchmqs
Qchmqs

Reputation: 1805

navigation with javascript

so i am a begginer and i really need help so i wrote this function down here; the objective was to take as parameters an element name , a div tag selector and a php file address,

function navigation($nav,$container,$link)
{ 


 $($nav).click(function(){
    $($container).slideUp(500,function(e){
    $(this).append("<span>");
    $(this).load($link);
    });
  });
  {
  $($container).ajaxComplete(function(){
  $(this).slideDown(500);
});
  }
  {
    $($container).slideUp(500);
  }
}

the usage is simple

    navigation("#home",".content","home.php");
   navigation("#about",".content","about.php");
    navigation("#store",".content","right.php");

the html is just a few <div> one with class=".content" tag and <a> links called #home #about #store the pages in php are just plain html inside them;

now the problem is when i click the link it works but i can find how to make he active link unclickable after it becomes active and i was about to do a sublist with the same function trying to load a little div under the navigation links that contain links but i cant find how to do any one of pro's have any idea ???

Upvotes: 0

Views: 220

Answers (2)

Endophage
Endophage

Reputation: 21483

I can help but it's going to be quite a rewrite.

Firstly, give all your navigation items a class. Inside the nav items (I don't know if they're div, li elements or whatever, put an <a> tag with the src set to the page you want the navigation to load. When done it might look something like below:

<ul id="navigation">
    <li class="nav">
        <a src="home.php">HOME</a>
    </li>
    <li class="nav">
        <a src="about.php">ABOUT</a>
    </li>
    <li class="nav">
        <a src="right.php">RIGHT</a>
    </li>
</ul>

Then use jQuery's onload functionality to bind the click event onload, rather than calling your navigation function 3 times. You grab the src from the child <a> tag of the li clicked.

$(function()
{
    $('.nav').click(function()
    {
        if($(this).hasClass('active'))
        {
            return false;
        }
        $(this).siblings('li').removeClass('active');
        $(this).addClass('active');

        $('.content').slideUp(500).load($(this).children('a').attr('src'), 
            null,
            function(){$(this).slideDown(500);}
        );
        return false;
    });
});

Note the return false; is important to prevent the default action of the link (i.e. sending the user to the other page).

Upvotes: 1

Semyazas
Semyazas

Reputation: 2101

There's several approaches to making a link unclickable. One would be to let the click-event unbind itself:

$('nav')click(function(){
//Your code goes here
$(this).unbind('click');
});

Another would be to manipulate its CSS to hide the element (set display to none).

As for the second part of your question, i don't really get what you want to do. If you want to have a popout under the link, that activates on hover, you can see here how that could be achieved by using an <ul> and its :hover event

http://jsfiddle.net/D3AP2/

Upvotes: 0

Related Questions